@noctuatech/uswds 1.3.16 → 1.4.0

package/src/lib/input/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';
@@ -92,7 +92,7 @@ declare global {
 
         <slot></slot>
 
-        <j-bind
+        <usa-bind
           props="
             autocomplete,
             autofocus,
@@ -111,7 +111,7 @@ declare global {
           "
         >
           <input tabindex="0" part="input" />
-        </j-bind>
+        </usa-bind>
       </label>
     `,
   ],

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

@@ -1,21 +1,23 @@
-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 { USATextInputElement } from "./input.element.js";
+import type { USATextInputElement } from './input.element.js';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
-  title: "usa-input",
-  tags: ["autodocs"],
+  title: 'usa-input',
+  tags: ['autodocs'],
   render() {
     return html`
-      <form @submit=${(e: Event) => {
-        e.preventDefault();
+      <form
+        @submit=${(e: Event) => {
+          e.preventDefault();
 
-        const data = new FormData(e.target as HTMLFormElement);
+          const data = new FormData(e.target as HTMLFormElement);
 
-        console.log(Array.from(data.entries()));
-      }}>
+          console.log(Array.from(data.entries()));
+        }}
+      >
         <usa-input name="fname" autocomplete="off" detail="pfx">
           <usa-icon icon="credit_card" slot="detail"></usa-icon>
 

package/src/lib/input-mask/input-mask.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 { USAInputMaskElement } from './input-mask.element.js';

package/src/lib/link/link.element.ts

@@ -1,4 +1,4 @@
-import '@joist/templating/define.js';
+import '../templating.js';
 
 import { attr, css, element, html, query } from '@joist/element';
 import { bind } from '@joist/templating';
@@ -27,11 +27,11 @@ declare global {
       }
     `,
     html`
-      <j-bind props="href,target,title">
+      <usa-bind props="href,target,title">
         <a>
           <slot></slot>
         </a>
-      </j-bind>
+      </usa-bind>
     `,
   ],
 })

package/src/lib/link/link.stories.ts

@@ -1,18 +1,18 @@
-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 { USALinkElement } from "./link.element.js";
+import type { USALinkElement } from './link.element.js';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
-  title: "usa-link",
-  tags: ["autodocs"],
+  title: 'usa-link',
+  tags: ['autodocs'],
   render(args) {
     return html`<usa-link href="${args.href}">Hello World</usa-link>`;
   },
   argTypes: {
     href: {
-      type: "string",
+      type: 'string',
     },
   },
   args: {},
@@ -25,6 +25,6 @@ type Story = StoryObj<USALinkElement>;
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary: Story = {
   args: {
-    href: "www.google.com",
+    href: 'www.google.com',
   },
 };

package/src/lib/modal/modal.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 { USAModalElement } from './modal.element.js';

package/src/lib/pagination/pagination-no/pagination-no.element.ts

@@ -1,4 +1,4 @@
-import '@joist/templating/define.js';
+import '../../templating.js';
 
 import { attr, css, element, html } from '@joist/element';
 import { bind } from '@joist/templating';
@@ -41,11 +41,11 @@ declare global {
       }
     `,
     html`
-      <j-bind props="href">
+      <usa-bind props="href">
         <a>
           <slot></slot>
         </a>
-      </j-bind>
+      </usa-bind>
     `,
   ],
 })

package/src/lib/pagination/pagination.stories.ts

