@noctuatech/uswds 1.3.16 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noctuatech/uswds",
-  "version": "1.3.16",
+  "version": "1.4.0",
   "type": "module",
   "workspaces": [
     "packages/**"
@@ -104,19 +104,18 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
-    "@joist/di": "^4.2.4-next.5",
-    "@joist/element": "^4.2.4-next.5",
-    "@joist/observable": "^4.2.4-next.5",
-    "@joist/templating": "^4.2.4-next.5",
+    "@joist/di": "^4.2.4-next.17",
+    "@joist/element": "^4.2.4-next.17",
+    "@joist/observable": "^4.2.4-next.17",
+    "@joist/templating": "^4.2.4-next.17",
     "tslib": "2.8.1"
   },
   "devDependencies": {
     "@11ty/eleventy": "^3.0.0",
-    "@chromatic-com/storybook": "^4.0.0",
+    "@chromatic-com/storybook": "^4.0.1",
     "@open-wc/testing": "^4.0.0",
-    "@storybook/addon-docs": "^9.0.4",
-    "@storybook/web-components": "^9.0.4",
-    "@storybook/web-components-vite": "^9.0.4",
+    "@storybook/addon-docs": "^9.0.16",
+    "@storybook/web-components-vite": "^9.0.16",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/mocha": "^10.0.7",
@@ -132,7 +131,7 @@
     "mocha": "^11.0.0",
     "plop": "^4.0.1",
     "prettier": "^3.5.3",
-    "storybook": "^9.0.4",
+    "storybook": "^9.0.16",
     "typescript": "^5.8.0",
     "wireit": "^0.14.9"
   },

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

@@ -1,4 +1,4 @@
-import '@joist/templating/define.js';
+import '../templating.js';
 
 import { attr, css, element, html, listen } from '@joist/element';
 import { bind } from '@joist/templating';
@@ -79,21 +79,21 @@ declare global {
       }
     `,
     html`
-      <j-bind props="open">
+      <usa-bind props="open">
         <details>
           <summary>
             <slot name="heading"></slot>
 
-            <j-bind props="icon">
+            <usa-bind props="icon">
               <usa-icon></usa-icon>
-            </j-bind>
+            </usa-bind>
           </summary>
 
           <div class="content">
             <slot></slot>
           </div>
         </details>
-      </j-bind>
+      </usa-bind>
     `,
   ],
 })

package/src/lib/accordion/accordion.stories.ts

@@ -1,43 +1,40 @@
-import type { Meta, StoryObj } from "@storybook/web-components";
-import { html } from "lit";
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import { html } from 'lit';
 
-import type { USAAccordionElement } from "./accordion.element.js";
+import type { USAAccordionElement } from './accordion.element.js';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
-  title: "usa-accordion",
-  tags: ["autodocs"],
+  title: 'usa-accordion',
+  tags: ['autodocs'],
   render(args) {
     return html`
       <usa-accordion id="first" name="${args.name}">
         <h4 slot="heading">First Ammendment</h4>
 
-        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.
       </usa-accordion>
 
       <usa-accordion id="second" name="${args.name}">
         <h4 slot="heading">Second Ammendment</h4>
 
-        A well regulated Militia, being necessary to the security of a free
-        State, the right of the people to keep and bear Arms, shall not be
-        infringed.
+        A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and
+        bear Arms, shall not be infringed.
       </usa-accordion>
 
       <usa-accordion id="third" name="${args.name}">
         <h4 slot="heading">Third Ammendment</h4>
 
-        No Soldier shall, in time of peace be quartered in any house, without
-        the consent of the Owner, nor in time of war, but in a manner to be
-        prescribed by law.
+        No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of
+        war, but in a manner to be prescribed by law.
       </usa-accordion>
     `;
   },
   argTypes: {},
   args: {
-    name: "ammendment",
+    name: 'ammendment',
   },
 } satisfies Meta<USAAccordionElement>;
 

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

@@ -76,9 +76,9 @@ declare global {
     `,
     html`
       <div class="alert-heading">
-        <j-bind props="icon">
+        <usa-bind props="icon">
           <usa-icon></usa-icon>
-        </j-bind>
+        </usa-bind>
 
         <div>
           <slot id="heading" name="heading"></slot>

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

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { html } from 'lit';
 
 import type { USAAlertElement } from './alert.element.js';

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

@@ -37,11 +37,11 @@ declare global {
       }
     `,
     html`
-      <j-bind props="href">
+      <usa-bind props="href">
         <a>
           <slot></slot>
         </a>
-      </j-bind>
+      </usa-bind>
 
       <usa-icon icon="navigate_next"></usa-icon>
     `,

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

