@noctuatech/uswds 0.0.34 → 0.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noctuatech/uswds",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "type": "module",
   "workspaces": ["packages/**"],
   "main": "./target/lib.js",
@@ -15,7 +15,7 @@
     "build": "wireit",
     "preview": "wireit",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "wireit",
+    "build_storybook": "wireit",
     "gen": "plop",
     "prepare": "wireit"
   },
@@ -29,10 +29,10 @@
       "dependencies": ["tsc"]
     },
     "build": {
-      "dependencies": ["tsc", "build-storybook", "copy_icons"]
+      "dependencies": ["build_storybook", "build_website"]
     },
     "preview": {
-      "command": "browser-sync start --server --files \"target/**\" \"index.html\"",
+      "command": "eleventy --serve --incremental --quiet",
       "service": true,
       "dependencies": [
         {
@@ -41,14 +41,17 @@
         }
       ]
     },
-    "build-storybook": {
-      "command": "storybook build"
+    "build_storybook": {
+      "command": "storybook build -o _site/storybook"
+    },
+    "build_website": {
+      "command": "eleventy --pathprefix=uswds",
+      "dependencies": ["tsc", "copy_icons"]
     },
     "tsc": {
       "command": "tsc --build --pretty",
       "clean": "if-file-deleted",
       "files": ["src/**", "tsconfig.json"],
-      "output": ["target/**", "tsconfig.tsbuildinfo"],
       "dependencies": ["./packages/testing:build"]
     },
     "copy_icons": {
@@ -67,10 +70,9 @@
     "tslib": "2.8.1"
   },
   "devDependencies": {
+    "@11ty/eleventy": "^3.0.0",
     "@biomejs/biome": "1.9.4",
     "@open-wc/testing": "^4.0.0",
-    "@rollup/plugin-node-resolve": "^16.0.0",
-    "@rollup/plugin-terser": "^0.4.4",
     "@storybook/addon-essentials": "^8.6.0",
     "@storybook/web-components": "^8.6.0",
     "@storybook/web-components-vite": "^8.6.0",
@@ -78,7 +80,6 @@
     "@types/node": "^22.0.0",
     "@uswds/uswds": "^3.10.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",
@@ -86,7 +87,7 @@
     "mocha": "^11.0.0",
     "plop": "^4.0.1",
     "storybook": "^8.6.0",
-    "typescript": "^5.8.0-beta",
+    "typescript": "^5.8.0",
     "wireit": "^0.14.9"
   },
   "lint-staged": {

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

@@ -7,7 +7,7 @@ import type { USAAccordionElement } from "./accordion.element.js";
 const meta = {
   title: "usa-accordion",
   tags: ["autodocs"],
-  render(args) {
+  render() {
     return html`
       <usa-accordion id="first" name="ammendment">
         <h4 slot="heading">First Ammendment</h4>

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

@@ -16,6 +16,7 @@ const meta = {
               i === BUTTON_VARIANTS.length - 1 ? "" : "\n\n"
             }`,
         )}
+        <usa-button disabled>Disabled</usa-button>
       </div>
     `;
   },

package/src/lib/card/card.test.ts

@@ -15,7 +15,7 @@ describe("usa-card", () => {
       <usa-card-group>
         <usa-card>
           <usa-card-media>
-            <img src="/img/built-to-grow--alt.jpg" alt="A placeholder image" />
+            <img alt="A placeholder image" />
           </usa-card-media>
 
           <usa-card-header>Card with media</usa-card-header>

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

@@ -0,0 +1,24 @@
+import { css, element, html } from "@joist/element";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-checkbox-group": USACheckboxGroupElement;
+  }
+}
+
+@element({
+  tagName: "usa-checkbox-group",
+  shadowDom: [
+    css`
+      :host {
+        display: flex;
+        gap: 0.75rem;
+        flex-direction: column;
+      }
+    `,
+    html`
+      <slot></slot>
+    `,
+  ],
+})
+export class USACheckboxGroupElement extends HTMLElement {}

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

@@ -33,7 +33,7 @@ declare global {
         cursor: pointer;
         font-size: 1.06rem;
         line-height: 1.3;
-        flex-wrap: wrap;
+        width: 100%;
       }
 
       .checkbox {
@@ -43,19 +43,20 @@ declare global {
         align-items: center;
         justify-content: center;
         height: 1.25rem;
-        width: 1.25rem;
+        min-width: 1.25rem;
+        max-width: 1.25rem;
         border-radius: 2px;
         position: relative;
         margin-right: 0.75rem;
       }
 
-      input:checked + .checkbox {
-        background-color: #005ea2;
-        box-shadow: 0 0 0 2px #005ea2;
+      input:disabled + .checkbox {
+        background-color: #fff;
+        box-shadow: 0 0 0 2px #757575;
       }
 
-      :host([disabled]) .checkbox {
-        background-color: #fff;
+      input:disabled:is(:checked) + .checkbox {
+        background-color: #757575;
         box-shadow: 0 0 0 2px #757575;
       }
 
@@ -63,6 +64,11 @@ declare global {
         color: #757575;
         cursor: not-allowed;
       }
+
+      input:checked + .checkbox {
+        background-color: #005ea2;
+        box-shadow: 0 0 0 2px #005ea2;
+      }
       
       input:checked + .checkbox::after {
         content: " ";
@@ -98,6 +104,11 @@ declare global {
         background-color: rgba(0, 94, 162, 0.1);
         border-color: #005ea2;
       }
+
+      :host([tiled]) label:has(input:checked:is(:disabled)) {
+        background-color: #fff;
+        border-color: #757575;
+      }
     `,
     html`
       <label>
@@ -144,6 +155,7 @@ export class USACheckboxElement extends HTMLElement {
       checked: this.checked,
       name: this.name,
       disabled: this.disabled,
+      required: this.required,
     });
 
     this.#syncFormState();
@@ -154,6 +166,7 @@ export class USACheckboxElement extends HTMLElement {
       checked: this.checked,
       name: this.name,
       disabled: this.disabled,
+      required: this.required,
     });
 
     this.#syncFormState();
@@ -170,20 +183,20 @@ export class USACheckboxElement extends HTMLElement {
   #syncFormState() {
     const checkbox = this.#checkbox();
 
+    this.#internals.setValidity({});
+
     if (checkbox.checked) {
       this.#internals.setFormValue(this.value);
     } else {
       this.#internals.setFormValue(null);
     }
 
-    if (this.required && !checkbox.checked) {
+    if (checkbox.validationMessage) {
       this.#internals.setValidity(
-        { valueMissing: true },
-        "Please check this box if you want to proceed",
-        this.#checkbox(),
+        { customError: true },
+        checkbox.validationMessage,
+        checkbox,
       );
-    } else {
-      this.#internals.setValidity({});
     }
   }
 }

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

@@ -10,43 +10,32 @@ import type { USACheckboxElement } from "./checkbox.element.js";
 const meta = {
   title: "usa-checkbox",
   tags: ["autodocs"],
-  render(args) {
+  render() {
     return html`
-      <usa-checkbox
-        name=${args.name}
-        value=${ifDefined(args.value)}
-        checked=${ifDefined(args.checked)}
-        ?tiled=${args.tiled}
-        ?disabled=${args.disabled}
-      >
-        Hello World
-        ${when(
-          args.description,
-          () => html`<usa-description>${args.description}</usa-description>`,
-        )}
-      </usa-checkbox>
+      <usa-checkbox-group>
+        <legend class="usa-legend">Select any historical figure</legend>
+
+        <usa-checkbox name="historical-figure" value="sojurner-truth" tiled>
+          Sojourner Truth
+          <usa-description>This is optional text that can be used to describe the label in more detail.</usa-description>
+        </usa-checkbox>
+
+        <usa-checkbox name="historical-figure" value="frederick-douglass" tiled>
+          Frederick Douglass
+        </usa-checkbox>
+
+        <usa-checkbox name="historical-figure" value="booker-t-washington" tiled>
+          Booker T. Washington
+        </usa-checkbox>
+
+        <usa-checkbox name="historical-figure" value="gw-carver" tiled disabled>
+          George Washington Carver
+        </usa-checkbox>
+      </usa-checkbox-group>
     `;
   },
-  argTypes: {
-    name: {
-      control: "text",
-    },
-    value: {
-      control: "text",
-    },
-    description: {
-      control: "text",
-    },
-    tiled: {
-      control: "boolean",
-    },
-  },
-  args: {
-    name: "toc",
-    value: "agree",
-    tiled: false,
-    disabled: false,
-  },
+  argTypes: {},
+  args: {},
 } satisfies Meta<USACheckboxElement & { description: string }>;
 
 export default meta;
@@ -55,5 +44,54 @@ type Story = StoryObj<USACheckboxElement>;
 
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary: Story = {
-  args: {},
+  render() {
+    return html`
+      <usa-checkbox-group>
+        <legend class="usa-legend">Select any historical figure</legend>
+
+        <usa-checkbox name="historical-figure" value="sojurner-truth">
+          Sojourner Truth
+        </usa-checkbox>
+
+        <usa-checkbox name="historical-figure" value="frederick-douglass">
+          Frederick Douglass
+        </usa-checkbox>
+
+        <usa-checkbox name="historical-figure" value="booker-t-washington">
+          Booker T. Washington
+        </usa-checkbox>
+
+        <usa-checkbox name="historical-figure" value="gw-carver" disabled>
+          George Washington Carver
+        </usa-checkbox>
+      </usa-checkbox-group>
+    `;
+  },
+};
+
+export const Tiled: Story = {
+  render() {
+    return html`
+      <usa-checkbox-group>
+        <legend class="usa-legend">Select any historical figure</legend>
+
+        <usa-checkbox name="historical-figure" value="sojurner-truth" tiled>
+          Sojourner Truth
+          <usa-description>This is optional text that can be used to describe the label in more detail.</usa-description>
+        </usa-checkbox>
+
+        <usa-checkbox name="historical-figure" value="frederick-douglass" tiled>
+          Frederick Douglass
+        </usa-checkbox>
+
+        <usa-checkbox name="historical-figure" value="booker-t-washington" tiled>
+          Booker T. Washington
+        </usa-checkbox>
+
+        <usa-checkbox name="historical-figure" value="gw-carver" tiled disabled>
+          George Washington Carver
+        </usa-checkbox>
+      </usa-checkbox-group>
+    `;
+  },
 };

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

@@ -44,8 +44,8 @@ declare global {
           <slot name="description"></slot>
         </div>
 
-        <div class="meta">
-          <slot name="meta"></slot>
+        <div class="slots">
+          <slot name="tags"></slot>
         </div>
       </div>
     `,

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

@@ -7,7 +7,7 @@ import type { USACollectionElement } from "./collection.element.js";
 const meta = {
   title: "usa-collection",
   tags: ["autodocs"],
-  render(args) {
+  render() {
     return html`
       <usa-collection>
         <usa-collection-item>
@@ -16,8 +16,12 @@ 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>
+          <usa-tag slot="tags">PMA</usa-tag>
+          <usa-tag slot="tags">OMB</usa-tag>
         </usa-collection-item>
 
         <usa-collection-item>
@@ -28,8 +32,12 @@ 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>
+          <usa-tag slot="tags">PMA</usa-tag>
+          <usa-tag slot="tags">OMB</usa-tag>
         </usa-collection-item>
 
         <usa-collection-item>
@@ -40,6 +48,10 @@ const meta = {
           <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-tag slot="tags" type="new">NEW</usa-tag>
+          <usa-tag slot="tags">PMA</usa-tag>
+          <usa-tag slot="tags">OMB</usa-tag>
         </usa-collection-item>
 
         <usa-collection-item>
@@ -52,6 +64,10 @@ const meta = {
           <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-tag slot="tags" type="new">NEW</usa-tag>
+          <usa-tag slot="tags">PMA</usa-tag>
+          <usa-tag slot="tags">OMB</usa-tag>
         </usa-collection-item>
       </usa-collection>
     `;

package/src/lib/define.ts

@@ -32,3 +32,4 @@ 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";
+import "./checkbox/checkbox-group/checkbox-group.element.js";

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

@@ -106,6 +106,9 @@ export class USAFileInputElement extends HTMLElement {
   @attr()
   accessor accept = "";
 
+  @attr()
+  accessor required = false;
+
   @observe()
   accessor files: FileList | null = null;
 
@@ -119,12 +122,25 @@ export class USAFileInputElement extends HTMLElement {
       name: this.name,
       multiple: this.multiple,
       accept: this.accept,
+      required: this.required,
     });
   }
 
+  connectedCallback() {
+    const input = this.#input();
+
+    if (input.validationMessage) {
+      this.#internals.setValidity(
+        { customError: true },
+        input.validationMessage,
+        input,
+      );
+    }
+  }
+
   @effect()
   onChange() {
-    this.#input({ files: this.files });
+    const input = this.#input({ files: this.files });
     this.#preview({ files: this.files });
 
     const box = this.#box();
@@ -140,6 +156,16 @@ export class USAFileInputElement extends HTMLElement {
     }
 
     this.#internals.setFormValue(formData);
+
+    if (input.validationMessage) {
+      this.#internals.setValidity(
+        { customError: true },
+        input.validationMessage,
+        input,
+      );
+    } else {
+      this.#internals.setValidity({});
+    }
   }
 
   @listen("change")

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

@@ -7,7 +7,7 @@ import type { USAFileInputElement } from "./file-input.element.js";
 const meta = {
   title: "usa-file-input",
   tags: ["autodocs"],
-  render(args) {
+  render() {
     function onSubmit(e: Event) {
       e.preventDefault();
 
@@ -18,7 +18,7 @@ const meta = {
 
     return html`
       <form @submit=${onSubmit}>
-        <usa-file-input name="upload">
+        <usa-file-input name="upload" required>
           Input accepts a single file
 
           <div slot="description">

package/src/lib/icon/icon.element.ts

@@ -29,7 +29,9 @@ declare global {
     `,
   ],
 })
-@injectable()
+@injectable({
+  name: "usa-icon-ctx",
+})
 export class USAIconElement extends HTMLElement {
   @attr()
   accessor icon: USAIcon = "accessibility_new";
@@ -45,9 +47,11 @@ export class USAIconElement extends HTMLElement {
     this.#updateIcon();
   }
 
-  attributeChangedCallback() {
+  attributeChangedCallback(_: string, newVal: string, oldVal: string) {
     if (this.#injected) {
-      this.#updateIcon();
+      if (newVal !== oldVal) {
+        this.#updateIcon();
+      }
     }
   }
 
@@ -55,7 +59,13 @@ export class USAIconElement extends HTMLElement {
     const icon = this.#icon();
 
     if (this.shadowRoot) {
-      this.shadowRoot.append(await icon.getIcon(this.icon));
+      const currentIcon = await icon.getIcon(this.icon);
+
+      if (this.shadowRoot.firstElementChild) {
+        this.shadowRoot.firstElementChild.replaceWith(currentIcon);
+      } else {
+        this.shadowRoot.append(currentIcon);
+      }
     }
   }
 }

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

@@ -102,6 +102,18 @@ export class USATextInputElement
   @attr()
   accessor placeholder = "";
 
+  @attr()
+  accessor min = "";
+
+  @attr()
+  accessor max = "";
+
+  @attr()
+  accessor minLength = -1;
+
+  @attr()
+  accessor maxLength = -1;
+
   @attr()
   accessor required = false;
 
@@ -134,9 +146,17 @@ export class USATextInputElement
   }
 
   attributeChangedCallback() {
-    const { autocomplete, placeholder, name, type } = this;
-
-    this.#input({ autocomplete, placeholder, name, type });
+    this.#input({
+      autocomplete: this.autocomplete,
+      placeholder: this.placeholder,
+      name: this.name,
+      type: this.type,
+      required: this.required,
+      min: this.min,
+      max: this.max,
+      minLength: this.minLength,
+      maxLength: this.maxLength,
+    });
   }
 
   connectedCallback() {
@@ -182,12 +202,15 @@ export class USATextInputElement
   #syncFormState() {
     const input = this.#input();
 
+    this.#internals.setValidity({});
     this.#internals.setFormValue(input.value);
 
-    if (this.required && !input.value) {
-      this.#internals.setValidity({ valueMissing: true }, "Required", input);
-    } else {
-      this.#internals.setValidity({});
+    if (input.validationMessage) {
+      this.#internals.setValidity(
+        { customError: true },
+        input.validationMessage,
+        input,
+      );
     }
   }
 

package/src/lib/radio/context.ts

@@ -3,6 +3,7 @@ import { StaticToken } from "@joist/di";
 export interface RadioContainer extends Node {
   name: string;
   value: string;
+  required: boolean;
   addRadioOption(el: HTMLElement): void;
 }
 

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

@@ -37,22 +37,24 @@ export class USARadioOptionElement extends HTMLElement {
   @attr()
   accessor value = "";
 
+  @attr()
+  accessor disabled = false;
+
   #label = query("label");
   #input = query("input");
   #slot = query("slot");
-  #radio = inject(RADIO_CTX);
+  #radioCtx = inject(RADIO_CTX);
 
   #observer = new MutationObserver(() => {
-    const radio = this.#radio();
+    this.#sync();
+  });
 
+  attributeChangedCallback() {
     this.#input({
-      name: radio.name,
-      checked: radio.value === this.value,
+      value: this.value,
+      disabled: this.disabled,
     });
-  });
 
-  attributeChangedCallback() {
-    this.#input({ value: this.value });
     this.#slot({ name: this.value });
 
     this.slot = this.value;
@@ -60,17 +62,14 @@ export class USARadioOptionElement extends HTMLElement {
 
   @injected()
   onInjected() {
-    const radio = this.#radio();
+    const radioCtx = this.#radioCtx();
 
-    radio.addRadioOption(this.#label());
+    radioCtx.addRadioOption(this.#label());
 
-    this.#input({
-      name: radio.name,
-      checked: radio.value === this.value,
-    });
+    this.#sync();
 
-    this.#observer.observe(radio, {
-      attributeFilter: ["value", "name"],
+    this.#observer.observe(radioCtx, {
+      attributeFilter: ["value", "name", "required"],
     });
   }
 
@@ -79,4 +78,14 @@ export class USARadioOptionElement extends HTMLElement {
 
     this.#observer.disconnect();
   }
+
+  #sync() {
+    const radioCtx = this.#radioCtx();
+
+    this.#input({
+      name: radioCtx.name,
+      checked: radioCtx.value === this.value,
+      required: radioCtx.required,
+    });
+  }
 }