@noctuatech/uswds 1.2.1 → 1.3.1

package/package.json

@@ -1,15 +1,21 @@
 {
   "name": "@noctuatech/uswds",
-  "version": "1.2.1",
+  "version": "1.3.1",
   "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.7",
-    "@joist/element": "^4.2.3-next.7",
-    "@joist/observable": "^4.2.3-next.7",
-    "@joist/templating": "^4.2.3-next.7",
+    "@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",
     "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",
@@ -97,11 +129,14 @@
     "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,4 +1,7 @@
-import { attr, css, element, html, listen, query } from "@joist/element";
+import "@joist/templating/define.js";
+
+import { attr, css, element, html, listen } from "@joist/element";
+import { bind } from "@joist/templating";
 
 import { USAAccordionToggleEvent } from "./events.js";
 
@@ -88,18 +91,20 @@ declare global {
       }
     `,
     html`
-      <details>
-        <summary>
-          <slot name="heading"></slot>
-
-          <usa-icon icon="add"></usa-icon>
-          <usa-icon icon="remove"></usa-icon>
-        </summary>
-
-        <div class="content">
-          <slot></slot>
-        </div>
-      </details>
+      <j-props>
+        <details $.open="open">
+          <summary>
+            <slot name="heading"></slot>
+
+            <usa-icon icon="add"></usa-icon>
+            <usa-icon icon="remove"></usa-icon>
+          </summary>
+
+          <div class="content">
+            <slot></slot>
+          </div>
+        </details>
+      </j-props>
     `,
   ],
 })
@@ -108,14 +113,9 @@ export class USAAccordionElement extends HTMLElement {
   accessor name = "";
 
   @attr()
+  @bind()
   accessor open = false;
 
-  #details = query("details");
-
-  attributeChangedCallback() {
-    this.#details({ open: this.open });
-  }
-
   @listen("click", "summary")
   onClick(e: Event) {
     e.preventDefault();

package/src/lib/breadcrumbs/breadcrumb/breadcrumb.element.ts

@@ -1,4 +1,5 @@
-import { attr, css, element, html, query } from "@joist/element";
+import { attr, css, element, html } from "@joist/element";
+import { bind } from "@joist/templating";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -36,9 +37,11 @@ declare global {
       }
     `,
     html`
-      <a>
-        <slot></slot>
-      </a>
+      <j-props>
+        <a $.href="href">
+          <slot></slot>
+        </a>
+      </j-props>
 
       <usa-icon icon="navigate_next"></usa-icon>
     `,
@@ -46,14 +49,9 @@ declare global {
 })
 export class USABreadcrumbElement extends HTMLElement {
   @attr()
+  @bind()
   accessor href = "";
 
   @attr()
   accessor role = "listitem";
-
-  #a = query("a");
-
-  attributeChangedCallback() {
-    this.#a({ href: this.href });
-  }
 }

package/src/lib/breadcrumbs/breadcrumbs.stories.ts