@@ -1,26 +1,28 @@
-import type { Meta, StoryObj } from "@storybook/web-components";
-import { html } from "lit";
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import { html } from 'lit';
 
-import type { USABreadcrumbsElement } from "./breadcrumbs.element.js";
+import type { USABreadcrumbsElement } from './breadcrumbs.element.js';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
-  title: "usa-breadcrumbs",
-  tags: ["autodocs"],
+  title: 'usa-breadcrumbs',
+  tags: ['autodocs'],
   render(args) {
     return html`
       <usa-breadcrumbs ?wrap=${args.wrap}>
         <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-breadcrumb
+          >Economically disadvantaged women-owned small business federal contracting program</usa-breadcrumb
+        >
       </usa-breadcrumbs>
     `;
   },
   argTypes: {
     wrap: {
-      type: "boolean",
-      control: "boolean",
+      type: 'boolean',
+      control: 'boolean',
     },
   },
   args: {

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

@@ -1,4 +1,4 @@
-import '@joist/templating/define.js';
+import '../templating.js';
 
 import { attr, css, element, html, listen } from '@joist/element';
 import { bind } from '@joist/templating';
@@ -163,23 +163,23 @@ export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
       }
     `,
     html`
-      <j-if bind="href">
+      <usa-if bind="href">
         <template>
-          <j-bind props="href,target">
+          <usa-bind props="href,target">
             <a part="link">
               <slot></slot>
             </a>
-          </j-bind>
+          </usa-bind>
         </template>
 
         <template else>
-          <j-bind props="value,type,disabled">
+          <usa-bind props="value,type,disabled">
             <button tabindex="0" part="button">
               <slot></slot>
             </button>
-          </j-bind>
+          </usa-bind>
         </template>
-      </j-if>
+      </usa-if>
     `,
   ],
 })

package/src/lib/button/button.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { html } from 'lit';
 
 import { BUTTON_VARIANTS, type USAButtonElement } from './button.element.js';

package/src/lib/button-group/button-group.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-vite';
+import { html } from 'lit';
 
-import type { USAButtonGroupElement } from "./button-group.element.js";
+import type { USAButtonGroupElement } from './button-group.element.js';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
-  title: "usa-button-group",
-  tags: ["autodocs"],
+  title: 'usa-button-group',
+  tags: ['autodocs'],
   render() {
     return html`
       <usa-button-group>

package/src/lib/card/card.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-vite';
+import { html } from 'lit';
 
-import type { USACardElement } from "./card.element.js";
+import type { USACardElement } from './card.element.js';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
-  title: "usa-card",
-  tags: ["autodocs"],
+  title: 'usa-card',
+  tags: ['autodocs'],
   argTypes: {},
   args: {},
 } satisfies Meta<USACardElement>;