@@ -1,31 +1,29 @@
-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 { USAPaginationElement } from "./pagination.element.js";
+import type { USAPaginationElement } from './pagination.element.js';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
-  title: "usa-pagination",
-  tags: ["autodocs"],
+  title: 'usa-pagination',
+  tags: ['autodocs'],
   render(args) {
     return html`
       <usa-pagination>
         <usa-pagination-item>
-          <usa-link href="#">
-            <usa-icon icon="navigate_before"></usa-icon> Previous
-          </usa-link>
+          <usa-link href="#"> <usa-icon icon="navigate_before"></usa-icon> Previous </usa-link>
         </usa-pagination-item>
-        
+
         <usa-pagination-item>
           <usa-pagination-no>1</usa-pagination-no>
         </usa-pagination-item>
 
         <usa-pagination-item>...</usa-pagination-item>
-        
+
         <usa-pagination-item>
           <usa-pagination-no>9</usa-pagination-no>
         </usa-pagination-item>
-        
+
         <usa-pagination-item>
           <usa-pagination-no active>10</usa-pagination-no>
         </usa-pagination-item>
@@ -39,11 +37,9 @@ const meta = {
         <usa-pagination-item>
           <usa-pagination-no>24</usa-pagination-no>
         </usa-pagination-item>
-        
+
         <usa-pagination-item>
-          <usa-link href="#">
-            Next <usa-icon icon="navigate_next"></usa-icon>
-          </usa-link>
+          <usa-link href="#"> Next <usa-icon icon="navigate_next"></usa-icon> </usa-link>
         </usa-pagination-item>
       </usa-pagination>
     `;

package/src/lib/process-list/process-list.stories.ts

@@ -1,51 +1,51 @@
-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 { USAProcessListElement } from "./process-list.element.js";
+import type { USAProcessListElement } from './process-list.element.js';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
-  title: "usa-process-list",
-  tags: ["autodocs"],
+  title: 'usa-process-list',
+  tags: ['autodocs'],
   render() {
     return html`
-    <usa-process-list>
-      <usa-process-list-item>
-        <span slot="count">1</span>
-        <h4 slot="title">Start a process</h4>
-
-        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
-        Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.
-        
-        <ul>
-          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
-          <li>Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.</li>
-          <li>Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.</li>
-          <li>Aliquam erat volutpat. Sed quis velit.</li>
-        </ul>
-      </usa-process-list-item>
-
-      <usa-process-list-item>
-        <span slot="count">2</span>
-        <h4 slot="title">Proceed to the second step</h4>
-        
-        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
-        Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. 
-        Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. 
-        Sed quis velit. Nulla facilisi. 
-        Nulla libero. Vivamus pharetra posuere sapien.
-      </usa-process-list-item>
-
-      <usa-process-list-item>
-        <span slot="count">3</span>
-        <h4 slot="title">Complete the step-by-step process</h4>
-        
-        Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. 
-        Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. 
-        Vivamus pharetra posuere sapien.
-      </usa-process-list-item>
-    </usa-process-list>
-  `;
+      <usa-process-list>
+        <usa-process-list-item>
+          <span slot="count">1</span>
+          <h4 slot="title">Start a process</h4>
+
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci
+          magna rhoncus neque.
+
+          <ul>
+            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+            <li>
+              Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
+            </li>
+            <li>Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.</li>
+            <li>Aliquam erat volutpat. Sed quis velit.</li>
+          </ul>
+        </usa-process-list-item>
+
+        <usa-process-list-item>
+          <span slot="count">2</span>
+          <h4 slot="title">Proceed to the second step</h4>
+
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci
+          magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae
+          ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
+          pharetra posuere sapien.
+        </usa-process-list-item>
+
+        <usa-process-list-item>
+          <span slot="count">3</span>
+          <h4 slot="title">Complete the step-by-step process</h4>
+
+          Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis
+          velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.
+        </usa-process-list-item>
+      </usa-process-list>
+    `;
   },
   argTypes: {},
   args: {},

package/src/lib/radio/radio.stories.ts

@@ -1,37 +1,29 @@
-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 { USARadioElement } from "./radio.element.js";
+import type { USARadioElement } from './radio.element.js';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
-  title: "usa-radio",
-  tags: ["autodocs"],
+  title: 'usa-radio',
+  tags: ['autodocs'],
   render(args) {
     return html`
-      <usa-radio
-        name="historical-figures"
-        value="frederick-douglass"
-        ?tiled=${args.tiled}
-      >
+      <usa-radio name="historical-figures" value="frederick-douglass" ?tiled=${args.tiled}>
         <legend>Select one historical figure</legend>
 
-        <usa-radio-option value="sojourner-truth">
-          Sojourner Truth
-        </usa-radio-option>
+        <usa-radio-option value="sojourner-truth"> Sojourner Truth </usa-radio-option>
 
         <usa-radio-option value="frederick-douglass">
           Frederick Douglass
-          <usa-description>This is optional text that can be used to describe the label in more detail.</usa-description>
+          <usa-description
+            >This is optional text that can be used to describe the label in more detail.</usa-description
+          >
         </usa-radio-option>
 
-        <usa-radio-option value="booker-t-washington">
-          Booker T. Washington
-        </usa-radio-option>
+        <usa-radio-option value="booker-t-washington"> Booker T. Washington </usa-radio-option>
 
-        <usa-radio-option value="george-washington-carver" disabled>
-          George Washington Carver
-        </usa-radio-option>
+        <usa-radio-option value="george-washington-carver" disabled> George Washington Carver </usa-radio-option>
       </usa-radio>
     `;
   },

package/src/lib/range-slider/range-slider.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';
@@ -59,15 +59,15 @@ declare global {
       }
     `,
     html`
-      <j-bind attrs="for:name">
+      <usa-bind attrs="for:name">
         <label part="label">
           <slot></slot>
         </label>
-      </j-bind>
+      </usa-bind>
 
-      <j-bind props="id:name,name,value,min,max,step">
+      <usa-bind props="id:name,name,value,min,max,step">
         <input type="range" part="input" />
-      </j-bind>
+      </usa-bind>
     `,
   ],
 })

package/src/lib/range-slider/range-slider.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 { USARangeSliderElement } from "./range-slider.element.js";
+import type { USARangeSliderElement } from './range-slider.element.js';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
-  title: "usa-range-slider",
-  tags: ["autodocs"],
+  title: 'usa-range-slider',
+  tags: ['autodocs'],
   render(args) {
     return html`<usa-range-slider name="test" value="50">Hello World</usa-range-slider>`;
   },

package/src/lib/search/search.stories.ts

