@noctuatech/uswds 0.0.7 → 0.0.9

package/README.md

@@ -6,12 +6,12 @@ https://designsystem.digital.gov/
 
 ## Getting Started
 
+```sh
+npm i @noctuatech/uswds
+```
+
 ```html
 <style>
-  body:has(:not(:defined)) {
-    display: none;
-  }
-
   * {
     font-family:
       Source Sans Pro Web,
@@ -23,10 +23,10 @@ https://designsystem.digital.gov/
   }
 </style>
 
-<script src="https://cdn.jsdelivr.net/npm/@noctuatech/uswds@latest/assets/uswds.min.js"></script>
+<script src="/node_modules/@noctuatech/uswds/assets/uswds.min.js"></script>
 
 <usa-config
-  spritesheet="https://cdn.jsdelivr.net/npm/@noctuatech/uswds@latest/assets/img/sprite.svg"
+  spritesheet="/node_modules/@noctuatech/uswds/assets/img/sprite.svg"
 >
   <usa-alert type="info">
     <h3 slot="heading">Informative status</h3>

package/assets/img/4c-lg-on-black.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="299" height="283" viewBox="0 0 299 283">
+  <g fill="none" fill-rule="evenodd">
+    <polygon fill="#81AEFC" points="298.45 169.342 193.773 169.335 246.104 8.944"/>
+    <polygon fill="#4D52AF" points="233.844 0 201.49 99.116 64.451 0"/>
+    <polygon fill="#EE601D" points="4.458 183.269 89.148 122.016 141.5 282.401"/>
+    <polygon fill="#F6BD9C" points="52.346 8.624 137.027 69.889 0 169.023"/>
+    <polygon fill="#E6E6E6" points="156.817 282.475 124.476 183.354 293.859 183.343"/>
+  </g>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noctuatech/uswds",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "type": "module",
   "workspaces": [
     "packages/**"
@@ -95,13 +95,14 @@
   },
   "devDependencies": {
     "@open-wc/testing": "^4.0.0",
-    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@storybook/addon-essentials": "^8.4.4",
     "@storybook/web-components": "^8.4.4",
     "@storybook/web-components-vite": "^8.4.4",
     "@types/mocha": "^10.0.7",
     "@types/node": "^22.0.0",
+    "@uswds/uswds": "^3.10.0",
     "@web/test-runner": "^0.19.0",
     "browser-sync": "^3.0.3",
     "husky": "^9.0.11",

package/src/lib/button/button.element.ts

@@ -1,4 +1,4 @@
-import { attr, css, element, html, listen, query } from "@joist/element";
+import { attr, css, element, html, listen, query, ready } from "@joist/element";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -18,6 +18,10 @@ export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
 
 @element({
   tagName: "usa-button",
+  shadowDomOpts: {
+    mode: "open",
+    delegatesFocus: true,
+  },
   shadowDom: [
     css`
       :host {
@@ -182,9 +186,20 @@ export class USAButtonElement extends HTMLElement {
   @attr()
   accessor variant: ButtonVariant = "primary";
 
+  @attr()
+  accessor value = "";
+
+  accessor tabIndex = 0;
+
   #internals = this.attachInternals();
   #button = query("button");
 
+  @ready()
+  onReady() {
+    const input = this.#button();
+    input.autofocus = this.autofocus;
+  }
+
   @listen("keydown", () => document.body)
   onKeyDown(e: KeyboardEvent) {
     if (this.type === "submit") {

package/src/lib/define.ts

@@ -4,7 +4,7 @@ import "./button/button.element.js";
 import "./checkbox/checkbox.element.js";
 import "./description/description.element.js";
 import "./file-input/file-input.element.js";
-import "./file-input/file-input-preview.element.js";
+import "./file-input/file-input-preview/file-input-preview.element.js";
 import "./icon/icon.element.js";
 import "./input/input.element.js";
 import "./input-mask/input-mask.element.js";
@@ -16,3 +16,9 @@ import "./select/select-option.element.js";
 import "./tag/tag.element.js";
 import "./accordion/accordion.element.js";
 import "./side-nav/side-nav.element.js";
+import "./summary-box/summary-box.element.js";
+import "./step-indicator/step-indicator.element.js";
+import "./step-indicator/step/step-indicator-step.element.js";
+import "./modal/modal.element.js";
+import "./modal/modal-close/modal-close.element.js";
+import "./modal/modal-heading/modal-heading.element.js";

package/src/lib/file-input/{file-input-preview.element.ts → file-input-preview/file-input-preview.element.ts}

@@ -61,14 +61,23 @@ declare global {
         margin-top: 1px;
       }
     `,
-    html`<slot class="preview-heading"></slot>`,
+    html`
+      <template>
+        <div class="preview-item">
+          <img height="40" width="40" aria-hidden="true" />
+        </div>
+      </template>
+
+      <slot class="preview-heading"></slot>
+    `,
   ],
 })
 export class USAFileInputPreviewElement extends HTMLElement {
   @observe()
   accessor files: FileList | null = null;
 
-  #items = new Map<string, HTMLElement>();
+  #items = new Map<string, Element>();
+  #template = query("template");
 
   connectedCallback() {
     this.onChange();
@@ -76,7 +85,9 @@ export class USAFileInputPreviewElement extends HTMLElement {
 
   @effect()
   onChange() {
-    if (this.files) {
+    const template = this.#template();
+
+    if (this.files && this.files.length) {
       this.hidden = false;
 
       let names = new Set<string>();
@@ -85,13 +96,15 @@ export class USAFileInputPreviewElement extends HTMLElement {
         names.add(file.name);
 
         if (!this.#items.has(file.name)) {
-          const item = document.createElement("div");
+          const clone = template.content.cloneNode(true);
+          const item = clone.childNodes[1] as Element;
+
           item.id = file.name;
-          item.className = "preview-item";
 
-          const img = createImagePreview(file);
+          const img = item.querySelector("img")!;
+          img.src = URL.createObjectURL(file);
 
-          item.append(img, document.createTextNode(file.name));
+          item.append(document.createTextNode(file.name));
 
           this.shadowRoot!.append(item);
           this.#items.set(file.name, item);
@@ -109,13 +122,3 @@ export class USAFileInputPreviewElement extends HTMLElement {
     }
   }
 }
-
-function createImagePreview(file: File) {
-  const img = new Image();
-  img.height = 40;
-  img.width = 40;
-  img.src = URL.createObjectURL(file);
-  img.ariaHidden = "true";
-
-  return img;
-}

package/src/lib/file-input/file-input.element.ts

@@ -1,6 +1,3 @@
-import "./file-input-preview.element.js";
-import "../link/link.element.js";
-
 import { attr, css, element, html, listen, query } from "@joist/element";
 import { effect, observe } from "@joist/observable";
 
@@ -22,6 +19,7 @@ declare global {
         display: block;
         max-width: 30rem;
         position: relative;
+        margin-bottom: 1.5rem;
       }
 
       label {
@@ -30,18 +28,23 @@ declare global {
 
       input {
         cursor: pointer;
-        height: 100%;
         left: 0;
         margin: 0;
         max-width: none;
         position: absolute;
         text-indent: -999em;
-        top: 0;
         width: 100%;
         z-index: 1;
+        bottom: 0;
+        top: 0;
       }
 
-      label slot {
+      input:focus {
+        outline: 0.25rem solid #2491ff;
+        outline-offset: 0;
+      }
+
+      label slot.label {
         font-size: 1.06rem;
         line-height: 1.3;
         display: block;
@@ -51,30 +54,39 @@ declare global {
 
       .box {
         border: 1px dashed #adadad;
-        display: block;
+        display: flex;
         font-size: 0.93rem;
         position: relative;
         text-align: center;
         width: 100%;
         max-width: 30rem;
-        padding: 2rem 1rem;
+        height: 5.2rem;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .container {
+        position: relative;
       }
     `,
     html`
       <label>
-        <slot></slot>
-        <input type="file" />
-      </label>
+        <slot class="label"></slot>
+
+        <div class="container">
+          <input type="file" />
 
-      <div class="box">
-        <slot name="description">
-          Drag file here or <usa-link>choose from folder</usa-link>
-        </slot>
-      </div>
+          <div class="box">
+            <slot name="description">
+              Drag file here or <usa-link>choose from folder</usa-link>
+            </slot>
+          </div>
 
-      <usa-file-input-preview>
-        Selected file <usa-link>Change file</usa-link>
-      </usa-file-input-preview>
+          <usa-file-input-preview>
+            Selected file <usa-link>Change file</usa-link>
+          </usa-file-input-preview>
+        </div>
+      </label>
     `,
   ],
 })
@@ -125,14 +137,14 @@ export class USAFileInputElement extends HTMLElement {
 
     const formData = new FormData();
 
-    if (input.files) {
+    if (input.files && input.files.length) {
       box.style.display = "none";
 
       for (let file of input.files) {
         formData.append(this.name, file);
       }
     } else {
-      box.style.display = "block";
+      box.style.display = "flex";
     }
 
     this.#internals.setFormValue(formData);

package/src/lib/file-input/file-input.stories.ts

@@ -26,8 +26,6 @@ const meta = {
           </div>
         </usa-file-input>
 
-        <br />
-
         <usa-button type="submit">SUBMIT</usa-button>
       </form>
     `;

package/src/lib/input/input.element.ts

@@ -1,4 +1,4 @@
-import { attr, css, element, html, listen, query } from "@joist/element";
+import { attr, css, element, html, listen, query, ready } from "@joist/element";
 import { effect, observe } from "@joist/observable";
 
 import { MaskableElement } from "../input-mask/maskable.element.js";
@@ -11,6 +11,10 @@ declare global {
 
 @element({
   tagName: "usa-input",
+  shadowDomOpts: {
+    mode: "open",
+    delegatesFocus: true,
+  },
   shadowDom: [
     css`
       * {
@@ -18,13 +22,6 @@ declare global {
       }
 
       :host {
-        font-family:
-          Source Sans Pro Web,
-          Helvetica Neue,
-          Helvetica,
-          Roboto,
-          Arial,
-          sans-serif;
         font-size: 1.06rem;
         line-height: 1.3;
         display: block;
@@ -98,6 +95,12 @@ export class USATextInputElement
     input.setSelectionRange(start, end);
   }
 
+  @ready()
+  onReady() {
+    const input = this.#input();
+    input.autofocus = this.autofocus;
+  }
+
   @effect()
   onChange() {
     const input = this.#input();

package/src/lib/modal/modal-close/modal-close.element.ts

@@ -0,0 +1,55 @@
+import { attr, css, element, html } from "@joist/element";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-modal-close": USAModalCloseElement;
+  }
+}
+
+@element({
+  tagName: "usa-modal-close",
+  shadowDom: [
+    css`
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        display: block;
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+      }
+
+      button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: none;
+        border: none;
+        cursor: pointer;
+        height: 100%;
+        width: 100%;
+        border-radius: 100%;
+        padding: 0;
+        margin: 0;
+      }
+
+      button:focus {
+        outline: 0.25rem solid #2491ff;
+        outline-offset: 0;
+      }
+    `,
+    html`
+      <button aria-label="close modal">
+        <usa-icon icon="close"></usa-icon>
+      </button>
+    `,
+  ],
+})
+export class USAModalCloseElement extends HTMLElement {
+  @attr({
+    name: "modal-action",
+  })
+  accessor modalAction = "close";
+}

package/src/lib/modal/modal-close/modal-close.test.ts

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

package/src/lib/modal/modal-heading/modal-heading.element.ts

@@ -0,0 +1,38 @@
+import { css, element, html } from "@joist/element";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-modal-heading": USAModalHeadingElement;
+  }
+}
+
+@element({
+  tagName: "usa-modal-heading",
+  shadowDom: [
+    css`
+      :host {
+        font-family:
+          Merriweather Web,
+          Georgia,
+          Cambria,
+          Times New Roman,
+          Times,
+          serif !important;
+
+        font-size: 1.22rem;
+      }
+
+      h2 {
+        margin-top: 0;
+        line-height: 1.4;
+        font-size: 1.45rem;
+      }
+    `,
+    html`
+      <h2>
+        <slot></slot>
+      </h2>
+    `,
+  ],
+})
+export class USAModalHeadingElement extends HTMLElement {}

package/src/lib/modal/modal-heading/modal-heading.test.ts

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

package/src/lib/modal/modal.element.ts

@@ -0,0 +1,85 @@
+import { css, element, html, listen, query } from "@joist/element";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-modal": USAModalElement;
+  }
+}
+
+@element({
+  tagName: "usa-modal",
+  shadowDom: [
+    css`
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        display: contents;
+      }
+
+      dialog {
+        border: none;
+        font-size: 1.06rem;
+        line-height: 1.5;
+        border-radius: 0.5rem;
+        background: #fff;
+        color: #1b1b1b;
+        max-width: 30rem;
+        padding-top: 4rem;
+        padding-left: 4rem;
+        padding-right: 4rem;
+        padding-bottom: 2rem;
+        width: 100%;
+      }
+
+      ::backdrop {
+        background: rgba(0, 0, 0, 0.7);
+      }
+    `,
+    html`
+      <dialog>
+        <slot></slot>
+      </dialog>
+    `,
+  ],
+})
+export class USAModalElement extends HTMLElement {
+  modalAction: null | string = null;
+
+  #dialog = query("dialog");
+
+  openModal() {
+    const dialog = this.#dialog();
+
+    dialog.showModal();
+  }
+
+  closeModal() {
+    const dialog = this.#dialog();
+
+    dialog.close();
+  }
+
+  @listen("click", () => document.body)
+  onGlobalModalAction(e: Event) {
+    if (e.target instanceof Element) {
+      const modalTarget = e.target.getAttribute("modal-target");
+
+      if (modalTarget === this.id) {
+        this.openModal();
+      }
+    }
+  }
+
+  @listen("click", (host) => host)
+  onModalAction(e: Event) {
+    if (e.target instanceof Element) {
+      this.modalAction = e.target.getAttribute("modal-action");
+
+      this.closeModal();
+
+      this.dispatchEvent(new Event("usa::modal::close"));
+    }
+  }
+}

