@noctuatech/uswds 0.1.0 → 0.1.3

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

@@ -9,62 +9,208 @@ const meta = {
   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 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>
     `;
   },

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

@@ -3,33 +3,27 @@ import "./combo-box-option/combo-box-option.element.js";
 import "../input/input.element.js";
 
 import { assert, fixture, html } from "@open-wc/testing";
+import { userEvent } from "@testing-library/user-event";
 
-import type { USATextInputElement } from "../input/input.element.js";
 import type { USAComboBoxElement } from "./combo-box.element.js";
 
 describe("usa-combo-box", () => {
   let autocomplete: USAComboBoxElement;
-  let input: USATextInputElement;
+  let input: HTMLInputElement;
 
   beforeEach(async () => {
     autocomplete = await fixture<USAComboBoxElement>(html`
-      <usa-combo-box>
-        <usa-input slot="input" name="search"></usa-input>
+      <usa-combo-box name="search" placeholder="Select a fruit">
+        <span slot="label">Fruits</span>
 
-        <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-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>
     `);
 
-    const inputElement = autocomplete.querySelector("usa-input");
-
-    if (!inputElement) {
-      throw new Error("Input element not found");
-    }
-
-    input = inputElement;
+    input = autocomplete.input();
   });
 
   it("should filter items based on input", async () => {
@@ -37,9 +31,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 +51,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 +64,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 +136,123 @@ 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",
+    );
+  });
+
+  it("should submit form with default values", 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>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<HTMLFormElement>(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<HTMLFormElement>(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");
+  //   }
+  // });
 });

package/target/lib/accordion/accordion.element.js

@@ -9,92 +9,8 @@ let USAAccordionElement = (() => {
                 delegatesFocus: true,
             },
             shadowDom: [
-                css `
-      * {
-        box-sizing: border-box;
-      }
-
-      :host {
-        display: block;
-      }
-
-      :host(:not(:first-child)) summary {
-        margin-top: 0.5rem;
-      }
-
-      summary {
-        align-items: center;
-        border: 0;
-        border-radius: 0;
-        box-shadow: none;
-        justify-content: normal;
-        text-align: left;
-        padding: 0;
-        color: #1b1b1b;
-        background-color: #f0f0f0;
-        cursor: pointer;
-        display: flex;
-        font-weight: 700;
-        margin: 0;
-        padding: 1rem 1.25rem 1rem 1.25rem;
-        text-decoration: none;
-        width: 100%;
-      }
-
-      summary::-webkit-details-marker {
-        display: none;
-      }
-
-      slot[name="heading"] {
-        display: block;
-        flex: 1 1 auto;
-      }
-
-      slot[name="heading"]::slotted(*) {
-        margin: 0;
-      }
-
-      .content {
-        padding-bottom: 1.5rem;
-        padding-left: 1rem;
-        padding-top: 1.5rem;
-      }
-
-      usa-icon[icon="remove"] {
-        display: none;
-      }
-
-      details[open] usa-icon[icon="add"] {
-        display: none;
-      }
-
-      details[open] usa-icon[icon="remove"] {
-        display: block;
-      }
-
-      summary:hover {
-        background-color: #e6e6e6;
-      }
-
-      summary:focus {
-        outline: 0.25rem solid #2491ff;
-        outline-offset: 0;
-      }
-    `,
-                html `
-      <details>
-        <summary>
-          <slot name="heading"></slot>
-
-          <usa-icon icon="add"></usa-icon>
-          <usa-icon icon="remove"></usa-icon>
-        </summary>
-
-        <div class="content">
-          <slot></slot>
-        </div>
-      </details>
-    `,
+                css `*{box-sizing:border-box}:host{display:block}:host(:not(:first-child)) summary{margin-top:.5rem}summary{align-items:center;border:0;border-radius:0;box-shadow:none;justify-content:normal;text-align:left;padding:0;color:#1b1b1b;background-color:#f0f0f0;cursor:pointer;display:flex;font-weight:700;margin:0;padding:1rem 1.25rem 1rem 1.25rem;text-decoration:none;width:100%}summary::-webkit-details-marker{display:none}slot[name=heading]{display:block;flex:1 1 auto}slot[name=heading]::slotted(*){margin:0}.content{padding-bottom:1.5rem;padding-left:1rem;padding-top:1.5rem}usa-icon[icon=remove]{display:none}details[open] usa-icon[icon=add]{display:none}details[open] usa-icon[icon=remove]{display:block}summary:hover{background-color:#e6e6e6}summary:focus{outline:.25rem solid #2491ff;outline-offset:0}`,
+                html `<details><summary><slot name="heading"></slot><usa-icon icon="add"></usa-icon><usa-icon icon="remove"></usa-icon></summary><div class="content"><slot></slot></div></details>`,
             ],
         })];
     let _classDescriptor;

package/target/lib/accordion/accordion.stories.js

@@ -4,32 +4,7 @@ const meta = {
     title: "usa-accordion",
     tags: ["autodocs"],
     render() {
-        return html `
-      <usa-accordion id="first" name="ammendment">
-        <h4 slot="heading">First Ammendment</h4>
-
-        Congress shall make no law respecting an establishment of religion, or
-        prohibiting the free exercise thereof; or abridging the freedom of
-        speech, or of the press; or the right of the people peaceably to
-        assemble, and to petition the Government for a redress of grievances.
-      </usa-accordion>
-
-      <usa-accordion id="second" name="ammendment">
-        <h4 slot="heading">Second Ammendment</h4>
-
-        A well regulated Militia, being necessary to the security of a free
-        State, the right of the people to keep and bear Arms, shall not be
-        infringed.
-      </usa-accordion>
-
-      <usa-accordion id="third" name="ammendment">
-        <h4 slot="heading">Third Ammendment</h4>
-
-        No Soldier shall, in time of peace be quartered in any house, without
-        the consent of the Owner, nor in time of war, but in a manner to be
-        prescribed by law.
-      </usa-accordion>
-    `;
+        return html `<usa-accordion id="first" name="ammendment"><h4 slot="heading">First Ammendment</h4>Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.</usa-accordion><usa-accordion id="second" name="ammendment"><h4 slot="heading">Second Ammendment</h4>A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.</usa-accordion><usa-accordion id="third" name="ammendment"><h4 slot="heading">Third Ammendment</h4>No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.</usa-accordion>`;
     },
     argTypes: {},
     args: {},