@noctuatech/uswds 0.0.32 → 0.0.34

package/README.md

@@ -23,7 +23,7 @@ npm i @noctuatech/uswds
   }
 </style>
 
-<script src="/node_modules/@noctuatech/uswds/assets/uswds.min.js"></script>
+<script type="module" src="https://esm.sh/@noctuatech/uswds@latest"></script>
 
 <usa-config icon-path="/node_modules/@noctuatech/uswds/assets/usa-icons/">
   <usa-alert type="info">
@@ -33,6 +33,18 @@ npm i @noctuatech/uswds
     <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
     eiusmod.
   </usa-alert>
+  
+  <form>
+    <usa-input name="username">
+      First name
+    </usa-input>
+
+    <usa-input name="password">
+      Last name
+    </usa-input>
+
+    <usa-button type="submit">Submit</usa-button>
+  </form>
 </usa-config>
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noctuatech/uswds",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "type": "module",
   "workspaces": ["packages/**"],
   "main": "./target/lib.js",
@@ -29,7 +29,7 @@
       "dependencies": ["tsc"]
     },
     "build": {
-      "dependencies": ["tsc", "build-storybook", "rollup", "copy_icons"]
+      "dependencies": ["tsc", "build-storybook", "copy_icons"]
     },
     "preview": {
       "command": "browser-sync start --server --files \"target/**\" \"index.html\"",
@@ -51,17 +51,6 @@
       "output": ["target/**", "tsconfig.tsbuildinfo"],
       "dependencies": ["./packages/testing:build"]
     },
-    "rollup": {
-      "command": "rollup -c rollup.config.js",
-      "files": ["target/**", "rollup.config.js"],
-      "output": ["assets/uswds.min.js"],
-      "dependencies": [
-        {
-          "script": "tsc",
-          "cascade": false
-        }
-      ]
-    },
     "copy_icons": {
       "command": "cp -a node_modules/@uswds/uswds/dist/img/usa-icons/. assets/usa-icons/",
       "files": ["node_modules/@uswds/uswds/dist/img/usa-icons/**"],
@@ -72,9 +61,9 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
-    "@joist/di": "^4.0.0-next.51",
-    "@joist/element": "^4.0.0-next.51",
-    "@joist/observable": "^4.0.0-next.51",
+    "@joist/di": "^4.0.0",
+    "@joist/element": "^4.0.0",
+    "@joist/observable": "^4.0.0",
     "tslib": "2.8.1"
   },
   "devDependencies": {
@@ -82,29 +71,25 @@
     "@open-wc/testing": "^4.0.0",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-terser": "^0.4.4",
-    "@storybook/addon-essentials": "^8.5.1",
-    "@storybook/web-components": "^8.5.1",
-    "@storybook/web-components-vite": "^8.5.1",
+    "@storybook/addon-essentials": "^8.6.0",
+    "@storybook/web-components": "^8.6.0",
+    "@storybook/web-components-vite": "^8.6.0",
     "@types/mocha": "^10.0.7",
     "@types/node": "^22.0.0",
     "@uswds/uswds": "^3.10.0",
-    "@web/test-runner": "^0.19.0",
+    "@web/test-runner": "^0.20.0",
     "browser-sync": "^3.0.3",
     "husky": "^9.0.11",
     "js-beautify": "^1.15.1",
     "lint-staged": "^15.2.2",
     "lit": "^3.2.1",
-    "minify-html-literals": "^1.3.5",
     "mocha": "^11.0.0",
     "plop": "^4.0.1",
-    "rollup": "^4.28.0",
-    "storybook": "^8.5.1",
-    "typescript": "^5.6.3",
+    "storybook": "^8.6.0",
+    "typescript": "^5.8.0-beta",
     "wireit": "^0.14.9"
   },
   "lint-staged": {
-    "*": [
-      "biome check --write --no-errors-on-unmatched --files-ignore-unknown=true"
-    ]
+    "*": ["biome check --write --no-errors-on-unmatched"]
   }
 }

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

@@ -1,4 +1,5 @@
 import { attr, css, element, html, listen, query } from "@joist/element";