package/src/lib/modal/modal.stories.ts

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+import type { USAModalElement } from "./modal.element.js";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: "usa-modal",
+  tags: ["autodocs"],
+  render() {
+    return html`
+      <usa-button modal-target="mymodal">Open Modal</usa-button>
+
+      <usa-modal id="mymodal">
+        <usa-modal-close></usa-modal-close>
+
+        <usa-modal-heading>
+          Are you sure you want to continue?
+        </usa-modal-heading>
+
+        <usa-input placeholder="foo@email.com" autofocus>
+          Enter your email to continue
+        </usa-input>
+
+        <usa-button modal-action="confirm">Yes I am sure</usa-button>
+        <usa-button modal-action="cancel" variant="outline">Cancel</usa-button>
+      </usa-modal>
+    `;
+  },
+  argTypes: {},
+  args: {},
+} satisfies Meta<USAModalElement>;
+
+export default meta;
+
+type Story = StoryObj<USAModalElement>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {},
+};

package/src/lib/modal/modal.test.ts

@@ -0,0 +1,25 @@
+import "./modal.element.js";
+import "./modal-heading/modal-heading.element.js";
+import "./modal-close/modal-close.element.js";
+
+import { fixture, html, assert } from "@open-wc/testing";
+
+import { USAModalElement } from "./modal.element.js";
+
+describe("usa-modal", () => {
+  it("should be accessible", async () => {
+    const modal = await fixture<USAModalElement>(html`
+      <usa-modal open>
+        <usa-modal-close></usa-modal-close>
+
+        <usa-modal-heading>
+          Are you sure you want to continue?
+        </usa-modal-heading>
+
+        <p>This is some other example of content</p>
+      </usa-modal>
+    `);
+
+    return assert.isAccessible(modal);
+  });
+});

package/src/lib/radio/radio.element.ts

@@ -17,6 +17,7 @@ declare global {
         flex-direction: column;
         gap: 1rem;
         max-width: 30rem;
+        margin-bottom: 1.5rem;
       }
 
       label {
@@ -75,10 +76,6 @@ declare global {
       slot {
         display: flex;
       }
-
-      slot#main {
-        margin-bottom: 0.5rem;
-      }
     `,
     html`<slot id="main"></slot>`,
   ],

package/src/lib/select/select.element.ts

@@ -25,6 +25,7 @@ declare global {
         position: relative;
         width: 100%;
         max-width: 30rem;
+        margin-bottom: 1.5rem;
       }
 
       select {