@noctuatech/uswds 0.0.23 → 0.0.25

package/src/lib/textarea/textarea.element.ts

@@ -0,0 +1,141 @@
+import { attr, css, element, html, listen, query, ready } from "@joist/element";
+import { effect, observe } from "@joist/observable";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-textarea": USATextareaElement;
+  }
+}
+
+@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%;
+      }
+
+      textarea:not(:disabled):focus {
+        outline: 0.25rem solid #2491ff;
+        outline-offset: 0;
+      }
+    `,
+    html`
+      <label>
+        <slot></slot>
+
+        <textarea></textarea>
+      </label>
+    `,
+  ],
+})
+export class USATextareaElement extends HTMLElement {
+  static formAssociated = true;
+
+  @attr()
+  accessor name = "";
+
+  @attr()
+  accessor autocomplete: AutoFill = "on";
+
+  @attr()
+  accessor placeholder = "";
+
+  @attr()
+  accessor required = false;
+
+  @attr({
+    reflect: false,
+  })
+  @observe()
+  accessor value = "";
+
+  #internals = this.attachInternals();
+  #input = query("textarea");
+
+  @ready()
+  onReady() {
+    const input = this.#input();
+    input.autofocus = this.autofocus;
+  }
+
+  connectedCallback() {
+    this.#syncFormState();
+  }
+
+  @effect()
+  onChange() {
+    const input = this.#input();
+
+    input.value = this.value;
+
+    this.#syncFormState();
+  }
+
+  @listen("input")
+  onInputChange() {
+    const input = this.#input();
+
+    this.value = input.value;
+  }
+
+  attributeChangedCallback(attr: string) {
+    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({});
+    }
+  }
+}

package/src/lib/textarea/textarea.stories.ts

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+import type { USATextareaElement } from "./textarea.element.js";
+
+// 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: {},
+} satisfies Meta<USATextareaElement>;
+
+export default meta;
+
+type Story = StoryObj<USATextareaElement>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {},
+};

package/src/lib/textarea/textarea.test.ts

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

package/src/lib.ts

@@ -29,3 +29,4 @@ export { USACardBodyElement } from "./lib/card/card-body/card-body.element.js";
 export { USACardFooterElement } from "./lib/card/card-footer/card-footer.element.js";
 export { USACardImgElement } from "./lib/card/card-media/card-media.element.js";
 export { USACardGroupElement } from "./lib/card/card-group/card-group.element.js";
+export { USATextareaElement } from "./lib/textarea/textarea.element.js";

package/target/lib/define.d.ts

@@ -29,3 +29,4 @@ import "./card/card-body/card-body.element.js";
 import "./card/card-footer/card-footer.element.js";
 import "./card/card-media/card-media.element.js";
 import "./card/card-group/card-group.element.js";
+import "./textarea/textarea.element.js";

package/target/lib/define.js

@@ -29,4 +29,5 @@ import "./card/card-body/card-body.element.js";
 import "./card/card-footer/card-footer.element.js";
 import "./card/card-media/card-media.element.js";
 import "./card/card-group/card-group.element.js";
+import "./textarea/textarea.element.js";
 //# sourceMappingURL=define.js.map

package/target/lib/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../src/lib/define.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAC;AACpC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,gCAAgC,CAAC;AACxC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,+DAA+D,CAAC;AACvE,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,oCAAoC,CAAC;AAC5C,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,8CAA8C,CAAC;AACtD,OAAO,4BAA4B,CAAC;AACpC,OAAO,iDAAiD,CAAC;AACzD,OAAO,sBAAsB,CAAC;AAC9B,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AACxC,OAAO,mDAAmD,CAAC;AAC3D,OAAO,sCAAsC,CAAC;AAC9C,OAAO,4CAA4C,CAAC;AACpD,OAAO,uCAAuC,CAAC;AAC/C,OAAO,0BAA0B,CAAC;AAClC,OAAO,4CAA4C,CAAC;AACpD,OAAO,gDAAgD,CAAC;AACxD,OAAO,wBAAwB,CAAC;AAChC,OAAO,2CAA2C,CAAC;AACnD,OAAO,uCAAuC,CAAC;AAC/C,OAAO,2CAA2C,CAAC;AACnD,OAAO,yCAAyC,CAAC;AACjD,OAAO,yCAAyC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../src/lib/define.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAC;AACpC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,gCAAgC,CAAC;AACxC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,+DAA+D,CAAC;AACvE,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,oCAAoC,CAAC;AAC5C,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,8CAA8C,CAAC;AACtD,OAAO,4BAA4B,CAAC;AACpC,OAAO,iDAAiD,CAAC;AACzD,OAAO,sBAAsB,CAAC;AAC9B,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AACxC,OAAO,mDAAmD,CAAC;AAC3D,OAAO,sCAAsC,CAAC;AAC9C,OAAO,4CAA4C,CAAC;AACpD,OAAO,uCAAuC,CAAC;AAC/C,OAAO,0BAA0B,CAAC;AAClC,OAAO,4CAA4C,CAAC;AACpD,OAAO,gDAAgD,CAAC;AACxD,OAAO,wBAAwB,CAAC;AAChC,OAAO,2CAA2C,CAAC;AACnD,OAAO,uCAAuC,CAAC;AAC/C,OAAO,2CAA2C,CAAC;AACnD,OAAO,yCAAyC,CAAC;AACjD,OAAO,yCAAyC,CAAC;AACjD,OAAO,gCAAgC,CAAC"}

package/target/lib/file-input/file-input-preview/file-input-preview.element.js

@@ -112,7 +112,10 @@ let USAFileInputPreviewElement = (() => {
                     names.add(file.name);
                     if (!this.#items.has(file.name)) {
                         const clone = template.content.cloneNode(true);
-                        const item = clone.childNodes[1];
+                        const item = clone.firstElementChild;
+                        if (!item) {
+                            throw new Error("SOMETHING HAS GONE VERY WRONG");
+                        }
                         item.id = file.name;
                         item.append(document.createTextNode(file.name));
                         const img = item.querySelector("img");

package/target/lib/file-input/file-input-preview/file-input-preview.element.js.map

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

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

@@ -13,6 +13,30 @@ let USAStepIndicatorStepElement = (() => {
         counter-increment: usa-step-indicator;
       }
 
+      :host([counter]):after {
+        content: counter(usa-step-indicator);
+        height: 2.5rem;
+        border-radius: 99rem;
+        width: 2.5rem;
+        background-color: #fff;
+        box-shadow:
+          inset 0 0 0 0.25rem #919191,
+          0 0 0 0.25rem #fff;
+        color: #5c5c5c;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 700;
+        left: 0;
+        line-height: 0.9;
+        padding: calc((2.5rem - 2ex * 0.9) * 0.5);
+        position: absolute;
+        z-index: 100;
+        top: 0;
+        transform: translateY(-40%);
+        box-sizing: border-box;
+      }
+
       :host([state="complete"]) {
         color: #162e51;
       }
@@ -49,43 +73,19 @@ let USAStepIndicatorStepElement = (() => {
         margin-top: 1.5rem;
       }
 
-      :host([counter]) .counter:after {
-        content: counter(usa-step-indicator);
-        height: 2.5rem;
-        border-radius: 99rem;
-        width: 2.5rem;
-        background-color: #fff;
-        box-shadow:
-          inset 0 0 0 0.25rem #919191,
-          0 0 0 0.25rem #fff;
-        color: #5c5c5c;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-weight: 700;
-        left: 0;
-        line-height: 0.9;
-        padding: calc((2.5rem - 2ex * 0.9) * 0.5);
-        position: absolute;
-        z-index: 100;
-        top: 0;
-        transform: translateY(-40%);
-        box-sizing: border-box;
-      }
-
-      :host([counter][state="complete"]) .counter::after {
+      :host([counter][state="complete"]):after {
         background-color: #162e51;
         box-shadow: 0 0 0 0.25rem #fff;
         color: #fff;
       }
 
-      :host([counter][state="current"]) .counter::after {
+      :host([counter][state="current"]):after {
         background-color: #005ea2;
         box-shadow: 0 0 0 0.25rem #fff;
         color: #fff;
       }
 
-      :host([counter="small"]) .counter:after {
+      :host([counter="small"]):after {
         height: 1.5rem;
         width: 1.5rem;
         font-size: 0.93rem;
@@ -96,8 +96,6 @@ let USAStepIndicatorStepElement = (() => {
       }
     `,
                 html `
-      <div class="counter" aria-hidden="true"></div>
-
       <div class="label">
         <slot></slot>
       </div>

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

@@ -1 +1 @@
-{"version":3,"file":"step.element.js","sourceRoot":"","sources":["../../../../src/lib/step-indicator/step/step.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;IA+G1D,2BAA2B;4BAvGvC,OAAO,CAAC;YACP,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0FF;gBACD,IAAI,CAAA;;;;;;KAMH;aACF;SACF,CAAC;;;;sBAC+C,WAAW;;;;;;;;;2CAAnB,SAAQ,WAAW;;;;iCACzD,IAAI,EAAE;gCAGN,IAAI,EAAE;8CAGN,WAAW,CAAC,OAAO,CAAC;YALrB,oKAAS,KAAK,6BAAL,KAAK,qFAAmC;YAGjD,iKAAS,IAAI,6BAAJ,IAAI,mFAAc;YAG3B,yMAAA,kBAAkB,6DAIjB;YAZH,6KAaC;;;YAbY,uDAA2B;;QAEtC,2BAFW,mDAA2B,+CAEQ,EAAE,GAAC;QAAjD,IAAS,KAAK,2CAAmC;QAAjD,IAAS,KAAK,iDAAmC;QAGjD,yHAAgB,UAAU,GAAC;QAA3B,IAAS,IAAI,0CAAc;QAA3B,IAAS,IAAI,gDAAc;QAG3B,kBAAkB;YAChB,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;gBAC7B,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;YAC5B,CAAC;QACH,CAAC;;;;;;;;SAZU,2BAA2B"}
+{"version":3,"file":"step.element.js","sourceRoot":"","sources":["../../../../src/lib/step-indicator/step/step.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;IA6G1D,2BAA2B;4BArGvC,OAAO,CAAC;YACP,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0FF;gBACD,IAAI,CAAA;;;;KAIH;aACF;SACF,CAAC;;;;sBAC+C,WAAW;;;;;;;;;2CAAnB,SAAQ,WAAW;;;;iCACzD,IAAI,EAAE;gCAGN,IAAI,EAAE;8CAGN,WAAW,CAAC,OAAO,CAAC;YALrB,oKAAS,KAAK,6BAAL,KAAK,qFAAmC;YAGjD,iKAAS,IAAI,6BAAJ,IAAI,mFAAc;YAG3B,yMAAA,kBAAkB,6DAIjB;YAZH,6KAaC;;;YAbY,uDAA2B;;QAEtC,2BAFW,mDAA2B,+CAEQ,EAAE,GAAC;QAAjD,IAAS,KAAK,2CAAmC;QAAjD,IAAS,KAAK,iDAAmC;QAGjD,yHAAgB,UAAU,GAAC;QAA3B,IAAS,IAAI,0CAAc;QAA3B,IAAS,IAAI,gDAAc;QAG3B,kBAAkB;YAChB,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;gBAC7B,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;YAC5B,CAAC;QACH,CAAC;;;;;;;;SAZU,2BAA2B"}

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

@@ -8,7 +8,7 @@ let USAStepIndicatorElement = (() => {
       :host {
         display: flex;
         gap: 2px;
-        counter-reset: usa-step-indicator;
+        counter-reset: usa-step-indicator 0;
         padding-top: 1rem;
         margin-bottom: 1rem;
       }

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

@@ -9,7 +9,7 @@ declare const meta: {
     argTypes: {
         counter: {
             control: "select";
-            options: string[];
+            options: (string | null)[];
         };
     };
     args: {

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

@@ -1,4 +1,5 @@
 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",
@@ -6,28 +7,30 @@ const meta = {
     render(args) {
         return html `
       <usa-step-indicator>