@@ -10,9 +10,9 @@ const meta = {
   render(args) {
     return html`
       <usa-breadcrumbs ?wrap=${args.wrap}>
-        <usa-breadcrumb href="/">Home</usa-breadcrumb>
-        <usa-breadcrumb href="/">Federal Contracting</usa-breadcrumb>
-        <usa-breadcrumb href="/">Contracting assistance programs</usa-breadcrumb>
+        <usa-breadcrumb href="/home">Home</usa-breadcrumb>
+        <usa-breadcrumb href="/federal-contracting">Federal Contracting</usa-breadcrumb>
+        <usa-breadcrumb href="/contracting-assistance-programs">Contracting assistance programs</usa-breadcrumb>
         <usa-breadcrumb>Economically disadvantaged women-owned small business federal contracting program</usa-breadcrumb>
       </usa-breadcrumbs>
     `;

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

@@ -172,7 +172,7 @@ export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
       <j-if bind="href">
         <template>
           <j-props>
-            <a $href="href" $disabled="disabled" $target="target">
+            <a part="link" $href="href" $disabled="disabled" $target="target">
               <slot></slot>
             </a>
           </j-props>
@@ -180,7 +180,7 @@ export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
 
         <template else>
           <j-props>
-            <button tabindex="0" $type="type" $disabled="disabled" $value="value">
+            <button tabindex="0" part="button" $type="type" $disabled="disabled" $value="value">
               <slot></slot>
             </button>
           </j-props>

package/src/lib/checkbox/checkbox.element.ts

@@ -15,26 +15,16 @@ declare global {
       }
 
       :host {
-        --usa-input-bg-color: #fff;
-        --usa-input-border-color: #5c5c5c;
-        --usa-input-text-color: #1b1b1b;
-        --usa-input-focus-color: #2491ff;
-        --usa-input-disabled-bg-color: #fff;
-        --usa-input-disabled-border-color: #757575;
-        --usa-input-disabled-text-color: #757575;
-        --usa-input-active-color: #005ea2;
-        --usa-input-radius: 0;
-
         display: inline-block;
         max-width: 30rem;
         position: relative;
       }
 
       :host([tiled]) label {
-        background-color: var(--usa-input-bg-color);
-        border: 2px solid var(--usa-input-border-color);
-        border-radius: var(--usa-input-radius);
-        color: var(--usa-input-text-color);
+        background-color: #fff;
+        border: 2px solid #5c5c5c;
+        border-radius: 0.25rem;
+        color: #1b1b1b;
         padding: 0.75rem 1rem 0.75rem 0.75rem;
       }
 
@@ -47,37 +37,37 @@ declare global {
       }
 
       .checkbox {
-        background: var(--usa-input-bg-color);
-        box-shadow: 0 0 0 2px var(--usa-input-text-color);
+        background: #fff;
+        box-shadow: 0 0 0 2px #1b1b1b;
         display: flex;
         align-items: center;
         justify-content: center;
         height: 1.25rem;
         min-width: 1.25rem;
         max-width: 1.25rem;
-        border-radius: var(--usa-input-radius);
+        border-radius: 2px;
         position: relative;
         margin-right: 0.75rem;
       }
 
       input:disabled + .checkbox {
-        background-color: var(--usa-input-disabled-bg-color);
-        box-shadow: 0 0 0 2px var(--usa-input-disabled-border-color);
+        background-color: #fff;
+        box-shadow: 0 0 0 2px #757575;
       }
 
       input:disabled:is(:checked) + .checkbox {
-        background-color: var(--usa-input-disabled-text-color);
-        box-shadow: 0 0 0 2px var(--usa-input-disabled-border-color);
+        background-color: #757575;
+        box-shadow: 0 0 0 2px #757575;
       }
 
       :host([disabled]) label {
-        color: var(--usa-input-disabled-text-color);
+        color: #757575;
         cursor: not-allowed;
       }
 
       input:checked + .checkbox {
-        background-color: var(--usa-input-active-color);
-        box-shadow: 0 0 0 2px var(--usa-input-active-color);
+        background-color: #005ea2;
+        box-shadow: 0 0 0 2px #005ea2;
       }
       
       input:checked + .checkbox::after {
@@ -95,7 +85,7 @@ declare global {
       }
 
       input:focus + .checkbox {
-        outline: 0.25rem solid var(--usa-input-focus-color);
+        outline: 0.25rem solid #2491ff;
         outline-offset: 0.25rem;
       }
 
@@ -112,23 +102,24 @@ declare global {
 
       :host([tiled]) label:has(input:checked) {
         background-color: rgba(0, 94, 162, 0.1);
-        border-color: var(--usa-input-active-color);
+        border-color: #005ea2;
       }
 
       :host([tiled]) label:has(input:checked:is(:disabled)) {
-        background-color: var(--usa-input-disabled-bg-color);
-        border-color: var(--usa-input-disabled-border-color);
+        background-color: #fff;
+        border-color: #757575;
       }
     `,
     html`
       <label>
         <input type="checkbox" tabindex="0"/>
 
-        <div class="checkbox"></div>
+        <div class="checkbox" part="checkbox"></div>
 
-        <div class="title">
-          <slot></slot>
-        </div>
+        <div class="title" part="title">
+            <slot></slot>
+          </div>
+        </j-props>
       </label>
     `,
   ],

package/src/lib/combo-box/combo-box.element.ts

@@ -30,17 +30,6 @@ declare global {
       }
       
       :host {
-        --usa-input-bg-color: #fff;
-        --usa-input-border-color: #5c5c5c;
-        --usa-input-text-color: #1b1b1b;
-        --usa-input-focus-color: #2491ff;
-        --usa-input-disabled-bg-color: #fff;
-        --usa-input-disabled-border-color: #757575;
-        --usa-input-disabled-text-color: #757575;
-        --usa-input-hover-bg-color: #f0f0f0;
-        --usa-combo-max-height: 12.5em;
-        --usa-input-radius: 0;
-
         display: block;
         max-width: 30rem;
         position: relative;
@@ -49,11 +38,11 @@ declare global {
       
       input {
         border-width: 1px;
-        border-color: var(--usa-input-border-color);
+        border-color: #5c5c5c;
         border-style: solid;
-        border-radius: var(--usa-input-radius);
-        color: var(--usa-input-text-color);
-        background-color: var(--usa-input-bg-color);
+        border-radius: 0;
+        color: #1b1b1b;
+        background-color: #fff;
         display: block;
         height: 2.5rem;
         line-height: 1.3;
@@ -65,14 +54,14 @@ declare global {
       }
 
       input:not(:disabled):focus {
-        outline: 0.25rem solid var(--usa-input-focus-color);
+        outline: 0.25rem solid #2491ff;
         outline-offset: 0;
       }
 
       input:disabled {
-        background-color: var(--usa-input-disabled-bg-color);
-        border-color: var(--usa-input-disabled-border-color);
-        color: var(--usa-input-disabled-text-color);
+        background-color: #fff;
+        border-color: #757575;
+        color: #757575;
       }
 
       ul {
@@ -82,8 +71,8 @@ declare global {
         width: 100%;
         transform: translateY(100%);
         margin: 0;
-        border: 1px solid var(--usa-input-border-color);
-        max-height: var(--usa-combo-max-height);
+        border: 1px solid #5c5c5c;
+        max-height: 12.5em;
         overflow-y: scroll;
         z-index: 1001;
       }
@@ -93,7 +82,7 @@ declare global {
       }
 
       ul li {
-        background: var(--usa-input-bg-color);
+        background: #fff;
         list-style: none;
         border-bottom: 1px solid #e6e6e6;
         cursor: pointer;
@@ -101,11 +90,11 @@ declare global {
       }
 
       ul li:hover {
-        background-color: var(--usa-input-hover-bg-color);
+        background-color: #f0f0f0;
       }
 
       li:focus {
-        outline: 0.25rem solid var(--usa-input-focus-color);
+        outline: 0.25rem solid #2491ff;
         outline-offset: -0.25rem;
       }
 
@@ -131,6 +120,7 @@ declare global {
         <slot name="label"></slot>
 
         <input 
+          part="input"
           tabindex="0" 
           role="combobox" 
           autocomplete="off" 

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

@@ -1,16 +1,17 @@
-import "@joist/templating/define.js";
+import '@joist/templating/define.js';
 
-import { css, element, html } from "@joist/element";
-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`
       * {
@@ -25,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;
       }
 
@@ -44,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;
@@ -54,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>
@@ -82,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>
@@ -91,24 +95,21 @@ declare global {
   ],
 })
 export class USAFileInputPreviewElement extends HTMLElement {
-  @bind()
-  accessor fileEntries: FileEntry[] = [];
-
-  #files: FileList | null = null;
+  @observe()
+  accessor files: FileList | null = null;
 
-  get files() {
-    return this.#files;
-  }
-
-  set files(value: FileList | null) {
-    this.#files = value;
+  @bind((i) => {
+    if (!i.files || i.files.length === 0) {
+      return [];
+    }
 
-    this.fileEntries = Array.from(value ?? []).map((file) => ({
+    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[] = [];
 }
 
 interface FileEntry {