@noctuatech/uswds 1.2.1 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noctuatech/uswds",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "type": "module",
   "workspaces": ["packages/**"],
   "main": "./target/lib.js",
@@ -70,10 +70,10 @@
   "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": {

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,6 +1,7 @@
 import "@joist/templating/define.js";
 
 import { css, element, html } from "@joist/element";
+import { observe } from "@joist/observable";
 import { bind } from "@joist/templating";
 
 declare global {
@@ -91,24 +92,21 @@ declare global {
   ],
 })
 export class USAFileInputPreviewElement extends HTMLElement {
-  @bind()
-  accessor fileEntries: FileEntry[] = [];
-
-  #files: FileList | null = null;
-
-  get files() {
-    return this.#files;
-  }
+  @observe()
+  accessor files: FileList | null = null;
 
-  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"),
     }));
-  }
+  })
+  accessor fileEntries: FileEntry[] = [];
 }
 
 interface FileEntry {

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

@@ -19,9 +19,6 @@ declare global {
       }
 
       :host {
-        --usa-input-radius: 0;
-        --usa-input-bg-color: #d9e8f6;
-        
         display: block;
         max-width: 30rem;
         position: relative;
@@ -64,7 +61,7 @@ declare global {
 
       .box {
         border: 1px dashed #adadad;
-        border-radius: var(--usa-input-radius);
+        border-radius: 0;
         display: flex;
         font-size: 0.93rem;
         position: relative;
@@ -87,16 +84,16 @@ declare global {
           <input type="file" tabindex="0"/>
 
           <j-if bind="filesVisible">
-              <template>
-                <j-props>
-                <usa-file-input-preview $.files="files">
+            <template>
+              <j-props>
+                <usa-file-input-preview $.files="files" part="preview">
                   Selected file <usa-link>Change file</usa-link>
                 </usa-file-input-preview>
               </j-props>
             </template>
 
             <template else>
-              <div class="box">
+              <div class="box" part="input">
                 <slot name="description">
                   Drag file here or <usa-link>choose from folder</usa-link>
                 </slot>
@@ -126,7 +123,7 @@ export class USAFileInputElement extends HTMLElement {
   @bind()
   accessor files: FileList | null = null;
 
-  @bind()
+  @bind((i) => !!i.files?.length)
   accessor filesVisible = false;
 
   #internals = this.attachInternals();
@@ -183,7 +180,6 @@ export class USAFileInputElement extends HTMLElement {
     const input = this.#input();
 
     this.files = input.files;
-    this.filesVisible = !!input.files?.length;
 
     this.dispatchEvent(new Event("change"));
   }
@@ -218,7 +214,6 @@ export class USAFileInputElement extends HTMLElement {
       }
 
       this.files = data.files;
-      this.filesVisible = !!this.files?.length;
     }
   }
 }

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

@@ -18,15 +18,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-radius: 0;
-
         font-size: 1.06rem;
         line-height: 1.3;
         display: block;
@@ -37,12 +28,12 @@ declare global {
       }
 
       input {
-        background-color: var(--usa-input-bg-color);
+        background-color: #fff;
         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);
+        border-radius: 0;
+        color: #1b1b1b;
         display: block;
         height: 2.5rem;
         line-height: 1.3;
@@ -53,14 +44,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;
       }
 
       slot[name="detail"]::slotted(*) {
@@ -98,7 +89,7 @@ declare global {
 
         <slot></slot>
 
-        <input tabindex="0" />
+        <input tabindex="0" part="input" />
       </label>
     `,
   ],

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

@@ -29,7 +29,7 @@ declare global {
       }
     `,
     html`
-      <h2>
+      <h2 part="heading">
         <slot></slot>
       </h2>
     `,

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

@@ -38,7 +38,7 @@ declare global {
       }
     `,
     html`
-      <dialog>
+      <dialog part="dialog">
         <slot></slot>
       </dialog>
     `,

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

@@ -31,9 +31,11 @@ declare global {
         --usa-radio-focus-color: var(--usa-input-focus-color);
         --usa-input-radius: 0;
 
-        display: inline-block;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
         max-width: 30rem;
-        position: relative;
+        margin-bottom: 1.5rem;
       }
 
       label {
@@ -97,7 +99,7 @@ declare global {
       :host([tiled]) label {
         background-color: var(--usa-input-bg-color);
         border: 2px solid var(--usa-input-border-color);
-        border-radius: var(--usa-input-radius);
+        border-radius: 0.25rem;
         color: var(--usa-input-text-color);
         padding: 0.75rem 1rem 0.75rem 0.75rem;
       }

package/src/lib/range-slider/range-slider.element.ts

@@ -55,11 +55,11 @@ declare global {
       }
     `,
     html`
-      <label>
+      <label part="label">
         <slot></slot>
       </label>
 
-      <input type="range">
+      <input type="range" part="input">
     `,
   ],
 })

package/src/lib/search/search.element.ts

@@ -40,11 +40,11 @@ declare global {
     `,
     html`
       <form>
-        <usa-input>
+        <usa-input exportparts="input">
           <slot></slot>
         </usa-input>
 
-        <usa-button type="submit">Search</usa-button>
+        <usa-button type="submit" exportparts="button,link">Search</usa-button>
       </form>
     `,
   ],

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

@@ -18,15 +18,6 @@ declare global {
   shadowDom: [
     css`
       :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-radius: 0;
-
         display: block;
         line-height: 1.3;
         position: relative;
@@ -39,11 +30,11 @@ declare global {
         font-size: 1.06rem;
         appearance: none;
         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;
         margin-top: 0.5rem;
@@ -52,14 +43,14 @@ declare global {
       }
 
       select:not(:disabled):focus {
-        outline: 0.25rem solid var(--usa-input-focus-color);
+        outline: 0.25rem solid #2491ff;
         outline-offset: 0;
       }
 
       select: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;
       }
 
       usa-icon {
@@ -74,11 +65,11 @@ declare global {
       <usa-icon icon="unfold_more"></usa-icon>
 
       <label>
-        <div class="label">
+        <div class="label" part="label">
           <slot></slot>
         </div>
 
-        <select></select>
+        <select part="select"></select>
       </label>
     `,
   ],