@noctuatech/uswds 1.3.1 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noctuatech/uswds",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "type": "module",
   "workspaces": [
     "packages/**"
@@ -103,10 +103,10 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
-    "@joist/di": "^4.2.3-next.14",
-    "@joist/element": "^4.2.3-next.14",
-    "@joist/observable": "^4.2.3-next.14",
-    "@joist/templating": "^4.2.3-next.14",
+    "@joist/di": "^4.2.3",
+    "@joist/element": "^4.2.3",
+    "@joist/observable": "^4.2.3",
+    "@joist/templating": "^4.2.3",
     "tslib": "2.8.1"
   },
   "devDependencies": {
@@ -124,7 +124,7 @@
     "@web/test-runner": "^0.20.0",
     "husky": "^9.0.11",
     "js-beautify": "^1.15.1",
-    "lint-staged": "^15.2.2",
+    "lint-staged": "^16.0.0",
     "lit": "^3.2.1",
     "minify-literals": "^1.0.10",
     "mocha": "^11.0.0",

package/src/lib/accordion/accordion.element.ts

@@ -1,20 +1,20 @@
-import "@joist/templating/define.js";
+import '@joist/templating/define.js';
 
-import { attr, css, element, html, listen } from "@joist/element";
-import { bind } from "@joist/templating";
+import { attr, css, element, html, listen } from '@joist/element';
+import { bind } from '@joist/templating';
 
-import { USAAccordionToggleEvent } from "./events.js";
+import { USAAccordionToggleEvent } from './events.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    "usa-accordion": USAAccordionElement;
+    'usa-accordion': USAAccordionElement;
   }
 }
 
 @element({
-  tagName: "usa-accordion",
+  tagName: 'usa-accordion',
   shadowDomOpts: {
-    mode: "open",
+    mode: 'open',
     delegatesFocus: true,
   },
   shadowDom: [
@@ -54,12 +54,12 @@ declare global {
         display: none;
       }
 
-      slot[name="heading"] {
+      slot[name='heading'] {
         display: block;
         flex: 1 1 auto;
       }
 
-      slot[name="heading"]::slotted(*) {
+      slot[name='heading']::slotted(*) {
         margin: 0;
       }
 
@@ -69,18 +69,6 @@ declare global {
         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;
       }
@@ -96,8 +84,9 @@ declare global {
           <summary>
             <slot name="heading"></slot>
 
-            <usa-icon icon="add"></usa-icon>
-            <usa-icon icon="remove"></usa-icon>
+            <j-props>
+              <usa-icon $.icon="icon"></usa-icon>
+            </j-props>
           </summary>
 
           <div class="content">
@@ -110,20 +99,23 @@ declare global {
 })
 export class USAAccordionElement extends HTMLElement {
   @attr()
-  accessor name = "";
+  accessor name = '';
 
   @attr()
   @bind()
   accessor open = false;
 
-  @listen("click", "summary")
+  @bind((i) => (i.open ? 'remove' : 'add'))
+  accessor icon: 'add' | 'remove' = 'add';
+
+  @listen('click', 'summary')
   onClick(e: Event) {
     e.preventDefault();
 
     this.dispatchEvent(new USAAccordionToggleEvent(!this.open));
   }
 
-  @listen("usa::accordion::toggle", () => document.body)
+  @listen('usa::accordion::toggle', () => document.body)
   onAccordionToggle(e: USAAccordionToggleEvent) {
     if (e.target.name === this.name) {
       this.open = e.target === this && e.open;

package/src/lib/alert/alert.element.ts

@@ -1,17 +1,20 @@
-import { attr, css, element, html, query } from "@joist/element";
+import { attr, css, element, html, query } from '@joist/element';
 
-import { type USAAlertType, USA_ALERT_CONFIG } from "./alert-types.js";
+import { type USAAlertType, USA_ALERT_CONFIG } from './alert-types.js';
+import { bind } from '@joist/templating';
+import { USAIcon } from '../icon/icon-types.js';
+import { observe } from '@joist/observable';
 
 declare global {
   interface HTMLElementTagNameMap {
-    "usa-alert": USAAlertElement;
+    'usa-alert': USAAlertElement;
   }
 }
 
 @element({
-  tagName: "usa-alert",
+  tagName: 'usa-alert',
   shadowDomOpts: {
-    mode: "open",
+    mode: 'open',
     delegatesFocus: true,
   },
   shadowDom: [
@@ -24,33 +27,33 @@ declare global {
         margin-bottom: 1rem;
       }
 
-      :host([type="info"]) {
+      :host([type='info']) {
         border-left-color: #00bde3;
         background-color: #e7f6f8;
       }
 
-      :host([type="warning"]) {
+      :host([type='warning']) {
         background-color: #faf3d1;
         border-left-color: #ffbe2e;
       }
 
-      :host([type="success"]) {
+      :host([type='success']) {
         background-color: #ecf3ec;
         border-left-color: #00a91c;
       }
 
-      :host([type="error"]) {
+      :host([type='error']) {
         background-color: #f4e3db;
         border-left-color: #d54309;
       }
 
-      :host([type="emergency"]) {
+      :host([type='emergency']) {
         background-color: #9c3d10;
         border-left-color: #9c3d10;
         color: #fff;
       }
 
-      :host([type="emergency"]) ::slotted(*) {
+      :host([type='emergency']) ::slotted(*) {
         color: #fff;
       }
 
@@ -73,7 +76,9 @@ declare global {
     `,
     html`
       <div class="alert-heading">
-        <usa-icon icon="check_circle"></usa-icon>
+        <j-props>
+          <usa-icon $.icon="icon"></usa-icon>
+        </j-props>
 
         <div>
           <slot id="heading" name="heading"></slot>
@@ -90,13 +95,9 @@ declare global {
 })
 export class USAAlertElement extends HTMLElement {
   @attr()
-  accessor type: USAAlertType = "info";
+  @observe()
+  accessor type: USAAlertType = 'info';
 
-  #icon = query("usa-icon");
-
-  attributeChangedCallback() {
-    this.#icon({
-      icon: USA_ALERT_CONFIG[this.type].icon,
-    });
-  }
+  @bind((i) => USA_ALERT_CONFIG[i.type].icon)
+  accessor icon: USAIcon = 'info';
 }

package/src/lib/alert/alert.stories.ts

@@ -1,12 +1,12 @@
-import type { Meta, StoryObj } from "@storybook/web-components";
-import { html } from "lit";
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
 
-import type { USAAlertElement } from "./alert.element.js";
+import type { USAAlertElement } from './alert.element.js';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
-  title: "usa-alert",
-  tags: ["autodocs"],
+  title: 'usa-alert',
+  tags: ['autodocs'],
   argTypes: {},
   args: {},
 } satisfies Meta<USAAlertElement>;
@@ -22,8 +22,7 @@ export const Info: Story = {
         <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-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do eiusmod.
       </usa-alert>
     `;
   },
@@ -36,8 +35,7 @@ export const Warning: Story = {
         <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-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do eiusmod.
       </usa-alert>
     `;
   },
@@ -50,8 +48,7 @@ export const Success: Story = {
         <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-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do eiusmod.
       </usa-alert>
     `;
   },
@@ -65,8 +62,7 @@ export const Error: Story = {
         <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-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do eiusmod.
       </usa-alert>
     `;
   },
@@ -79,8 +75,7 @@ export const Emergency: Story = {
         <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-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do eiusmod.
       </usa-alert>
     `;
   },

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

@@ -77,29 +77,39 @@ declare global {
       }
     `,
     html`
-      <label>
+      <label for="file-input">
         <slot class="label"></slot>
-
-        <div class="container">
-          <input type="file" tabindex="0" />
-
-          <j-if bind="filesVisible">
-            <template>
-              <j-props>
-                <usa-file-input-preview $.files="files" part="preview" exportparts="heading, item">
-                  Selected file <usa-link>Change file</usa-link>
-                </usa-file-input-preview>
-              </j-props>
-            </template>
-
-            <template else>
-              <div class="box" part="input">
-                <slot name="description"> Drag file here or <usa-link>choose from folder</usa-link> </slot>
-              </div>
-            </template>
-          </j-if>
-        </div>
       </label>
+
+      <div class="container">
+        <j-props>
+          <input
+            id="file-input"
+            type="file"
+            tabindex="0"
+            $.name="name"
+            $.multiple="multiple"
+            $.accept="accept"
+            $.required="required"
+          />
+        </j-props>
+
+        <j-if bind="filesVisible">
+          <template>
+            <j-props>
+              <usa-file-input-preview $.files="files" part="preview" exportparts="heading, item">
+                Selected file&nbsp;<usa-link>Change file</usa-link>
+              </usa-file-input-preview>
+            </j-props>
+          </template>
+
+          <template else>
+            <div class="box" part="input">
+              <slot name="description"> Drag file here or <usa-link>choose from folder</usa-link> </slot>
+            </div>
+          </template>
+        </j-if>
+      </div>
     `,
   ],
 })
@@ -107,15 +117,19 @@ export class USAFileInputElement extends HTMLElement {
   static formAssociated = true;
 
   @attr()
+  @bind()
   accessor name = '';
 
   @attr()
+  @bind()
   accessor multiple = true;
 
   @attr()
+  @bind()
   accessor accept = '';
 
   @attr()
+  @bind()
   accessor required = false;
 
   @bind()
@@ -127,15 +141,6 @@ export class USAFileInputElement extends HTMLElement {
   #internals = this.attachInternals();
   #input = query('input');
 
-  attributeChangedCallback() {
-    this.#input({
-      name: this.name,
-      multiple: this.multiple,
-      accept: this.accept,
-      required: this.required,
-    });
-  }
-
   connectedCallback() {
     const input = this.#input();
 
@@ -146,7 +151,7 @@ export class USAFileInputElement extends HTMLElement {
 
   @effect()
   syncFormValues() {
-    const input = this.#input({ files: this.files });
+    const input = this.#input();
 
     const formData = new FormData();
 

package/src/lib/icon/icon.element.ts

@@ -1,17 +1,18 @@
-import { inject, injectable } from "@joist/di";
-import { attr, css, element } from "@joist/element";
+import { inject, injectable, injected } from '@joist/di';
+import { attr, css, element } from '@joist/element';
 
-import { IconService } from "../services/icon.service.js";
-import type { USAIcon } from "./icon-types.js";
+import { IconService } from '../services/icon.service.js';
+import type { USAIcon } from './icon-types.js';
+import { effect, observe } from '@joist/observable';
 
 declare global {
   interface HTMLElementTagNameMap {
-    "usa-icon": USAIconElement;
+    'usa-icon': USAIconElement;
   }
 }
 
 @element({
-  tagName: "usa-icon",
+  tagName: 'usa-icon',
   shadowDom: [
     css`
       :host {
@@ -30,41 +31,50 @@ declare global {
   ],
 })
 @injectable({
-  name: "usa-icon-ctx",
+  name: 'usa-icon-ctx',
 })
 export class USAIconElement extends HTMLElement {
   @attr()
-  accessor icon: USAIcon = "accessibility_new";
+  @observe()
+  accessor icon: USAIcon | '' = '';
 
-  ariaHidden: string | null = "true";
+  ariaHidden: string | null = 'true';
 
   #icon = inject(IconService);
-  #injected = false;
+  #abortController: AbortController | null = null;
 
-  attributeChangedCallback(_: string, newVal: string, oldVal: string) {
-    if (this.#injected) {
-      if (newVal !== oldVal) {
-        this.#updateIcon();
-      }
-    }
+  connectedCallback() {
+    this.#updateIcon();
   }
 
-  connectedCallback() {
-    this.#injected = true;
+  @effect()
+  onIconUpdate() {
+    console.log('onIconUpdate', this.icon);
+
     this.#updateIcon();
   }
 
   async #updateIcon() {
-    const icon = this.#icon();
-
-    if (this.shadowRoot) {
-      const currentIcon = await icon.getIcon(this.icon);
+    this.#abortController?.abort();
+    this.#abortController = new AbortController();
 
-      if (this.shadowRoot.firstElementChild) {
-        this.shadowRoot.firstElementChild.replaceWith(currentIcon);
-      } else {
-        this.shadowRoot.append(currentIcon);
-      }
+    if (!this.icon) {
+      return;
     }
+
+    const icon = this.#icon();
+
+    icon
+      .getIcon(this.icon, this.#abortController?.signal)
+      .then((currentIcon) => {
+        if (this.shadowRoot) {
+          if (this.shadowRoot.firstElementChild) {
+            this.shadowRoot.firstElementChild.replaceWith(currentIcon);
+          } else {
+            this.shadowRoot.append(currentIcon);
+          }
+        }
+      })
+      .catch(() => {});
   }
 }

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

@@ -1,16 +1,16 @@
-import { attr, css, element, html, listen, query, ready } from "@joist/element";
-import { effect, observe } from "@joist/observable";
+import { attr, css, element, html, listen, query, ready } from '@joist/element';
+import { effect, observe } from '@joist/observable';
 
-import type { MaskableElement } from "../input-mask/maskable.element.js";
+import type { MaskableElement } from '../input-mask/maskable.element.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    "usa-input": USATextInputElement;
+    'usa-input': USATextInputElement;
   }
 }
 
 @element({
-  tagName: "usa-input",
+  tagName: 'usa-input',
   shadowDom: [
     css`
       * {
@@ -54,31 +54,31 @@ declare global {
         color: #757575;
       }
 
-      slot[name="detail"]::slotted(*) {
+      slot[name='detail']::slotted(*) {
         color: #757575;
       }
 
-      slot[name="detail"]::slotted(usa-icon) {
+      slot[name='detail']::slotted(usa-icon) {
         width: 1.5rem;
         height: 1.5rem;
       }
 
-      slot[name="detail"] {
+      slot[name='detail'] {
         display: block;
         position: absolute;
         bottom: 0.21rem;
         left: 0.5rem;
       }
 
-      :host([detail="pfx"]) input {
+      :host([detail='pfx']) input {
         padding-left: 2.5rem;
       }
 
-      :host([detail="sfx"]) input {
+      :host([detail='sfx']) input {
         padding-right: 2.5rem;
       }
 
-      :host([detail="sfx"]) slot[name="detail"] {
+      :host([detail='sfx']) slot[name='detail'] {
         right: 0.5rem;
         left: auto;
       }
@@ -94,26 +94,23 @@ declare global {
     `,
   ],
 })
-export class USATextInputElement
-  extends HTMLElement
-  implements MaskableElement
-{
+export class USATextInputElement extends HTMLElement implements MaskableElement {
   static formAssociated = true;
 
   @attr()
-  accessor name = "";
+  accessor name = '';
 
   @attr()
-  accessor autocomplete: AutoFill = "on";
+  accessor autocomplete: AutoFill = 'on';
 
   @attr()
-  accessor placeholder = "";
+  accessor placeholder = '';
 
   @attr()
-  accessor min = "";
+  accessor min = '';
 
   @attr()
-  accessor max = "";
+  accessor max = '';
 
   @attr()
   accessor minLength = -1;
@@ -128,18 +125,16 @@ export class USATextInputElement
   accessor disabled = false;
 
   @attr()
-  accessor type: "text" | "password" | "number" = "text";
+  accessor type: 'text' | 'password' | 'number' = 'text';
 
-  @attr({
-    observed: false,
-  })
-  accessor detail: "pfx" | "sfx" | "" = "";
+  @attr()
+  accessor detail: 'pfx' | 'sfx' | '' = '';
 
   @attr({
     reflect: false,
   })
   @observe()
-  accessor value = "";
+  accessor value = '';
 
   @observe()
   accessor selectionStart: number | null = null;
@@ -152,14 +147,14 @@ export class USATextInputElement
   }
 
   #internals = this.attachInternals();
-  #input = query("input");
+  #input = query('input');
 
   @ready()
   onReady() {
     this.#input({ autofocus: this.autofocus });
   }
 
-  attributeChangedCallback(attr: string) {
+  attributeChangedCallback() {
     this.#input({
       autocomplete: this.autocomplete,
       placeholder: this.placeholder,
@@ -191,14 +186,14 @@ export class USATextInputElement
     this.#syncFormState();
   }
 
-  @listen("keydown")
+  @listen('keydown')
   onKeyDown(e: KeyboardEvent) {
     const form = this.#internals.form;
 
     if (form) {
       const hasModifier = e.metaKey || e.ctrlKey || e.shiftKey || e.altKey;
 
-      if (e.key.toUpperCase() === "ENTER" && !hasModifier) {
+      if (e.key.toUpperCase() === 'ENTER' && !hasModifier) {
         // this makes sure that the user has a chance to cancel the event before submitting
         setTimeout(() => {
           if (!e.defaultPrevented && !e.isComposing) {
@@ -209,7 +204,7 @@ export class USATextInputElement
     }
   }
 
-  @listen("input")
+  @listen('input')
   onInputChange() {
     const input = this.#input();
 
@@ -222,20 +217,16 @@ export class USATextInputElement
     const input = this.#input();
 
     this.#internals.setValidity({});
-    this.#internals.setFormValue(input.value);
+    this.#internals.setFormValue(this.value);
 
     if (input.validationMessage) {
-      this.#internals.setValidity(
-        { customError: true },
-        input.validationMessage,
-        input,
-      );
+      this.#internals.setValidity({ customError: true }, input.validationMessage, input);
     }
   }
 
   #submit(form: HTMLFormElement) {
-    const btn = document.createElement("button");
-    btn.type = "submit";
+    const btn = document.createElement('button');
+    btn.type = 'submit';
     form.append(btn);
 
     btn.click();