-        <usa-step state="complete" counter=${args.counter}>
+        <usa-step state="complete" counter=${ifDefined(args.counter)}>
           Personal information
         </usa-step>
 
-        <usa-step state="complete" counter=${args.counter}>
+        <usa-step state="complete" counter=${ifDefined(args.counter)}>
           Household status
         </usa-step>
 
-        <usa-step state="current" counter=${args.counter}>
+        <usa-step state="current" counter=${ifDefined(args.counter)}>
           Supporting documents
         </usa-step>
 
-        <usa-step counter=${args.counter}>Signature</usa-step>
+        <usa-step counter=${ifDefined(args.counter)}>Signature</usa-step>
 
-        <usa-step counter=${args.counter}>Review and submit</usa-step>
+        <usa-step counter=${ifDefined(args.counter)}>
+          Review and submit
+        </usa-step>
       </usa-step-indicator>
     `;
     },
     argTypes: {
         counter: {
             control: "select",
-            options: ["on", "small"],
+            options: ["on", "small", null],
         },
     },
     args: {

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

@@ -1 +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;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA;;6CAE8B,IAAI,CAAC,OAAO;;;;6CAIZ,IAAI,CAAC,OAAO;;;;4CAIb,IAAI,CAAC,OAAO;;;;4BAI5B,IAAI,CAAC,OAAO;;4BAEZ,IAAI,CAAC,OAAO;;KAEnC,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC;SACzB;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"}
+{"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/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,171 @@
+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%;
+      }
+
+      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();
+            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;