@noctuatech/uswds 0.0.28 → 0.0.30

package/target/lib/step-indicator/step-indicator.element.js

@@ -0,0 +1,48 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { attr, css, element, html } from "@joist/element";
+let USAStepIndicatorElement = (() => {
+    let _classDecorators = [element({
+            tagName: "usa-step-indicator",
+            shadowDom: [
+                css `
+      :host {
+        display: flex;
+        gap: 2px;
+        counter-reset: usa-step-indicator 0;
+        padding-top: 1rem;
+        margin-bottom: 1rem;
+      }
+    `,
+                html `<slot></slot>`,
+            ],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _role_decorators;
+    let _role_initializers = [];
+    let _role_extraInitializers = [];
+    var USAStepIndicatorElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _role_decorators = [attr()];
+            __esDecorate(this, null, _role_decorators, { kind: "accessor", name: "role", static: false, private: false, access: { has: obj => "role" in obj, get: obj => obj.role, set: (obj, value) => { obj.role = value; } }, metadata: _metadata }, _role_initializers, _role_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            USAStepIndicatorElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        #role_accessor_storage = __runInitializers(this, _role_initializers, "list");
+        get role() { return this.#role_accessor_storage; }
+        set role(value) { this.#role_accessor_storage = value; }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _role_extraInitializers);
+        }
+    };
+    return USAStepIndicatorElement = _classThis;
+})();
+export { USAStepIndicatorElement };
+//# sourceMappingURL=step-indicator.element.js.map

package/target/lib/step-indicator/step-indicator.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"step-indicator.element.js","sourceRoot":"","sources":["../../../src/lib/step-indicator/step-indicator.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;IAuB7C,uBAAuB;4BAfnC,OAAO,CAAC;YACP,OAAO,EAAE,oBAAoB;YAC7B,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;KAQF;gBACD,IAAI,CAAA,eAAe;aACpB;SACF,CAAC;;;;sBAC2C,WAAW;;;;uCAAnB,SAAQ,WAAW;;;;gCACrD,IAAI,EAAE;YACP,iKAAS,IAAI,6BAAJ,IAAI,mFAAU;YAFzB,6KAGC;;;YAHY,uDAAuB;;QAElC,qEAAgB,MAAM,EAAC;QAAvB,IAAS,IAAI,0CAAU;QAAvB,IAAS,IAAI,gDAAU;;;;;;;;SAFZ,uBAAuB"}

package/target/lib/step-indicator/step-indicator.stories.d.ts

@@ -0,0 +1,21 @@
+import type { StoryObj } from "@storybook/web-components";
+import type { USAStepIndicatorElement } from "./step-indicator.element.js";
+declare const meta: {
+    title: string;
+    tags: string[];
+    render(args: USAStepIndicatorElement & {
+        counter: string;
+    }): import("lit-html").TemplateResult<1>;
+    argTypes: {
+        counter: {
+            control: "select";
+            options: (string | null)[];
+        };
+    };
+    args: {
+        counter: string;
+    };
+};
+export default meta;
+type Story = StoryObj<USAStepIndicatorElement>;
+export declare const Primary: Story;

package/target/lib/step-indicator/step-indicator.stories.js

@@ -0,0 +1,45 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+    title: "usa-step-indicator",
+    tags: ["autodocs"],
+    render(args) {
+        return html `
+      <usa-step-indicator>
+        <usa-step state="complete" counter=${ifDefined(args.counter)}>
+          Personal information
+        </usa-step>
+
+        <usa-step state="complete" counter=${ifDefined(args.counter)}>
+          Household status
+        </usa-step>
+
+        <usa-step state="current" counter=${ifDefined(args.counter)}>
+          Supporting documents
+        </usa-step>
+
+        <usa-step counter=${ifDefined(args.counter)}>Signature</usa-step>
+
+        <usa-step counter=${ifDefined(args.counter)}>
+          Review and submit
+        </usa-step>
+      </usa-step-indicator>
+    `;
+    },
+    argTypes: {
+        counter: {
+            control: "select",
+            options: ["on", "small", null],
+        },
+    },
+    args: {
+        counter: "on",
+    },
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {
+    args: {},
+};
+//# sourceMappingURL=step-indicator.stories.js.map

package/target/lib/step-indicator/step-indicator.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"step-indicator.stories.js","sourceRoot":"","sources":["../../../src/lib/step-indicator/step-indicator.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAIzD,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA;;6CAE8B,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;;;;6CAIvB,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;;;;4CAIxB,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;;;;4BAIvC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;;4BAEvB,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;;;;KAI9C,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC;SAC/B;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;KACd;CAC4D,CAAC;AAEhE,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}

package/target/lib/step-indicator/step-indicator.test.d.ts

@@ -0,0 +1,2 @@
+import "./step-indicator.element.js";
+import "./step/step.element.js";

package/target/lib/step-indicator/step-indicator.test.js

@@ -0,0 +1,18 @@
+import "./step-indicator.element.js";
+import "./step/step.element.js";
+import { assert, fixture, html } from "@open-wc/testing";
+describe("usa-step-indicator", () => {
+    it("should be accessible", async () => {
+        const stepIndicator = await fixture(html `
+      <usa-step-indicator>
+        <usa-step state="complete" counter="on">Personal information</usa-step>
+        <usa-step state="complete" counter="on">Household status</usa-step>
+        <usa-step state="current" counter="on">Supporting documents</usa-step>
+        <usa-step counter="on">Signature</usa-step>
+        <usa-step counter="on">Review and submit</usa-step>
+      </usa-step-indicator>
+    `);
+        return assert.isAccessible(stepIndicator);
+    });
+});
+//# sourceMappingURL=step-indicator.test.js.map

package/target/lib/step-indicator/step-indicator.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"step-indicator.test.js","sourceRoot":"","sources":["../../../src/lib/step-indicator/step-indicator.test.ts"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAC;AACrC,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,aAAa,GAAG,MAAM,OAAO,CAA0B,IAAI,CAAA;;;;;;;;KAQhE,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAC5C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/summary-box/summary-box.element.d.ts

@@ -0,0 +1,7 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        "usa-summary-box": USASummaryBoxElement;
+    }
+}
+export declare class USASummaryBoxElement extends HTMLElement {
+}

package/target/lib/summary-box/summary-box.element.js

@@ -0,0 +1,40 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { css, element, html } from "@joist/element";
+let USASummaryBoxElement = (() => {
+    let _classDecorators = [element({
+            tagName: "usa-summary-box",
+            shadowDom: [
+                css `
+      :host {
+        font-size: 1.06rem;
+        line-height: 1.5;
+        color: #1b1b1b;
+        background-color: #e7f6f8;
+        border-radius: 0.25rem;
+        border: 1px #99deea solid;
+        padding: 1.5rem;
+        position: relative;
+        display: block;
+      }
+    `,
+                html ` <slot></slot> `,
+            ],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var USASummaryBoxElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            USASummaryBoxElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return USASummaryBoxElement = _classThis;
+})();
+export { USASummaryBoxElement };
+//# sourceMappingURL=summary-box.element.js.map

package/target/lib/summary-box/summary-box.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"summary-box.element.js","sourceRoot":"","sources":["../../../src/lib/summary-box/summary-box.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;IA2BvC,oBAAoB;4BAnBhC,OAAO,CAAC;YACP,OAAO,EAAE,iBAAiB;YAC1B,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;KAYF;gBACD,IAAI,CAAA,iBAAiB;aACtB;SACF,CAAC;;;;sBACwC,WAAW;oCAAnB,SAAQ,WAAW;;;;YAArD,6KAAwD;;;YAA3C,uDAAoB;;;;;SAApB,oBAAoB"}

package/target/lib/summary-box/summary-box.stories.d.ts

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

package/target/lib/summary-box/summary-box.stories.js

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

package/target/lib/summary-box/summary-box.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"summary-box.stories.js","sourceRoot":"","sources":["../../../src/lib/summary-box/summary-box.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA,kDAAkD,CAAC;IAChE,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CAC4B,CAAC;AAEvC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}

package/target/lib/summary-box/summary-box.test.d.ts

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

package/target/lib/summary-box/summary-box.test.js

@@ -0,0 +1,11 @@
+import "./summary-box.element.js";
+import { assert, fixture, html } from "@open-wc/testing";
+describe("usa-summary-box", () => {
+    it("should be accessible", async () => {
+        const summaryBox = await fixture(html `
+      <usa-summary-box>Hello World</usa-summary-box>
+    `);
+        return assert.isAccessible(summaryBox);
+    });
+});
+//# sourceMappingURL=summary-box.test.js.map

package/target/lib/summary-box/summary-box.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"summary-box.test.js","sourceRoot":"","sources":["../../../src/lib/summary-box/summary-box.test.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,UAAU,GAAG,MAAM,OAAO,CAAuB,IAAI,CAAA;;KAE1D,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

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

@@ -0,0 +1,10 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        "usa-tag": USATagElement;
+    }
+}
+export declare const TAG_VARIANTS: readonly ["default", "big"];
+export type TagVariant = (typeof TAG_VARIANTS)[number];
+export declare class USATagElement extends HTMLElement {
+    accessor variant: TagVariant;
+}

package/target/lib/tag/tag.element.js

@@ -0,0 +1,57 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { attr, css, element, html } from "@joist/element";
+export const TAG_VARIANTS = ["default", "big"];
+let USATagElement = (() => {
+    let _classDecorators = [element({
+            tagName: "usa-tag",
+            shadowDom: [
+                css `
+      :host {
+        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>`,
+            ],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _variant_decorators;
+    let _variant_initializers = [];
+    let _variant_extraInitializers = [];
+    var USATagElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _variant_decorators = [attr()];
+            __esDecorate(this, null, _variant_decorators, { kind: "accessor", name: "variant", static: false, private: false, access: { has: obj => "variant" in obj, get: obj => obj.variant, set: (obj, value) => { obj.variant = value; } }, metadata: _metadata }, _variant_initializers, _variant_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            USATagElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        #variant_accessor_storage = __runInitializers(this, _variant_initializers, "default");
+        get variant() { return this.#variant_accessor_storage; }
+        set variant(value) { this.#variant_accessor_storage = value; }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _variant_extraInitializers);
+        }
+    };
+    return USATagElement = _classThis;
+})();
+export { USATagElement };
+//# sourceMappingURL=tag.element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag.element.js","sourceRoot":"","sources":["../../../src/lib/tag/tag.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAQ1D,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,SAAS,EAAE,KAAK,CAAU,CAAC;IA2B3C,aAAa;4BAvBzB,OAAO,CAAC;YACP,OAAO,EAAE,SAAS;YAClB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;KAgBF;gBACD,IAAI,CAAA,eAAe;aACpB;SACF,CAAC;;;;sBACiC,WAAW;;;;6BAAnB,SAAQ,WAAW;;;;mCAC3C,IAAI,EAAE;YACP,0KAAS,OAAO,6BAAP,OAAO,yFAAyB;YAF3C,6KAGC;;;YAHY,uDAAa;;QAExB,2EAA+B,SAAS,EAAC;QAAzC,IAAS,OAAO,6CAAyB;QAAzC,IAAS,OAAO,mDAAyB;;;;;;;;SAF9B,aAAa"}

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

@@ -0,0 +1,19 @@
+import type { StoryObj } from "@storybook/web-components";
+import { type USATagElement } from "./tag.element.js";
+declare const meta: {
+    title: string;
+    tags: string[];
+    render(args: USATagElement): import("lit-html").TemplateResult<1>;
+    argTypes: {
+        variant: {
+            control: "select";
+            options: readonly ["default", "big"];
+        };
+    };
+    args: {
+        variant: "default";
+    };
+};
+export default meta;
+type Story = StoryObj<USATagElement>;
+export declare const Primary: Story;

package/target/lib/tag/tag.stories.js

@@ -0,0 +1,25 @@
+import { html } from "lit";
+import { TAG_VARIANTS } 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",
+    },
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {
+    args: {},
+};
+//# sourceMappingURL=tag.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag.stories.js","sourceRoot":"","sources":["../../../src/lib/tag/tag.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,EAAE,YAAY,EAAsB,MAAM,kBAAkB,CAAC;AAEpE,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA,oBAAoB,IAAI,CAAC,OAAO,wBAAwB,CAAC;IACtE,CAAC;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,YAAY;SACtB;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,SAAS;KACnB;CAC4B,CAAC;AAEhC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}

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

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

package/target/lib/tag/tag.test.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag.test.js","sourceRoot":"","sources":["../../../src/lib/tag/tag.test.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;IACvB,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,GAAG,GAAG,MAAM,OAAO,CAAgB,IAAI,CAAA;;KAE5C,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

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

@@ -0,0 +1,19 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        "usa-textarea": USATextareaElement;
+    }
+}
+export declare class USATextareaElement extends HTMLElement {
+    #private;
+    static formAssociated: boolean;
+    accessor name: string;
+    accessor autocomplete: AutoFill;
+    accessor placeholder: string;
+    accessor required: boolean;
+    accessor value: string;
+    onReady(): void;
+    connectedCallback(): void;
+    onChange(): void;
+    onInputChange(): void;
+    attributeChangedCallback(attr: string): void;
+}

package/target/lib/textarea/textarea.element.js

@@ -0,0 +1,174 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { attr, css, element, html, listen, query, ready } from "@joist/element";
+import { effect, observe } from "@joist/observable";
+let USATextareaElement = (() => {
+    let _classDecorators = [element({
+            tagName: "usa-textarea",
+            shadowDom: [
+                css `
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        font-size: 1.06rem;
+        line-height: 1.3;
+        display: block;
+        font-weight: 400;
+        max-width: 30rem;
+        margin-bottom: 1.5rem;
+        position: relative;
+        height: calc(6lh + .5rem);
+      }
+
+      textarea {
+        font-family: inherit;
+        font-size: inherit;
+        border-radius: 0;
+        color: #1b1b1b;
+        display: block;
+        margin-top: .5rem;
+        max-width: 30rem;
+        padding: .5rem;
+        border-width: 1px;
+        border-color: #5c5c5c;
+        border-style: solid;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        width: 100%;
+        height: 100%;
+        resize: none;
+      }
+
+      textarea:not(:disabled):focus {
+        outline: 0.25rem solid #2491ff;
+        outline-offset: 0;
+      }
+    `,
+                html `
+      <label>
+        <slot></slot>
+
+        <textarea></textarea>
+      </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 _required_decorators;
+    let _required_initializers = [];
+    let _required_extraInitializers = [];
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _onReady_decorators;
+    let _onChange_decorators;
+    let _onInputChange_decorators;
+    var USATextareaElement = 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()];
+            _autocomplete_decorators = [attr()];
+            _placeholder_decorators = [attr()];
+            _required_decorators = [attr()];
+            _value_decorators = [attr({
+                    reflect: false,
+                }), observe()];
+            _onReady_decorators = [ready()];
+            _onChange_decorators = [effect()];
+            _onInputChange_decorators = [listen("input")];
+            __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, _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(this, 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(this, null, _required_decorators, { kind: "accessor", name: "required", static: false, private: false, access: { has: obj => "required" in obj, get: obj => obj.required, set: (obj, value) => { obj.required = value; } }, metadata: _metadata }, _required_initializers, _required_extraInitializers);
+            __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+            __esDecorate(this, null, _onReady_decorators, { kind: "method", name: "onReady", static: false, private: false, access: { has: obj => "onReady" in obj, get: obj => obj.onReady }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, 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(this, 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);
+            USATextareaElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static formAssociated = true;
+        #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; }
+        #autocomplete_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _autocomplete_initializers, "on"));
+        get autocomplete() { return this.#autocomplete_accessor_storage; }
+        set autocomplete(value) { this.#autocomplete_accessor_storage = value; }
+        #placeholder_accessor_storage = (__runInitializers(this, _autocomplete_extraInitializers), __runInitializers(this, _placeholder_initializers, ""));
+        get placeholder() { return this.#placeholder_accessor_storage; }
+        set placeholder(value) { this.#placeholder_accessor_storage = value; }
+        #required_accessor_storage = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _required_initializers, false));
+        get required() { return this.#required_accessor_storage; }
+        set required(value) { this.#required_accessor_storage = value; }
+        #value_accessor_storage = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _value_initializers, ""));
+        get value() { return this.#value_accessor_storage; }
+        set value(value) { this.#value_accessor_storage = value; }
+        #internals = (__runInitializers(this, _value_extraInitializers), this.attachInternals());
+        #input = query("textarea");
+        onReady() {
+            const input = this.#input();
+            input.autofocus = this.autofocus;
+        }
+        connectedCallback() {
+            this.#syncFormState();
+        }
+        onChange() {
+            const input = this.#input();
+            if (input.value !== this.value) {
+                input.value = this.value;
+            }
+            this.#syncFormState();
+        }
+        onInputChange() {
+            const input = this.#input();
+            this.value = input.value;
+        }
+        attributeChangedCallback(attr) {
+            const input = this.#input();
+            switch (attr) {
+                case "autocomplete":
+                    input.autocomplete = this.autocomplete;
+                    break;
+                case "placeholder":
+                    input.placeholder = this.placeholder;
+                    break;
+                case "name":
+                    input.name = this.name;
+                    break;
+            }
+        }
+        #syncFormState() {
+            const input = this.#input();
+            this.#internals.setFormValue(input.value);
+            if (this.required && !input.value) {
+                this.#internals.setValidity({ valueMissing: true }, "Required", input);
+            }
+            else {
+                this.#internals.setValidity({});
+            }
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return USATextareaElement = _classThis;
+})();
+export { USATextareaElement };
+//# sourceMappingURL=textarea.element.js.map

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

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

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

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

package/target/lib/textarea/textarea.stories.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.stories.js","sourceRoot":"","sources":["../../../src/lib/textarea/textarea.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,cAAc;IACrB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA,0CAA0C,CAAC;IACxD,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CAC0B,CAAC;AAErC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}