@noctuatech/uswds 0.0.36 → 0.1.2

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

@@ -1,8 +1,8 @@
 import "./select.element.js";
 import "./select-option/select-option.element.js";
 
-import { fireEvent } from "@noctuatech-uswds/testing";
 import { assert, fixture, html } from "@open-wc/testing";
+import { userEvent } from "@testing-library/user-event";
 
 describe("usa-select", () => {
   it("should be accessible", async () => {
@@ -104,9 +104,7 @@ describe("usa-select", () => {
     const nativeSelect = select?.shadowRoot?.querySelector("select");
 
     if (nativeSelect) {
-      nativeSelect.value = "third";
-
-      await fireEvent.change(nativeSelect, { bubbles: true });
+      await userEvent.selectOptions(nativeSelect, "third");
     }
 
     const value = new FormData(form);

package/src/lib/side-nav/side-nav.stories.ts

@@ -7,7 +7,7 @@ import type { USASideNavElement } from "./side-nav.element.js";
 const meta = {
   title: "usa-side-nav",
   tags: ["autodocs"],
-  render(args) {
+  render() {
     return html`
       <usa-side-nav>
         <usa-side-nav-item current>

package/src/lib/summary-box/summary-box.stories.ts

@@ -7,7 +7,7 @@ import type { USASummaryBoxElement } from "./summary-box.element.js";
 const meta = {
   title: "usa-summary-box",
   tags: ["autodocs"],
-  render(args) {
+  render() {
     return html`<usa-summary-box> Hello World </usa-summary-box>`;
   },
   argTypes: {},

package/src/lib/textarea/textarea.test.ts

@@ -1,7 +1,7 @@
 import "./textarea.element.js";
 
-import { fireEvent } from "@noctuatech-uswds/testing";
 import { assert, fixture, html } from "@open-wc/testing";
+import { userEvent } from "@testing-library/user-event";
 
 describe("usa-textarea", () => {
   it("should be accessible", async () => {
@@ -39,9 +39,7 @@ describe("usa-textarea", () => {
     const nativeInput = input?.shadowRoot?.querySelector("textarea");
 
     if (nativeInput) {
-      nativeInput.value = "Bar";
-
-      await fireEvent.input(nativeInput, { bubbles: true });
+      await userEvent.type(nativeInput, "Bar");
     }
 
     const value = new FormData(form);

package/src/lib.ts

@@ -33,3 +33,6 @@ export { USATextareaElement } from "./lib/textarea/textarea.element.js";
 export { USACollectionElement } from "./lib/collection/collection.element.js";
 export { USACollectionItemElement } from "./lib/collection/collection-item/collection-item.element.js";
 export { USACheckboxGroupElement } from "./lib/checkbox/checkbox-group/checkbox-group.element.js";
+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";

package/target/lib/accordion/accordion.test.js

@@ -1,5 +1,7 @@
 import "./accordion.element.js";
 import { assert, fixture, html } from "@open-wc/testing";
+import { screen } from "@testing-library/dom";
+import { userEvent } from "@testing-library/user-event";
 describe("usa-accordion", () => {
     it("should be accessible", async () => {
         const accordion = await fixture(html `
@@ -29,9 +31,9 @@ describe("usa-accordion", () => {
         </div>
       </usa-accordion>
     `);
-        const heading = accordion.querySelector("h4");
+        const heading = await screen.findByRole("heading");
         const content = accordion.querySelector(".content");
-        heading?.click();
+        await userEvent.click(heading);
         assert.isTrue(content?.checkVisibility());
     });
     it("should toggle the open state when clicked", async () => {
@@ -47,10 +49,10 @@ describe("usa-accordion", () => {
         </div>
       </usa-accordion>
     `);
-        const heading = accordion.querySelector("h4");
+        const heading = await screen.findByRole("heading");
         const content = accordion.querySelector(".content");
         assert.isFalse(content?.checkVisibility());
-        heading?.click();
+        await userEvent.click(heading);
         assert.isTrue(content.checkVisibility());
     });
     it("should only allow a single accordion in a group to be open", async () => {
@@ -74,11 +76,11 @@ describe("usa-accordion", () => {
     `);
         const headings = el.querySelectorAll("h4");
         const content = Array.from(el.querySelectorAll(".content"));
-        headings[0].click();
+        await userEvent.click(headings[0]);
         assert.deepEqual(content.map((el) => el.checkVisibility()), [true, false, false]);
-        headings[1].click();
+        await userEvent.click(headings[1]);
         assert.deepEqual(content.map((el) => el.checkVisibility()), [false, true, false]);
-        headings[2].click();
+        await userEvent.click(headings[2]);
         assert.deepEqual(content.map((el) => el.checkVisibility()), [false, false, true]);
     });
     it("should not close accordion not in the same group", async () => {
@@ -102,11 +104,11 @@ describe("usa-accordion", () => {
     `);
         const headings = el.querySelectorAll("h4");
         const content = Array.from(el.querySelectorAll(".content"));
-        headings[0].click();
+        await userEvent.click(headings[0]);
         assert.deepEqual(content.map((el) => el.checkVisibility()), [true, false, false]);
-        headings[1].click();
+        await userEvent.click(headings[1]);
         assert.deepEqual(content.map((el) => el.checkVisibility()), [false, true, false]);
-        headings[2].click();
+        await userEvent.click(headings[2]);
         assert.deepEqual(content.map((el) => el.checkVisibility()), [false, true, true]);
     });
 });

package/target/lib/accordion/accordion.test.js.map

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

package/target/lib/button/button.stories.d.ts

@@ -3,7 +3,7 @@ import { type USAButtonElement } from "./button.element.js";
 declare const meta: {
     title: string;
     tags: string[];
-    render(args: USAButtonElement): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     argTypes: {};
     args: {};
 };

package/target/lib/button/button.stories.js

@@ -4,7 +4,7 @@ import { BUTTON_VARIANTS } from "./button.element.js";
 const meta = {
     title: "usa-button",
     tags: ["autodocs"],
-    render(args) {
+    render() {
         return html `
       <div style="display: inline-flex; flex-direction: column; gap: 1rem">
         ${BUTTON_VARIANTS.map((variant, i) => html `<usa-button variant=${variant}>Hello World</usa-button> ${i === BUTTON_VARIANTS.length - 1 ? "" : "\n\n"}`)}

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

@@ -1 +1 @@
-{"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../../src/lib/button/button.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,EAAE,eAAe,EAAyB,MAAM,qBAAqB,CAAC;AAE7E,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,YAAY;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA;;UAEL,eAAe,CAAC,GAAG,CACnB,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CACb,IAAI,CAAA,uBAAuB,OAAO,6BAChC,CAAC,KAAK,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAC1C,EAAE,CACL;;;KAGJ,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}
+{"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../../src/lib/button/button.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,EAAE,eAAe,EAAyB,MAAM,qBAAqB,CAAC;AAE7E,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,YAAY;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,eAAe,CAAC,GAAG,CACnB,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CACb,IAAI,CAAA,uBAAuB,OAAO,6BAChC,CAAC,KAAK,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAC1C,EAAE,CACL;;;KAGJ,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}

package/target/lib/card/card.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.stories.js","sourceRoot":"","sources":["../../../src/lib/card/card.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,UAAU;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACsB,CAAC;AAEjC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqEV,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoCV,CAAC;IACJ,CAAC;CACF,CAAC"}
+{"version":3,"file":"card.stories.js","sourceRoot":"","sources":["../../../src/lib/card/card.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,UAAU;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACsB,CAAC;AAEjC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqEV,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoCV,CAAC;IACJ,CAAC;CACF,CAAC"}

package/target/lib/checkbox/checkbox.element.d.ts

@@ -12,7 +12,6 @@ export declare class USACheckboxElement extends HTMLElement {
     accessor required: boolean;
     accessor disabled: boolean;
     accessor tiled: boolean;
-    connectedCallback(): void;
     attributeChangedCallback(): void;
     onCheckboxChange(): void;
 }

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

@@ -187,15 +187,6 @@ let USACheckboxElement = (() => {
         set tiled(value) { this.#tiled_accessor_storage = value; }
         #checkbox = (__runInitializers(this, _tiled_extraInitializers), query("input"));
         #internals = this.attachInternals();
-        connectedCallback() {
-            this.#checkbox({
-                checked: this.checked,
-                name: this.name,
-                disabled: this.disabled,
-                required: this.required,
-            });
-            this.#syncFormState();
-        }
         attributeChangedCallback() {
             this.#checkbox({
                 checked: this.checked,
@@ -213,12 +204,7 @@ let USACheckboxElement = (() => {
         #syncFormState() {
             const checkbox = this.#checkbox();
             this.#internals.setValidity({});
-            if (checkbox.checked) {
-                this.#internals.setFormValue(this.value);
-            }
-            else {
-                this.#internals.setFormValue(null);
-            }
+            this.#internals.setFormValue(checkbox.checked ? this.value : null);
             if (checkbox.validationMessage) {
                 this.#internals.setValidity({ customError: true }, checkbox.validationMessage, checkbox);
             }

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

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

package/target/lib/checkbox/checkbox.stories.d.ts

@@ -3,7 +3,6 @@ import type { USACheckboxElement } from "./checkbox.element.js";
 declare const meta: {
     title: string;
     tags: string[];
-    render(): import("lit-html").TemplateResult<1>;
     argTypes: {};
     args: {};
 };

package/target/lib/checkbox/checkbox.stories.js

@@ -3,30 +3,6 @@ import { html } from "lit";
 const meta = {
     title: "usa-checkbox",
     tags: ["autodocs"],
-    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>
-    `;
-    },
     argTypes: {},
     args: {},
 };

package/target/lib/checkbox/checkbox.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.stories.js","sourceRoot":"","sources":["../../../src/lib/checkbox/checkbox.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAO3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,cAAc;IACrB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;KAqBV,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACoD,CAAC;AAE/D,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;KAoBV,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;KAqBV,CAAC;IACJ,CAAC;CACF,CAAC"}
+{"version":3,"file":"checkbox.stories.js","sourceRoot":"","sources":["../../../src/lib/checkbox/checkbox.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,cAAc;IACrB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACoD,CAAC;AAE/D,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;KAoBV,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;KAqBV,CAAC;IACJ,CAAC;CACF,CAAC"}

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

@@ -0,0 +1,12 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        "usa-combo-box-option": USAComboBoxOptionElement;
+    }
+}
+export declare class USAComboBoxOptionElement extends HTMLElement {
+    #private;
+    accessor value: string;
+    attributeChangedCallback(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}

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

@@ -0,0 +1,72 @@
+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>
+`;
+let USAComboBoxOptionElement = (() => {
+    let _classDecorators = [injectable({
+            name: "usa-combo-box-option-ctx",
+        }), element({
+            tagName: "usa-combo-box-option",
+            shadowDom: [
+                css `
+    :host {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.5rem;  
+    }
+    `,
+                html `<slot></slot>`,
+            ],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    var USAComboBoxOptionElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _value_decorators = [attr()];
+            __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(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            USAComboBoxOptionElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        #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));
+        #li = query("li", this.#listItem);
+        #slot = query("slot", this.#listItem);
+        #ctx = inject(COMBO_BOX_CTX);
+        attributeChangedCallback() {
+            const value = this.value.split(" ").join("-").toLocaleLowerCase();
+            this.#li().dataset.value = this.value;
+            this.#slot().name = value;
+            this.slot = value;
+        }
+        connectedCallback() {
+            const ctx = this.#ctx();
+            ctx.addOption(this.#li());
+        }
+        disconnectedCallback() {
+            const ctx = this.#ctx();
+            ctx.removeOption(this.#li());
+            this.#li().remove();
+        }
+    };
+    return USAComboBoxOptionElement = _classThis;
+})();
+export { USAComboBoxOptionElement };
+//# sourceMappingURL=combo-box-option.element.js.map

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

@@ -0,0 +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,6KA+BC;;;YA/BY,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;YACtC,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,GAAG,KAAK,CAAC;YAE1B,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;;;;SA9BU,wBAAwB"}

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

@@ -0,0 +1,22 @@
+import { type ComboBoxContainer } from "./context.js";
+declare global {
+    interface HTMLElementTagNameMap {
+        "usa-combo-box": USAComboBoxElement;
+    }
+}
+export declare class USAComboBoxElement extends HTMLElement implements ComboBoxContainer {
+    #private;
+    list: (updates?: (Partial<HTMLUListElement> | ((node: HTMLUListElement) => Partial<HTMLUListElement>)) | undefined) => HTMLUListElement;
+    input: (updates?: (Partial<HTMLInputElement> | ((node: HTMLInputElement) => Partial<HTMLInputElement>)) | undefined) => HTMLInputElement;
+    currentItemEl: Element | null;
+    listItems(): NodeListOf<HTMLLIElement>;
+    addOption(el: HTMLLIElement): void;
+    removeOption(el: HTMLLIElement): void;
+    onFocusIn(): void;
+    onInput(): Promise<void>;
+    onFocusOut(): void;
+    onArrowDown(e: KeyboardEvent): void;
+    onArrowUp(e: KeyboardEvent): void;
+    onEnter(e: KeyboardEvent): void;
+    onClick(e: MouseEvent): void;
+}

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

@@ -0,0 +1,209 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { injectable } from "@joist/di";
+import { css, element, html, listen, query } from "@joist/element";
+import { COMBO_BOX_CTX } from "./context.js";
+let USAComboBoxElement = (() => {
+    let _classDecorators = [injectable({
+            name: "usa-combo-box-ctx",
+            provideSelfAs: [COMBO_BOX_CTX],
+        }), element({
+            tagName: "usa-combo-box",
+            shadowDom: [
+                css `
+      :host {
+        --usa-combo-max-height: 12.5em;
+
+        display: block;
+        max-width: 30rem;
+        position: relative;
+      }
+
+      ul {
+        padding: 0;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        transform: translateY(100%);
+        margin: 0;
+        border: 1px solid rgb(92, 92, 92);
+        max-height: var(--usa-combo-max-height);
+        overflow-y: scroll;
+        overflow-x: visible;
+        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: 0.25rem solid #2491ff;
+        outline-offset: -0.25rem;
+      }
+    `,
+                html `
+      <slot name="input"></slot>
+      <ul tabindex="-1" role="listbox"></ul>
+    `,
+            ],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _onFocusIn_decorators;
+    let _onInput_decorators;
+    let _onFocusOut_decorators;
+    let _onArrowDown_decorators;
+    let _onArrowUp_decorators;
+    let _onEnter_decorators;
+    let _onClick_decorators;
+    var USAComboBoxElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _onFocusIn_decorators = [listen("focus", (host) => host.input())];
+            _onInput_decorators = [listen("input", (host) => host)];
+            _onFocusOut_decorators = [listen("focusout")];
+            _onArrowDown_decorators = [listen("keydown")];
+            _onArrowUp_decorators = [listen("keydown")];
+            _onEnter_decorators = [listen("keydown")];
+            _onClick_decorators = [listen("click")];
+            __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);
+            __esDecorate(this, null, _onFocusOut_decorators, { kind: "method", name: "onFocusOut", static: false, private: false, access: { has: obj => "onFocusOut" in obj, get: obj => obj.onFocusOut }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onArrowDown_decorators, { kind: "method", name: "onArrowDown", static: false, private: false, access: { has: obj => "onArrowDown" in obj, get: obj => obj.onArrowDown }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onArrowUp_decorators, { kind: "method", name: "onArrowUp", static: false, private: false, access: { has: obj => "onArrowUp" in obj, get: obj => obj.onArrowUp }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onEnter_decorators, { kind: "method", name: "onEnter", static: false, private: false, access: { has: obj => "onEnter" in obj, get: obj => obj.onEnter }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onClick_decorators, { kind: "method", name: "onClick", static: false, private: false, access: { has: obj => "onClick" in obj, get: obj => obj.onClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            USAComboBoxElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        list = (__runInitializers(this, _instanceExtraInitializers), query("ul"));
+        input = query('[slot="input"]', this);
+        currentItemEl = null;
+        #allListItems = new Set();
+        listItems() {
+            return this.list().querySelectorAll("li");
+        }
+        addOption(el) {
+            this.#allListItems.add(el);
+        }
+        removeOption(el) {
+            this.#allListItems.delete(el);
+        }
+        onFocusIn() {
+            this.currentItemEl = null;
+            const list = this.list();
+            const fragment = document.createDocumentFragment();
+            for (const item of this.#allListItems) {
+                fragment.append(item);
+            }
+            list.replaceChildren(fragment);
+        }
+        async onInput() {
+            const input = this.input();
+            const list = this.list();
+            this.currentItemEl = null;
+            const fragment = document.createDocumentFragment();
+            for (const item of this.#allListItems) {
+                if (item.dataset.value?.toLowerCase().startsWith(input.value.toLowerCase())) {
+                    fragment.append(item);
+                }
+            }
+            list.replaceChildren(fragment);
+        }
+        onFocusOut() {
+            setTimeout(() => {
+                // This needs to be in a timeout so that it runs as part of the next loop.
+                // the active element will not be set until after all of the focus and blur events are done
+                if (!this.contains(document.activeElement)) {
+                    this.list({ innerHTML: "" });
+                    this.currentItemEl = null;
+                }
+            }, 0);
+        }
+        onArrowDown(e) {
+            if (e.key.toUpperCase() !== "ARROWDOWN") {
+                return;
+            }
+            e.preventDefault();
+            if (this.currentItemEl === null) {
+                // if there is no current item, set the first item as the current item
+                const list = this.list();
+                this.currentItemEl = list.firstElementChild;
+            }
+            else if (this.currentItemEl.nextSibling) {
+                // if there is a current item, set the next item as the current item
+                this.currentItemEl = this.currentItemEl.nextElementSibling;
+            }
+            if (this.currentItemEl instanceof HTMLElement) {
+                this.currentItemEl.focus();
+            }
+        }
+        onArrowUp(e) {
+            if (e.key.toUpperCase() !== "ARROWUP") {
+                return;
+            }
+            e.preventDefault();
+            if (this.currentItemEl?.previousElementSibling) {
+                this.currentItemEl = this.currentItemEl.previousElementSibling;
+                if (this.currentItemEl instanceof HTMLElement) {
+                    this.currentItemEl.focus();
+                }
+            }
+            else {
+                this.input().focus();
+                this.currentItemEl = null;
+            }
+        }
+        onEnter(e) {
+            if (e.key.toUpperCase() !== "ENTER") {
+                return;
+            }
+            e.preventDefault();
+            const target = e.target;
+            this.currentItemEl = null;
+            const value = target.dataset.value || "";
+            this.input({
+                value,
+                selectionStart: value.length,
+                selectionEnd: value.length,
+            }).focus();
+            this.list({ innerHTML: "" });
+        }
+        onClick(e) {
+            if (e.target instanceof HTMLElement) {
+                const value = e.target.getAttribute("value");
+                if (value) {
+                    this.input({
+                        value,
+                        selectionStart: value.length,
+                        selectionEnd: value.length,
+                    }).focus();
+                    this.list({ innerHTML: "" });
+                    this.currentItemEl = null;
+                }
+            }
+        }
+    };
+    return USAComboBoxElement = _classThis;
+})();
+export { USAComboBoxElement };
+//# sourceMappingURL=combo-box.element.js.map

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

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

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

@@ -0,0 +1,12 @@
+import type { StoryObj } from "@storybook/web-components";
+import type { USAComboBoxElement } from "./combo-box.element.js";
+declare const meta: {
+    title: string;
+    tags: string[];
+    render(): import("lit-html").TemplateResult<1>;
+    argTypes: {};
+    args: {};
+};
+export default meta;
+type Story = StoryObj<USAComboBoxElement>;
+export declare const Primary: Story;