@noctuatech/uswds 1.3.2 → 1.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noctuatech/uswds",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "type": "module",
   "workspaces": [
     "packages/**"
@@ -103,10 +103,10 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
-    "@joist/di": "^4.2.3",
-    "@joist/element": "^4.2.3",
-    "@joist/observable": "^4.2.3",
-    "@joist/templating": "^4.2.3",
+    "@joist/di": "^4.2.4-next.2",
+    "@joist/element": "^4.2.4-next.2",
+    "@joist/observable": "^4.2.4-next.2",
+    "@joist/templating": "^4.2.4-next.2",
     "tslib": "2.8.1"
   },
   "devDependencies": {

package/src/lib/accordion/{accordion.test.ts → accordion.element.test.ts}

@@ -1,22 +1,21 @@
-import "./accordion.element.js";
+import './accordion.element.js';
 
-import { assert, fixture, html } from "@open-wc/testing";
-import { screen } from "@testing-library/dom";
-import { userEvent } from "@testing-library/user-event";
+import { assert, fixture, html } from '@open-wc/testing';
+import { screen } from '@testing-library/dom';
+import { userEvent } from '@testing-library/user-event';
 
-import type { USAAccordionElement } from "./accordion.element.js";
+import type { USAAccordionElement } from './accordion.element.js';
 
-describe("usa-accordion", () => {
-  it("should be accessible", async () => {
+describe('usa-accordion', () => {
+  it('should be accessible', async () => {
     const accordion = await fixture<USAAccordionElement>(html`
       <usa-accordion id="first" name="ammendment">
         <h4 slot="heading">First Ammendment</h4>
 
         <div class="content">
-          Congress shall make no law respecting an establishment of religion, or
-          prohibiting the free exercise thereof; or abridging the freedom of
-          speech, or of the press; or the right of the people peaceably to
-          assemble, and to petition the Government for a redress of grievances.
+          Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof;
+          or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to
+          petition the Government for a redress of grievances.
         </div>
       </usa-accordion>
     `);
@@ -24,44 +23,42 @@ describe("usa-accordion", () => {
     return assert.isAccessible(accordion);
   });
 
-  it("should toggle the open state when clicked", async () => {
+  it('should toggle the open state when clicked', async () => {
     const accordion = await fixture<USAAccordionElement>(html`
       <usa-accordion id="first" name="ammendment">
         <h4 slot="heading">First Ammendment</h4>
 
         <div class="content">
-          Congress shall make no law respecting an establishment of religion, or
-          prohibiting the free exercise thereof; or abridging the freedom of
-          speech, or of the press; or the right of the people peaceably to
-          assemble, and to petition the Government for a redress of grievances.
+          Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof;
+          or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to
+          petition the Government for a redress of grievances.
         </div>
       </usa-accordion>
     `);
 
-    const heading = await screen.findByRole("heading");
-    const content = accordion.querySelector<HTMLDivElement>(".content");
+    const heading = await screen.findByRole('heading');
+    const content = accordion.querySelector<HTMLDivElement>('.content');
 
     await userEvent.click(heading);
 
     assert.isTrue(content?.checkVisibility());
   });
 
-  it("should toggle the open state when clicked", async () => {
+  it('should toggle the open state when clicked', async () => {
     const accordion = await fixture<USAAccordionElement>(html`
       <usa-accordion id="first" name="ammendment">
         <h4 slot="heading">First Ammendment</h4>
 
         <div class="content">
-          Congress shall make no law respecting an establishment of religion, or
-          prohibiting the free exercise thereof; or abridging the freedom of
-          speech, or of the press; or the right of the people peaceably to
-          assemble, and to petition the Government for a redress of grievances.
+          Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof;
+          or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to
+          petition the Government for a redress of grievances.
         </div>
       </usa-accordion>
     `);
 
-    const heading = await screen.findByRole("heading");
-    const content = accordion.querySelector<HTMLDivElement>(".content");
+    const heading = await screen.findByRole('heading');
+    const content = accordion.querySelector<HTMLDivElement>('.content');
 
     assert.isFalse(content?.checkVisibility());
 
@@ -70,7 +67,7 @@ describe("usa-accordion", () => {
     assert.isTrue(content.checkVisibility());
   });
 
-  it("should only allow a single accordion in a group to be open", async () => {
+  it('should only allow a single accordion in a group to be open', async () => {
     const el = await fixture(html`
       <section>
         <usa-accordion name="ammendment">
@@ -90,8 +87,8 @@ describe("usa-accordion", () => {
       </section>
     `);
 
-    const headings = el.querySelectorAll("h4");
-    const content = Array.from(el.querySelectorAll<HTMLDivElement>(".content"));
+    const headings = el.querySelectorAll('h4');
+    const content = Array.from(el.querySelectorAll<HTMLDivElement>('.content'));
 
     await userEvent.click(headings[0]);
 
@@ -115,7 +112,7 @@ describe("usa-accordion", () => {
     );
   });
 
-  it("should not close accordion not in the same group", async () => {
+  it('should not close accordion not in the same group', async () => {
     const el = await fixture(html`
       <section>
         <usa-accordion name="ammendment">
@@ -135,8 +132,8 @@ describe("usa-accordion", () => {
       </section>
     `);
 
-    const headings = el.querySelectorAll("h4");
-    const content = Array.from(el.querySelectorAll<HTMLDivElement>(".content"));
+    const headings = el.querySelectorAll('h4');
+    const content = Array.from(el.querySelectorAll<HTMLDivElement>('.content'));
 
     await userEvent.click(headings[0]);
 

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

@@ -79,21 +79,21 @@ declare global {
       }
     `,
     html`
-      <j-props>
-        <details $.open="open">
+      <j-bind props="open">
+        <details>
           <summary>
             <slot name="heading"></slot>
 
-            <j-props>
-              <usa-icon $.icon="icon"></usa-icon>
-            </j-props>
+            <j-bind props="icon">
+              <usa-icon></usa-icon>
+            </j-bind>
           </summary>
 
           <div class="content">
             <slot></slot>
           </div>
         </details>
-      </j-props>
+      </j-bind>
     `,
   ],
 })
@@ -105,7 +105,9 @@ export class USAAccordionElement extends HTMLElement {
   @bind()
   accessor open = false;
 
-  @bind((i) => (i.open ? 'remove' : 'add'))
+  @bind({
+    compute: (i) => (i.open ? 'remove' : 'add'),
+  })
   accessor icon: 'add' | 'remove' = 'add';
 
   @listen('click', 'summary')

package/src/lib/alert/{alert.test.ts → alert.element.test.ts}

@@ -1,10 +1,10 @@
-import "./alert.element.js";
+import './alert.element.js';
 
-import { assert, fixture, html } from "@open-wc/testing";
+import { assert, fixture, html } from '@open-wc/testing';
 
-import { USA_ALERT_TYPES } from "./alert-types.js";
+import { USA_ALERT_TYPES } from './alert-types.js';
 
-describe("usa-alert", () => {
+describe('usa-alert', () => {
   for (const alert of USA_ALERT_TYPES) {
     it(`should be accessible: ${alert}`, async () => {
       const form = await fixture(html`
@@ -12,8 +12,7 @@ describe("usa-alert", () => {
           <h3 slot="heading">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/alert/alert.element.ts

@@ -76,9 +76,9 @@ declare global {
     `,
     html`
       <div class="alert-heading">
-        <j-props>
-          <usa-icon $.icon="icon"></usa-icon>
-        </j-props>
+        <j-bind props="icon">
+          <usa-icon></usa-icon>
+        </j-bind>
 
         <div>
           <slot id="heading" name="heading"></slot>
@@ -98,6 +98,8 @@ export class USAAlertElement extends HTMLElement {
   @observe()
   accessor type: USAAlertType = 'info';
 
-  @bind((i) => USA_ALERT_CONFIG[i.type].icon)
+  @bind({
+    compute: (i) => USA_ALERT_CONFIG[i.type].icon,
+  })
   accessor icon: USAIcon = 'info';
 }

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

@@ -1,14 +1,14 @@
-import { attr, css, element, html } from "@joist/element";
-import { bind } from "@joist/templating";
+import { attr, css, element, html } from '@joist/element';
+import { bind } from '@joist/templating';
 
 declare global {
   interface HTMLElementTagNameMap {
-    "usa-breadcrumb": USABreadcrumbElement;
+    'usa-breadcrumb': USABreadcrumbElement;
   }
 }
 
 @element({
-  tagName: "usa-breadcrumb",
+  tagName: 'usa-breadcrumb',
   shadowDom: [
     css`
       :host {
@@ -33,15 +33,15 @@ declare global {
         height: 1rem;
         width: 1.5rem;
         position: absolute;
-        top: .075rem;
+        top: 0.075rem;
       }
     `,
     html`
-      <j-props>
-        <a $.href="href">
+      <j-bind props="href">
+        <a>
           <slot></slot>
         </a>
-      </j-props>
+      </j-bind>
 
       <usa-icon icon="navigate_next"></usa-icon>
     `,
@@ -50,8 +50,8 @@ declare global {
 export class USABreadcrumbElement extends HTMLElement {
   @attr()
   @bind()
-  accessor href = "";
+  accessor href = '';
 
   @attr()
-  accessor role = "listitem";
+  accessor role = 'listitem';
 }

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

@@ -0,0 +1,23 @@
+import './breadcrumbs.element.js';
+import './breadcrumb/breadcrumb.element.js';
+
+import { assert, fixture, html } from '@open-wc/testing';
+
+import type { USABreadcrumbsElement } from './breadcrumbs.element.js';
+
+describe('usa-breadcrumbs', () => {
+  it('should be accessible', async () => {
+    const breadcrumbs = await fixture<USABreadcrumbsElement>(html`
+      <usa-breadcrumbs>
+        <usa-breadcrumb href="/">Home</usa-breadcrumb>
+        <usa-breadcrumb href="/">Federal Contracting</usa-breadcrumb>
+        <usa-breadcrumb href="/">Contracting assistance programs</usa-breadcrumb>
+        <usa-breadcrumb
+          >Economically disadvantaged women-owned small business federal contracting program</usa-breadcrumb
+        >
+      </usa-breadcrumbs>
+    `);
+
+    return assert.isAccessible(breadcrumbs);
+  });
+});

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

@@ -0,0 +1,15 @@
+import './button.element.js';
+
+import { assert, fixture, html } from '@open-wc/testing';
+
+import { BUTTON_VARIANTS, type USAButtonElement } from './button.element.js';
+
+describe('usa-button', () => {
+  for (const variant of BUTTON_VARIANTS) {
+    it('should be accessible', async () => {
+      const button = await fixture<USAButtonElement>(html` <usa-button variant=${variant}>Hello World</usa-button> `);
+
+      return assert.isAccessible(button);
+    });
+  }
+});

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

@@ -1,28 +1,22 @@
-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';
 
 declare global {
   interface HTMLElementTagNameMap {
-    "usa-button": USAButtonElement;
+    'usa-button': USAButtonElement;
   }
 }
 
-export const BUTTON_VARIANTS = [
-  "primary",
-  "secondary",
-  "cool",
-  "warm",
-  "outline",
-] as const;
+export const BUTTON_VARIANTS = ['primary', 'secondary', 'cool', 'warm', 'outline'] as const;
 
 export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
 
 @element({
-  tagName: "usa-button",
+  tagName: 'usa-button',
   shadowDomOpts: {
-    mode: "open",
+    mode: 'open',
     delegatesFocus: true,
   },
   shadowDom: [
@@ -36,7 +30,8 @@ export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
         overflow: hidden;
       }
 
-      button, a {
+      button,
+      a {
         box-sizing: border-box;
         font-size: 1.06rem;
         line-height: 0.9;
@@ -107,63 +102,63 @@ export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
       }
 
       /** Secondary */
-      :host([variant="secondary"]) :is(button, a) {
+      :host([variant='secondary']) :is(button, a) {
         color: #fff;
         background-color: #d83933;
       }
 
-      :host([variant="secondary"]) :is(button, a):hover {
+      :host([variant='secondary']) :is(button, a):hover {
         background-color: #b50909;
       }
 
-      :host([variant="secondary"]) :is(button, a):active {
+      :host([variant='secondary']) :is(button, a):active {
         background-color: #8b0a03;
       }
 
       /** cool */
-      :host([variant="cool"]) :is(button, a) {
+      :host([variant='cool']) :is(button, a) {
         color: #1b1b1b;
         background-color: #00bde3;
       }
 
-      :host([variant="cool"]) :is(button, a):hover {
+      :host([variant='cool']) :is(button, a):hover {
         background-color: #28a0cb;
       }
 
-      :host([variant="cool"]) :is(button, a):active {
+      :host([variant='cool']) :is(button, a):active {
         color: #fff;
         background-color: #07648d;
       }
 
       /** warm */
-      :host([variant="warm"]) :is(button, a) {
+      :host([variant='warm']) :is(button, a) {
         color: #1b1b1b;
         background-color: #fa9441;
       }
 
-      :host([variant="warm"]) :is(button, a):hover {
+      :host([variant='warm']) :is(button, a):hover {
         color: #fff;
         background-color: #c05600;
       }
 
-      :host([variant="warm"]) :is(button, a):active {
+      :host([variant='warm']) :is(button, a):active {
         color: #fff;
         background-color: #775540;
       }
 
       /** outline */
-      :host([variant="outline"]) :is(button, a) {
+      :host([variant='outline']) :is(button, a) {
         background-color: transparent;
         box-shadow: inset 0 0 0 2px #005ea2;
         color: #005ea2;
       }
 
-      :host([variant="outline"]) :is(button, a):hover {
+      :host([variant='outline']) :is(button, a):hover {
         box-shadow: inset 0 0 0 2px #1a4480;
         color: #1a4480;
       }
 
-      :host([variant="outline"]) :is(button, a):active {
+      :host([variant='outline']) :is(button, a):active {
         box-shadow: inset 0 0 0 2px #162e51;
         color: #162e51;
       }
@@ -171,19 +166,19 @@ export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
     html`
       <j-if bind="href">
         <template>
-          <j-props>
-            <a part="link" $href="href" $disabled="disabled" $target="target">
+          <j-bind props="href,target">
+            <a part="link">
               <slot></slot>
             </a>
-          </j-props>
+          </j-bind>
         </template>
 
         <template else>
-          <j-props>
-            <button tabindex="0" part="button" $type="type" $disabled="disabled" $value="value">
+          <j-bind props="value,type,disabled">
+            <button tabindex="0" part="button">
               <slot></slot>
             </button>
-          </j-props>
+          </j-bind>
         </template>
       </j-if>
     `,
@@ -194,32 +189,32 @@ export class USAButtonElement extends HTMLElement {
 
   @attr()
   @bind()
-  accessor type: "button" | "submit" | "reset" = "button";
+  accessor type: 'button' | 'submit' | 'reset' = 'button';
 
   @attr()
   @bind()
   accessor disabled = false;
 
   @attr()
-  accessor variant: ButtonVariant = "primary";
+  accessor variant: ButtonVariant = 'primary';
 
   @attr()
   @bind()
-  accessor value = "";
+  accessor value = '';
 
   @attr()
   @bind()
-  accessor href = "";
+  accessor href = '';
 
   @attr()
   @bind()
-  accessor target = "";
+  accessor target = '';
 
   accessor tabIndex = 0;
 
   #internals = this.attachInternals();
 
-  @listen("click")
+  @listen('click')
   onInternalClick() {
     this.#handleForm();
   }
@@ -228,17 +223,17 @@ export class USAButtonElement extends HTMLElement {
     const { form } = this.#internals;
 
     if (form) {
-      if (this.type === "submit") {
+      if (this.type === 'submit') {
         this.#submit(form);
-      } else if (this.type === "reset") {
+      } else if (this.type === 'reset') {
         form.reset();
       }
     }
   }
 
   #submit(form: HTMLFormElement) {
-    const btn = document.createElement("button");
-    btn.type = "submit";
+    const btn = document.createElement('button');
+    btn.type = 'submit';
     form.append(btn);
 
     btn.click();

package/src/lib/button-group/button-group.element.test.ts

@@ -0,0 +1,13 @@
+import './button-group.element.js';
+
+import { assert, fixture, html } from '@open-wc/testing';
+
+import type { USAButtonGroupElement } from './button-group.element.js';
+
+describe('usa-button-group', () => {
+  it('should be accessible', async () => {
+    const buttonGroup = await fixture<USAButtonGroupElement>(html` <usa-button-group>Hello World</usa-button-group> `);
+
+    return assert.isAccessible(buttonGroup);
+  });
+});

package/src/lib/card/{card.test.ts → card.element.test.ts}

@@ -1,16 +1,16 @@
-import "./card.element.js";
-import "./card-body/card-body.element.js";
-import "./card-footer/card-footer.element.js";
-import "./card-group/card-group.element.js";
-import "./card-header/card-header.element.js";
-import "./card-media/card-media.element.js";
+import './card.element.js';
+import './card-body/card-body.element.js';
+import './card-footer/card-footer.element.js';
+import './card-group/card-group.element.js';
+import './card-header/card-header.element.js';
+import './card-media/card-media.element.js';
 
-import { assert, fixture, html } from "@open-wc/testing";
+import { assert, fixture, html } from '@open-wc/testing';
 
-import type { USACardElement } from "./card.element.js";
+import type { USACardElement } from './card.element.js';
 
-describe("usa-card", () => {
-  it("should be accessible", async () => {
+describe('usa-card', () => {
+  it('should be accessible', async () => {
     const card = await fixture<USACardElement>(html`
       <usa-card-group>
         <usa-card>
@@ -21,8 +21,8 @@ describe("usa-card", () => {
           <usa-card-header>Card with media</usa-card-header>
 
           <usa-card-body>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
-            earum tenetur quo cupiditate, eaque qui officia recusandae.
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui
+            officia recusandae.
           </usa-card-body>
 
           <usa-card-footer>