@noctuatech/uswds 0.1.3 → 0.2.0

package/src/lib/process-list/process-list-item/process-list-item.element.ts

@@ -0,0 +1,80 @@
+import { attr, css, element, html } from "@joist/element";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-process-list-item": USAProcessListItemElement;
+  }
+}
+
+@element({
+  tagName: "usa-process-list-item",
+  shadowDom: [
+    css`
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        display: flex;
+        gap: .5rem;
+        flex-direction: column;
+        position: relative;
+        padding-left: 3rem;
+      }
+
+      .number {
+        background: #fff;
+        box-shadow:  0 0 0 .25rem #fff;
+        border: .25rem solid #1b1b1b;
+        position: absolute;
+        height: 2.5rem;
+        width: 2.5rem;
+        border-radius: 50%;
+        left: 0;
+        top: -11px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: bold;
+        z-index: 1;
+      }
+
+      .line {
+        background: #d9e8f6;
+        width: 0.5rem;
+        position: absolute;
+        top: 0;
+        bottom: -2rem;
+        left: calc(2.5rem / 2 - .25rem);
+      }
+      
+      #title::slotted(*) {
+        margin-top: 0;
+        margin-bottom: 0;
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+
+      :host(:last-child) .line {
+        display: none;
+      }
+    `,
+    html`
+      <div class="number">
+        <slot name="count">1</slot>
+      </div>
+
+      <div class="line"></div>
+      
+      <slot id="title" name="title"></slot>
+      
+      <div class="content">
+        <slot></slot>
+      </div>
+    `,
+  ],
+})
+export class USAProcessListItemElement extends HTMLElement {
+  @attr()
+  accessor role = "listitem";
+}

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

@@ -0,0 +1,27 @@
+import { attr, css, element, html } from "@joist/element";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-process-list": USAProcessListElement;
+  }
+}
+
+@element({
+  tagName: "usa-process-list",
+  shadowDom: [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+    `,
+    html`
+      <slot></slot>
+    `,
+  ],
+})
+export class USAProcessListElement extends HTMLElement {
+  @attr()
+  accessor role = "list";
+}

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

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+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"],
+  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>
+  `;
+  },
+  argTypes: {},
+  args: {},
+} satisfies Meta<USAProcessListElement>;
+
+export default meta;
+
+type Story = StoryObj<USAProcessListElement>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {},
+};

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

@@ -0,0 +1,41 @@
+import "./process-list.element.js";
+import "./process-list-item/process-list-item.element.js";
+
+import { assert, fixture, html } from "@open-wc/testing";
+
+import type { USAProcessListElement } from "./process-list.element.js";
+
+describe("usa-process-list", () => {
+  it("should be accessible", async () => {
+    const processList = await fixture<USAProcessListElement>(html`
+      <usa-process-list>
+        <usa-process-list-item>
+          <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>
+          <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>
+          <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>
+    `);
+
+    return assert.isAccessible(processList);
+  });
+});

package/src/lib/search/search.element.ts

@@ -0,0 +1,94 @@
+import { attr, css, element, html, listen, query } from "@joist/element";
+
+import { USASearchEvent } from "./search.event.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-search": USASearchElement;
+  }
+}
+
+@element({
+  tagName: "usa-search",
+  shadowDom: [
+    css`
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        display: block;
+        position: relative;
+      }
+
+      form {
+        display: flex;
+        align-items: flex-end
+      }
+
+      usa-input {
+        flex-grow: 1;
+      }
+
+      usa-button {
+        margin-bottom: 1.5rem;
+        height: 2.5rem;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        position: relative;
+      }
+    `,
+    html`
+      <form>
+        <usa-input>
+          <slot></slot>
+        </usa-input>
+
+        <usa-button type="submit">Search</usa-button>
+      </form>
+    `,
+  ],
+})
+export class USASearchElement extends HTMLElement {
+  @attr()
+  accessor name = "search";
+
+  @attr()
+  accessor placeholder = "Search";
+
+  @attr()
+  accessor required = false;
+
+  @attr()
+  accessor disabled = false;
+
+  @attr()
+  accessor autocomplete: AutoFill = "off";
+
+  @attr()
+  accessor value = "";
+
+  #input = query("usa-input");
+
+  attributeChangedCallback() {
+    this.#input({
+      name: this.name,
+      placeholder: this.placeholder,
+      required: this.required,
+      disabled: this.disabled,
+      autocomplete: this.autocomplete,
+      value: this.value,
+    });
+  }
+
+  @listen("submit", "form")
+  onSubmit(e: Event) {
+    const searchEvent = new USASearchEvent(this.value);
+
+    this.dispatchEvent(searchEvent);
+
+    if (searchEvent.defaultPrevented) {
+      e.preventDefault();
+    }
+  }
+}

