@noctuatech/uswds 0.0.28 → 0.0.30

package/target/lib/accordion/accordion.element.js

@@ -0,0 +1,166 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { attr, css, element, html, listen, query } from "@joist/element";
+let USAAccordionElement = (() => {
+    let _classDecorators = [element({
+            tagName: "usa-accordion",
+            shadowDomOpts: {
+                mode: "open",
+                delegatesFocus: true,
+            },
+            shadowDom: [
+                css `
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        display: block;
+      }
+
+      :host(:not(:first-child)) summary {
+        margin-top: 0.5rem;
+      }
+
+      summary {
+        align-items: center;
+        border: 0;
+        border-radius: 0;
+        box-shadow: none;
+        justify-content: normal;
+        text-align: left;
+        padding: 0;
+        color: #1b1b1b;
+        background-color: #f0f0f0;
+        cursor: pointer;
+        display: flex;
+        font-weight: 700;
+        margin: 0;
+        padding: 1rem 1.25rem 1rem 1.25rem;
+        text-decoration: none;
+        width: 100%;
+      }
+
+      summary::-webkit-details-marker {
+        display: none;
+      }
+
+      slot[name="heading"] {
+        display: block;
+        flex: 1 1 auto;
+      }
+
+      slot[name="heading"]::slotted(*) {
+        margin: 0;
+      }
+
+      .content {
+        padding-bottom: 1.5rem;
+        padding-left: 1rem;
+        padding-top: 1.5rem;
+      }
+
+      usa-icon[icon="remove"] {
+        display: none;
+      }
+
+      details[open] usa-icon[icon="add"] {
+        display: none;
+      }
+
+      details[open] usa-icon[icon="remove"] {
+        display: block;
+      }
+
+      summary:hover {
+        background-color: #e6e6e6;
+      }
+
+      summary:focus {
+        outline: 0.25rem solid #2491ff;
+        outline-offset: 0;
+      }
+    `,
+                html `
+      <details>
+        <summary>
+          <slot name="heading"></slot>
+
+          <usa-icon icon="add"></usa-icon>
+          <usa-icon icon="remove"></usa-icon>
+        </summary>
+
+        <div class="content">
+          <slot></slot>
+        </div>
+      </details>
+    `,
+            ],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _name_decorators;
+    let _name_initializers = [];
+    let _name_extraInitializers = [];
+    let _open_decorators;
+    let _open_initializers = [];
+    let _open_extraInitializers = [];
+    let _onClick_decorators;
+    let _onAccordionToggle_decorators;
+    var USAAccordionElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _name_decorators = [attr()];
+            _open_decorators = [attr()];
+            _onClick_decorators = [listen("click", "summary")];
+            _onAccordionToggle_decorators = [listen("usa::accordion::toggle", () => document.body)];
+            __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, _open_decorators, { kind: "accessor", name: "open", static: false, private: false, access: { has: obj => "open" in obj, get: obj => obj.open, set: (obj, value) => { obj.open = value; } }, metadata: _metadata }, _open_initializers, _open_extraInitializers);
+            __esDecorate(this, null, _onClick_decorators, { kind: "method", name: "onClick", static: false, private: false, access: { has: obj => "onClick" in obj, get: obj => obj.onClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onAccordionToggle_decorators, { kind: "method", name: "onAccordionToggle", static: false, private: false, access: { has: obj => "onAccordionToggle" in obj, get: obj => obj.onAccordionToggle }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            USAAccordionElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        #name_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _name_initializers, ""));
+        get name() { return this.#name_accessor_storage; }
+        set name(value) { this.#name_accessor_storage = value; }
+        #open_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _open_initializers, false));
+        get open() { return this.#open_accessor_storage; }
+        set open(value) { this.#open_accessor_storage = value; }
+        #details = (__runInitializers(this, _open_extraInitializers), query("details"));
+        attributeChangedCallback() {
+            const details = this.#details();
+            details.open = this.open;
+        }
+        onClick(e) {
+            e.preventDefault();
+            this.dispatchEvent(new USAAccordionToggleEvent(!this.open));
+        }
+        onAccordionToggle(e) {
+            if (e.target.name === this.name) {
+                this.open = e.target === this && e.open;
+            }
+            else if (e.target === this) {
+                this.open = e.open;
+            }
+        }
+    };
+    return USAAccordionElement = _classThis;
+})();
+export { USAAccordionElement };
+class USAAccordionToggleEvent extends Event {
+    open;
+    get target() {
+        return super.target;
+    }
+    constructor(open) {
+        super("usa::accordion::toggle", { bubbles: true });
+        this.open = open;
+    }
+}
+//# sourceMappingURL=accordion.element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.element.js","sourceRoot":"","sources":["../../../src/lib/accordion/accordion.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;IAuG5D,mBAAmB;4BA/F/B,OAAO,CAAC;YACP,OAAO,EAAE,eAAe;YACxB,aAAa,EAAE;gBACb,IAAI,EAAE,MAAM;gBACZ,cAAc,EAAE,IAAI;aACrB;YACD,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuEF;gBACD,IAAI,CAAA;;;;;;;;;;;;;KAaH;aACF;SACF,CAAC;;;;sBACuC,WAAW;;;;;;;;;;mCAAnB,SAAQ,WAAW;;;;gCACjD,IAAI,EAAE;gCAGN,IAAI,EAAE;mCAUN,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC;6CAO1B,MAAM,CAAC,wBAAwB,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;YAnBtD,iKAAS,IAAI,6BAAJ,IAAI,mFAAM;YAGnB,iKAAS,IAAI,6BAAJ,IAAI,mFAAS;YAUtB,wKAAA,OAAO,6DAIN;YAGD,sMAAA,iBAAiB,6DAMhB;YA5BH,6KA6BC;;;YA7BY,uDAAmB;;QAE9B,0BAFW,mDAAmB,8CAEd,EAAE,GAAC;QAAnB,IAAS,IAAI,0CAAM;QAAnB,IAAS,IAAI,gDAAM;QAGnB,wHAAgB,KAAK,GAAC;QAAtB,IAAS,IAAI,0CAAS;QAAtB,IAAS,IAAI,gDAAS;QAEtB,QAAQ,sDAAG,KAAK,CAAC,SAAS,CAAC,EAAC;QAE5B,wBAAwB;YACtB,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChC,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAC3B,CAAC;QAGD,OAAO,CAAC,CAAQ;YACd,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,IAAI,CAAC,aAAa,CAAC,IAAI,uBAAuB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC9D,CAAC;QAGD,iBAAiB,CAAC,CAA0B;YAC1C,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;gBAChC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,MAAM,KAAK,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC;YAC1C,CAAC;iBAAM,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,EAAE,CAAC;gBAC7B,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC;YACrB,CAAC;QACH,CAAC;;;;SA5BU,mBAAmB;AA+BhC,MAAM,uBAAwB,SAAQ,KAAK;IACzC,IAAI,CAAC;IAEL,IAAI,MAAM;QACR,OAAO,KAAK,CAAC,MAA6B,CAAC;IAC7C,CAAC;IAED,YAAY,IAAa;QACvB,KAAK,CAAC,wBAAwB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAEnD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;CACF"}

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

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

package/target/lib/accordion/accordion.stories.js

@@ -0,0 +1,42 @@
+import { html } from "lit";
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+    title: "usa-accordion",
+    tags: ["autodocs"],
+    render(args) {
+        return html `
+      <usa-accordion id="first" name="ammendment">
+        <h4 slot="heading">First Ammendment</h4>
+
+        Congress shall make no law respecting an establishment of religion, or
+        prohibiting the free exercise thereof; or abridging the freedom of
+        speech, or of the press; or the right of the people peaceably to
+        assemble, and to petition the Government for a redress of grievances.
+      </usa-accordion>
+
+      <usa-accordion id="second" name="ammendment">
+        <h4 slot="heading">Second Ammendment</h4>
+
+        A well regulated Militia, being necessary to the security of a free
+        State, the right of the people to keep and bear Arms, shall not be
+        infringed.
+      </usa-accordion>
+
+      <usa-accordion id="third" name="ammendment">
+        <h4 slot="heading">Third Ammendment</h4>
+
+        No Soldier shall, in time of peace be quartered in any house, without
+        the consent of the Owner, nor in time of war, but in a manner to be
+        prescribed by law.
+      </usa-accordion>
+    `;
+    },
+    argTypes: {},
+    args: {},
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {
+    args: {},
+};
+//# sourceMappingURL=accordion.stories.js.map

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

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

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

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

package/target/lib/accordion/accordion.test.js

@@ -0,0 +1,113 @@
+import "./accordion.element.js";
+import { assert, fixture, html } from "@open-wc/testing";
+describe("usa-accordion", () => {
+    it("should be accessible", async () => {
+        const accordion = await fixture(html `
+      <usa-accordion id="first" name="ammendment">
+        <h4 slot="heading">First Ammendment</h4>
+
+        <div class="content">
+          Congress shall make no law respecting an establishment of religion, or
+          prohibiting the free exercise thereof; or abridging the freedom of
+          speech, or of the press; or the right of the people peaceably to
+          assemble, and to petition the Government for a redress of grievances.
+        </div>
+      </usa-accordion>
+    `);
+        return assert.isAccessible(accordion);
+    });
+    it("should toggle the open state when clicked", async () => {
+        const accordion = await fixture(html `
+      <usa-accordion id="first" name="ammendment">
+        <h4 slot="heading">First Ammendment</h4>
+
+        <div class="content">
+          Congress shall make no law respecting an establishment of religion, or
+          prohibiting the free exercise thereof; or abridging the freedom of
+          speech, or of the press; or the right of the people peaceably to
+          assemble, and to petition the Government for a redress of grievances.
+        </div>
+      </usa-accordion>
+    `);
+        const heading = accordion.querySelector("h4");
+        const content = accordion.querySelector(".content");
+        heading?.click();
+        assert.isTrue(content?.checkVisibility());
+    });
+    it("should toggle the open state when clicked", async () => {
+        const accordion = await fixture(html `
+      <usa-accordion id="first" name="ammendment">
+        <h4 slot="heading">First Ammendment</h4>
+
+        <div class="content">
+          Congress shall make no law respecting an establishment of religion, or
+          prohibiting the free exercise thereof; or abridging the freedom of
+          speech, or of the press; or the right of the people peaceably to
+          assemble, and to petition the Government for a redress of grievances.
+        </div>
+      </usa-accordion>
+    `);
+        const heading = accordion.querySelector("h4");
+        const content = accordion.querySelector(".content");
+        assert.isFalse(content?.checkVisibility());
+        heading?.click();
+        assert.isTrue(content.checkVisibility());
+    });
+    it("should only allow a single accordion in a group to be open", async () => {
+        const el = await fixture(html `
+      <section>
+        <usa-accordion name="ammendment">
+          <h4 slot="heading">First Ammendment</h4>
+          <div class="content">Content for First</div>
+        </usa-accordion>
+
+        <usa-accordion name="ammendment">
+          <h4 slot="heading">Second Ammendment</h4>
+          <div class="content">Content for Second</div>
+        </usa-accordion>
+
+        <usa-accordion name="ammendment">
+          <h4 slot="heading">Third Ammendment</h4>
+          <div class="content">Content for Third</div>
+        </usa-accordion>
+      </section>
+    `);
+        const headings = el.querySelectorAll("h4");
+        const content = Array.from(el.querySelectorAll(".content"));
+        headings[0].click();
+        assert.deepEqual(content.map((el) => el.checkVisibility()), [true, false, false]);
+        headings[1].click();
+        assert.deepEqual(content.map((el) => el.checkVisibility()), [false, true, false]);
+        headings[2].click();
+        assert.deepEqual(content.map((el) => el.checkVisibility()), [false, false, true]);
+    });
+    it("should not close accordion not in the same group", async () => {
+        const el = await fixture(html `
+      <section>
+        <usa-accordion name="ammendment">
+          <h4 slot="heading">First Ammendment</h4>
+          <div class="content">Content for First</div>
+        </usa-accordion>
+
+        <usa-accordion name="ammendment">
+          <h4 slot="heading">Second Ammendment</h4>
+          <div class="content">Content for Second</div>
+        </usa-accordion>
+
+        <usa-accordion name="different">
+          <h4 slot="heading">Third Ammendment</h4>
+          <div class="content">Content for Third</div>
+        </usa-accordion>
+      </section>
+    `);
+        const headings = el.querySelectorAll("h4");
+        const content = Array.from(el.querySelectorAll(".content"));
+        headings[0].click();
+        assert.deepEqual(content.map((el) => el.checkVisibility()), [true, false, false]);
+        headings[1].click();
+        assert.deepEqual(content.map((el) => el.checkVisibility()), [false, true, false]);
+        headings[2].click();
+        assert.deepEqual(content.map((el) => el.checkVisibility()), [false, true, true]);
+    });
+});
+//# sourceMappingURL=accordion.test.js.map

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

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

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

@@ -0,0 +1,7 @@
+import type { 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 { type 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,122 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { attr, css, element, html, query } from "@joist/element";
+import { USA_ALERT_CONFIG } from "./alert-types.js";
+let USAAlertElement = (() => {
+    let _classDecorators = [element({
+            tagName: "usa-alert",
+            shadowDomOpts: {
+                mode: "open",
+                delegatesFocus: true,
+            },
+            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 = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _type_decorators = [attr()];
+            __esDecorate(this, 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);
+        }
+        #type_accessor_storage = __runInitializers(this, _type_initializers, "info");
+        get type() { return this.#type_accessor_storage; }
+        set type(value) { this.#type_accessor_storage = value; }
+        #icon = (__runInitializers(this, _type_extraInitializers), query("usa-icon"));
+        attributeChangedCallback() {
+            const icon = this.#icon();
+            icon.icon = USA_ALERT_CONFIG[this.type].icon;
+        }
+    };
+    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,EAAqB,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;IA+F1D,eAAe;4BAvF3B,OAAO,CAAC;YACP,OAAO,EAAE,WAAW;YACpB,aAAa,EAAE;gBACb,IAAI,EAAE,MAAM;gBACZ,cAAc,EAAE,IAAI;aACrB;YACD,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8DF;gBACD,IAAI,CAAA;;;;;;;;;;;;;;KAcH;aACF;SACF,CAAC;;;;sBACmC,WAAW;;;;+BAAnB,SAAQ,WAAW;;;;gCAC7C,IAAI,EAAE;YACP,iKAAS,IAAI,6BAAJ,IAAI,mFAAwB;YAFvC,6KAWC;;;YAXY,uDAAe;;QAE1B,qEAA8B,MAAM,EAAC;QAArC,IAAS,IAAI,0CAAwB;QAArC,IAAS,IAAI,gDAAwB;QAErC,KAAK,sDAAG,KAAK,CAAC,UAAU,CAAC,EAAC;QAE1B,wBAAwB;YACtB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;YAE1B,IAAI,CAAC,IAAI,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;QAC/C,CAAC;;;;SAVU,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 { assert, fixture, html } from "@open-wc/testing";
+import { USA_ALERT_TYPES } from "./alert-types.js";
+describe("usa-alert", () => {
+    for (const 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,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,KAAK,MAAM,KAAK,IAAI,eAAe,EAAE,CAAC;QACpC,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,19 @@
+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;
+    accessor value: string;
+    accessor tabIndex: number;
+    onReady(): void;
+    onInternalClick(): void;
+    attributeChangedCallback(): void;
+}