+
 import { USAAccordionToggleEvent } from "./events.js";
 
 declare global {

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

@@ -65,13 +65,6 @@ declare global {
       }
 
       #heading::slotted(*) {
-        font-family:
-          Source Sans Pro Web,
-          Helvetica Neue,
-          Helvetica,
-          Roboto,
-          Arial,
-          sans-serif;
         font-size: 1.33rem;
         line-height: 0.9;
         margin-top: 0;

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

@@ -54,6 +54,16 @@ declare global {
         box-shadow: 0 0 0 2px #005ea2;
       }
 
+      :host([disabled]) .checkbox {
+        background-color: #fff;
+        box-shadow: 0 0 0 2px #757575;
+      }
+
+      :host([disabled]) label {
+        color: #757575;
+        cursor: not-allowed;
+      }
+      
       input:checked + .checkbox::after {
         content: " ";
         display: block;
@@ -84,12 +94,6 @@ declare global {
         height: 0;
       }
 
-      .spacer {
-        height: 1.25rem;
-        width: 1.25rem;
-        margin-right: 0.75rem;
-      }
-
       :host([tiled]) label:has(input:checked) {
         background-color: rgba(0, 94, 162, 0.1);
         border-color: #005ea2;
@@ -123,6 +127,9 @@ export class USACheckboxElement extends HTMLElement {
   @attr()
   accessor required = false;
 
+  @attr()
+  accessor disabled = false;
+
   @attr({
     observed: false,
   })
@@ -133,13 +140,21 @@ export class USACheckboxElement extends HTMLElement {
   #internals = this.attachInternals();
 
   connectedCallback() {
-    this.#checkbox({ checked: this.checked, name: this.name });
+    this.#checkbox({
+      checked: this.checked,
+      name: this.name,
+      disabled: this.disabled,
+    });
 
     this.#syncFormState();
   }
 
   attributeChangedCallback() {
-    this.#checkbox({ checked: this.checked, name: this.name });
+    this.#checkbox({
+      checked: this.checked,
+      name: this.name,
+      disabled: this.disabled,
+    });
 
     this.#syncFormState();
   }

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

@@ -17,6 +17,7 @@ const meta = {
         value=${ifDefined(args.value)}
         checked=${ifDefined(args.checked)}
         ?tiled=${args.tiled}
+        ?disabled=${args.disabled}
       >
         Hello World
         ${when(
@@ -44,6 +45,7 @@ const meta = {
     name: "toc",
     value: "agree",
     tiled: false,
+    disabled: false,
   },
 } satisfies Meta<USACheckboxElement & { description: string }>;
 

package/src/lib/collection/collection-item/collection-item.element.ts

@@ -0,0 +1,54 @@
+import { css, element, html } from "@joist/element";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-collection-item": USACollectionItemElement;
+  }
+}
+
+@element({
+  tagName: "usa-collection-item",
+  shadowDom: [
+    css`
+      :host {
+        display: flex;
+        gap: 1rem;
+      }
+
+      .content {
+        display: flex;
+        flex-direction: column;
+      }
+
+      slot[name="heading"]::slotted(*) {
+        font-size: 1.13rem;
+        line-height: 1.3;
+        margin-bottom: 0;
+        margin-top: 0;
+      }
+
+      .description {
+        margin-bottom: .5rem;
+        margin-top: .5rem;
+      }
+    `,
+    html`
+      <slot name="img"></slot>
+
+      <div class="content">
+        <div class="heading">
+          <slot name="heading"></slot>
+        </div>
+
+        <div class="description">
+          <slot name="description"></slot>
+        </div>
+
+        <div class="meta">
+          <slot name="meta"></slot>
+        </div>
+      </div>
+    `,
+  ],
+})
+export class USACollectionItemElement extends HTMLElement {}

package/src/lib/collection/collection-item/collection-item.test.ts

@@ -0,0 +1,15 @@
+import "./collection-item.element.js";
+
+import { assert, fixture, html } from "@open-wc/testing";
+
+import type { USACollectionItemElement } from "./collection-item.element.js";
+
+describe("usa-collection-item", () => {
+  it("should be accessible", async () => {
+    const collectionItem = await fixture<USACollectionItemElement>(html`
+      <usa-collection-item>Hello World</usa-collection-item>
+    `);
+
+    return assert.isAccessible(collectionItem);
+  });
+});

package/src/lib/collection/collection.element.ts

@@ -0,0 +1,24 @@
+import { css, element, html } from "@joist/element";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-collection": USACollectionElement;
+  }
+}
+
+@element({
+  tagName: "usa-collection",
+  shadowDom: [
+    css`
+      :host {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        gap: 2rem;
+      }
+    `,
+    html`
+      <slot></slot>
+    `,
+  ],
+})
+export class USACollectionElement extends HTMLElement {}