package/src/lib/search/search.event.ts

@@ -0,0 +1,15 @@
+declare global {
+  interface HTMLElementEventMap {
+    "usa::search": USASearchEvent;
+  }
+}
+
+export class USASearchEvent extends Event {
+  value: string;
+
+  constructor(value: string) {
+    super("usa::search", { bubbles: true, composed: true, cancelable: true });
+
+    this.value = value;
+  }
+}

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

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+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"],
+  render() {
+    function onSubmit(e: USASearchEvent) {
+      e.preventDefault();
+
+      console.log("SUBMIT", e.value);
+    }
+
+    return html`<usa-search @usa::search=${onSubmit}>Search</usa-search>`;
+  },
+  argTypes: {},
+  args: {},
+} satisfies Meta<USASearchElement>;
+
+export default meta;
+
+type Story = StoryObj<USASearchElement>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {},
+};

package/src/lib/search/search.test.ts

@@ -0,0 +1,81 @@
+import "./search.element.js";
+import "../input/input.element.js";
+import "../button/button.element.js";
+
+import { assert, fixture, html } from "@open-wc/testing";
+
+import { userEvent } from "@testing-library/user-event";
+import type { USASearchElement } from "./search.element.js";
+
+describe("usa-search", () => {
+  it("should be accessible", async () => {
+    const search = await fixture<USASearchElement>(html`
+      <usa-search name="search">Hello World</usa-search>
+    `);
+
+    return assert.isAccessible(search);
+  });
+
+  it("should have default attribute values", async () => {
+    const search = await fixture<USASearchElement>(html`
+      <usa-search></usa-search>
+    `);
+
+    assert.equal(search.name, "search");
+    assert.equal(search.placeholder, "Search");
+    assert.equal(search.required, false);
+    assert.equal(search.disabled, false);
+    assert.equal(search.autocomplete, "off");
+    assert.equal(search.value, "");
+  });
+
+  it("should update attributes when changed", async () => {
+    const search = await fixture<USASearchElement>(html`
+      <usa-search></usa-search>
+    `);
+
+    search.name = "custom-name";
+    search.placeholder = "Custom Placeholder";
+    search.required = true;
+    search.disabled = true;
+    search.autocomplete = "on";
+    search.value = "test value";
+
+    assert.equal(search.name, "custom-name");
+    assert.equal(search.placeholder, "Custom Placeholder");
+    assert.equal(search.required, true);
+    assert.equal(search.disabled, true);
+    assert.equal(search.autocomplete, "on");
+    assert.equal(search.value, "test value");
+  });
+
+  it("should handle form submission", async () => {
+    const search = await fixture<USASearchElement>(html`
+      <usa-search></usa-search>
+    `);
+
+    let submitted = false;
+
+    search.addEventListener("submit", (e) => {
+      e.preventDefault();
+
+      submitted = true;
+    });
+
+    const form = search.shadowRoot?.querySelector("form");
+    form?.dispatchEvent(new Event("submit", { bubbles: true, composed: true }));
+
+    assert.isTrue(submitted);
+  });
+
+  it("should update value on input change", async () => {
+    const search = await fixture<USASearchElement>(html`
+      <usa-search></usa-search>
+    `);
+
+    const input = search.shadowRoot?.querySelector("usa-input");
+    input?.dispatchEvent(new Event("input", { bubbles: true }));
+
+    assert.equal(search.value, "");
+  });
+});

package/src/lib.ts

@@ -36,3 +36,8 @@ export { USACheckboxGroupElement } from "./lib/checkbox/checkbox-group/checkbox-
 export { USARangeSliderElement } from "./lib/range-slider/range-slider.element.js";
 export { USAComboBoxElement as USAAutocompleteElement } from "./lib/combo-box/combo-box.element.js";
 export { USAComboBoxOptionElement } from "./lib/combo-box/combo-box-option/combo-box-option.element.js";