@@ -1,18 +1,18 @@
-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 { USASearchElement } from "./search.element.js";
-import type { USASearchEvent } from "./search.event.js";
+import type { USASearchElement } from './search.element.js';
+import type { USASearchEvent } from './search.event.js';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
-  title: "usa-search",
-  tags: ["autodocs"],
+  title: 'usa-search',
+  tags: ['autodocs'],
   render() {
     function onSubmit(e: USASearchEvent) {
       e.preventDefault();
 
-      console.log("SUBMIT", e.value);
+      console.log('SUBMIT', e.value);
     }
 
     return html`<usa-search @usa::search=${onSubmit}>Search</usa-search>`;

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

@@ -1,16 +1,17 @@
-import { inject, injectable, injected } from "@joist/di";
-import { attr, css, element, html, listen } from "@joist/element";
+import { inject, injectable, injected } from '@joist/di';
+import { attr, css, element, html, listen } from '@joist/element';
 
-import { SELECT_CONTEXT } from "../context.js";
+import { SELECT_CONTEXT } from '../context.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    "usa-select-option": USASelecOptionElement;
+    'usa-select-option': USASelecOptionElement;
   }
 }
 
 @element({
-  tagName: "usa-select-option",
+  tagName: 'usa-select-option',
+  dependsOn: ['usa-select'],
   shadowDom: [
     css`
       :host {
@@ -21,13 +22,13 @@ declare global {
   ],
 })
 @injectable({
-  name: "usa-select-option-ctx",
+  name: 'usa-select-option-ctx',
 })
 export class USASelecOptionElement extends HTMLElement {
   @attr()
-  accessor value = "";
+  accessor value = '';
 
-  readonly option = document.createElement("option");
+  readonly option = document.createElement('option');
 
   #select = inject(SELECT_CONTEXT);
 
@@ -51,11 +52,11 @@ export class USASelecOptionElement extends HTMLElement {
 
     this.#observer.observe(select, {
       attributes: true,
-      attributeFilter: ["value"],
+      attributeFilter: ['value'],
     });
   }
 
-  @listen("slotchange")
+  @listen('slotchange')
   onSlotChange() {
     this.option.textContent = this.textContent;
   }

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

@@ -1,8 +1,9 @@
-import './select.element.js';
 import './select-option/select-option.element.js';
+import './select.element.js';
 
 import { assert, fixture, html } from '@open-wc/testing';
 import { userEvent } from '@testing-library/user-event';
+
 import { USASelectElement } from './select.element.js';
 
 describe('usa-select', () => {

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

@@ -1,11 +1,11 @@
-import '@joist/templating/define.js';
+import '../templating.js';
 
 import { injectable } from '@joist/di';
 import { attr, css, element, html, listen, query } from '@joist/element';
 import { bind } from '@joist/templating';
+import { effect } from '@joist/observable';
 
 import { SELECT_CONTEXT, type SelectContainer } from './context.js';
-import { effect } from '@joist/observable';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -73,9 +73,9 @@ declare global {
           <slot></slot>
         </div>
 
-        <j-bind props="value,name,required,disabled">
+        <usa-bind props="value,name,required,disabled">
           <select part="select"></select>
-        </j-bind>
+        </usa-bind>
       </label>
     `,
   ],

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

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

package/src/lib/step-indicator/step-indicator.stories.ts

@@ -1,44 +1,36 @@
-import type { Meta, StoryObj } from "@storybook/web-components";
-import { html } from "lit";
-import { ifDefined } from "lit/directives/if-defined.js";
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
-import type { USAStepIndicatorElement } from "./step-indicator.element.js";
+import type { USAStepIndicatorElement } from './step-indicator.element.js';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
-  title: "usa-step-indicator",
-  tags: ["autodocs"],
+  title: 'usa-step-indicator',
+  tags: ['autodocs'],
   render(args) {
     return html`
       <usa-step-indicator>
-        <usa-step state="complete" counter=${ifDefined(args.counter)}>
-          Personal information
-        </usa-step>
+        <usa-step state="complete" counter=${ifDefined(args.counter)}> Personal information </usa-step>
 
-        <usa-step state="complete" counter=${ifDefined(args.counter)}>
-          Household status
-        </usa-step>
+        <usa-step state="complete" counter=${ifDefined(args.counter)}> Household status </usa-step>
 
-        <usa-step state="current" counter=${ifDefined(args.counter)}>
-          Supporting documents
-        </usa-step>
+        <usa-step state="current" counter=${ifDefined(args.counter)}> Supporting documents </usa-step>
 
         <usa-step counter=${ifDefined(args.counter)}>Signature</usa-step>
 
-        <usa-step counter=${ifDefined(args.counter)}>
-          Review and submit
-        </usa-step>
+        <usa-step counter=${ifDefined(args.counter)}> Review and submit </usa-step>
       </usa-step-indicator>
     `;
   },
   argTypes: {
     counter: {
-      control: "select",
-      options: ["on", "small", null],
+      control: 'select',
+      options: ['on', 'small', null],
     },
   },
   args: {
-    counter: "on",
+    counter: 'on',
   },
 } satisfies Meta<USAStepIndicatorElement & { counter: string }>;
 

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