@noctuatech/uswds 0.1.0 → 0.1.2

package/assets/flags/west_virginia.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="16" fill="#FFFFFF"/>
+  <rect x="0" y="0" width="24" height="16" fill="#002868"/>
+  
+  <!-- State seal circle -->
+  <circle cx="12" cy="8" r="6" fill="#FFFFFF"/>
+  <circle cx="12" cy="8" r="5" fill="#002868"/>
+  
+  <!-- Rhododendron flowers -->
+  <circle cx="8" cy="6" r="1" fill="#FFFFFF"/>
+  <circle cx="16" cy="6" r="1" fill="#FFFFFF"/>
+  <circle cx="8" cy="10" r="1" fill="#FFFFFF"/>
+  <circle cx="16" cy="10" r="1" fill="#FFFFFF"/>
+  <circle cx="12" cy="8" r="1" fill="#FFFFFF"/>
+  
+  <!-- Crossed rifles -->
+  <path d="M10 6L14 10" stroke="#FFFFFF" stroke-width="1"/>
+  <path d="M14 6L10 10" stroke="#FFFFFF" stroke-width="1"/>
+  
+  <!-- Mining tools -->
+  <path d="M8 8L16 8" stroke="#FFFFFF" stroke-width="1"/>
+  <path d="M12 6L12 10" stroke="#FFFFFF" stroke-width="1"/>
+</svg> 

package/assets/flags/wisconsin.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="16" fill="#002868"/>
+  <path d="M12 4L16 8L12 12L8 8L12 4Z" fill="#FFD700"/>
+</svg> 

package/assets/flags/wyoming.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="16" fill="#002868"/>
+  <path d="M12 4L16 8L12 12L8 8L12 4Z" fill="#FFD700"/>
+</svg> 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noctuatech/uswds",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "workspaces": ["packages/**"],
   "main": "./target/lib.js",

package/src/lib/combo-box/combo-box-option/combo-box-option.element.ts

@@ -1,5 +1,5 @@
 import { inject, injectable } from "@joist/di";
-import { attr, css, element, html } from "@joist/element";
+import { attr, css, element, html, query } from "@joist/element";
 
 import { COMBO_BOX_CTX } from "../context.js";
 
@@ -9,42 +9,60 @@ declare global {
   }
 }
 
+const template = document.createElement("template");
+
+template.innerHTML = /*html*/ `
+  <li tabindex="-1" role="option">
+    <slot></slot>
+  </li>
+`;
+
 @injectable({
   name: "usa-combo-box-option-ctx",
 })
 @element({
   tagName: "usa-combo-box-option",
-  shadowDom: [html`<slot></slot>`],
+  shadowDom: [
+    css`
+    :host {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.5rem;  
+    }
+    `,
+    html`<slot></slot>`,
+  ],
 })
 export class USAComboBoxOptionElement extends HTMLElement {
   @attr()
   accessor value = "";
 
-  #li = document.createElement("li");
+  #listItem = template.content.cloneNode(true) as HTMLLIElement;
+  #li = query("li", this.#listItem);
+  #slot = query("slot", this.#listItem);
   #ctx = inject(COMBO_BOX_CTX);
 
-  constructor() {
-    super();
+  attributeChangedCallback() {
+    const value = this.value.split(" ").join("-").toLocaleLowerCase();
 
-    this.#li.tabIndex = -1;
-  }
+    this.#li().dataset.value = this.value;
+    this.#slot().name = value;
 
-  attributeChangedCallback() {
-    this.#li.dataset.value = this.value;
-    this.#li.textContent = this.value;
+    this.slot = value;
   }
 
   connectedCallback() {
     const ctx = this.#ctx();
 
-    ctx.addOption(this.#li);
+    ctx.addOption(this.#li());
   }
 
   disconnectedCallback() {
     const ctx = this.#ctx();
 
-    ctx.removeOption(this.#li);
+    ctx.removeOption(this.#li());
 
-    this.#li.remove();
+    this.#li().remove();
   }
 }

package/src/lib/combo-box/combo-box.element.ts

@@ -1,5 +1,6 @@
 import { injectable } from "@joist/di";
 import { css, element, html, listen, query } from "@joist/element";
+
 import { COMBO_BOX_CTX, type ComboBoxContainer } from "./context.js";
 
 declare global {
@@ -17,6 +18,8 @@ declare global {
   shadowDom: [
     css`
       :host {
+        --usa-combo-max-height: 12.5em;
+
         display: block;
         max-width: 30rem;
         position: relative;
@@ -31,7 +34,7 @@ declare global {
         transform: translateY(100%);
         margin: 0;
         border: 1px solid rgb(92, 92, 92);
-        max-height: 12em;
+        max-height: var(--usa-combo-max-height);
         overflow-y: scroll;
         overflow-x: visible;
         z-index: 1001;
@@ -47,7 +50,6 @@ declare global {
         border-bottom: 1px solid #e6e6e6;
         cursor: pointer;
         display: block;
-        padding: 0.5rem;
       }
 
       ul li:hover {
@@ -61,7 +63,7 @@ declare global {
     `,
     html`
       <slot name="input"></slot>
-      <ul tabindex="-1"></ul>
+      <ul tabindex="-1" role="listbox"></ul>
     `,
   ],
 })
@@ -86,19 +88,19 @@ export class USAComboBoxElement
     this.#allListItems.delete(el);
   }
 
-  @listen("focusin", (host) => host)
-  onFocusIn(e: FocusEvent) {
-    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);
-          }
-        }
-      }
+  @listen("focus", (host) => host.input())
+  onFocusIn() {
+    this.currentItemEl = null;
+
+    const list = this.list();
+
+    const fragment = document.createDocumentFragment();
+
+    for (const item of this.#allListItems) {
+      fragment.append(item);
     }
+
+    list.replaceChildren(fragment);
   }
 
   @listen("input", (host) => host)
@@ -108,17 +110,17 @@ export class USAComboBoxElement
 
     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);
   }
 
   @listen("focusout")