+export { USASearchElement } from "./lib/search/search.element.js";
+export { USAProcessListElement } from "./lib/process-list/process-list.element.js";
+export { USAProcessListItemElement } from "./lib/process-list/process-list-item/process-list-item.element.js";
+export { USAInPageNavElement } from "./lib/in-page-nav/in-page-nav.element.js";
+export { USAInPageNavItemElement } from "./lib/in-page-nav/in-page-nav-item/in-page-nav-item.element.js";

package/target/lib/button/button.element.js

@@ -15,7 +15,7 @@ let USAButtonElement = (() => {
                 delegatesFocus: true,
             },
             shadowDom: [
-                css `:host{display:contents}button{box-sizing:border-box;font-size:1.06rem;line-height:.9;color:#fff;background-color:#005ea2;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-items:center;border:0;border-radius:.25rem;cursor:pointer;-moz-column-gap:.5rem;column-gap:.5rem;display:inline-flex;font-weight:700;justify-content:center;padding:.75rem 1.25rem;text-align:center;text-decoration:none;width:100%;cursor:pointer}@media all and (min-width:30em){button{width:auto}}button:visited{color:#fff}button:hover{color:#fff;background-color:#1a4480;border-bottom:0;text-decoration:none}button:active{color:#fff;background-color:#162e51}button:not([disabled]):focus{outline-offset:.25rem}button:disabled{color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1}button:disabled:active,button:disabled:focus,button:disabled:hover{color:#454545;background-color:#c9c9c9}button:focus{outline:.25rem solid #2491ff;outline-offset:0}:host([variant=secondary]) button{color:#fff;background-color:#d83933}:host([variant=secondary]) button:hover{background-color:#b50909}:host([variant=secondary]) button:active{background-color:#8b0a03}:host([variant=cool]) button{color:#1b1b1b;background-color:#00bde3}:host([variant=cool]) button:hover{background-color:#28a0cb}:host([variant=cool]) button:active{color:#fff;background-color:#07648d}:host([variant=warm]) button{color:#1b1b1b;background-color:#fa9441}:host([variant=warm]) button:hover{color:#fff;background-color:#c05600}:host([variant=warm]) button:active{color:#fff;background-color:#775540}:host([variant=outline]) button{background-color:transparent;box-shadow:inset 0 0 0 2px #005ea2;color:#005ea2}:host([variant=outline]) button:hover{box-shadow:inset 0 0 0 2px #1a4480;color:#1a4480}:host([variant=outline]) button:active{box-shadow:inset 0 0 0 2px #162e51;color:#162e51}`,
+                css `:host{display:inline-block;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}button{box-sizing:border-box;font-size:1.06rem;line-height:.9;color:#fff;background-color:#005ea2;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-items:center;border:0;border-top-right-radius:inherit;border-bottom-right-radius:inherit;border-top-left-radius:inherit;border-bottom-left-radius:inherit;cursor:pointer;-moz-column-gap:0.5rem;column-gap:.5rem;display:inline-flex;font-weight:700;justify-content:center;padding:.75rem 1.25rem;text-align:center;text-decoration:none;width:100%;height:100%;cursor:pointer}@media all and (min-width:30em){:host{width:auto}}button:visited{color:#fff}button:hover{color:#fff;background-color:#1a4480;border-bottom:0;text-decoration:none}button:active{color:#fff;background-color:#162e51}button:not([disabled]):focus{outline-offset:0.25rem}button:disabled{color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1}button:disabled:active,button:disabled:focus,button:disabled:hover{color:#454545;background-color:#c9c9c9}button:focus{outline:.25rem solid #2491ff;outline-offset:0}:host([variant=secondary]) button{color:#fff;background-color:#d83933}:host([variant=secondary]) button:hover{background-color:#b50909}:host([variant=secondary]) button:active{background-color:#8b0a03}:host([variant=cool]) button{color:#1b1b1b;background-color:#00bde3}:host([variant=cool]) button:hover{background-color:#28a0cb}:host([variant=cool]) button:active{color:#fff;background-color:#07648d}:host([variant=warm]) button{color:#1b1b1b;background-color:#fa9441}:host([variant=warm]) button:hover{color:#fff;background-color:#c05600}:host([variant=warm]) button:active{color:#fff;background-color:#775540}:host([variant=outline]) button{background-color:transparent;box-shadow:inset 0 0 0 2px #005ea2;color:#005ea2}:host([variant=outline]) button:hover{box-shadow:inset 0 0 0 2px #1a4480;color:#1a4480}:host([variant=outline]) button:active{box-shadow:inset 0 0 0 2px #162e51;color:#162e51}`,
                 html `<button tabindex="0"><slot></slot></button>`,
             ],
         })];

