@noctuatech/uswds 0.1.0 → 0.1.3

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

@@ -6,13 +6,21 @@ declare global {
 }
 export declare class USAComboBoxElement extends HTMLElement implements ComboBoxContainer {
     #private;
+    static formAssociated: boolean;
+    accessor name: string;
+    accessor required: boolean;
+    accessor value: string;
+    accessor placeholder: string;
     list: (updates?: (Partial<HTMLUListElement> | ((node: HTMLUListElement) => Partial<HTMLUListElement>)) | undefined) => HTMLUListElement;
     input: (updates?: (Partial<HTMLInputElement> | ((node: HTMLInputElement) => Partial<HTMLInputElement>)) | undefined) => HTMLInputElement;
     currentItemEl: Element | null;
+    attributeChangedCallback(): void;
+    onValueChanged(): void;
+    connectedCallback(): void;
     listItems(): NodeListOf<HTMLLIElement>;
     addOption(el: HTMLLIElement): void;
     removeOption(el: HTMLLIElement): void;
-    onFocusIn(e: FocusEvent): void;
+    onFocusIn(): void;
     onInput(): Promise<void>;
     onFocusOut(): void;
     onArrowDown(e: KeyboardEvent): void;

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

@@ -1,6 +1,6 @@
 import { __esDecorate, __runInitializers } from "tslib";
 import { injectable } from "@joist/di";
-import { css, element, html, listen, query } from "@joist/element";
+import { attr, attrChanged, css, element, html, listen, query, } from "@joist/element";
 import { COMBO_BOX_CTX } from "./context.js";
 let USAComboBoxElement = (() => {
     let _classDecorators = [injectable({
@@ -9,54 +9,8 @@ let USAComboBoxElement = (() => {
         }), element({
             tagName: "usa-combo-box",
             shadowDom: [
-                css `
-      :host {
-        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: 12em;
-        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;
-        padding: 0.5rem;
-      }
-
-      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"></ul>
-    `,
+                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}`,
+                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>`,
             ],
         })];
     let _classDescriptor;
@@ -64,6 +18,19 @@ let USAComboBoxElement = (() => {
     let _classThis;
     let _classSuper = HTMLElement;
     let _instanceExtraInitializers = [];
+    let _name_decorators;
+    let _name_initializers = [];
+    let _name_extraInitializers = [];
+    let _required_decorators;
+    let _required_initializers = [];
+    let _required_extraInitializers = [];
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _placeholder_decorators;
+    let _placeholder_initializers = [];
+    let _placeholder_extraInitializers = [];
+    let _onValueChanged_decorators;
     let _onFocusIn_decorators;
     let _onInput_decorators;
     let _onFocusOut_decorators;
@@ -75,13 +42,23 @@ let USAComboBoxElement = (() => {
         static { _classThis = this; }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _onFocusIn_decorators = [listen("focusin", (host) => host)];
-            _onInput_decorators = [listen("input", (host) => host)];
+            _name_decorators = [attr()];
+            _required_decorators = [attr()];
+            _value_decorators = [attr()];
+            _placeholder_decorators = [attr()];
+            _onValueChanged_decorators = [attrChanged("value", "required")];
+            _onFocusIn_decorators = [listen("focus", (host) => host.input())];
+            _onInput_decorators = [listen("input")];
             _onFocusOut_decorators = [listen("focusout")];
             _onArrowDown_decorators = [listen("keydown")];
             _onArrowUp_decorators = [listen("keydown")];
             _onEnter_decorators = [listen("keydown")];
             _onClick_decorators = [listen("click")];
+            __esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
+            __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, _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);
             __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);
@@ -92,12 +69,38 @@ let USAComboBoxElement = (() => {
             __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);
+        static formAssociated = true;
+        #name_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _name_initializers, ""));
+        get name() { return this.#name_accessor_storage; }
+        set name(value) { this.#name_accessor_storage = value; }
+        #required_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _required_initializers, false));
+        get required() { return this.#required_accessor_storage; }
+        set required(value) { this.#required_accessor_storage = value; }
+        #value_accessor_storage = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _value_initializers, ""));
+        get value() { return this.#value_accessor_storage; }
+        set value(value) { this.#value_accessor_storage = value; }
+        #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"));
+        input = query("input");
         currentItemEl = null;
         #allListItems = new Set();
+        #internals = this.attachInternals();
+        attributeChangedCallback() {
+            this.input({
+                name: this.name,
+                placeholder: this.placeholder,
+                required: this.required,
+            });
+        }
+        onValueChanged() {
+            this.#syncFormState();
+        }
+        connectedCallback() {
+            this.#syncFormState();
+        }
         listItems() {
             return this.list().querySelectorAll("li");
         }
@@ -107,40 +110,36 @@ let USAComboBoxElement = (() => {
         removeOption(el) {
             this.#allListItems.delete(el);
         }
-        onFocusIn(e) {
-            if (e.target instanceof HTMLElement) {
-                if (e.target.getAttribute("slot") === "input") {
-                    const list = this.list();
-                    for (const item of this.#allListItems) {
-                        if (!list.contains(item)) {
-                            list.append(item);
-                        }
-                    }
-                }
+        onFocusIn() {
+            this.currentItemEl = null;
+            const list = this.list();
+            this.input({ ariaExpanded: "true" });
+            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())) {
-                    if (!list.contains(item)) {
-                        list.append(item);
-                    }
-                }
-                else {
-                    item.remove();
+                    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({ textContent: "" });
+                    this.list({ innerHTML: "" });
                     this.currentItemEl = null;
+                    this.input({ ariaExpanded: "false" });
                 }
             }, 0);
         }
@@ -186,25 +185,32 @@ let USAComboBoxElement = (() => {
             const target = e.target;
             this.currentItemEl = null;
             const value = target.dataset.value || "";
-            this.input({
-                value,
-                selectionStart: value.length,
-                selectionEnd: value.length,
-            }).focus();
-            this.list({ textContent: "" });
+            this.input().focus();
+            this.list({ innerHTML: "" });
+            this.value = value;
         }
         onClick(e) {
-            if (e.target instanceof HTMLLIElement) {
-                const value = e.target.dataset.value || "";
-                this.input({
-                    value,
-                    selectionStart: value.length,
-                    selectionEnd: value.length,
-                }).focus();
-                this.list({ textContent: "" });
-                this.currentItemEl = null;
+            if (e.target instanceof HTMLElement) {
+                const value = e.target.getAttribute("value");
+                if (value) {
+                    this.input().focus();
+                    this.list({ innerHTML: "" });
+                    this.currentItemEl = null;
+                    this.value = value;
+                }
             }
         }
+        #syncFormState() {
+            const input = this.input({ value: this.value });
+            this.#internals.setValidity({});
+            this.#internals.setFormValue(this.value);
+            if (input.validationMessage) {
+                this.#internals.setValidity({ customError: true }, input.validationMessage, input);
+            }
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
     };
     return USAComboBoxElement = _classThis;
 })();

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

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

@@ -4,65 +4,7 @@ const meta = {
     title: "usa-combo-box",
     tags: ["autodocs"],
     render() {
-        return html `
-      <usa-combo-box>
-        <usa-input name="search" slot="input" autocomplete="off" detail="sfx">
-          States
-          <usa-icon slot="detail" icon="expand_more"></usa-icon>
-        </usa-input>
-
-        <usa-combo-box-option value="Alabama"></usa-combo-box-option>
-        <usa-combo-box-option value="Alaska"></usa-combo-box-option>
-        <usa-combo-box-option value="Arizona"></usa-combo-box-option>
-        <usa-combo-box-option value="Arkansas"></usa-combo-box-option>
-        <usa-combo-box-option value="California"></usa-combo-box-option>
-        <usa-combo-box-option value="Colorado"></usa-combo-box-option>
-        <usa-combo-box-option value="Connecticut"></usa-combo-box-option>
-        <usa-combo-box-option value="Delaware"></usa-combo-box-option>
-        <usa-combo-box-option value="Florida"></usa-combo-box-option>
-        <usa-combo-box-option value="Georgia"></usa-combo-box-option>
-        <usa-combo-box-option value="Hawaii"></usa-combo-box-option>
-        <usa-combo-box-option value="Idaho"></usa-combo-box-option>
-        <usa-combo-box-option value="Illinois"></usa-combo-box-option>
-        <usa-combo-box-option value="Indiana"></usa-combo-box-option>
-        <usa-combo-box-option value="Iowa"></usa-combo-box-option>
-        <usa-combo-box-option value="Kansas"></usa-combo-box-option>
-        <usa-combo-box-option value="Kentucky"></usa-combo-box-option>
-        <usa-combo-box-option value="Louisiana"></usa-combo-box-option>
-        <usa-combo-box-option value="Maine"></usa-combo-box-option>
-        <usa-combo-box-option value="Maryland"></usa-combo-box-option>
-        <usa-combo-box-option value="Massachusetts"></usa-combo-box-option>
-        <usa-combo-box-option value="Michigan"></usa-combo-box-option>
-        <usa-combo-box-option value="Minnesota"></usa-combo-box-option>
-        <usa-combo-box-option value="Mississippi"></usa-combo-box-option>
-        <usa-combo-box-option value="Missouri"></usa-combo-box-option>
-        <usa-combo-box-option value="Montana"></usa-combo-box-option>
-        <usa-combo-box-option value="Nebraska"></usa-combo-box-option>
-        <usa-combo-box-option value="Nevada"></usa-combo-box-option>
-        <usa-combo-box-option value="New Hampshire"></usa-combo-box-option>
-        <usa-combo-box-option value="New Jersey"></usa-combo-box-option>
-        <usa-combo-box-option value="New Mexico"></usa-combo-box-option>
-        <usa-combo-box-option value="New York"></usa-combo-box-option>
-        <usa-combo-box-option value="North Carolina"></usa-combo-box-option>
-        <usa-combo-box-option value="North Dakota"></usa-combo-box-option>
-        <usa-combo-box-option value="Ohio"></usa-combo-box-option>
-        <usa-combo-box-option value="Oklahoma"></usa-combo-box-option>
-        <usa-combo-box-option value="Oregon"></usa-combo-box-option>
-        <usa-combo-box-option value="Pennsylvania"></usa-combo-box-option>
-        <usa-combo-box-option value="Rhode Island"></usa-combo-box-option>
-        <usa-combo-box-option value="South Carolina"></usa-combo-box-option>
-        <usa-combo-box-option value="South Dakota"></usa-combo-box-option>
-        <usa-combo-box-option value="Tennessee"></usa-combo-box-option>
-        <usa-combo-box-option value="Texas"></usa-combo-box-option>
-        <usa-combo-box-option value="Utah"></usa-combo-box-option>
-        <usa-combo-box-option value="Vermont"></usa-combo-box-option>
-        <usa-combo-box-option value="Virginia"></usa-combo-box-option>
-        <usa-combo-box-option value="Washington"></usa-combo-box-option>
-        <usa-combo-box-option value="West Virginia"></usa-combo-box-option>
-        <usa-combo-box-option value="Wisconsin"></usa-combo-box-option>
-        <usa-combo-box-option value="Wyoming"></usa-combo-box-option>
-      </usa-combo-box>
-    `;
+        return html `<usa-combo-box placeholder="Select a state" name="state"><span slot="label">States</span><usa-combo-box-option value="Alabama"><img loading="lazy" src="./flags/alabama.svg" alt="Alabama" height="20"> Alabama</usa-combo-box-option><usa-combo-box-option value="Alaska"><img loading="lazy" src="./flags/alaska.svg" alt="Alaska" height="20"> Alaska</usa-combo-box-option><usa-combo-box-option value="Arizona"><img loading="lazy" src="./flags/arizona.svg" alt="Arizona" height="20"> Arizona</usa-combo-box-option><usa-combo-box-option value="Arkansas"><img loading="lazy" src="./flags/arkansas.svg" alt="Arkansas" height="20"> Arkansas</usa-combo-box-option><usa-combo-box-option value="California"><img loading="lazy" src="./flags/california.svg" alt="California" height="20"> California</usa-combo-box-option><usa-combo-box-option value="Colorado"><img loading="lazy" src="./flags/colorado.svg" alt="Colorado" height="20"> Colorado</usa-combo-box-option><usa-combo-box-option value="Connecticut"><img loading="lazy" src="./flags/connecticut.svg" alt="Connecticut" height="20"> Connecticut</usa-combo-box-option><usa-combo-box-option value="Delaware"><img loading="lazy" src="./flags/delaware.svg" alt="Delaware" height="20"> Delaware</usa-combo-box-option><usa-combo-box-option value="Florida"><img loading="lazy" src="./flags/florida.svg" alt="Florida" height="20"> Florida</usa-combo-box-option><usa-combo-box-option value="Georgia"><img loading="lazy" src="./flags/georgia.svg" alt="Georgia" height="20"> Georgia</usa-combo-box-option><usa-combo-box-option value="Hawaii"><img loading="lazy" src="./flags/hawaii.svg" alt="Hawaii" height="20"> Hawaii</usa-combo-box-option><usa-combo-box-option value="Idaho"><img loading="lazy" src="./flags/idaho.svg" alt="Idaho" height="20"> Idaho</usa-combo-box-option><usa-combo-box-option value="Illinois"><img loading="lazy" src="./flags/illinois.svg" alt="Illinois" height="20"> Illinois</usa-combo-box-option><usa-combo-box-option value="Indiana"><img loading="lazy" src="./flags/indiana.svg" alt="Indiana" height="20"> Indiana</usa-combo-box-option><usa-combo-box-option value="Iowa"><img loading="lazy" src="./flags/iowa.svg" alt="Iowa" height="20"> Iowa</usa-combo-box-option><usa-combo-box-option value="Kansas"><img loading="lazy" src="./flags/kansas.svg" alt="Kansas" height="20"> Kansas</usa-combo-box-option><usa-combo-box-option value="Kentucky"><img loading="lazy" src="./flags/kentucky.svg" alt="Kentucky" height="20"> Kentucky</usa-combo-box-option><usa-combo-box-option value="Louisiana"><img loading="lazy" src="./flags/louisiana.svg" alt="Louisiana" height="20"> Louisiana</usa-combo-box-option><usa-combo-box-option value="Maine"><img loading="lazy" src="./flags/maine.svg" alt="Maine" height="20"> Maine</usa-combo-box-option><usa-combo-box-option value="Maryland"><img loading="lazy" src="./flags/maryland.svg" alt="Maryland" height="20"> Maryland</usa-combo-box-option><usa-combo-box-option value="Massachusetts"><img loading="lazy" src="./flags/massachusetts.svg" alt="Massachusetts" height="20"> Massachusetts</usa-combo-box-option><usa-combo-box-option value="Michigan"><img loading="lazy" src="./flags/michigan.svg" alt="Michigan" height="20"> Michigan</usa-combo-box-option><usa-combo-box-option value="Minnesota"><img loading="lazy" src="./flags/minnesota.svg" alt="Minnesota" height="20"> Minnesota</usa-combo-box-option><usa-combo-box-option value="Mississippi"><img loading="lazy" src="./flags/mississippi.svg" alt="Mississippi" height="20"> Mississippi</usa-combo-box-option><usa-combo-box-option value="Missouri"><img loading="lazy" src="./flags/missouri.svg" alt="Missouri" height="20"> Missouri</usa-combo-box-option><usa-combo-box-option value="Montana"><img loading="lazy" src="./flags/montana.svg" alt="Montana" height="20"> Montana</usa-combo-box-option><usa-combo-box-option value="Nebraska"><img loading="lazy" src="./flags/nebraska.svg" alt="Nebraska" height="20"> Nebraska</usa-combo-box-option><usa-combo-box-option value="Nevada"><img loading="lazy" src="./flags/nevada.svg" alt="Nevada" height="20"> Nevada</usa-combo-box-option><usa-combo-box-option value="New Hampshire"><img loading="lazy" src="./flags/new_hampshire.svg" alt="New Hampshire" height="20"> New Hampshire</usa-combo-box-option><usa-combo-box-option value="New Jersey"><img loading="lazy" src="./flags/new_jersey.svg" alt="New Jersey" height="20"> New Jersey</usa-combo-box-option><usa-combo-box-option value="New Mexico"><img loading="lazy" src="./flags/new_mexico.svg" alt="New Mexico" height="20"> New Mexico</usa-combo-box-option><usa-combo-box-option value="New York"><img loading="lazy" src="./flags/new_york.svg" alt="New York" height="20"> New York</usa-combo-box-option><usa-combo-box-option value="North Carolina"><img loading="lazy" src="./flags/north_carolina.svg" alt="North Carolina" height="20"> North Carolina</usa-combo-box-option><usa-combo-box-option value="North Dakota"><img loading="lazy" src="./flags/north_dakota.svg" alt="North Dakota" height="20"> North Dakota</usa-combo-box-option><usa-combo-box-option value="Ohio"><img loading="lazy" src="./flags/ohio.svg" alt="Ohio" height="20"> Ohio</usa-combo-box-option><usa-combo-box-option value="Oklahoma"><img loading="lazy" src="./flags/oklahoma.svg" alt="Oklahoma" height="20"> Oklahoma</usa-combo-box-option><usa-combo-box-option value="Oregon"><img loading="lazy" src="./flags/oregon.svg" alt="Oregon" height="20"> Oregon</usa-combo-box-option><usa-combo-box-option value="Pennsylvania"><img loading="lazy" src="./flags/pennsylvania.svg" alt="Pennsylvania" height="20"> Pennsylvania</usa-combo-box-option><usa-combo-box-option value="Rhode Island"><img loading="lazy" src="./flags/rhode_island.svg" alt="Rhode Island" height="20"> Rhode Island</usa-combo-box-option><usa-combo-box-option value="South Carolina"><img loading="lazy" src="./flags/south_carolina.svg" alt="South Carolina" height="20"> South Carolina</usa-combo-box-option><usa-combo-box-option value="South Dakota"><img loading="lazy" src="./flags/south_dakota.svg" alt="South Dakota" height="20"> South Dakota</usa-combo-box-option><usa-combo-box-option value="Tennessee"><img loading="lazy" src="./flags/tennessee.svg" alt="Tennessee" height="20"> Tennessee</usa-combo-box-option><usa-combo-box-option value="Texas"><img loading="lazy" src="./flags/texas.svg" alt="Texas" height="20"> Texas</usa-combo-box-option><usa-combo-box-option value="Utah"><img loading="lazy" src="./flags/utah.svg" alt="Utah" height="20"> Utah</usa-combo-box-option><usa-combo-box-option value="Vermont"><img loading="lazy" src="./flags/vermont.svg" alt="Vermont" height="20"> Vermont</usa-combo-box-option><usa-combo-box-option value="Virginia"><img loading="lazy" src="./flags/virginia.svg" alt="Virginia" height="20"> Virginia</usa-combo-box-option><usa-combo-box-option value="Washington"><img loading="lazy" src="./flags/washington.svg" alt="Washington" height="20"> Washington</usa-combo-box-option><usa-combo-box-option value="West Virginia"><img loading="lazy" src="./flags/west_virginia.svg" alt="West Virginia" height="20"> West Virginia</usa-combo-box-option><usa-combo-box-option value="Wisconsin"><img loading="lazy" src="./flags/wisconsin.svg" alt="Wisconsin" height="20"> Wisconsin</usa-combo-box-option><usa-combo-box-option value="Wyoming"><img loading="lazy" src="./flags/wyoming.svg" alt="Wyoming" height="20"> Wyoming</usa-combo-box-option></usa-combo-box>`;
     },
     argTypes: {},
     args: {},

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

@@ -1 +1 @@
-{"version":3,"file":"combo-box.stories.js","sourceRoot":"","sources":["../../../src/lib/combo-box/combo-box.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,eAAe;IACtB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0DV,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CAC0B,CAAC;AAErC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}
+{"version":3,"file":"combo-box.stories.js","sourceRoot":"","sources":["../../../src/lib/combo-box/combo-box.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,eAAe;IACtB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4MV,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CAC0B,CAAC;AAErC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}

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

@@ -6,29 +6,16 @@ describe("usa-combo-box", () => {
     let autocomplete;
     let input;
     beforeEach(async () => {
-        autocomplete = await fixture(html `
-      <usa-combo-box>
-        <usa-input slot="input" name="search"></usa-input>
-
-        <usa-combo-box-option value="Apple"></usa-combo-box-option>
-        <usa-combo-box-option value="Banana"></usa-combo-box-option>
-        <usa-combo-box-option value="Blueberry"></usa-combo-box-option>
-        <usa-combo-box-option value="Cherry"></usa-combo-box-option>
-      </usa-combo-box>
-    `);
-        const inputElement = autocomplete.querySelector("usa-input");
-        if (!inputElement) {
-            throw new Error("Input element not found");
-        }
-        input = inputElement;
+        autocomplete = await fixture(html `<usa-combo-box name="search" placeholder="Select a fruit"><span slot="label">Fruits</span><usa-combo-box-option value="Apple">Apple</usa-combo-box-option><usa-combo-box-option value="Banana">Banana</usa-combo-box-option><usa-combo-box-option value="Blueberry">Blueberry</usa-combo-box-option><usa-combo-box-option value="Cherry">Cherry</usa-combo-box-option></usa-combo-box>`);
+        input = autocomplete.input();
     });
     it("should filter items based on input", async () => {
         input.value = "b";
         input.dispatchEvent(new Event("input", { bubbles: true }));
         const suggestions = autocomplete.listItems();
         assert.equal(suggestions.length, 2);
-        assert.equal(suggestions[0].textContent, "Banana");
-        assert.equal(suggestions[1].textContent, "Blueberry");
+        assert.equal(suggestions[0].dataset.value, "Banana");
+        assert.equal(suggestions[1].dataset.value, "Blueberry");
     });
     it("should show all suggestions when input is empty", async () => {
         input.value = "";
@@ -41,8 +28,8 @@ describe("usa-combo-box", () => {
         input.dispatchEvent(new Event("input", { bubbles: true }));
         const suggestions = autocomplete.listItems();
         assert.equal(suggestions.length, 2);
-        assert.equal(suggestions[0].textContent, "Banana");
-        assert.equal(suggestions[1].textContent, "Blueberry");
+        assert.equal(suggestions[0].dataset.value, "Banana");
+        assert.equal(suggestions[1].dataset.value, "Blueberry");
     });
     it("should navigate suggestions with arrow keys", async () => {
         // select item from list
@@ -50,10 +37,10 @@ describe("usa-combo-box", () => {
         input.dispatchEvent(new Event("input", { bubbles: true }));
         // Arrow down
         input.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }));
-        assert.equal(autocomplete.currentItemEl?.textContent, "Banana");
+        assert.equal(autocomplete.currentItemEl?.getAttribute("data-value"), "Banana");
         // Arrow down again
         input.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }));
-        assert.equal(autocomplete.currentItemEl?.textContent, "Blueberry");
+        assert.equal(autocomplete.currentItemEl?.getAttribute("data-value"), "Blueberry");
     });
     it("should select suggestion with enter key", async () => {
         input.value = "b";
@@ -82,7 +69,63 @@ describe("usa-combo-box", () => {
         input.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }));
         input.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }));
         input.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }));
-        assert.equal(autocomplete.currentItemEl?.textContent, "Blueberry");
+        assert.equal(autocomplete.currentItemEl?.getAttribute("data-value"), "Blueberry");
+    });
+    it("should submit form with default values", async () => {
+        const form = await fixture(html `<form><usa-combo-box name="search" value="Apple" placeholder="Select a fruit"><span slot="label">Fruits</span><usa-combo-box-option value="Apple">Apple</usa-combo-box-option><usa-combo-box-option value="Banana">Banana</usa-combo-box-option><usa-combo-box-option value="Blueberry">Blueberry</usa-combo-box-option><usa-combo-box-option value="Cherry">Cherry</usa-combo-box-option></usa-combo-box><button>Submit</button></form>`);
+        const value = new FormData(form);
+        assert.equal(value.get("search"), "Apple");
+    });
+    it("should update form value when an option is selected", async () => {
+        const form = await fixture(html `<form><usa-combo-box name="search" placeholder="Select a fruit"><span slot="label">Fruits</span><usa-combo-box-option value="Apple">Apple</usa-combo-box-option><usa-combo-box-option value="Banana">Banana</usa-combo-box-option><usa-combo-box-option value="Blueberry">Blueberry</usa-combo-box-option><usa-combo-box-option value="Cherry">Cherry</usa-combo-box-option></usa-combo-box><button>Submit</button></form>`);
+        const comboBox = form.querySelector("usa-combo-box");
+        if (!comboBox) {
+            throw new Error("Combo box not found");
+        }
+        const input = comboBox.shadowRoot?.querySelector("input");
+        if (!input) {
+            throw new Error("input not found");
+        }
+        // Type to show suggestions
+        input.value = "Ban";
+        input.dispatchEvent(new Event("input", { bubbles: true }));
+        // Select the first suggestion
+        const suggestions = comboBox.listItems();
+        suggestions[0]
+            .querySelector("slot")
+            ?.assignedElements()[0]
+            .dispatchEvent(new MouseEvent("click", { bubbles: true }));
+        const value = new FormData(form);
+        assert.equal(value.get("search"), "Banana");
+    });
+    it("should not submit when required and no value is selected", async () => {
+        const form = await fixture(html `<form><usa-combo-box name="search" required placeholder="Select a fruit"><span slot="label">Fruits</span><usa-combo-box-option value="Apple">Apple</usa-combo-box-option><usa-combo-box-option value="Banana">Banana</usa-combo-box-option><usa-combo-box-option value="Blueberry">Blueberry</usa-combo-box-option><usa-combo-box-option value="Cherry">Cherry</usa-combo-box-option></usa-combo-box><button>Submit</button></form>`);
+        assert.equal(form.checkValidity(), false);
     });
+    // it("should reset to default value when form is reset", async () => {
+    //   const form = await fixture<HTMLFormElement>(html`
+    //     <form>
+    //       <usa-combo-box name="search" value="Apple" placeholder="Select a fruit">
+    //         <span slot="label">Fruits</span>
+    //         <usa-combo-box-option value="Apple">Apple</usa-combo-box-option>
+    //         <usa-combo-box-option value="Banana">Banana</usa-combo-box-option>
+    //         <usa-combo-box-option value="Blueberry">Blueberry</usa-combo-box-option>
+    //         <usa-combo-box-option value="Cherry">Cherry</usa-combo-box-option>
+    //       </usa-combo-box>
+    //       <button type="submit">Submit</button>
+    //       <button type="reset">Reset</button>
+    //     </form>
+    //   `);
+    //   const comboBox = form.querySelector("usa-combo-box");
+    //   if (comboBox) {
+    //     // Change the value
+    //     comboBox.value = "Banana";
+    //     comboBox.dispatchEvent(new Event("input", { bubbles: true }));
+    //     // Reset the form
+    //     form.reset();
+    //     // Check that the value was reset
+    //     assert.equal(comboBox.value, "Apple");
+    //   }
+    // });
 });
 //# sourceMappingURL=combo-box.test.js.map

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

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

package/target/lib/config/config.element.js

@@ -11,11 +11,7 @@ let USAConfigElement = (() => {
         }), element({
             tagName: "usa-config",
             shadowDom: [
-                css `
-      :host {
-        display: contents;
-      }
-    `,
+                css `:host{display:contents}`,
                 html `<slot></slot>`,
             ],
         })];

package/target/lib/config/config.test.js

@@ -2,9 +2,7 @@ import "./config.element.js";
 import { assert, fixture, html } from "@open-wc/testing";
 describe("usa-config", () => {
     it("should be accessible", async () => {
-        const config = await fixture(html `
-      <usa-config>Hello World</usa-config>
-    `);
+        const config = await fixture(html `<usa-config>Hello World</usa-config>`);
         return assert.isAccessible(config);
     });
 });

package/target/lib/description/description.element.js

@@ -4,13 +4,7 @@ let USADescriptionElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-description",
             shadowDom: [
-                css `
-      :host {
-        display: block;
-        font-size: 0.93rem;
-        margin-top: 0.5rem;
-      }
-    `,
+                css `:host{display:block;font-size:.93rem;margin-top:.5rem}`,
                 html `<slot></slot>`,
             ],
         })];

package/target/lib/description/description.test.js

@@ -2,9 +2,7 @@ import "./description.element.js";
 import { assert, fixture, html } from "@open-wc/testing";
 describe("usa-description", () => {
     it("should be accessible", async () => {
-        const description = await fixture(html `
-      <usa-description>Hello World</usa-description>
-    `);
+        const description = await fixture(html `<usa-description>Hello World</usa-description>`);
         return assert.isAccessible(description);
     });
 });