package/src/lib/collection/collection.stories.ts

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+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"],
+  render(args) {
+    return html`
+      <usa-collection>
+        <usa-collection-item>
+          <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.
+          </div>
+        </usa-collection-item>
+
+        <usa-collection-item>
+          <img height="80" width="80" src="/assets/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.
+          </div>
+        </usa-collection-item>
+
+        <usa-collection-item>
+          <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!
+          </div>
+        </usa-collection-item>
+
+        <usa-collection-item>
+          <img height="52" width="80" src="/assets/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!
+          </div>
+        </usa-collection-item>
+      </usa-collection>
+    `;
+  },
+  argTypes: {},
+  args: {},
+} satisfies Meta<USACollectionElement>;
+
+export default meta;
+
+type Story = StoryObj<USACollectionElement>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {},
+};

package/src/lib/collection/collection.test.ts

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

package/src/lib/define.ts

@@ -30,3 +30,5 @@ import "./card/card-footer/card-footer.element.js";
 import "./card/card-media/card-media.element.js";
 import "./card/card-group/card-group.element.js";
 import "./textarea/textarea.element.js";
+import "./collection/collection.element.js";
+import "./collection/collection-item/collection-item.element.js";

package/src/lib/icon/icon-types.ts

@@ -71,7 +71,6 @@ export const ICON_TYPES = [
   "event",
   "expand_less",
   "expand_more",
-  "facebook",
   "fast_forward",
   "fast_rewind",
   "favorite",
@@ -85,7 +84,6 @@ export const ICON_TYPES = [
   "fingerprint",
   "first_page",
   "flag",
-  "flickr",
   "flight",
   "flooding",
   "folder",
@@ -93,7 +91,6 @@ export const ICON_TYPES = [
   "format_quote",
   "format_size",
   "forum",
-  "github",
   "grid_view",
   "group_add",
   "groups",
@@ -112,7 +109,6 @@ export const ICON_TYPES = [
   "info",
   "info_outline",
   "insights",
-  "instagram",
   "keyboard",
   "label",
   "language",
@@ -122,7 +118,6 @@ export const ICON_TYPES = [
   "lightbulb_outline",
   "link",
   "link_off",
-  "linkedin",
   "list",
   "local_cafe",
   "local_fire_department",
@@ -222,7 +217,6 @@ export const ICON_TYPES = [
   "translate",
   "trending_down",
   "trending_up",
-  "twitter",
   "undo",
   "unfold_less",
   "unfold_more",
@@ -237,8 +231,6 @@ export const ICON_TYPES = [
   "wash",
   "wifi",
   "work",
-  "x",
-  "youtube",
   "zoom_in",
   "zoom_out_map",
   "zoom_out",

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

@@ -1,5 +1,5 @@
 import { attr, css, element, html, listen, query, ready } from "@joist/element";
-import { type Changes, effect, observe } from "@joist/observable";
+import { effect, observe } from "@joist/observable";
 
 import type { MaskableElement } from "../input-mask/maskable.element.js";
 
@@ -105,6 +105,9 @@ export class USATextInputElement
   @attr()
   accessor required = false;
 
+  @attr()
+  accessor type: "text" | "password" | "number" = "text";
+
   @attr({
     observed: false,
   })
@@ -131,11 +134,9 @@ export class USATextInputElement
   }
 
   attributeChangedCallback() {
-    this.#input({
-      autocomplete: this.autocomplete,
-      placeholder: this.placeholder,
-      name: this.name,
-    });
+    const { autocomplete, placeholder, name, type } = this;
+
+    this.#input({ autocomplete, placeholder, name, type });
   }
 
   connectedCallback() {
@@ -143,18 +144,10 @@ export class USATextInputElement
   }
 
   @effect()
-  onChange(changes: Changes<this>) {
-    const input = this.#input({
-      value: this.value,
-    });
+  onChange() {
+    const { value, selectionStart, selectionEnd } = this;
 
-    if (changes.has("selectionStart")) {
-      input.selectionStart = this.selectionStart;
-    }
-
-    if (changes.has("selectionEnd")) {
-      input.selectionEnd = this.selectionEnd;
-    }
+    this.#input({ value, selectionStart, selectionEnd });
 
     this.#syncFormState();
   }

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

@@ -16,7 +16,7 @@ const meta = {
 
         console.log(Array.from(data.entries()));
       }}>
-        <usa-input name="fname" value="Danny" autocomplete="off" detail="pfx">
+        <usa-input name="fname" autocomplete="off" detail="pfx">
           <usa-icon icon="credit_card" slot="detail"></usa-icon>
 
           First name

package/src/lib/input-mask/format.ts

@@ -1,10 +1,6 @@
-export enum PatternChar {
-  Any = "*",
-  Number = "9",
-  Letter = "A",
-}
+export const PATTERN_CHARS = ["*", "9", "A"] as const;
 
-export const PATTERN_CHARS = Object.values(PatternChar);
+export type PatternChar = (typeof PATTERN_CHARS)[number];
 
 export const REG_EXPS = {
   Letters: /^[a-z]/i,
@@ -28,24 +24,26 @@ export function format(value: string, pattern: string): FormattedResult {
     const char = chars[count];
 
     if (char && patternChar) {
-      if (patternChar === PatternChar.Any) {
-        // Any letter or number
-        formatted += char;
-        count++;
-      } else if (patternChar === PatternChar.Number) {
-        // Numbers only
-        if (/^[0-9]/i.test(char)) {
-          formatted += char;
-        }
-
-        count++;
-      } else if (patternChar === PatternChar.Letter) {
-        // Letters only
-        if (/^[a-z]/i.test(char)) {
+      if (isPatternChar(patternChar)) {
+        if (patternChar === "*") {
+          // Any letter or number
           formatted += char;
+          count++;
+        } else if (patternChar === "9") {
+          // Numbers only
+          if (/^[0-9]/i.test(char)) {
+            formatted += char;
+          }
+
+          count++;
+        } else if (patternChar === "A") {
+          // Letters only
+          if (/^[a-z]/i.test(char)) {
+            formatted += char;
+          }
+
+          count++;
         }
-
-        count++;
       } else {
         formatted += patternChar;
       }
@@ -54,3 +52,7 @@ export function format(value: string, pattern: string): FormattedResult {
 
   return { raw, formatted };
 }
+
+export function isPatternChar(char: unknown): char is PatternChar {
+  return PATTERN_CHARS.some((c) => char === c);
+}

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

@@ -1,6 +1,6 @@
 import { attr, css, element, html, listen, queryAll } from "@joist/element";
 
-import { PATTERN_CHARS, PatternChar, REG_EXPS, format } from "./format.js";
+import { PATTERN_CHARS, type PatternChar, REG_EXPS, format } from "./format.js";
 import type { MaskableElement } from "./maskable.element.js";
 
 declare global {
@@ -64,7 +64,7 @@ export class USAInputMaskElement extends HTMLElement {
   onKeyDown(e: KeyboardEvent) {
     const input = e.target as MaskableElement;
     const mask = this.#getMaskFor(input);
-    const patternChar = mask[input.selectionStart || 0];
+    const patternChar = mask[input.selectionStart || 0] as PatternChar;
 
     if (e.key.length === 1 && /^[a-z0-9]/i.test(e.key)) {
       // check that the key is a single character and that it is a letter or number
@@ -72,12 +72,12 @@ export class USAInputMaskElement extends HTMLElement {
       if (input.value.length >= mask.length) {
         // prevent default once value is the same as the mask length
         e.preventDefault();
-      } else if (patternChar === PatternChar.Number) {
+      } else if (patternChar === "9") {
         if (!REG_EXPS.Numbers.test(e.key)) {
           // if pattern char specifies number and is not
           e.preventDefault();
         }
-      } else if (patternChar === PatternChar.Letter) {
+      } else if (patternChar === "A") {
         if (!REG_EXPS.Letters.test(e.key)) {
           // if pattern char specifies letter and is not
           e.preventDefault();

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

@@ -18,6 +18,10 @@ declare global {
   shadowDom: [
     css`
       :host {
+        --usa-radio-active-color: #005ea2;
+        --usa-radio-tiled-bg: rgba(0, 94, 162, 0.1);
+        --usa-radio-focus-color: #2491ff;
+
         display: flex;
         flex-direction: column;
         gap: 1rem;
@@ -51,14 +55,14 @@ declare global {
       }
 
       label:has(input:checked)::before {
-        background-color: #005ea2;
+        background-color: var(--usa-radio-active-color);
         box-shadow:
-          0 0 0 2px #005ea2,
+          0 0 0 2px var(--usa-radio-active-color),
           inset 0 0 0 2px #fff;
       }
 
       label:has(input:focus)::before {
-        outline: 0.25rem solid #2491ff;
+        outline: 0.25rem solid var(--usa-radio-focus-color);
         outline-offset: 0.25rem;
       }
 
@@ -75,8 +79,8 @@ declare global {
       }
 
       :host([tiled]) label:has(input:checked) {
-        background-color: rgba(0, 94, 162, 0.1);
-        border-color: #005ea2;
+        background-color: var(--usa-radio-tiled-bg);
+        border-color: var(--usa-radio-active-color);
       }
 
       slot {