@noctuatech/uswds 1.3.0 → 1.3.2

package/package.json

@@ -1,15 +1,21 @@
 {
   "name": "@noctuatech/uswds",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "type": "module",
-  "workspaces": ["packages/**"],
+  "workspaces": [
+    "packages/**"
+  ],
   "main": "./target/lib.js",
   "module": "./target/lib.js",
   "exports": {
     ".": "./target/lib.js",
     "./*": "./target/lib/*"
   },
-  "files": ["src", "target", "assets"],
+  "files": [
+    "src",
+    "target",
+    "assets"
+  ],
   "scripts": {
     "test": "wireit",
     "build": "wireit",
@@ -22,14 +28,23 @@
   "wireit": {
     "prepare": {
       "command": "husky",
-      "dependencies": ["copy_icons"]
+      "dependencies": [
+        "copy_icons"
+      ]
     },
     "test": {
       "command": "wtr",
-      "dependencies": ["tsc", "build_testing_library"]
+      "dependencies": [
+        "tsc",
+        "build_testing_library"
+      ]
     },
     "build": {
-      "dependencies": ["tsc", "build_storybook", "minify_html_literals"]
+      "dependencies": [
+        "tsc",
+        "build_storybook",
+        "minify_html_literals"
+      ]
     },
     "preview": {
       "command": "eleventy --serve --incremental",
@@ -46,39 +61,56 @@
     },
     "build_testing_library": {
       "command": "./scripts/build_testing_library.sh",
-      "files": ["node_modules/@testing-library/**"],
-      "output": ["testing-library/**"]
+      "files": [
+        "node_modules/@testing-library/**"
+      ],
+      "output": [
+        "testing-library/**"
+      ]
     },
     "tsc": {
       "command": "tsc --build --pretty",
       "clean": "if-file-deleted",
-      "files": ["src/**", "tsconfig.json"],
-      "output": ["target/**", "tsconfig.tsbuildinfo"]
+      "files": [
+        "src/**",
+        "tsconfig.json"
+      ],
+      "output": [
+        "target/**",
+        "tsconfig.tsbuildinfo"
+      ]
     },
     "copy_icons": {
       "command": "./scripts/copy_usa_icons.sh",
-      "files": ["node_modules/@uswds/uswds/dist/img/usa-icons/**"],
-      "output": ["assets/usa-icon/**"]
+      "files": [
+        "node_modules/@uswds/uswds/dist/img/usa-icons/**"
+      ],
+      "output": [
+        "assets/usa-icon/**"
+      ]
     },
     "minify_html_literals": {
       "command": "./scripts/minify_html_literals.js",
-      "files": ["target/**/*.js"],
-      "dependencies": ["tsc"]
+      "files": [
+        "target/**/*.js"
+      ],
+      "dependencies": [
+        "tsc"
+      ]
     }
   },
   "author": "",
   "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": {
     "@11ty/eleventy": "^3.0.0",
-    "@biomejs/biome": "1.9.4",
     "@open-wc/testing": "^4.0.0",
     "@storybook/addon-essentials": "^8.6.0",
     "@storybook/web-components": "^8.6.0",
@@ -92,16 +124,19 @@
     "@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",
     "plop": "^4.0.1",
+    "prettier": "^3.5.3",
     "storybook": "^8.6.0",
     "typescript": "^5.8.0",
     "wireit": "^0.14.9"
   },
   "lint-staged": {
-    "*": ["biome check --write --no-errors-on-unmatched"]
+    "*": [
+      "prettier --write --ignore-unknown"
+    ]
   }
 }

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-preview/file-input-preview.element.ts

@@ -1,17 +1,17 @@
-import "@joist/templating/define.js";
+import '@joist/templating/define.js';
 
-import { css, element, html } from "@joist/element";
-import { observe } from "@joist/observable";
-import { bind } from "@joist/templating";
+import { css, element, html } from '@joist/element';
+import { observe } from '@joist/observable';
+import { bind } from '@joist/templating';
 
 declare global {
   interface HTMLElementTagNameMap {
-    "usa-file-input-preview": USAFileInputPreviewElement;
+    'usa-file-input-preview': USAFileInputPreviewElement;
   }
 }
 
 @element({
-  tagName: "usa-file-input-preview",
+  tagName: 'usa-file-input-preview',
   shadowDom: [
     css`
       * {
@@ -26,7 +26,7 @@ declare global {
         text-align: left;
         word-wrap: anywhere;
         z-index: 3;
-        border-radius: var(--usa-input-radius);
+        border-radius: 0;
         overflow: hidden;
       }
 
@@ -45,8 +45,8 @@ declare global {
       }
 
       .preview-heading {
+        background: #d9e8f6;
         align-items: center;
-        background: var(--usa-input-bg-color);
         display: flex;
         pointer-events: none;
         position: relative;
@@ -55,23 +55,26 @@ declare global {
         justify-content: space-between;
         padding: 0.5rem;
         text-align: left;
+        font-size: 0.93rem;
+        line-height: 1.6;
       }
 
       .preview-item {
+        background: #d9e8f6;
         align-items: center;
-        background: var(--usa-input-bg-color);
         display: flex;
         padding: 0.5rem;
         width: 100%;
         margin-top: 1px;
+        margin-bottom: 1px;
       }
     `,
     html`
-      <slot class="preview-heading"></slot>
-      
+      <slot class="preview-heading" part="heading"></slot>
+
       <j-for bind="fileEntries" key="src">
         <template>
-          <div class="preview-item">
+          <div class="preview-item" part="item">
             <j-if bind="each.value.isImage">
               <template>
                 <j-props>
@@ -83,7 +86,7 @@ declare global {
                 <usa-icon icon="file_present"></usa-icon>
               </template>
             </j-if>
-            
+
             <j-value bind="each.value.file.name"></j-value>
           </div>
         </template>
@@ -103,7 +106,7 @@ export class USAFileInputPreviewElement extends HTMLElement {
     return Array.from(i.files).map((file) => ({
       file,
       src: URL.createObjectURL(file),
-      isImage: file.type.startsWith("image"),
+      isImage: file.type.startsWith('image'),
     }));
   })
   accessor fileEntries: FileEntry[] = [];