@noctuatech/uswds 0.0.1

package/src/lib/tag/tag.element.ts

@@ -0,0 +1,46 @@
+import { attr, css, element, html } from "@joist/element";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-tag": USATagElement;
+  }
+}
+
+export const TAG_VARIANTS = ["default", "big"] as const;
+
+export type TagVariant = (typeof TAG_VARIANTS)[number];
+
+@element({
+  tagName: "usa-tag",
+  shadowDom: [
+    css`
+      :host {
+        font-family:
+          Source Sans Pro Web,
+          Helvetica Neue,
+          Helvetica,
+          Roboto,
+          Arial,
+          sans-serif;
+        font-size: 0.93rem;
+        color: #fff;
+        text-transform: uppercase;
+        background-color: #5c5c5c;
+        border-radius: 2px;
+        margin-right: 0.25rem;
+        padding: 1px 0.5rem;
+      }
+
+      :host([variant="big"]) {
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+        font-size: 1.06rem;
+      }
+    `,
+    html`<slot></slot>`,
+  ],
+})
+export class USATagElement extends HTMLElement {
+  @attr()
+  accessor variant: TagVariant = "default";
+}

package/src/lib/tag/tag.stories.ts

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+import { TAG_VARIANTS, type USATagElement } from "./tag.element.js";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: "usa-tag",
+  tags: ["autodocs"],
+  render(args) {
+    return html`<usa-tag variant=${args.variant}>Hello World</usa-tag>`;
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: TAG_VARIANTS,
+    },
+  },
+  args: {
+    variant: "default",
+  },
+} satisfies Meta<USATagElement>;
+
+export default meta;
+
+type Story = StoryObj<USATagElement>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {},
+};

package/src/lib/tag/tag.test.ts

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

package/src/lib.ts

@@ -0,0 +1,13 @@
+export { USAAlertElement } from "./lib/alert/alert.element.js";
+export { USAButtonElement } from "./lib/button/button.element.js";
+export { USACheckboxElement } from "./lib/checkbox/checkbox.element.js";
+export { USADescriptionElement } from "./lib/description/description.element.js";
+export { USAIconElement } from "./lib/icon/icon.element.js";
+export { USATextInputElement } from "./lib/input/input.element.js";
+export { USAInputMaskElement } from "./lib/input-mask/input-mask.element.js";
+export { USALinkElement } from "./lib/link/link.element.js";
+export { USARadioElement } from "./lib/radio/radio.element.js";
+export { USARadioOptionElement } from "./lib/radio/radio-option.element.js";
+export { USASelectElement } from "./lib/select/select.element.js";
+export { USASelecOptionElement } from "./lib/select/select-option.element.js";
+export { USATagElement } from "./lib/tag/tag.element.js";

package/target/lib/alert/alert-types.d.ts

@@ -0,0 +1,7 @@
+import { USAIcon } from "../icon/icon-types.js";
+export declare const USA_ALERT_TYPES: readonly ["info", "warning", "success", "error", "emergency"];
+export type USAAlertType = (typeof USA_ALERT_TYPES)[number];
+export interface USAAlert {
+    icon: USAIcon;
+}
+export declare const USA_ALERT_CONFIG: Record<USAAlertType, USAAlert>;

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

@@ -0,0 +1,25 @@
+export const USA_ALERT_TYPES = [
+    "info",
+    "warning",
+    "success",
+    "error",
+    "emergency",
+];
+export const USA_ALERT_CONFIG = {
+    info: {
+        icon: "info",
+    },
+    warning: {
+        icon: "warning",
+    },
+    success: {
+        icon: "check_circle",
+    },
+    error: {
+        icon: "error",
+    },
+    emergency: {
+        icon: "error",
+    },
+};
+//# sourceMappingURL=alert-types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert-types.js","sourceRoot":"","sources":["../../../src/lib/alert/alert-types.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,MAAM;IACN,SAAS;IACT,SAAS;IACT,OAAO;IACP,WAAW;CACH,CAAC;AAQX,MAAM,CAAC,MAAM,gBAAgB,GAAmC;IAC9D,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM;KACb;IACD,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;KAChB;IACD,OAAO,EAAE;QACP,IAAI,EAAE,cAAc;KACrB;IACD,KAAK,EAAE;QACL,IAAI,EAAE,OAAO;KACd;IACD,SAAS,EAAE;QACT,IAAI,EAAE,OAAO;KACd;CACF,CAAC"}

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