@@ -127,7 +129,7 @@ export class USAComboBoxElement
       // 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;
       }
     }, 0);
@@ -196,23 +198,25 @@ export class USAComboBoxElement
       selectionEnd: value.length,
     }).focus();
 
-    this.list({ textContent: "" });
+    this.list({ innerHTML: "" });
   }
 
   @listen("click")
   onClick(e: MouseEvent) {
-    if (e.target instanceof HTMLLIElement) {
-      const value = e.target.dataset.value || "";
+    if (e.target instanceof HTMLElement) {
+      const value = e.target.getAttribute("value");
 
-      this.input({
-        value,
-        selectionStart: value.length,
-        selectionEnd: value.length,
-      }).focus();
+      if (value) {
+        this.input({
+          value,
+          selectionStart: value.length,
+          selectionEnd: value.length,
+        }).focus();
 
-      this.list({ textContent: "" });
+        this.list({ innerHTML: "" });
 
-      this.currentItemEl = null;
+        this.currentItemEl = null;
+      }
     }
   }
 }

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

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

package/src/lib/combo-box/combo-box.test.ts

@@ -37,9 +37,10 @@ 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 show all suggestions when input is empty", async () => {
@@ -56,8 +57,8 @@ describe("usa-combo-box", () => {
 
     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 () => {
@@ -69,13 +70,19 @@ describe("usa-combo-box", () => {
     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 () => {
@@ -135,6 +142,9 @@ describe("usa-combo-box", () => {
       new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }),
     );
 
-    assert.equal(autocomplete.currentItemEl?.textContent, "Blueberry");
+    assert.equal(
+      autocomplete.currentItemEl?.getAttribute("data-value"),
+      "Blueberry",
+    );
   });
 });

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

@@ -6,7 +6,6 @@ declare global {
 export declare class USAComboBoxOptionElement extends HTMLElement {
     #private;
     accessor value: string;
-    constructor();
     attributeChangedCallback(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;