package/target/lib/button/button.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.element.js","sourceRoot":"","sources":["../../../src/lib/button/button.element.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"button.element.js","sourceRoot":"","sources":["../../../src/lib/button/button.element.ts"],"names":[],"mappings":"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"}

package/target/lib/checkbox/checkbox.element.js

@@ -4,7 +4,7 @@ let USACheckboxElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-checkbox",
             shadowDom: [
-                css `*{box-sizing:border-box}:host{display:inline-block;max-width:30rem;position:relative}:host([tiled]) label{background-color:#fff;border:2px solid #c9c9c9;border-radius:.25rem;color:#1b1b1b;padding:.75rem 1rem .75rem .75rem}label{display:inline-flex;cursor:pointer;font-size:1.06rem;line-height:1.3;width:100%}.checkbox{background:#fff;box-shadow:0 0 0 2px #1b1b1b;display:flex;align-items:center;justify-content:center;height:1.25rem;min-width:1.25rem;max-width:1.25rem;border-radius:2px;position:relative;margin-right:.75rem}input:disabled+.checkbox{background-color:#fff;box-shadow:0 0 0 2px #757575}input:disabled:is(:checked)+.checkbox{background-color:#757575;box-shadow:0 0 0 2px #757575}:host([disabled]) label{color:#757575;cursor:not-allowed}input:checked+.checkbox{background-color:#005ea2;box-shadow:0 0 0 2px #005ea2}input:checked+.checkbox::after{content:" ";display:block;height:1rem;width:.5rem;border-right:4px solid #fff;border-bottom:4px solid #fff;transform:rotate(45deg) scale(.65)}input{position:absolute}input:focus+.checkbox{outline:.25rem solid #2491ff;outline-offset:.25rem}.description{display:block;font-size:.93rem;margin-top:.5rem}.break{flex-basis:100%;height:0}:host([tiled]) label:has(input:checked){background-color:rgba(0,94,162,.1);border-color:#005ea2}:host([tiled]) label:has(input:checked:is(:disabled)){background-color:#fff;border-color:#757575}`,
+                css `*{box-sizing:border-box}:host{display:inline-block;max-width:30rem;position:relative}:host([tiled]) label{background-color:#fff;border:2px solid #c9c9c9;border-radius:.25rem;color:#1b1b1b;padding:.75rem 1rem .75rem .75rem}label{display:inline-flex;cursor:pointer;font-size:1.06rem;line-height:1.3;width:100%}.checkbox{background:#fff;box-shadow:0 0 0 2px #1b1b1b;display:flex;align-items:center;justify-content:center;height:1.25rem;min-width:1.25rem;max-width:1.25rem;border-radius:2px;position:relative;margin-right:.75rem}input:disabled+.checkbox{background-color:#fff;box-shadow:0 0 0 2px #757575}input:disabled:is(:checked)+.checkbox{background-color:#757575;box-shadow:0 0 0 2px #757575}:host([disabled]) label{color:#757575;cursor:not-allowed}input:checked+.checkbox{background-color:#005ea2;box-shadow:0 0 0 2px #005ea2}input:checked+.checkbox::after{content:" ";display:block;height:1rem;width:.5rem;border-right:4px solid #fff;border-bottom:4px solid #fff;transform:rotate(45deg) scale(.65)}input{position:absolute}input:focus+.checkbox{outline:.25rem solid #2491ff;outline-offset:0.25rem}.description{display:block;font-size:.93rem;margin-top:.5rem}.break{flex-basis:100%;height:0}:host([tiled]) label:has(input:checked){background-color:rgba(0,94,162,.1);border-color:#005ea2}:host([tiled]) label:has(input:checked:is(:disabled)){background-color:#fff;border-color:#757575}`,
                 html `<label><input type="checkbox" tabindex="0"><div class="checkbox"></div><div class="title"><slot></slot></div></label>`,
             ],
         })];