@@ -0,0 +1,11 @@
+import { USAAlertType } from "./alert-types.js";
+declare global {
+    interface HTMLElementTagNameMap {
+        "usa-alert": USAAlertElement;
+    }
+}
+export declare class USAAlertElement extends HTMLElement {
+    #private;
+    accessor type: USAAlertType;
+    attributeChangedCallback(): void;
+}

package/target/lib/alert/alert.element.js

@@ -0,0 +1,124 @@
+import { __classPrivateFieldGet, __classPrivateFieldSet, __esDecorate, __runInitializers, __setFunctionName } from "tslib";
+import { attr, css, element, html, query } from "@joist/element";
+import { USA_ALERT_CONFIG } from "./alert-types.js";
+let USAAlertElement = (() => {
+    var _USAAlertElement_icon, _USAAlertElement_type_accessor_storage;
+    let _classDecorators = [element({
+            tagName: "usa-alert",
+            shadowDom: [
+                css `
+      :host {
+        display: block;
+        border-left: 0.5rem solid #adadad;
+        padding: 1rem 1.2rem;
+        color: #1b1b1b;
+        margin-bottom: 1rem;
+      }
+
+      :host([type="info"]) {
+        border-left-color: #00bde3;
+        background-color: #e7f6f8;
+      }
+
+      :host([type="warning"]) {
+        background-color: #faf3d1;
+        border-left-color: #ffbe2e;
+      }
+
+      :host([type="success"]) {
+        background-color: #ecf3ec;
+        border-left-color: #00a91c;
+      }
+
+      :host([type="error"]) {
+        background-color: #f4e3db;
+        border-left-color: #d54309;
+      }
+
+      :host([type="emergency"]) {
+        background-color: #9c3d10;
+        border-left-color: #9c3d10;
+        color: #fff;
+      }
+
+      :host([type="emergency"]) ::slotted(*) {
+        color: #fff;
+      }
+
+      .alert-heading {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        align-items: center;
+      }
+
+      usa-icon {
+        margin: -0.28rem 0.75rem 0 0;
+      }
+
+      #heading::slotted(*) {
+        font-family:
+          Source Sans Pro Web,
+          Helvetica Neue,
+          Helvetica,
+          Roboto,
+          Arial,
+          sans-serif;
+        font-size: 1.33rem;
+        line-height: 0.9;
+        margin-top: 0;
+        margin-bottom: 0.5rem;
+      }
+    `,
+                html `
+      <div class="alert-heading">
+        <usa-icon icon="check_circle"></usa-icon>
+
+        <div>
+          <slot id="heading" name="heading"></slot>
+        </div>
+
+        <div class="spacer"></div>
+
+        <div>
+          <slot></slot>
+        </div>
+      </div>
+    `,
+            ],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _type_decorators;
+    let _type_initializers = [];
+    let _type_extraInitializers = [];
+    var USAAlertElement = _classThis = class extends _classSuper {
+        constructor() {
+            super(...arguments);
+            _USAAlertElement_type_accessor_storage.set(this, __runInitializers(this, _type_initializers, "info"));
+            _USAAlertElement_icon.set(this, (__runInitializers(this, _type_extraInitializers), query("usa-icon")));
+        }
+        get type() { return __classPrivateFieldGet(this, _USAAlertElement_type_accessor_storage, "f"); }
+        set type(value) { __classPrivateFieldSet(this, _USAAlertElement_type_accessor_storage, value, "f"); }
+        attributeChangedCallback() {
+            const icon = __classPrivateFieldGet(this, _USAAlertElement_icon, "f").call(this);
+            icon.icon = USA_ALERT_CONFIG[this.type].icon;
+        }
+    };
+    _USAAlertElement_icon = new WeakMap();
+    _USAAlertElement_type_accessor_storage = new WeakMap();
+    __setFunctionName(_classThis, "USAAlertElement");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+        _type_decorators = [attr()];
+        __esDecorate(_classThis, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
+        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+        USAAlertElement = _classThis = _classDescriptor.value;
+        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return USAAlertElement = _classThis;
+})();
+export { USAAlertElement };
+//# sourceMappingURL=alert.element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.element.js","sourceRoot":"","sources":["../../../src/lib/alert/alert.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEjE,OAAO,EAAE,gBAAgB,EAAgB,MAAM,kBAAkB,CAAC;IA2FrD,eAAe;;4BAnF3B,OAAO,CAAC;YACP,OAAO,EAAE,WAAW;YACpB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8DF;gBACD,IAAI,CAAA;;;;;;;;;;;;;;KAcH;aACF;SACF,CAAC;;;;sBACmC,WAAW;;;;4CAAnB,SAAQ,WAAW;;;YAErC,6FAAqB,MAAM,GAAC;YAErC,mFAAQ,KAAK,CAAC,UAAU,CAAC,GAAC;QAO5B,CAAC;QATC,IAAS,IAAI,wFAAwB;QAArC,IAAS,IAAI,6FAAwB;QAIrC,wBAAwB;YACtB,MAAM,IAAI,GAAG,uBAAA,IAAI,6BAAM,MAAV,IAAI,CAAQ,CAAC;YAE1B,IAAI,CAAC,IAAI,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;QAC/C,CAAC;;;;;;;4BATA,IAAI,EAAE;QACP,uKAAS,IAAI,6BAAJ,IAAI,mFAAwB;QAFvC,6KAWC;;;QAXY,uDAAe;;;;SAAf,eAAe"}

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

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

package/target/lib/alert/alert.stories.js

@@ -0,0 +1,56 @@
+import { html } from "lit";
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+    title: "usa-alert",
+    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-alert type="info">
+        <h3 slot="heading">Informative status</h3>
+
+        Lorem ipsum dolor sit amet,&nbsp;
+        <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
+        eiusmod.
+      </usa-alert>
+
+      <usa-alert type="warning">
+        <h3 slot="heading">Warning status</h3>
+
+        Lorem ipsum dolor sit amet,&nbsp;
+        <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
+        eiusmod.
+      </usa-alert>
+
+      <usa-alert type="success">
+        <h3 slot="heading">Success status</h3>
+
+        Lorem ipsum dolor sit amet,&nbsp;
+        <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
+        eiusmod.
+      </usa-alert>
+
+      <usa-alert type="error">
+        <h3 slot="heading">Error status</h3>
+
+        Lorem ipsum dolor sit amet,&nbsp;
+        <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
+        eiusmod.
+      </usa-alert>
+
+      <usa-alert type="emergency">
+        <h3 slot="heading">Emergency status</h3>
+
+        Lorem ipsum dolor sit amet,&nbsp;
+        <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
+        eiusmod.
+      </usa-alert>
+    `;
+    },
+};
+//# sourceMappingURL=alert.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.stories.js","sourceRoot":"","sources":["../../../src/lib/alert/alert.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,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACuB,CAAC;AAElC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwCV,CAAC;IACJ,CAAC;CACF,CAAC"}

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

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

package/target/lib/alert/alert.test.js

@@ -0,0 +1,20 @@
+import "./alert.element.js";
+import { fixture, html, assert } from "@open-wc/testing";
+import { USA_ALERT_TYPES } from "./alert-types.js";
+describe("usa-alert", () => {
+    for (let alert of USA_ALERT_TYPES) {
+        it(`should be accessible: ${alert}`, async () => {
+            const form = await fixture(html `
+        <usa-alert type=${alert}>
+          <h3 slot="heading">Status</h3>
+
+          Lorem ipsum dolor sit amet,&nbsp;
+          <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
+          eiusmod.
+        </usa-alert>
+      `);
+            return assert.isAccessible(form);
+        });
+    }
+});
+//# sourceMappingURL=alert.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.test.js","sourceRoot":"","sources":["../../../src/lib/alert/alert.test.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,KAAK,IAAI,KAAK,IAAI,eAAe,EAAE,CAAC;QAClC,EAAE,CAAC,yBAAyB,KAAK,EAAE,EAAE,KAAK,IAAI,EAAE;YAC9C,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA;0BACX,KAAK;;;;;;;OAOxB,CAAC,CAAC;YAEH,OAAO,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACnC,CAAC,CAAC,CAAC;IACL,CAAC;AACH,CAAC,CAAC,CAAC"}

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

@@ -0,0 +1,17 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        "usa-button": USAButtonElement;
+    }
+}
+export declare const BUTTON_VARIANTS: readonly ["primary", "secondary", "cool", "warm", "outline"];
+export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
+export declare class USAButtonElement extends HTMLElement {
+    #private;
+    static formAssociated: boolean;
+    accessor type: "button" | "submit" | "reset";
+    accessor disabled: boolean;
+    accessor variant: ButtonVariant;
+    onKeyDown(e: KeyboardEvent): void;
+    onInternalClick(): void;
+    attributeChangedCallback(): void;
+}

package/target/lib/button/button.element.js

@@ -0,0 +1,259 @@
+import { __classPrivateFieldGet, __classPrivateFieldSet, __esDecorate, __runInitializers, __setFunctionName } from "tslib";
+import { attr, css, element, html, listen, query } from "@joist/element";
+export const BUTTON_VARIANTS = [
+    "primary",
+    "secondary",
+    "cool",
+    "warm",
+    "outline",
+];
+let USAButtonElement = (() => {
+    var _USAButtonElement_instances, _USAButtonElement_internals, _USAButtonElement_button, _USAButtonElement_handleForm, _USAButtonElement_type_accessor_storage, _USAButtonElement_disabled_accessor_storage, _USAButtonElement_variant_accessor_storage;
+    let _classDecorators = [element({
+            tagName: "usa-button",
+            shadowDom: [
+                css `
+      :host {
+        display: contents;
+      }
+
+      .usa-button {
+        box-sizing: border-box;
+        font-family:
+          Source Sans Pro Web,
+          Helvetica Neue,
+          Helvetica,
+          Roboto,
+          Arial,
+          sans-serif;
+        font-size: 1.06rem;
+        line-height: 0.9;
+        color: white;
+        background-color: #005ea2;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        align-items: center;
+        border: 0;
+        border-radius: 0.25rem;
+        cursor: pointer;
+        -moz-column-gap: 0.5rem;
+        column-gap: 0.5rem;
+        display: inline-flex;
+        font-weight: 700;
+        justify-content: center;
+        padding: 0.75rem 1.25rem;
+        text-align: center;
+        text-decoration: none;
+        width: 100%;
+        cursor: pointer;
+      }
+
+      @media all and (min-width: 30em) {
+        .usa-button {
+          width: auto;
+        }
+      }
+
+      .usa-button:visited {
+        color: white;
+      }
+
+      .usa-button:hover {
+        color: white;
+        background-color: #1a4480;
+        border-bottom: 0;
+        text-decoration: none;
+      }
+
+      .usa-button:active {
+        color: white;
+        background-color: #162e51;
+      }
+
+      .usa-button:not([disabled]):focus {
+        outline-offset: 0.25rem;
+      }
+
+      .usa-button:disabled {
+        color: #454545;
+        background-color: #c9c9c9;
+        cursor: not-allowed;
+        opacity: 1;
+      }
+
+      .usa-button:disabled:hover,
+      .usa-button:disabled:active,
+      .usa-button:disabled:focus {
+        color: #454545;
+        background-color: #c9c9c9;
+      }
+
+      .usa-button:focus {
+        outline: 0.25rem solid #2491ff;
+        outline-offset: 0;
+      }
+
+      /** Secondary */
+      :host([variant="secondary"]) .usa-button {
+        color: #fff;
+        background-color: #d83933;
+      }
+
+      :host([variant="secondary"]) .usa-button:hover {
+        background-color: #b50909;
+      }
+
+      :host([variant="secondary"]) .usa-button:active {
+        background-color: #8b0a03;
+      }
+
+      /** cool */
+      :host([variant="cool"]) .usa-button {
+        color: #1b1b1b;
+        background-color: #00bde3;
+      }
+
+      :host([variant="cool"]) .usa-button:hover {
+        background-color: #28a0cb;
+      }
+
+      :host([variant="cool"]) .usa-button:active {
+        color: #fff;
+        background-color: #07648d;
+      }
+
+      /** warm */
+      :host([variant="warm"]) .usa-button {
+        color: #1b1b1b;
+        background-color: #fa9441;
+      }
+
+      :host([variant="warm"]) .usa-button:hover {
+        color: #fff;
+        background-color: #c05600;
+      }
+
+      :host([variant="warm"]) .usa-button:active {
+        color: #fff;
+        background-color: #775540;
+      }
+
+      /** outline */
+      :host([variant="outline"]) .usa-button {
+        background-color: transparent;
+        box-shadow: inset 0 0 0 2px #005ea2;
+        color: #005ea2;
+      }
+
+      :host([variant="outline"]) .usa-button:hover {
+        box-shadow: inset 0 0 0 2px #1a4480;
+        color: #1a4480;
+      }
+
+      :host([variant="outline"]) .usa-button:active {
+        box-shadow: inset 0 0 0 2px #162e51;
+        color: #162e51;
+      }
+    `,
+                html `
+      <button class="usa-button">
+        <slot></slot>
+      </button>
+    `,
+            ],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _type_decorators;
+    let _type_initializers = [];
+    let _type_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    let _variant_decorators;
+    let _variant_initializers = [];
+    let _variant_extraInitializers = [];
+    let _onKeyDown_decorators;
+    let _onInternalClick_decorators;
+    var USAButtonElement = _classThis = class extends _classSuper {
+        constructor() {
+            super(...arguments);
+            _USAButtonElement_instances.add(this);
+            _USAButtonElement_type_accessor_storage.set(this, (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _type_initializers, "button")));
+            _USAButtonElement_disabled_accessor_storage.set(this, (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _disabled_initializers, false)));
+            _USAButtonElement_variant_accessor_storage.set(this, (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _variant_initializers, "primary")));
+            _USAButtonElement_internals.set(this, (__runInitializers(this, _variant_extraInitializers), this.attachInternals()));
+            _USAButtonElement_button.set(this, query("button"));
+        }
+        get type() { return __classPrivateFieldGet(this, _USAButtonElement_type_accessor_storage, "f"); }
+        set type(value) { __classPrivateFieldSet(this, _USAButtonElement_type_accessor_storage, value, "f"); }
+        get disabled() { return __classPrivateFieldGet(this, _USAButtonElement_disabled_accessor_storage, "f"); }
+        set disabled(value) { __classPrivateFieldSet(this, _USAButtonElement_disabled_accessor_storage, value, "f"); }
+        get variant() { return __classPrivateFieldGet(this, _USAButtonElement_variant_accessor_storage, "f"); }
+        set variant(value) { __classPrivateFieldSet(this, _USAButtonElement_variant_accessor_storage, value, "f"); }
+        onKeyDown(e) {
+            if (this.type === "submit") {
+                if (e.key.toUpperCase() === "ENTER") {
+                    __classPrivateFieldGet(this, _USAButtonElement_instances, "m", _USAButtonElement_handleForm).call(this);
+                }
+            }
+        }
+        onInternalClick() {
+            __classPrivateFieldGet(this, _USAButtonElement_instances, "m", _USAButtonElement_handleForm).call(this);
+        }
+        attributeChangedCallback() {
+            const button = __classPrivateFieldGet(this, _USAButtonElement_button, "f").call(this);
+            button.type = this.type;
+            button.disabled = this.disabled;
+        }
+    };
+    _USAButtonElement_internals = new WeakMap();
+    _USAButtonElement_button = new WeakMap();
+    _USAButtonElement_instances = new WeakSet();
+    _USAButtonElement_type_accessor_storage = new WeakMap();
+    _USAButtonElement_disabled_accessor_storage = new WeakMap();
+    _USAButtonElement_variant_accessor_storage = new WeakMap();
+    _USAButtonElement_handleForm = function _USAButtonElement_handleForm() {
+        const { form } = __classPrivateFieldGet(this, _USAButtonElement_internals, "f");
+        if (form) {
+            if (this.type === "submit") {
+                const btn = document.createElement("button");
+                btn.type = "submit";
+                form.append(btn);
+                btn.click();
+                btn.remove();
+            }
+            else if (this.type === "reset") {
+                form.reset();
+            }
+        }
+    };
+    __setFunctionName(_classThis, "USAButtonElement");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+        _type_decorators = [attr()];
+        _disabled_decorators = [attr()];
+        _variant_decorators = [attr()];
+        _onKeyDown_decorators = [listen("keydown", () => document.body)];
+        _onInternalClick_decorators = [listen("click")];
+        __esDecorate(_classThis, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_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(_classThis, 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(_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(_classThis, null, _onInternalClick_decorators, { kind: "method", name: "onInternalClick", static: false, private: false, access: { has: obj => "onInternalClick" in obj, get: obj => obj.onInternalClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+        USAButtonElement = _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 USAButtonElement = _classThis;
+})();
+export { USAButtonElement };
+//# sourceMappingURL=button.element.js.map

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

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