@@ -24,8 +24,8 @@ export const Primary: Story = {
           <usa-card-header>Card</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>
@@ -41,8 +41,8 @@ export const Primary: Story = {
           <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>
@@ -58,8 +58,8 @@ export const Primary: Story = {
           </usa-card-media>
 
           <usa-card-body>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
-            possimus similique nemo odit doloremque laudantium?
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore possimus similique nemo odit doloremque
+            laudantium?
           </usa-card-body>
 
           <usa-card-footer>
@@ -75,11 +75,9 @@ export const Primary: Story = {
           <usa-card-header>Inset media</usa-card-header>
 
           <usa-card-body>
-            Etiam vitae sodales metus. Fusce id orci dignissim, efficitur risus
-            eget, tempus odio. Donec lectus ante, auctor eget cursus sed,
-            convallis quis magna. Orci varius natoque penatibus et magnis dis
-            parturient montes, nascetur ridiculus mus. Mauris mattis tellus
-            bibendum aliquet malesuada.
+            Etiam vitae sodales metus. Fusce id orci dignissim, efficitur risus eget, tempus odio. Donec lectus ante,
+            auctor eget cursus sed, convallis quis magna. Orci varius natoque penatibus et magnis dis parturient montes,
+            nascetur ridiculus mus. Mauris mattis tellus bibendum aliquet malesuada.
           </usa-card-body>
 
           <usa-card-footer>
@@ -103,8 +101,8 @@ export const Flag: Story = {
           <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>
@@ -120,8 +118,8 @@ export const Flag: Story = {
           <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>

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

@@ -1,4 +1,4 @@
-import '@joist/templating/define.js';
+import '../templating.js';
 
 import { attr, css, element, html, listen, query } from '@joist/element';
 import { bind } from '@joist/templating';
@@ -116,10 +116,10 @@ declare global {
     `,
     html`
       <label>
-        <j-bind props="checked,required,disabled" target="input">
+        <usa-bind props="checked,required,disabled" target="input">
           <input type="checkbox" tabindex="0" />
           <div class="checkbox" part="checkbox"></div>
-        </j-bind>
+        </usa-bind>
 
         <div class="title" part="title">
           <slot></slot>

package/src/lib/checkbox/checkbox.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { html } from 'lit';
 
 import type { USACheckboxElement } from './checkbox.element.js';

package/src/lib/collection/collection.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-vite';
+import { html } from 'lit';
 
-import type { USACollectionElement } from "./collection.element.js";
+import type { USACollectionElement } from './collection.element.js';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
-  title: "usa-collection",
-  tags: ["autodocs"],
+  title: 'usa-collection',
+  tags: ['autodocs'],
   render() {
     return html`
       <usa-collection>
@@ -16,7 +16,9 @@ const meta = {
           </h4>
 
           <div slot="description">
-            Today, the Administration announces the winners of the Gears of Government President's Award. This program recognizes the contributions of individuals and teams across the federal workforce who make a profound difference in the lives of the American people.
+            Today, the Administration announces the winners of the Gears of Government President's Award. This program
+            recognizes the contributions of individuals and teams across the federal workforce who make a profound
+            difference in the lives of the American people.
           </div>
 
           <usa-tag slot="tags" type="new">NEW</usa-tag>
@@ -25,14 +27,16 @@ const meta = {
         </usa-collection-item>
 
         <usa-collection-item>
-          <img height="80" width="80" src="./img/gog-logo.png" slot="img"/>
+          <img height="80" width="80" src="./img/gog-logo.png" slot="img" />
 
           <h4 slot="heading">
             <usa-link href="#">Gears of Government President's Award winners</usa-link>
           </h4>
 
           <div slot="description">
-            Today, the Administration announces the winners of the Gears of Government President's Award. This program recognizes the contributions of individuals and teams across the federal workforce who make a profound difference in the lives of the American people.
+            Today, the Administration announces the winners of the Gears of Government President's Award. This program
+            recognizes the contributions of individuals and teams across the federal workforce who make a profound
+            difference in the lives of the American people.
           </div>
 
           <usa-tag slot="tags" type="new">NEW</usa-tag>
@@ -46,7 +50,9 @@ const meta = {
           </h4>
 
           <div slot="description">
-            In honor of National Women's Small Business Month, we've partnered with SBA's Office of Government Contracting and Business Development and Office of Program Performance, Analysis, and Evaluation to highlight the Women-Owned Small Businesses (WOSBs) data dashboard!
+            In honor of National Women's Small Business Month, we've partnered with SBA's Office of Government
+            Contracting and Business Development and Office of Program Performance, Analysis, and Evaluation to
+            highlight the Women-Owned Small Businesses (WOSBs) data dashboard!
           </div>
 
           <usa-tag slot="tags" type="new">NEW</usa-tag>
@@ -55,14 +61,16 @@ const meta = {
         </usa-collection-item>
 
         <usa-collection-item>
-          <img height="52" width="80" src="./img/wosb1.jpg" slot="img"/>
+          <img height="52" width="80" src="./img/wosb1.jpg" slot="img" />
 
           <h4 slot="heading">
             <usa-link href="#">Women-owned small business dashboard</usa-link>
           </h4>
-          
+
           <div slot="description">
-            In honor of National Women's Small Business Month, we've partnered with SBA's Office of Government Contracting and Business Development and Office of Program Performance, Analysis, and Evaluation to highlight the Women-Owned Small Businesses (WOSBs) data dashboard!
+            In honor of National Women's Small Business Month, we've partnered with SBA's Office of Government
+            Contracting and Business Development and Office of Program Performance, Analysis, and Evaluation to
+            highlight the Women-Owned Small Businesses (WOSBs) data dashboard!
           </div>
 
           <usa-tag slot="tags" type="new">NEW</usa-tag>

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

@@ -1,11 +1,11 @@
-import { inject, injectable } from "@joist/di";
-import { attr, css, element, html, query } from "@joist/element";
+import { inject, injectable } from '@joist/di';
+import { attr, css, element, html, query } from '@joist/element';
 
-import { COMBO_BOX_CTX } from "../context.js";
+import { COMBO_BOX_CTX } from '../context.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    "usa-combo-box-option": USAComboBoxOptionElement;
+    'usa-combo-box-option': USAComboBoxOptionElement;
   }
 }
 
@@ -16,33 +16,34 @@ const listTemplate = html`
 `;
 
 @injectable({
-  name: "usa-combo-box-option-ctx",
+  name: 'usa-combo-box-option-ctx',
 })
 @element({
-  tagName: "usa-combo-box-option",
+  tagName: 'usa-combo-box-option',
+  dependsOn: ['usa-combo-box'],
   shadowDom: [
     css`
-    :host {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      padding: 0.5rem;  
-    }
+      :host {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.5rem;
+      }
     `,
     html`<slot></slot>`,
   ],
 })
 export class USAComboBoxOptionElement extends HTMLElement {
   @attr()
-  accessor value = "";
+  accessor value = '';
 
   #listItem = listTemplate.createNode() as HTMLElement;
-  #li = query("li", this.#listItem);
-  #slot = query("slot", this.#listItem);
+  #li = query('li', this.#listItem);
+  #slot = query('slot', this.#listItem);
   #ctx = inject(COMBO_BOX_CTX);
 
   attributeChangedCallback() {
-    const value = this.value.split(" ").join("-").toLocaleLowerCase();
+    const value = this.value.split(' ').join('-').toLocaleLowerCase();
 
     this.#li().dataset.value = this.value;
 

package/src/lib/combo-box/combo-box.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-vite';
+import { html } from 'lit';
 
-import type { USAComboBoxElement } from "./combo-box.element.js";
+import type { USAComboBoxElement } from './combo-box.element.js';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
-  title: "usa-combo-box",
-  tags: ["autodocs"],
+  title: 'usa-combo-box',
+  tags: ['autodocs'],
   argTypes: {},
   args: {},
 } satisfies Meta<USAComboBoxElement>;
@@ -278,7 +278,7 @@ export const WithImages: Story = {
         <usa-combo-box-option value="Wisconsin">
           <img loading="lazy" src="./flags/wisconsin.svg" alt="Wisconsin" height="20" /> Wisconsin
         </usa-combo-box-option>
-        
+
         <usa-combo-box-option value="Wyoming">
           <img loading="lazy" src="./flags/wyoming.svg" alt="Wyoming" height="20" /> Wyoming
         </usa-combo-box-option>

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

@@ -1,4 +1,4 @@
-import '@joist/templating/define.js';
+import '../../templating.js';
 
 import { css, element, html } from '@joist/element';
 import { observe } from '@joist/observable';
@@ -72,25 +72,25 @@ declare global {
     html`
       <slot class="preview-heading" part="heading"></slot>
 
-      <j-for bind="fileEntries" key="src">
+      <usa-for bind="fileEntries" key="src">
         <template>
           <div class="preview-item" part="item">
-            <j-if bind="each.value.isImage">
+            <usa-if bind="each.value.isImage">
               <template>
-                <j-bind props="src:each.value.src">
+                <usa-bind props="src:each.value.src">
                   <img height="40" width="40" aria-hidden="true" />
-                </j-bind>
+                </usa-bind>
               </template>
 
               <template else>
                 <usa-icon icon="file_present"></usa-icon>
               </template>
-            </j-if>
+            </usa-if>
 
-            <j-val bind="each.value.file.name"></j-val>
+            <usa-val bind="each.value.file.name"></usa-val>
           </div>
         </template>
-      </j-for>
+      </usa-for>
     `,
   ],
 })

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

@@ -1,4 +1,4 @@
-import '@joist/templating/define.js';
+import '../templating.js';
 
 import { attr, css, element, html, listen, query } from '@joist/element';
 import { effect } from '@joist/observable';
@@ -82,17 +82,17 @@ declare global {
       </label>
 
       <div class="container">
-        <j-bind props="name,multiple,accept,required,files">
+        <usa-bind props="name,multiple,accept,required,files">
           <input id="file-input" type="file" tabindex="0" />
-        </j-bind>
+        </usa-bind>
 
-        <j-if bind="files.length">
+        <usa-if bind="files.length">
           <template>
-            <j-bind props="files">
+            <usa-bind props="files">
               <usa-file-input-preview part="preview" exportparts="heading, item">
                 Selected file&nbsp;<usa-link>Change file</usa-link>
               </usa-file-input-preview>
-            </j-bind>
+            </usa-bind>
           </template>
 
           <template id="test" else>
@@ -100,7 +100,7 @@ declare global {
               <slot name="description"> Drag file here or <usa-link>choose from folder</usa-link> </slot>
             </div>
           </template>
-        </j-if>
+        </usa-if>
       </div>
     `,
   ],

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

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { html } from 'lit';
 
 import type { USAFileInputElement } from './file-input.element.js';