package/target/lib/collection/collection.stories.js

@@ -4,7 +4,7 @@ const meta = {
     title: "usa-collection",
     tags: ["autodocs"],
     render() {
-        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-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><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-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><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-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><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-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>`;
+        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-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><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.</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><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-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><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!</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>`;
     },
     argTypes: {},
     args: {},

package/target/lib/combo-box/combo-box-option/combo-box-option.element.js

@@ -2,12 +2,7 @@ import { __esDecorate, __runInitializers } from "tslib";
 import { inject, injectable } from "@joist/di";
 import { attr, css, element, html, query } from "@joist/element";
 import { COMBO_BOX_CTX } from "../context.js";
-const template = document.createElement("template");
-template.innerHTML = /*html*/ `
-  <li tabindex="-1" role="option">
-    <slot></slot>
-  </li>
-`;
+const listTemplate = html `<li tabindex="-1" role="option"><slot></slot></li>`;
 let USAComboBoxOptionElement = (() => {
     let _classDecorators = [injectable({
             name: "usa-combo-box-option-ctx",
@@ -39,7 +34,7 @@ let USAComboBoxOptionElement = (() => {
         #value_accessor_storage = __runInitializers(this, _value_initializers, "");
         get value() { return this.#value_accessor_storage; }
         set value(value) { this.#value_accessor_storage = value; }
-        #listItem = (__runInitializers(this, _value_extraInitializers), template.content.cloneNode(true));
+        #listItem = (__runInitializers(this, _value_extraInitializers), listTemplate.createNode());
         #li = query("li", this.#listItem);
         #slot = query("slot", this.#listItem);
         #ctx = inject(COMBO_BOX_CTX);

package/target/lib/combo-box/combo-box-option/combo-box-option.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"combo-box-option.element.js","sourceRoot":"","sources":["../../../../src/lib/combo-box/combo-box-option/combo-box-option.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEjE,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAQ9C,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;AAEpD,QAAQ,CAAC,SAAS,GAAG,QAAQ,CAAC;;;;CAI7B,CAAC;IAmBW,wBAAwB;4BAjBpC,UAAU,CAAC;YACV,IAAI,EAAE,0BAA0B;SACjC,CAAC,EACD,OAAO,CAAC;YACP,OAAO,EAAE,sBAAsB;YAC/B,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;KAOF;gBACD,IAAI,CAAA,eAAe;aACpB;SACF,CAAC;;;;sBAC4C,WAAW;;;;wCAAnB,SAAQ,WAAW;;;;iCACtD,IAAI,EAAE;YACP,oKAAS,KAAK,6BAAL,KAAK,qFAAM;YAFtB,6KAgCC;;;YAhCY,uDAAwB;;QAEnC,uEAAiB,EAAE,EAAC;QAApB,IAAS,KAAK,2CAAM;QAApB,IAAS,KAAK,iDAAM;QAEpB,SAAS,uDAAG,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAkB,EAAC;QAC9D,GAAG,GAAG,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QAClC,KAAK,GAAG,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QACtC,IAAI,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;QAE7B,wBAAwB;YACtB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,iBAAiB,EAAE,CAAC;YAElE,IAAI,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;YAEtC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;YAE5B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,CAAC;QAED,iBAAiB;YACf,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;YAExB,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;QAC5B,CAAC;QAED,oBAAoB;YAClB,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;YAExB,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;YAE7B,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,EAAE,CAAC;QACtB,CAAC;;;;SA/BU,wBAAwB"}
+{"version":3,"file":"combo-box-option.element.js","sourceRoot":"","sources":["../../../../src/lib/combo-box/combo-box-option/combo-box-option.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEjE,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAQ9C,MAAM,YAAY,GAAG,IAAI,CAAA;;;;CAIxB,CAAC;IAmBW,wBAAwB;4BAjBpC,UAAU,CAAC;YACV,IAAI,EAAE,0BAA0B;SACjC,CAAC,EACD,OAAO,CAAC;YACP,OAAO,EAAE,sBAAsB;YAC/B,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;KAOF;gBACD,IAAI,CAAA,eAAe;aACpB;SACF,CAAC;;;;sBAC4C,WAAW;;;;wCAAnB,SAAQ,WAAW;;;;iCACtD,IAAI,EAAE;YACP,oKAAS,KAAK,6BAAL,KAAK,qFAAM;YAFtB,6KAgCC;;;YAhCY,uDAAwB;;QAEnC,uEAAiB,EAAE,EAAC;QAApB,IAAS,KAAK,2CAAM;QAApB,IAAS,KAAK,iDAAM;QAEpB,SAAS,uDAAG,YAAY,CAAC,UAAU,EAAiB,EAAC;QACrD,GAAG,GAAG,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QAClC,KAAK,GAAG,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QACtC,IAAI,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;QAE7B,wBAAwB;YACtB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,iBAAiB,EAAE,CAAC;YAElE,IAAI,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;YAEtC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;YAE5B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,CAAC;QAED,iBAAiB;YACf,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;YAExB,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;QAC5B,CAAC;QAED,oBAAoB;YAClB,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;YAExB,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;YAE7B,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,EAAE,CAAC;QACtB,CAAC;;;;SA/BU,wBAAwB"}

package/target/lib/combo-box/combo-box.element.d.ts

@@ -11,6 +11,7 @@ export declare class USAComboBoxElement extends HTMLElement implements ComboBoxC
     accessor required: boolean;
     accessor value: string;
     accessor placeholder: string;
+    accessor disabled: boolean;
     list: (updates?: (Partial<HTMLUListElement> | ((node: HTMLUListElement) => Partial<HTMLUListElement>)) | undefined) => HTMLUListElement;
     input: (updates?: (Partial<HTMLInputElement> | ((node: HTMLInputElement) => Partial<HTMLInputElement>)) | undefined) => HTMLInputElement;
     currentItemEl: Element | null;
@@ -21,6 +22,8 @@ export declare class USAComboBoxElement extends HTMLElement implements ComboBoxC
     addOption(el: HTMLLIElement): void;
     removeOption(el: HTMLLIElement): void;
     onFocusIn(): void;
+    focus(options?: FocusOptions): void;
+    blur(): void;
     onInput(): Promise<void>;
     onFocusOut(): void;
     onArrowDown(e: KeyboardEvent): void;

package/target/lib/combo-box/combo-box.element.js

@@ -9,7 +9,7 @@ let USAComboBoxElement = (() => {
         }), element({
             tagName: "usa-combo-box",
             shadowDom: [
-                css `*{box-sizing:border-box}:host{--usa-combo-max-height:12.5em;display:block;max-width:30rem;position:relative;margin-bottom:1.5rem}input{border-width:1px;border-color:#5c5c5c;border-style:solid;border-radius:0;color:#1b1b1b;display:block;height:2.5rem;line-height:1.3;font-size:1.06rem;margin-top:.5rem;padding:.5rem;width:100%;padding-right:2.8rem}input:not(:disabled):focus{outline:.25rem solid #2491ff;outline-offset:0}ul{padding:0;position:absolute;bottom:0;width:100%;transform:translateY(100%);margin:0;border:1px solid #5c5c5c;max-height:var(--usa-combo-max-height);overflow-y:scroll;z-index:1001}ul:empty{border:none}ul li{background:#ffff;list-style:none;border-bottom:1px solid #e6e6e6;cursor:pointer;display:block}ul li:hover{background-color:#f0f0f0}li:focus{outline:.25rem solid #2491ff;outline-offset:-.25rem}.usa-combo-box-icon{display:block;position:absolute;bottom:0;right:.5rem;cursor:pointer}.usa-combo-box-icon .line{width:1px;top:.3rem;bottom:.5rem;left:-.3rem;position:absolute;background-color:#c6cace}`,
+                css `*{box-sizing:border-box}:host{--usa-combo-max-height:12.5em;display:block;max-width:30rem;position:relative;margin-bottom:1.5rem}input{border-width:1px;border-color:#5c5c5c;border-style:solid;border-radius:0;color:#1b1b1b;display:block;height:2.5rem;line-height:1.3;font-size:1.06rem;margin-top:.5rem;padding:.5rem;width:100%;padding-right:2.8rem}input:not(:disabled):focus{outline:.25rem solid #2491ff;outline-offset:0}ul{padding:0;position:absolute;bottom:0;width:100%;transform:translateY(100%);margin:0;border:1px solid #5c5c5c;max-height:var(--usa-combo-max-height);overflow-y:scroll;z-index:1001}ul:empty{border:none}ul li{background:#ffff;list-style:none;border-bottom:1px solid #e6e6e6;cursor:pointer;display:block}ul li:hover{background-color:#f0f0f0}li:focus{outline:.25rem solid #2491ff;outline-offset:-0.25rem}.usa-combo-box-icon{display:block;position:absolute;bottom:0;right:.5rem;cursor:pointer}.usa-combo-box-icon .line{width:1px;top:.3rem;bottom:.5rem;left:-.3rem;position:absolute;background-color:#c6cace}`,
                 html `<label><slot name="label"></slot><input tabindex="0" role="combobox" autocomplete="off" aria-controls="combo-box-list" aria-expanded="false"><div class="usa-combo-box-icon"><div class="line"></div><usa-icon icon="expand_more"></usa-icon></div></label><ul tabindex="-1" role="listbox" id="combo-box-list"></ul>`,
             ],
         })];
@@ -30,6 +30,9 @@ let USAComboBoxElement = (() => {
     let _placeholder_decorators;
     let _placeholder_initializers = [];
     let _placeholder_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
     let _onValueChanged_decorators;
     let _onFocusIn_decorators;
     let _onInput_decorators;
@@ -46,6 +49,7 @@ let USAComboBoxElement = (() => {
             _required_decorators = [attr()];
             _value_decorators = [attr()];
             _placeholder_decorators = [attr()];
+            _disabled_decorators = [attr()];
             _onValueChanged_decorators = [attrChanged("value", "required")];
             _onFocusIn_decorators = [listen("focus", (host) => host.input())];
             _onInput_decorators = [listen("input")];
@@ -58,6 +62,7 @@ let USAComboBoxElement = (() => {
             __esDecorate(this, null, _required_decorators, { kind: "accessor", name: "required", static: false, private: false, access: { has: obj => "required" in obj, get: obj => obj.required, set: (obj, value) => { obj.required = value; } }, metadata: _metadata }, _required_initializers, _required_extraInitializers);
             __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
             __esDecorate(this, null, _placeholder_decorators, { kind: "accessor", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
+            __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
             __esDecorate(this, null, _onValueChanged_decorators, { kind: "method", name: "onValueChanged", static: false, private: false, access: { has: obj => "onValueChanged" in obj, get: obj => obj.onValueChanged }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _onFocusIn_decorators, { kind: "method", name: "onFocusIn", static: false, private: false, access: { has: obj => "onFocusIn" in obj, get: obj => obj.onFocusIn }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _onInput_decorators, { kind: "method", name: "onInput", static: false, private: false, access: { has: obj => "onInput" in obj, get: obj => obj.onInput }, metadata: _metadata }, null, _instanceExtraInitializers);
@@ -83,7 +88,10 @@ let USAComboBoxElement = (() => {
         #placeholder_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _placeholder_initializers, ""));
         get placeholder() { return this.#placeholder_accessor_storage; }
         set placeholder(value) { this.#placeholder_accessor_storage = value; }
-        list = (__runInitializers(this, _placeholder_extraInitializers), query("ul"));
+        #disabled_accessor_storage = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _disabled_initializers, false));
+        get disabled() { return this.#disabled_accessor_storage; }
+        set disabled(value) { this.#disabled_accessor_storage = value; }
+        list = (__runInitializers(this, _disabled_extraInitializers), query("ul"));
         input = query("input");
         currentItemEl = null;
         #allListItems = new Set();
@@ -93,6 +101,7 @@ let USAComboBoxElement = (() => {
                 name: this.name,
                 placeholder: this.placeholder,
                 required: this.required,
+                disabled: this.disabled,
             });
         }
         onValueChanged() {
@@ -111,6 +120,9 @@ let USAComboBoxElement = (() => {
             this.#allListItems.delete(el);
         }
         onFocusIn() {
+            if (this.disabled) {
+                return;
+            }
             this.currentItemEl = null;
             const list = this.list();
             this.input({ ariaExpanded: "true" });
@@ -120,7 +132,16 @@ let USAComboBoxElement = (() => {
             }
             list.replaceChildren(fragment);
         }
+        focus(options) {
+            this.input().focus(options);
+        }
+        blur() {
+            this.input().blur();
+        }
         async onInput() {
+            if (this.disabled) {
+                return;
+            }
             const input = this.input();
             const list = this.list();
             this.currentItemEl = null;