From c4f8c72f9be89d4d53f24ea42c0b399e97d932a7 Mon Sep 17 00:00:00 2001
From: amyleadem <amy.leadem@bixal.com>
Date: Fri, 24 May 2024 15:49:23 -0700
Subject: [PATCH 01/37] Add identifier component

---
 web-components/index.html                     |  12 ++
 .../src/components/usa-identifier/index.js    | 135 ++++++++++++++++++
 .../components/usa-identifier/package.json    |  12 ++
 3 files changed, 159 insertions(+)
 create mode 100644 web-components/src/components/usa-identifier/index.js
 create mode 100644 web-components/src/components/usa-identifier/package.json

diff --git a/web-components/index.html b/web-components/index.html
index cf08a651..07b711db 100644
--- a/web-components/index.html
+++ b/web-components/index.html
@@ -8,6 +8,7 @@
   <title>USWDS + Lit</title>
   <script type="module" src="/src/components/usa-banner/index.js"></script>
   <script type="module" src="/src/components/usa-link/index.js"></script>
+  <script type="module" src="/src/components/usa-identifier/index.js"></script>
   <style>
     :root {
       --theme-link-color: hotpink;
@@ -20,6 +21,17 @@
   <usa-link href="http://designsystem.digital.gov">
     It's dangerous to go alone. Here, take this.
   </usa-link>
+  <usa-identifier
+    site_domain="designsystem.digital.gov"
+    agency_href="https://www.gsa.gov/"
+    agency_name="General Services Administration"
+    agency_logo="https://designsystem.digital.gov/img/gsa-logo.svg"
+  >
+    <ul>
+      <li><a href="https://www.gsa.gov/about-us">About GSA</a></li>
+      <li><a href="https://www.gsa.gov/website-information/accessibility-statement">Accessibility statement</a></li>
+    </ul>
+  </usa-identifier>
 </body>
 
 </html>
diff --git a/web-components/src/components/usa-identifier/index.js b/web-components/src/components/usa-identifier/index.js
new file mode 100644
index 00000000..4c54e9a8
--- /dev/null
+++ b/web-components/src/components/usa-identifier/index.js
@@ -0,0 +1,135 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import {customElement, property} from 'lit/decorators.js';
+
+import usaIdentifierStyle from "@uswds/uswds/scss/usa-identifier?inline";
+
+export class UsaIdentifier extends LitElement {
+
+  static get properties() {
+    return {
+      /**
+       * The site domain
+       */
+      site_domain: { type: String },
+      /**
+       * The agency name
+       */
+      agency_name: { type: String },
+      /**
+       * The destination URL for the agency and logo link
+       */
+      agency_href: { type: String },
+      /**
+       * The destination URL for the agency and logo link
+       */
+      agency_logo: { type: String },
+      /**
+       * The required link list items
+       */
+      link_list: { type: Array },
+    };
+  }
+
+  constructor() {
+    super();
+    this.agency_href = "";
+  }
+
+  static styles = [unsafeCSS(usaIdentifierStyle)];
+
+  render() {
+    return html`
+
+      <div class="usa-identifier">
+        <section
+          class="usa-identifier__section usa-identifier__section--masthead"
+          aria-label="Agency identifier"
+        >
+          <div class="usa-identifier__container">
+            <div class="usa-identifier__logos">
+              <a
+                class="usa-identifier__logo"
+                href="${this.agency_href}"
+                ><img
+                  class="usa-identifier__logo-img"
+                  src="${this.agency_logo}"
+                  alt="${this.agency_name} logo"
+                  role="img"
+              /></a>
+            </div>
+            <section
+              class="usa-identifier__identity"
+              aria-label="Agency description,"
+            >
+              <p class="usa-identifier__identity-domain">${this.site_domain}</p>
+              <p class="usa-identifier__identity-disclaimer">
+                <span aria-hidden="true">An </span>official website of the
+                <a href="${this.agency_href}">${this.agency_name}</a>
+              </p>
+            </section>
+          </div>
+        </section>
+        <nav
+          class="usa-identifier__section usa-identifier__section--required-links"
+          aria-label="Important links,,,"
+        >
+          <div class="usa-identifier__container">
+            <ul class="usa-identifier__required-links-list">
+              <li class="usa-identifier__required-links-item">
+                <a
+                  href="javascript:void(0)"
+                  class="usa-identifier__required-link usa-link"
+                  >About &lt;Parent shortname&gt;</a
+                >
+              </li>
+              <li class="usa-identifier__required-links-item">
+                <a href="" class="usa-identifier__required-link usa-link"
+                  >Accessibility statement</a
+                >
+              </li>
+              <li class="usa-identifier__required-links-item">
+                <a href="" class="usa-identifier__required-link usa-link"
+                  >FOIA requests</a
+                >
+              </li>
+              <li class="usa-identifier__required-links-item">
+                <a href="" class="usa-identifier__required-link usa-link"
+                  >No FEAR Act data</a
+                >
+              </li>
+              <li class="usa-identifier__required-links-item">
+                <a href="" class="usa-identifier__required-link usa-link"
+                  >Office of the Inspector General</a
+                >
+              </li>
+              <li class="usa-identifier__required-links-item">
+                <a href="" class="usa-identifier__required-link usa-link"
+                  >Performance reports</a
+                >
+              </li>
+              <li class="usa-identifier__required-links-item">
+                <a href="" class="usa-identifier__required-link usa-link"
+                  >Privacy policy</a
+                >
+              </li>
+            </ul>
+          </div>
+        </nav>
+        <section
+          class="usa-identifier__section usa-identifier__section--usagov"
+          aria-label="U.S. government information and services"
+        >
+          <div class="usa-identifier__container">
+            <div class="usa-identifier__usagov-description">
+              Looking for U.S. government information and services?
+            </div>
+            <a href="https://www.usa.gov/" class="usa-link">Visit USA.gov</a>
+          </div>
+        </section>
+      </div>
+    `;
+  }
+}
+
+window.customElements.define("usa-identifier", UsaIdentifier);
diff --git a/web-components/src/components/usa-identifier/package.json b/web-components/src/components/usa-identifier/package.json
new file mode 100644
index 00000000..861cd2f4
--- /dev/null
+++ b/web-components/src/components/usa-identifier/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "usa-identifier",
+  "version": "0.0.1",
+  "description": "USWDS identifier component",
+  "main": "index.js",
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "SEE LICENSE IN LICENSE.md"
+}

From 3d348a91f425bec6c9ab4791fa570694b6d51083 Mon Sep 17 00:00:00 2001
From: amyleadem <amy.leadem@bixal.com>
Date: Tue, 28 May 2024 16:23:48 -0700
Subject: [PATCH 02/37] Add scaffolding to elements

---
 web-components/index.html                     |  30 ++--
 .../src/components/usa-identifier/index.js    | 163 ++++++++----------
 2 files changed, 88 insertions(+), 105 deletions(-)

diff --git a/web-components/index.html b/web-components/index.html
index 07b711db..57fe1949 100644
--- a/web-components/index.html
+++ b/web-components/index.html
@@ -18,19 +18,29 @@
 
 <body>
   <usa-banner></usa-banner>
+
   <usa-link href="http://designsystem.digital.gov">
     It's dangerous to go alone. Here, take this.
   </usa-link>
-  <usa-identifier
-    site_domain="designsystem.digital.gov"
-    agency_href="https://www.gsa.gov/"
-    agency_name="General Services Administration"
-    agency_logo="https://designsystem.digital.gov/img/gsa-logo.svg"
-  >
-    <ul>
-      <li><a href="https://www.gsa.gov/about-us">About GSA</a></li>
-      <li><a href="https://www.gsa.gov/website-information/accessibility-statement">Accessibility statement</a></li>
-    </ul>
+
+  <usa-identifier>
+    <a class="usa-identifier__logo" href="https://www.gsa.gov/">
+      <img
+        src="https://designsystem.digital.gov/img/gsa-logo.svg"
+        alt="General Services Administration logo"/>
+    </a>
+    <p slot="domain">designsystem.digital.gov</p>
+    <p class="usa-identifier__identity-disclaimer">An official website of the <a href="https://gsa.gov/">General Services Administration</a></p>
+    <nav>
+      <a href="https://www.gsa.gov/about-us">About GSA</a>
+      <a href="https://www.gsa.gov/website-information/accessibility-statement">Accessibility statement</a>
+      <a href="https://www.gsa.gov/reference/freedom-of-information-act-foia">FOIA requests</a>
+      <a href="https://www.gsa.gov/reference/civil-rights-programs/notification-and-federal-employee-antidiscrimination-and-retaliation-act-of-2002">No FEAR Act data</a>
+      <a href="https://www.gsaig.gov/">Office of the Inspector General</a>
+      <a href="https://www.gsa.gov/reference/reports/budget-performance">Performance reports</a>
+      <a href="https://www.gsa.gov/website-information/website-policies">Privacy policy</a>
+    </nav>
+    <div class="usa-identifier__usagov-description">Looking for U.S. government information and services? <a href="https://www.usa.gov/">Visit USA.gov</a></div>
   </usa-identifier>
 </body>
 
diff --git a/web-components/src/components/usa-identifier/index.js b/web-components/src/components/usa-identifier/index.js
index 4c54e9a8..79a30c68 100644
--- a/web-components/src/components/usa-identifier/index.js
+++ b/web-components/src/components/usa-identifier/index.js
@@ -1,130 +1,103 @@
 import { LitElement, html, unsafeCSS } from "lit";
-import { classMap } from "lit/directives/class-map.js";
-import {customElement, property} from 'lit/decorators.js';
-
+import uswdsCoreStyle from "@uswds/uswds/scss/uswds-core?inline";
 import usaIdentifierStyle from "@uswds/uswds/scss/usa-identifier?inline";
 
 export class UsaIdentifier extends LitElement {
+  constructor() {
+    super();
+    /**
+       * Scaffold the logo(s):
+       * Add necessary classes
+    */
+    const logoList = this.querySelectorAll('.usa-identifier__logo');
+    const logoImageList = this.querySelectorAll('.usa-identifier__logo img');
+    const logoImageListArr = Array.from(logoImageList);
+    logoImageListArr.forEach(logo => {
+      logo.classList.add("usa-identifier__logo-img");
+    });
+
+    /**
+       * Scaffold the required links list:
+       * Build an unordered list and add necessary attributes
+    */
+    const nav = this.querySelector('nav');
+    const linksArr = Array.from(nav.children);
+    const linksList = document.createElement("ul");
+
+    linksList.classList.add("usa-identifier__required-links-list");
+    nav.insertAdjacentElement("afterbegin", linksList);
+
+    linksArr.forEach(link => {
+      const listItem = document.createElement("li");
+      listItem.classList.add("usa-identifier__required-links-item");
+      link.classList.add("usa-identifier__required-link");
+      listItem.appendChild(link);
+      linksList.appendChild(listItem);
+    });
+
+    /**
+      * Scaffold usagov text
+      * Add necessary attributes
+    */
+    const usagov = this.querySelector('.usa-identifier__usagov-description');
+    const usagovLink = this.querySelector('.usa-identifier__usagov-description a');
+    usagovLink.classList.add('usa-link');
 
-  static get properties() {
-    return {
-      /**
-       * The site domain
-       */
-      site_domain: { type: String },
-      /**
-       * The agency name
-       */
-      agency_name: { type: String },
-      /**
-       * The destination URL for the agency and logo link
-       */
-      agency_href: { type: String },
-      /**
-       * The destination URL for the agency and logo link
-       */
-      agency_logo: { type: String },
-      /**
-       * The required link list items
-       */
-      link_list: { type: Array },
+    /**
+      * Scaffold disclaimer text
+      * Wrap "An" in aria-hidden span
+    */
+    const disclaimer = this.querySelector('.usa-identifier__identity-disclaimer');
+    if ( disclaimer.textContent.includes("An") ){
+      disclaimer.innerHTML.replace('An', '<span aria-hidden="true" style="background:pink">An</span>');
     };
+
+    // return elements
+    this.logo = logoList;
+    this.list = linksList;
+    this.usagov = usagov;
+    this.disclaimer = disclaimer;
   }
 
-  constructor() {
-    super();
-    this.agency_href = "";
+  connectedCallback() {
+    super.connectedCallback();
   }
 
-  static styles = [unsafeCSS(usaIdentifierStyle)];
+  static styles = [
+    unsafeCSS(usaIdentifierStyle),
+    unsafeCSS(uswdsCoreStyle)
+  ];
 
   render() {
     return html`
-
       <div class="usa-identifier">
         <section
           class="usa-identifier__section usa-identifier__section--masthead"
-          aria-label="Agency identifier"
+          aria-label="Agency identifier,"
         >
           <div class="usa-identifier__container">
             <div class="usa-identifier__logos">
-              <a
-                class="usa-identifier__logo"
-                href="${this.agency_href}"
-                ><img
-                  class="usa-identifier__logo-img"
-                  src="${this.agency_logo}"
-                  alt="${this.agency_name} logo"
-                  role="img"
-              /></a>
+              ${this.logo}
             </div>
-            <section
-              class="usa-identifier__identity"
-              aria-label="Agency description,"
-            >
-              <p class="usa-identifier__identity-domain">${this.site_domain}</p>
-              <p class="usa-identifier__identity-disclaimer">
-                <span aria-hidden="true">An </span>official website of the
-                <a href="${this.agency_href}">${this.agency_name}</a>
-              </p>
+            <section class="usa-identifier__identity" aria-label="Agency description,">
+              <p class="usa-identifier__identity-domain"><slot name="domain"></slot></p>
+              <p class="usa-identifier__identity-usagov">${this.disclaimer}</p>
             </section>
           </div>
         </section>
         <nav
           class="usa-identifier__section usa-identifier__section--required-links"
-          aria-label="Important links,,,"
+          aria-label="Important links"
         >
           <div class="usa-identifier__container">
-            <ul class="usa-identifier__required-links-list">
-              <li class="usa-identifier__required-links-item">
-                <a
-                  href="javascript:void(0)"
-                  class="usa-identifier__required-link usa-link"
-                  >About &lt;Parent shortname&gt;</a
-                >
-              </li>
-              <li class="usa-identifier__required-links-item">
-                <a href="" class="usa-identifier__required-link usa-link"
-                  >Accessibility statement</a
-                >
-              </li>
-              <li class="usa-identifier__required-links-item">
-                <a href="" class="usa-identifier__required-link usa-link"
-                  >FOIA requests</a
-                >
-              </li>
-              <li class="usa-identifier__required-links-item">
-                <a href="" class="usa-identifier__required-link usa-link"
-                  >No FEAR Act data</a
-                >
-              </li>
-              <li class="usa-identifier__required-links-item">
-                <a href="" class="usa-identifier__required-link usa-link"
-                  >Office of the Inspector General</a
-                >
-              </li>
-              <li class="usa-identifier__required-links-item">
-                <a href="" class="usa-identifier__required-link usa-link"
-                  >Performance reports</a
-                >
-              </li>
-              <li class="usa-identifier__required-links-item">
-                <a href="" class="usa-identifier__required-link usa-link"
-                  >Privacy policy</a
-                >
-              </li>
-            </ul>
+            ${this.list}
           </div>
         </nav>
-        <section
-          class="usa-identifier__section usa-identifier__section--usagov"
-          aria-label="U.S. government information and services"
-        >
+        <section>
           <div class="usa-identifier__container">
             <div class="usa-identifier__usagov-description">
-              Looking for U.S. government information and services?
+              ${this.usagov}
             </div>
-            <a href="https://www.usa.gov/" class="usa-link">Visit USA.gov</a>
           </div>
         </section>
       </div>

From dae3bb9eb199e5256d11da4e5e269f2044dbe3c5 Mon Sep 17 00:00:00 2001
From: amyleadem <amy.leadem@bixal.com>
Date: Wed, 29 May 2024 16:24:05 -0700
Subject: [PATCH 03/37] Add attribute-based identifier

---
 web-components/index.html                     |  22 +++
 .../usa-identifier-attributes/index.js        | 170 ++++++++++++++++++
 .../usa-identifier-attributes/package.json    |  12 ++
 3 files changed, 204 insertions(+)
 create mode 100644 web-components/src/components/usa-identifier-attributes/index.js
 create mode 100644 web-components/src/components/usa-identifier-attributes/package.json

diff --git a/web-components/index.html b/web-components/index.html
index 57fe1949..caeb4381 100644
--- a/web-components/index.html
+++ b/web-components/index.html
@@ -9,6 +9,8 @@
   <script type="module" src="/src/components/usa-banner/index.js"></script>
   <script type="module" src="/src/components/usa-link/index.js"></script>
   <script type="module" src="/src/components/usa-identifier/index.js"></script>
+  <script type="module" src="/src/components/usa-identifier-attributes/index.js"></script>
+
   <style>
     :root {
       --theme-link-color: hotpink;
@@ -23,6 +25,8 @@
     It's dangerous to go alone. Here, take this.
   </usa-link>
 
+  <h2>Identifier - Minimal markup</h2>
+
   <usa-identifier>
     <a class="usa-identifier__logo" href="https://www.gsa.gov/">
       <img
@@ -42,6 +46,24 @@
     </nav>
     <div class="usa-identifier__usagov-description">Looking for U.S. government information and services? <a href="https://www.usa.gov/">Visit USA.gov</a></div>
   </usa-identifier>
+
+  <h2>Identifier - Attribute-based</h2>
+
+  <usa-identifier-attributes
+    site_domain="designsystem.digital.gov"
+    parent_name="General Services Administration"
+    parent_shortname="GSA"
+    parent_href="https://www.gsa.gov/"
+    parent_logo="https://designsystem.digital.gov/img/gsa-logo.svg"
+    link_accessibility="https://www.gsa.gov/website-information/accessibility-statement"
+    link_about="https://www.gsa.gov/about-us"
+    link_foia="https://www.gsa.gov/reference/freedom-of-information-act-foia"
+    link_fear="https://www.gsa.gov/reference/civil-rights-programs/notification-and-federal-employee-antidiscrimination-and-retaliation-act-of-2002"
+    link_oig="https://www.gsaig.gov/"
+    link_performance="https://www.gsa.gov/reference/reports/budget-performance"
+    link_privacy="https://www.gsa.gov/website-information/website-policies"
+  >
+  </usa-identifier-attributes>
 </body>
 
 </html>
diff --git a/web-components/src/components/usa-identifier-attributes/index.js b/web-components/src/components/usa-identifier-attributes/index.js
new file mode 100644
index 00000000..8fbda7f0
--- /dev/null
+++ b/web-components/src/components/usa-identifier-attributes/index.js
@@ -0,0 +1,170 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import uswdsCoreStyle from "@uswds/uswds/scss/uswds-core?inline";
+import usaIdentifierStyle from "@uswds/uswds/scss/usa-identifier?inline";
+
+export class UsaIdentifierAttributes extends LitElement {
+
+  static get properties() {
+    return {
+      /**
+       * The site domain
+       */
+      site_domain: { type: String },
+      /**
+       * The parent agency name
+       */
+      parent_name: { type: String },
+      /**
+       * The parent agency acronym or short name
+       */
+      parent_shortname: { type: String },
+      /**
+       * The destination URL for the agency and logo link
+       */
+      parent_href: { type: String },
+      /**
+       * The destination URL for the agency and logo link
+       */
+      parent_logo: { type: String },
+      /**
+       * Parent agency about page url
+       */
+      link_about: { type: String },
+      /**
+       * Parent agency accessibility statement url
+       */
+      link_accessibility: { type: String },
+      /**
+       * Parent agency FOIA url
+       */
+      link_foia: { type: String },
+      /**
+       * Parent agency No FEAR act url
+       */
+      link_fear: { type: String },
+      /**
+       * Parent agency Office of Inspector General url
+       */
+      link_oig: { type: String },
+      /**
+       * Parent agency performance reports url
+       */
+      link_performance: { type: String },
+      /**
+       * Parent agency privacy policy url
+       */
+      link_privacy: { type: String },
+    };
+  }
+
+  static styles = [
+    unsafeCSS(usaIdentifierStyle),
+    unsafeCSS(uswdsCoreStyle)
+  ];
+
+  render() {
+    return html`
+      <div class="usa-identifier">
+        <section
+          class="usa-identifier__section usa-identifier__section--masthead"
+          aria-label="Agency identifier"
+        >
+          <div class="usa-identifier__container">
+            <div class="usa-identifier__logos">
+              <a
+                class="usa-identifier__logo"
+                href="${this.parent_href}"
+                ><img
+                  class="usa-identifier__logo-img"
+                  src="${this.parent_logo}"
+                  alt="${this.parent_name} logo"
+                  role="img"
+              /></a>
+            </div>
+            <section
+              class="usa-identifier__identity"
+              aria-label="Agency description,"
+            >
+              <p class="usa-identifier__identity-domain">${this.site_domain}</p>
+              <p class="usa-identifier__identity-disclaimer">
+                <span aria-hidden="true">An </span>official website of the
+                <a href="${this.parent_href}">${this.parent_name}</a>
+              </p>
+            </section>
+          </div>
+        </section>
+        <nav
+          class="usa-identifier__section usa-identifier__section--required-links"
+          aria-label="Important links"
+        >
+          <div class="usa-identifier__container">
+            <ul class="usa-identifier__required-links-list">
+              <li class="usa-identifier__required-links-item">
+                <a
+                  href="${this.link_about}"
+                  class="usa-identifier__required-link usa-link"
+                  >About ${this.parent_shortname}</a
+                >
+              </li>
+              <li class="usa-identifier__required-links-item">
+                <a
+                  href="${this.link_accessibility}"
+                  class="usa-identifier__required-link usa-link"
+                  >Accessibility statement</a
+                >
+              </li>
+              <li class="usa-identifier__required-links-item">
+                <a
+                  href="${this.link_foia}"
+                  class="usa-identifier__required-link usa-link"
+                  >FOIA requests</a
+                >
+              </li>
+              <li class="usa-identifier__required-links-item">
+                <a
+                  href="${this.link_fear}"
+                  class="usa-identifier__required-link usa-link"
+                  >No FEAR Act data</a
+                >
+              </li>
+              <li class="usa-identifier__required-links-item">
+                <a
+                  href="${this.link_oig}"
+                  class="usa-identifier__required-link usa-link"
+                  >Office of the Inspector General</a
+                >
+              </li>
+              <li class="usa-identifier__required-links-item">
+                <a
+                  href="${this.link_performance}"
+                  class="usa-identifier__required-link usa-link"
+                  >Performance reports</a
+                >
+              </li>
+              <li class="usa-identifier__required-links-item">
+                <a
+                  href="${this.link_privacy}"
+                  class="usa-identifier__required-link usa-link"
+                  >Privacy policy</a
+                >
+              </li>
+            </ul>
+          </div>
+        </nav>
+        <section
+          class="usa-identifier__section usa-identifier__section--usagov"
+          aria-label="U.S. government information and services"
+        >
+          <div class="usa-identifier__container">
+            <div class="usa-identifier__usagov-description">
+              Looking for U.S. government information and services?
+            </div>
+            <a href="https://www.usa.gov/" class="usa-link">Visit USA.gov</a>
+          </div>
+        </section>
+      </div>
+    `;
+  }
+}
+
+window.customElements.define("usa-identifier-attributes", UsaIdentifierAttributes);
\ No newline at end of file
diff --git a/web-components/src/components/usa-identifier-attributes/package.json b/web-components/src/components/usa-identifier-attributes/package.json
new file mode 100644
index 00000000..323fc1f0
--- /dev/null
+++ b/web-components/src/components/usa-identifier-attributes/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "usa-identifier-attributes",
+  "version": "0.0.1",
+  "description": "USWDS identifier component - attribute-based",
+  "main": "index.js",
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "SEE LICENSE IN LICENSE.md"
+}

From eb8c394bc0a68d6ab423c5c3cea92062c6020386 Mon Sep 17 00:00:00 2001
From: amyleadem <amy.leadem@bixal.com>
Date: Wed, 29 May 2024 16:47:14 -0700
Subject: [PATCH 04/37] Replace inline classes with slot names

---
 web-components/index.html                     |  6 ++--
 .../src/components/usa-identifier/index.js    | 32 +++++++++++++------
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/web-components/index.html b/web-components/index.html
index caeb4381..4420213a 100644
--- a/web-components/index.html
+++ b/web-components/index.html
@@ -28,13 +28,13 @@
   <h2>Identifier - Minimal markup</h2>
 
   <usa-identifier>
-    <a class="usa-identifier__logo" href="https://www.gsa.gov/">
+    <a slot="logo" href="https://www.gsa.gov/">
       <img
         src="https://designsystem.digital.gov/img/gsa-logo.svg"
         alt="General Services Administration logo"/>
     </a>
     <p slot="domain">designsystem.digital.gov</p>
-    <p class="usa-identifier__identity-disclaimer">An official website of the <a href="https://gsa.gov/">General Services Administration</a></p>
+    <p slot="disclaimer">An official website of the <a href="https://gsa.gov/">General Services Administration</a></p>
     <nav>
       <a href="https://www.gsa.gov/about-us">About GSA</a>
       <a href="https://www.gsa.gov/website-information/accessibility-statement">Accessibility statement</a>
@@ -44,7 +44,7 @@ <h2>Identifier - Minimal markup</h2>
       <a href="https://www.gsa.gov/reference/reports/budget-performance">Performance reports</a>
       <a href="https://www.gsa.gov/website-information/website-policies">Privacy policy</a>
     </nav>
-    <div class="usa-identifier__usagov-description">Looking for U.S. government information and services? <a href="https://www.usa.gov/">Visit USA.gov</a></div>
+    <div slot="usagov">Looking for U.S. government information and services? <a href="https://www.usa.gov/">Visit USA.gov</a></div>
   </usa-identifier>
 
   <h2>Identifier - Attribute-based</h2>
diff --git a/web-components/src/components/usa-identifier/index.js b/web-components/src/components/usa-identifier/index.js
index 79a30c68..fa60a1ff 100644
--- a/web-components/src/components/usa-identifier/index.js
+++ b/web-components/src/components/usa-identifier/index.js
@@ -9,11 +9,15 @@ export class UsaIdentifier extends LitElement {
        * Scaffold the logo(s):
        * Add necessary classes
     */
-    const logoList = this.querySelectorAll('.usa-identifier__logo');
-    const logoImageList = this.querySelectorAll('.usa-identifier__logo img');
+    const logoList = this.querySelectorAll('[slot="logo"]');
+    const logoImageList = this.querySelectorAll('[slot="disclaimer"] img');
+    const logoListArr = Array.from(logoList);
     const logoImageListArr = Array.from(logoImageList);
-    logoImageListArr.forEach(logo => {
-      logo.classList.add("usa-identifier__logo-img");
+    logoListArr.forEach(logo => {
+      logo.classList.add("usa-identifier__logo");
+    });
+    logoImageListArr.forEach(logoImg => {
+      logoImg.classList.add("usa-identifier__logo-img");
     });
 
     /**
@@ -39,24 +43,34 @@ export class UsaIdentifier extends LitElement {
       * Scaffold usagov text
       * Add necessary attributes
     */
-    const usagov = this.querySelector('.usa-identifier__usagov-description');
-    const usagovLink = this.querySelector('.usa-identifier__usagov-description a');
+    const usagov = this.querySelector('[slot="usagov"]');
+    const usagovLink = this.querySelector('[slot="disclaimer"] a');
+    usagov.classList.add('usa-identifier__usagov-description');
     usagovLink.classList.add('usa-link');
 
     /**
       * Scaffold disclaimer text
       * Wrap "An" in aria-hidden span
     */
-    const disclaimer = this.querySelector('.usa-identifier__identity-disclaimer');
+    const disclaimer = this.querySelector('[slot="disclaimer"]');
+    disclaimer.classList.add('usa-identifier__identity-disclaimer');
     if ( disclaimer.textContent.includes("An") ){
       disclaimer.innerHTML.replace('An', '<span aria-hidden="true" style="background:pink">An</span>');
     };
 
+    /**
+      * Scaffold domain text
+      * Wrap "An" in aria-hidden span
+    */
+    const domain = this.querySelector('[slot="domain"]');
+    domain.classList.add('usa-identifier__identity-domain');
+
     // return elements
     this.logo = logoList;
     this.list = linksList;
     this.usagov = usagov;
     this.disclaimer = disclaimer;
+    this.domain = domain;
   }
 
   connectedCallback() {
@@ -80,8 +94,8 @@ export class UsaIdentifier extends LitElement {
               ${this.logo}
             </div>
             <section class="usa-identifier__identity" aria-label="Agency description,">
-              <p class="usa-identifier__identity-domain"><slot name="domain"></slot></p>
-              <p class="usa-identifier__identity-usagov">${this.disclaimer}</p>
+              ${this.domain}
+              ${this.disclaimer}
             </section>
           </div>
         </section>

From 78ff480c2c537c4df6d703bb4c1fdbc89b1d3802 Mon Sep 17 00:00:00 2001
From: amyleadem <amy.leadem@bixal.com>
Date: Wed, 29 May 2024 18:59:15 -0700
Subject: [PATCH 05/37] Clean up code

---
 .../src/components/usa-identifier/index.js    | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/web-components/src/components/usa-identifier/index.js b/web-components/src/components/usa-identifier/index.js
index fa60a1ff..237c0202 100644
--- a/web-components/src/components/usa-identifier/index.js
+++ b/web-components/src/components/usa-identifier/index.js
@@ -10,14 +10,11 @@ export class UsaIdentifier extends LitElement {
        * Add necessary classes
     */
     const logoList = this.querySelectorAll('[slot="logo"]');
-    const logoImageList = this.querySelectorAll('[slot="disclaimer"] img');
     const logoListArr = Array.from(logoList);
-    const logoImageListArr = Array.from(logoImageList);
     logoListArr.forEach(logo => {
+      const logoImage = this.querySelector('img');
       logo.classList.add("usa-identifier__logo");
-    });
-    logoImageListArr.forEach(logoImg => {
-      logoImg.classList.add("usa-identifier__logo-img");
+      logoImage.classList.add("usa-identifier__logo-img");
     });
 
     /**
@@ -49,7 +46,7 @@ export class UsaIdentifier extends LitElement {
     usagovLink.classList.add('usa-link');
 
     /**
-      * Scaffold disclaimer text
+      * Scaffold disclaimer text:
       * Wrap "An" in aria-hidden span
     */
     const disclaimer = this.querySelector('[slot="disclaimer"]');
@@ -60,7 +57,7 @@ export class UsaIdentifier extends LitElement {
 
     /**
       * Scaffold domain text
-      * Wrap "An" in aria-hidden span
+      * Ade necessary attributes
     */
     const domain = this.querySelector('[slot="domain"]');
     domain.classList.add('usa-identifier__identity-domain');
@@ -73,10 +70,6 @@ export class UsaIdentifier extends LitElement {
     this.domain = domain;
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-  }
-
   static styles = [
     unsafeCSS(usaIdentifierStyle),
     unsafeCSS(uswdsCoreStyle)
@@ -87,7 +80,7 @@ export class UsaIdentifier extends LitElement {
       <div class="usa-identifier">
         <section
           class="usa-identifier__section usa-identifier__section--masthead"
-          aria-label="Agency identifier,"
+          aria-label="Agency identifier"
         >
           <div class="usa-identifier__container">
             <div class="usa-identifier__logos">
@@ -107,7 +100,7 @@ export class UsaIdentifier extends LitElement {
             ${this.list}
           </div>
         </nav>
-        <section>
+        <section class="usa-identifier__section usa-identifier__section--usagov">
           <div class="usa-identifier__container">
             <div class="usa-identifier__usagov-description">
               ${this.usagov}

From 0bb3b3a30722a471fa6a3cc84710fff601077d20 Mon Sep 17 00:00:00 2001
From: amyleadem <amy.leadem@bixal.com>
Date: Wed, 29 May 2024 19:08:10 -0700
Subject: [PATCH 06/37] Check for existence of slot elements before
 manipulating

---
 .../src/components/usa-identifier/index.js    | 48 ++++++++++++-------
 1 file changed, 30 insertions(+), 18 deletions(-)

diff --git a/web-components/src/components/usa-identifier/index.js b/web-components/src/components/usa-identifier/index.js
index 237c0202..45616a6a 100644
--- a/web-components/src/components/usa-identifier/index.js
+++ b/web-components/src/components/usa-identifier/index.js
@@ -11,11 +11,14 @@ export class UsaIdentifier extends LitElement {
     */
     const logoList = this.querySelectorAll('[slot="logo"]');
     const logoListArr = Array.from(logoList);
-    logoListArr.forEach(logo => {
-      const logoImage = this.querySelector('img');
-      logo.classList.add("usa-identifier__logo");
-      logoImage.classList.add("usa-identifier__logo-img");
-    });
+
+    if (logoListArr) {
+      logoListArr.forEach(logo => {
+        const logoImage = this.querySelector('img');
+        logo.classList.add("usa-identifier__logo");
+        logoImage.classList.add("usa-identifier__logo-img");
+      });
+    }
 
     /**
        * Scaffold the required links list:
@@ -25,16 +28,19 @@ export class UsaIdentifier extends LitElement {
     const linksArr = Array.from(nav.children);
     const linksList = document.createElement("ul");
 
-    linksList.classList.add("usa-identifier__required-links-list");
-    nav.insertAdjacentElement("afterbegin", linksList);
+    if (nav) {
+      linksList.classList.add("usa-identifier__required-links-list");
+      nav.insertAdjacentElement("afterbegin", linksList);
+
+      linksArr.forEach(link => {
+        const listItem = document.createElement("li");
+        listItem.classList.add("usa-identifier__required-links-item");
+        link.classList.add("usa-identifier__required-link");
+        listItem.appendChild(link);
+        linksList.appendChild(listItem);
+      });
+    }
 
-    linksArr.forEach(link => {
-      const listItem = document.createElement("li");
-      listItem.classList.add("usa-identifier__required-links-item");
-      link.classList.add("usa-identifier__required-link");
-      listItem.appendChild(link);
-      linksList.appendChild(listItem);
-    });
 
     /**
       * Scaffold usagov text
@@ -42,15 +48,19 @@ export class UsaIdentifier extends LitElement {
     */
     const usagov = this.querySelector('[slot="usagov"]');
     const usagovLink = this.querySelector('[slot="disclaimer"] a');
-    usagov.classList.add('usa-identifier__usagov-description');
-    usagovLink.classList.add('usa-link');
+    if (usagov) {
+      usagov.classList.add('usa-identifier__usagov-description');
+      usagovLink.classList.add('usa-link');
+    }
 
     /**
       * Scaffold disclaimer text:
       * Wrap "An" in aria-hidden span
     */
     const disclaimer = this.querySelector('[slot="disclaimer"]');
-    disclaimer.classList.add('usa-identifier__identity-disclaimer');
+    if(disclaimer) {
+      disclaimer.classList.add('usa-identifier__identity-disclaimer');
+    }
     if ( disclaimer.textContent.includes("An") ){
       disclaimer.innerHTML.replace('An', '<span aria-hidden="true" style="background:pink">An</span>');
     };
@@ -60,7 +70,9 @@ export class UsaIdentifier extends LitElement {
       * Ade necessary attributes
     */
     const domain = this.querySelector('[slot="domain"]');
-    domain.classList.add('usa-identifier__identity-domain');
+    if (domain) {
+      domain.classList.add('usa-identifier__identity-domain');
+    }
 
     // return elements
     this.logo = logoList;

From f346baf9bcc3c2cc2114f4361bf6a6087827040c Mon Sep 17 00:00:00 2001
From: amyleadem <amy.leadem@bixal.com>
Date: Thu, 30 May 2024 07:56:52 -0700
Subject: [PATCH 07/37] Generate logo wrapper; clean up code and comments

---
 .../src/components/usa-identifier/index.js    | 71 +++++++++++--------
 1 file changed, 40 insertions(+), 31 deletions(-)

diff --git a/web-components/src/components/usa-identifier/index.js b/web-components/src/components/usa-identifier/index.js
index 45616a6a..9f8d03d4 100644
--- a/web-components/src/components/usa-identifier/index.js
+++ b/web-components/src/components/usa-identifier/index.js
@@ -5,49 +5,57 @@ import usaIdentifierStyle from "@uswds/uswds/scss/usa-identifier?inline";
 export class UsaIdentifier extends LitElement {
   constructor() {
     super();
-    /**
+
+       /**
        * Scaffold the logo(s):
        * Add necessary classes
     */
-    const logoList = this.querySelectorAll('[slot="logo"]');
-    const logoListArr = Array.from(logoList);
-
-    if (logoListArr) {
-      logoListArr.forEach(logo => {
-        const logoImage = this.querySelector('img');
-        logo.classList.add("usa-identifier__logo");
-        logoImage.classList.add("usa-identifier__logo-img");
-      });
+    const logos = this.querySelectorAll('[slot="logo"]');
+    const logosArr = Array.from(logos);
+    let logoWrapper;
+
+    if (logos.length > 0) {
+    logoWrapper = document.createElement('div');
+    logoWrapper.classList.add('usa-identifier__logos');
+
+    logosArr.forEach(logo => {
+      const logoImage = this.querySelector('img');
+      logo.classList.add('usa-identifier__logo');
+      logoImage.classList.add('usa-identifier__logo-img');
+      logoWrapper.appendChild(logo);
+    });
     }
 
     /**
        * Scaffold the required links list:
-       * Build an unordered list and add necessary attributes
+       * Build an unordered list, list item wrappers, and
+       * add necessary attributes
     */
     const nav = this.querySelector('nav');
     const linksArr = Array.from(nav.children);
-    const linksList = document.createElement("ul");
+    let linksList;
 
     if (nav) {
-      linksList.classList.add("usa-identifier__required-links-list");
-      nav.insertAdjacentElement("afterbegin", linksList);
+      linksList = document.createElement('ul');
+      linksList.classList.add('usa-identifier__required-links-list');
+      nav.insertAdjacentElement('afterbegin', linksList);
 
       linksArr.forEach(link => {
-        const listItem = document.createElement("li");
-        listItem.classList.add("usa-identifier__required-links-item");
-        link.classList.add("usa-identifier__required-link");
+        const listItem = document.createElement('li');
+        listItem.classList.add('usa-identifier__required-links-item');
+        link.classList.add('usa-identifier__required-link');
         listItem.appendChild(link);
         linksList.appendChild(listItem);
       });
     }
 
-
     /**
-      * Scaffold usagov text
-      * Add necessary attributes
+      * Scaffold usagov text:
+      * Add necessary classes for styling
     */
     const usagov = this.querySelector('[slot="usagov"]');
-    const usagovLink = this.querySelector('[slot="disclaimer"] a');
+    const usagovLink = this.querySelector('[slot="usagov"] a');
+
     if (usagov) {
       usagov.classList.add('usa-identifier__usagov-description');
       usagovLink.classList.add('usa-link');
@@ -55,19 +63,22 @@ export class UsaIdentifier extends LitElement {
 
     /**
       * Scaffold disclaimer text:
+      * Add necessary classes for styling
       * Wrap "An" in aria-hidden span
     */
     const disclaimer = this.querySelector('[slot="disclaimer"]');
+
     if(disclaimer) {
       disclaimer.classList.add('usa-identifier__identity-disclaimer');
     }
-    if ( disclaimer.textContent.includes("An") ){
+
+    if ( disclaimer.textContent.includes('An') ){
       disclaimer.innerHTML.replace('An', '<span aria-hidden="true" style="background:pink">An</span>');
     };
 
     /**
-      * Scaffold domain text
-      * Ade necessary attributes
+      * Scaffold domain text:
+      * Add necessary classes for styling
     */
     const domain = this.querySelector('[slot="domain"]');
     if (domain) {
@@ -75,8 +86,8 @@ export class UsaIdentifier extends LitElement {
     }
 
     // return elements
-    this.logo = logoList;
-    this.list = linksList;
+    this.logoWrapper = logoWrapper;
+    this.linkList = linksList;
     this.usagov = usagov;
     this.disclaimer = disclaimer;
     this.domain = domain;
@@ -95,10 +106,8 @@ export class UsaIdentifier extends LitElement {
           aria-label="Agency identifier"
         >
           <div class="usa-identifier__container">
-            <div class="usa-identifier__logos">
-              ${this.logo}
-            </div>
-            <section class="usa-identifier__identity" aria-label="Agency description,">
+            ${this.logoWrapper}
+            <section class="usa-identifier__identity" aria-label="Agency description">
               ${this.domain}
               ${this.disclaimer}
             </section>
@@ -109,7 +118,7 @@ export class UsaIdentifier extends LitElement {
           aria-label="Important links"
         >
           <div class="usa-identifier__container">
-            ${this.list}
+            ${this.linkList}
           </div>
         </nav>
         <section class="usa-identifier__section usa-identifier__section--usagov">

From d732d9d7c5540520a88e4c4dfe6676ee845f5122 Mon Sep 17 00:00:00 2001
From: amyleadem <amy.leadem@bixal.com>
Date: Thu, 30 May 2024 07:57:09 -0700
Subject: [PATCH 08/37] Add examples of diff logo counts

---
 web-components/index.html | 53 +++++++++++++++++++++++++++++++++++++--
 1 file changed, 51 insertions(+), 2 deletions(-)

diff --git a/web-components/index.html b/web-components/index.html
index 4420213a..dcbebcce 100644
--- a/web-components/index.html
+++ b/web-components/index.html
@@ -15,6 +15,9 @@
     :root {
       --theme-link-color: hotpink;
     }
+    .amys-cool-style {
+      background: gold;
+    }
   </style>
 </head>
 
@@ -25,7 +28,29 @@
     It's dangerous to go alone. Here, take this.
   </usa-link>
 
-  <h2>Identifier - Minimal markup</h2>
+  <h2>Minimal markup - one logo</h2>
+
+  <usa-identifier>
+    <a slot="logo" href="https://www.gsa.gov/">
+      <img
+        src="https://designsystem.digital.gov/img/gsa-logo.svg"
+        alt="General Services Administration logo"/>
+    </a>
+    <p slot="domain" class="amys-cool-style">designsystem.digital.gov</p>
+    <p slot="disclaimer">An official website of the <a href="https://gsa.gov/">General Services Administration</a></p>
+    <nav>
+      <a href="https://www.gsa.gov/about-us">About GSA</a>
+      <a href="https://www.gsa.gov/website-information/accessibility-statement">Accessibility statement</a>
+      <a href="https://www.gsa.gov/reference/freedom-of-information-act-foia">FOIA requests</a>
+      <a href="https://www.gsa.gov/reference/civil-rights-programs/notification-and-federal-employee-antidiscrimination-and-retaliation-act-of-2002">No FEAR Act data</a>
+      <a href="https://www.gsaig.gov/">Office of the Inspector General</a>
+      <a href="https://www.gsa.gov/reference/reports/budget-performance">Performance reports</a>
+      <a href="https://www.gsa.gov/website-information/website-policies">Privacy policy</a>
+    </nav>
+    <div slot="usagov">Looking for U.S. government information and services? <a href="https://www.usa.gov/">Visit USA.gov</a></div>
+  </usa-identifier>
+
+  <h2>Minimal markup - two logos</h2>
 
   <usa-identifier>
     <a slot="logo" href="https://www.gsa.gov/">
@@ -33,6 +58,29 @@ <h2>Identifier - Minimal markup</h2>
         src="https://designsystem.digital.gov/img/gsa-logo.svg"
         alt="General Services Administration logo"/>
     </a>
+    <a slot="logo" href="https://www.gsa.gov/">
+      <img
+        src="https://designsystem.digital.gov/img/gsa-logo.svg"
+        alt="General Services Administration logo"/>
+    </a>
+    <p slot="domain">designsystem.digital.gov</p>
+    <p slot="disclaimer">An official website of the <a href="https://gsa.gov/">General Services Administration</a></p>
+    <nav>
+      <a href="https://www.gsa.gov/about-us">About GSA</a>
+      <a href="https://www.gsa.gov/website-information/accessibility-statement">Accessibility statement</a>
+      <a href="https://www.gsa.gov/reference/freedom-of-information-act-foia">FOIA requests</a>
+      <a href="https://www.gsa.gov/reference/civil-rights-programs/notification-and-federal-employee-antidiscrimination-and-retaliation-act-of-2002">No FEAR Act data</a>
+      <a href="https://www.gsaig.gov/">Office of the Inspector General</a>
+      <a href="https://www.gsa.gov/reference/reports/budget-performance">Performance reports</a>
+      <a href="https://www.gsa.gov/website-information/website-policies">Privacy policy</a>
+    </nav>
+    <div slot="usagov">Looking for U.S. government information and services? <a href="https://www.usa.gov/">Visit USA.gov</a></div>
+  </usa-identifier>
+
+
+  <h2>Minimal markup - no logos</h2>
+
+  <usa-identifier>
     <p slot="domain">designsystem.digital.gov</p>
     <p slot="disclaimer">An official website of the <a href="https://gsa.gov/">General Services Administration</a></p>
     <nav>
@@ -47,7 +95,8 @@ <h2>Identifier - Minimal markup</h2>
     <div slot="usagov">Looking for U.S. government information and services? <a href="https://www.usa.gov/">Visit USA.gov</a></div>
   </usa-identifier>
 
-  <h2>Identifier - Attribute-based</h2>
+
+  <h2>Attribute-based - one logo</h2>
 
   <usa-identifier-attributes
     site_domain="designsystem.digital.gov"

From cb1fcb7252fb7ec7a0e42b703ce673f0e7de3d0c Mon Sep 17 00:00:00 2001
From: Charlie Mahoney <charlie.mahoneyy@gmail.com>
Date: Tue, 4 Jun 2024 13:46:47 -0400
Subject: [PATCH 09/37] Create card component

---
 .../src/components/usa-card/index.js          | 108 ++++++++++++++++++
 1 file changed, 108 insertions(+)
 create mode 100644 web-components/src/components/usa-card/index.js

diff --git a/web-components/src/components/usa-card/index.js b/web-components/src/components/usa-card/index.js
new file mode 100644
index 00000000..d95f24a0
--- /dev/null
+++ b/web-components/src/components/usa-card/index.js
@@ -0,0 +1,108 @@
+import { LitElement, html, unsafeCSS, css } from "lit";
+import { classMap } from "lit/directives/class-map.js"
+import uswdsCoreStyle from "@uswds/uswds/scss/uswds-core?inline";
+import usaCardStyle from "@uswds/uswds/scss/usa-card?inline";
+import usaButtonStyle from "@uswds/uswds/scss/usa-button?inline";
+
+export class UsaCard extends LitElement {
+  static styles = [
+    unsafeCSS(uswdsCoreStyle),
+    unsafeCSS(usaCardStyle),
+    unsafeCSS(usaButtonStyle),
+    css`
+    * {
+        box-sizing: border-box;
+      }
+    `
+  ]
+
+  static get properties() {
+    return {
+      headerFirst: { type: Boolean}
+    }
+  }
+  
+  constructor() {
+    super();
+
+    // TODO: Figure out how to implement slots for each section
+
+    // this.heading = this.querySelector(".usa-card__heading");
+    // this.media = this.querySelector("img");
+    // this.content = this.querySelectorAll("p");
+    // this.link = this.querySelector("a");
+
+    this.header = this.querySelector("[slot='card-header']")
+  }
+
+  // Render header
+  headerTemplate() {
+    return html`
+      <div class="usa-card__header">
+        <div class="usa-card__heading">
+          ${this.heading}
+        </div>
+      </div>
+    `;
+  }
+  // Render media
+  mediaTemplate() {
+    if(!this.media) {
+      return;
+    }
+
+    return html`
+    <div class="usa-card__media">
+      <div class="usa-card__img">
+        ${this.media}
+      </div>
+    </div>
+    `
+  }
+
+  // Render body
+  bodyTemplate() {
+    return html`<div class="usa-card__body">${this.content}</div>`
+  }
+
+  // Render footer
+  footerTemplate() {
+    return html`<div class="usa-card__footer">${this.link}</div>`
+  }
+
+  setClasses() {
+    const classes = ["usa-card"];
+
+    if (this.headerFirst) {
+      classes.push("usa-card--header-first");
+    }
+
+    classes.forEach((className) => {
+      console.log(className);
+      return `className`
+    });
+  }
+
+  // Render card
+  cardTemplate() {
+    const classes = {"usa-card--header-first": this.headerFirst}
+    return html`
+        <div class="usa-card ${classMap(classes)}">
+          <div class="usa-card__container">
+            ${this.headerTemplate()}
+            ${this.mediaTemplate()}
+            ${this.bodyTemplate()}
+            ${this.footerTemplate()}
+          </div>
+        </div>
+    `
+  }
+
+  render() {
+    return html`
+        ${this.cardTemplate()}
+      `
+  }
+}
+
+window.customElements.define("usa-card", UsaCard);

From 2bf476c3d15009b103a739f3574a2e636d02fa89 Mon Sep 17 00:00:00 2001
From: Charlie Mahoney <charlie.mahoneyy@gmail.com>
Date: Tue, 4 Jun 2024 16:27:35 -0400
Subject: [PATCH 10/37] Remove identifier to isolate component

---
 .../usa-identifier-attributes/index.js        | 170 ------------------
 .../usa-identifier-attributes/package.json    |  12 --
 .../src/components/usa-identifier/index.js    | 136 --------------
 .../components/usa-identifier/package.json    |  12 --
 4 files changed, 330 deletions(-)
 delete mode 100644 web-components/src/components/usa-identifier-attributes/index.js
 delete mode 100644 web-components/src/components/usa-identifier-attributes/package.json
 delete mode 100644 web-components/src/components/usa-identifier/index.js
 delete mode 100644 web-components/src/components/usa-identifier/package.json

diff --git a/web-components/src/components/usa-identifier-attributes/index.js b/web-components/src/components/usa-identifier-attributes/index.js
deleted file mode 100644
index 8fbda7f0..00000000
--- a/web-components/src/components/usa-identifier-attributes/index.js
+++ /dev/null
@@ -1,170 +0,0 @@
-import { LitElement, html, unsafeCSS } from "lit";
-import uswdsCoreStyle from "@uswds/uswds/scss/uswds-core?inline";
-import usaIdentifierStyle from "@uswds/uswds/scss/usa-identifier?inline";
-
-export class UsaIdentifierAttributes extends LitElement {
-
-  static get properties() {
-    return {
-      /**
-       * The site domain
-       */
-      site_domain: { type: String },
-      /**
-       * The parent agency name
-       */
-      parent_name: { type: String },
-      /**
-       * The parent agency acronym or short name
-       */
-      parent_shortname: { type: String },
-      /**
-       * The destination URL for the agency and logo link
-       */
-      parent_href: { type: String },
-      /**
-       * The destination URL for the agency and logo link
-       */
-      parent_logo: { type: String },
-      /**
-       * Parent agency about page url
-       */
-      link_about: { type: String },
-      /**
-       * Parent agency accessibility statement url
-       */
-      link_accessibility: { type: String },
-      /**
-       * Parent agency FOIA url
-       */
-      link_foia: { type: String },
-      /**
-       * Parent agency No FEAR act url
-       */
-      link_fear: { type: String },
-      /**
-       * Parent agency Office of Inspector General url
-       */
-      link_oig: { type: String },
-      /**
-       * Parent agency performance reports url
-       */
-      link_performance: { type: String },
-      /**
-       * Parent agency privacy policy url
-       */
-      link_privacy: { type: String },
-    };
-  }
-
-  static styles = [
-    unsafeCSS(usaIdentifierStyle),
-    unsafeCSS(uswdsCoreStyle)
-  ];
-
-  render() {
-    return html`
-      <div class="usa-identifier">
-        <section
-          class="usa-identifier__section usa-identifier__section--masthead"
-          aria-label="Agency identifier"
-        >
-          <div class="usa-identifier__container">
-            <div class="usa-identifier__logos">
-              <a
-                class="usa-identifier__logo"
-                href="${this.parent_href}"
-                ><img
-                  class="usa-identifier__logo-img"
-                  src="${this.parent_logo}"
-                  alt="${this.parent_name} logo"
-                  role="img"
-              /></a>
-            </div>
-            <section
-              class="usa-identifier__identity"
-              aria-label="Agency description,"
-            >
-              <p class="usa-identifier__identity-domain">${this.site_domain}</p>
-              <p class="usa-identifier__identity-disclaimer">
-                <span aria-hidden="true">An </span>official website of the
-                <a href="${this.parent_href}">${this.parent_name}</a>
-              </p>
-            </section>
-          </div>
-        </section>
-        <nav
-          class="usa-identifier__section usa-identifier__section--required-links"
-          aria-label="Important links"
-        >
-          <div class="usa-identifier__container">
-            <ul class="usa-identifier__required-links-list">
-              <li class="usa-identifier__required-links-item">
-                <a
-                  href="${this.link_about}"
-                  class="usa-identifier__required-link usa-link"
-                  >About ${this.parent_shortname}</a
-                >
-              </li>
-              <li class="usa-identifier__required-links-item">
-                <a
-                  href="${this.link_accessibility}"
-                  class="usa-identifier__required-link usa-link"
-                  >Accessibility statement</a
-                >
-              </li>
-              <li class="usa-identifier__required-links-item">
-                <a
-                  href="${this.link_foia}"
-                  class="usa-identifier__required-link usa-link"
-                  >FOIA requests</a
-                >
-              </li>
-              <li class="usa-identifier__required-links-item">
-                <a
-                  href="${this.link_fear}"
-                  class="usa-identifier__required-link usa-link"
-                  >No FEAR Act data</a
-                >
-              </li>
-              <li class="usa-identifier__required-links-item">
-                <a
-                  href="${this.link_oig}"
-                  class="usa-identifier__required-link usa-link"
-                  >Office of the Inspector General</a
-                >
-              </li>
-              <li class="usa-identifier__required-links-item">
-                <a
-                  href="${this.link_performance}"
-                  class="usa-identifier__required-link usa-link"
-                  >Performance reports</a
-                >
-              </li>
-              <li class="usa-identifier__required-links-item">
-                <a
-                  href="${this.link_privacy}"
-                  class="usa-identifier__required-link usa-link"
-                  >Privacy policy</a
-                >
-              </li>
-            </ul>
-          </div>
-        </nav>
-        <section
-          class="usa-identifier__section usa-identifier__section--usagov"
-          aria-label="U.S. government information and services"
-        >
-          <div class="usa-identifier__container">
-            <div class="usa-identifier__usagov-description">
-              Looking for U.S. government information and services?
-            </div>
-            <a href="https://www.usa.gov/" class="usa-link">Visit USA.gov</a>
-          </div>
-        </section>
-      </div>
-    `;
-  }
-}
-
-window.customElements.define("usa-identifier-attributes", UsaIdentifierAttributes);
\ No newline at end of file
diff --git a/web-components/src/components/usa-identifier-attributes/package.json b/web-components/src/components/usa-identifier-attributes/package.json
deleted file mode 100644
index 323fc1f0..00000000
--- a/web-components/src/components/usa-identifier-attributes/package.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "usa-identifier-attributes",
-  "version": "0.0.1",
-  "description": "USWDS identifier component - attribute-based",
-  "main": "index.js",
-  "devDependencies": {},
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "",
-  "license": "SEE LICENSE IN LICENSE.md"
-}
diff --git a/web-components/src/components/usa-identifier/index.js b/web-components/src/components/usa-identifier/index.js
deleted file mode 100644
index 9f8d03d4..00000000
--- a/web-components/src/components/usa-identifier/index.js
+++ /dev/null
@@ -1,136 +0,0 @@
-import { LitElement, html, unsafeCSS } from "lit";
-import uswdsCoreStyle from "@uswds/uswds/scss/uswds-core?inline";
-import usaIdentifierStyle from "@uswds/uswds/scss/usa-identifier?inline";
-
-export class UsaIdentifier extends LitElement {
-  constructor() {
-    super();
-
-       /**
-       * Scaffold the logo(s):
-       * Add necessary classes
-    */
-    const logos = this.querySelectorAll('[slot="logo"]');
-    const logosArr = Array.from(logos);
-    let logoWrapper;
-
-    if (logos.length > 0) {
-    logoWrapper = document.createElement('div');
-    logoWrapper.classList.add('usa-identifier__logos');
-
-    logosArr.forEach(logo => {
-      const logoImage = this.querySelector('img');
-      logo.classList.add('usa-identifier__logo');
-      logoImage.classList.add('usa-identifier__logo-img');
-      logoWrapper.appendChild(logo);
-    });
-    }
-
-    /**
-       * Scaffold the required links list:
-       * Build an unordered list, list item wrappers, and
-       * add necessary attributes
-    */
-    const nav = this.querySelector('nav');
-    const linksArr = Array.from(nav.children);
-    let linksList;
-
-    if (nav) {
-      linksList = document.createElement('ul');
-      linksList.classList.add('usa-identifier__required-links-list');
-      nav.insertAdjacentElement('afterbegin', linksList);
-
-      linksArr.forEach(link => {
-        const listItem = document.createElement('li');
-        listItem.classList.add('usa-identifier__required-links-item');
-        link.classList.add('usa-identifier__required-link');
-        listItem.appendChild(link);
-        linksList.appendChild(listItem);
-      });
-    }
-
-    /**
-      * Scaffold usagov text:
-      * Add necessary classes for styling
-    */
-    const usagov = this.querySelector('[slot="usagov"]');
-    const usagovLink = this.querySelector('[slot="usagov"] a');
-
-    if (usagov) {
-      usagov.classList.add('usa-identifier__usagov-description');
-      usagovLink.classList.add('usa-link');
-    }
-
-    /**
-      * Scaffold disclaimer text:
-      * Add necessary classes for styling
-      * Wrap "An" in aria-hidden span
-    */
-    const disclaimer = this.querySelector('[slot="disclaimer"]');
-
-    if(disclaimer) {
-      disclaimer.classList.add('usa-identifier__identity-disclaimer');
-    }
-
-    if ( disclaimer.textContent.includes('An') ){
-      disclaimer.innerHTML.replace('An', '<span aria-hidden="true" style="background:pink">An</span>');
-    };
-
-    /**
-      * Scaffold domain text:
-      * Add necessary classes for styling
-    */
-    const domain = this.querySelector('[slot="domain"]');
-    if (domain) {
-      domain.classList.add('usa-identifier__identity-domain');
-    }
-
-    // return elements
-    this.logoWrapper = logoWrapper;
-    this.linkList = linksList;
-    this.usagov = usagov;
-    this.disclaimer = disclaimer;
-    this.domain = domain;
-  }
-
-  static styles = [
-    unsafeCSS(usaIdentifierStyle),
-    unsafeCSS(uswdsCoreStyle)
-  ];
-
-  render() {
-    return html`
-      <div class="usa-identifier">
-        <section
-          class="usa-identifier__section usa-identifier__section--masthead"
-          aria-label="Agency identifier"
-        >
-          <div class="usa-identifier__container">
-            ${this.logoWrapper}
-            <section class="usa-identifier__identity" aria-label="Agency description">
-              ${this.domain}
-              ${this.disclaimer}
-            </section>
-          </div>
-        </section>
-        <nav
-          class="usa-identifier__section usa-identifier__section--required-links"
-          aria-label="Important links"
-        >
-          <div class="usa-identifier__container">
-            ${this.linkList}
-          </div>
-        </nav>
-        <section class="usa-identifier__section usa-identifier__section--usagov">
-          <div class="usa-identifier__container">
-            <div class="usa-identifier__usagov-description">
-              ${this.usagov}
-            </div>
-          </div>
-        </section>
-      </div>
-    `;
-  }
-}
-
-window.customElements.define("usa-identifier", UsaIdentifier);
diff --git a/web-components/src/components/usa-identifier/package.json b/web-components/src/components/usa-identifier/package.json
deleted file mode 100644
index 861cd2f4..00000000
--- a/web-components/src/components/usa-identifier/package.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "usa-identifier",
-  "version": "0.0.1",
-  "description": "USWDS identifier component",
-  "main": "index.js",
-  "devDependencies": {},
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "",
-  "license": "SEE LICENSE IN LICENSE.md"
-}

From 80b74a5e67e79017eb45a287a2189adfde477d0b Mon Sep 17 00:00:00 2001
From: Charlie Mahoney <charlie.mahoneyy@gmail.com>
Date: Tue, 4 Jun 2024 16:32:59 -0400
Subject: [PATCH 11/37] Switch to slot approach

---
 web-components/src/components/usa-card/index.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/web-components/src/components/usa-card/index.js b/web-components/src/components/usa-card/index.js
index d95f24a0..a7d6129a 100644
--- a/web-components/src/components/usa-card/index.js
+++ b/web-components/src/components/usa-card/index.js
@@ -33,6 +33,9 @@ export class UsaCard extends LitElement {
     // this.link = this.querySelector("a");
 
     this.header = this.querySelector("[slot='card-header']")
+    this.media = this.querySelector("[slot='card-media']")
+    this.body = this.querySelector("[slot='card-body']")
+    this.footer = this.querySelector("[slot='card-footer']")
   }
 
   // Render header
@@ -40,7 +43,7 @@ export class UsaCard extends LitElement {
     return html`
       <div class="usa-card__header">
         <div class="usa-card__heading">
-          ${this.heading}
+          ${this.header}
         </div>
       </div>
     `;
@@ -62,12 +65,12 @@ export class UsaCard extends LitElement {
 
   // Render body
   bodyTemplate() {
-    return html`<div class="usa-card__body">${this.content}</div>`
+    return html`<div class="usa-card__body">${this.body}</div>`
   }
 
   // Render footer
   footerTemplate() {
-    return html`<div class="usa-card__footer">${this.link}</div>`
+    return html`<div class="usa-card__footer">${this.footer}</div>`
   }
 
   setClasses() {

From 16ffebb1dd64f6d03105a32e05a0cd7dc141d99b Mon Sep 17 00:00:00 2001
From: Charlie Mahoney <charlie.mahoneyy@gmail.com>
Date: Tue, 4 Jun 2024 16:33:13 -0400
Subject: [PATCH 12/37] Add component markup

---
 web-components/index.html | 136 ++++++++++++++------------------------
 1 file changed, 50 insertions(+), 86 deletions(-)

diff --git a/web-components/index.html b/web-components/index.html
index dcbebcce..fd2f56fa 100644
--- a/web-components/index.html
+++ b/web-components/index.html
@@ -8,8 +8,7 @@
   <title>USWDS + Lit</title>
   <script type="module" src="/src/components/usa-banner/index.js"></script>
   <script type="module" src="/src/components/usa-link/index.js"></script>
-  <script type="module" src="/src/components/usa-identifier/index.js"></script>
-  <script type="module" src="/src/components/usa-identifier-attributes/index.js"></script>
+  <script type="module" src="/src/components/usa-card/index.js"></script>
 
   <style>
     :root {
@@ -28,91 +27,56 @@
     It's dangerous to go alone. Here, take this.
   </usa-link>
 
-  <h2>Minimal markup - one logo</h2>
+  <usa-card>
+    <div slot="card-header">
+      <h2>Card</h2>
+    </div>
+    <div slot="card-body">
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
+        tenetur quo cupiditate, eaque qui officia recusandae.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
+        tenetur quo cupiditate, eaque qui officia recusandae.
+      </p>
+    </div>
+    <div slot="card-footer">
+      <a href="#" class="usa-button">Visit Florida Keys</a>
+    </div>
+  </usa-card>
+  
+  <usa-card>
+    <div slot="card-header">
+      <h2 class="usa-card__heading">Card w/ media</h2>
+    </div>
+    <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image">
+    <div slot="card-body">
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
+        tenetur quo cupiditate, eaque qui officia recusandae.
+      </p>
+    </div>
+    <div slot="card-footer">
+      <a href="#" class="usa-button">Visit Florida Keys</a>
+    </div>
+  </usa-card>
 
-  <usa-identifier>
-    <a slot="logo" href="https://www.gsa.gov/">
-      <img
-        src="https://designsystem.digital.gov/img/gsa-logo.svg"
-        alt="General Services Administration logo"/>
-    </a>
-    <p slot="domain" class="amys-cool-style">designsystem.digital.gov</p>
-    <p slot="disclaimer">An official website of the <a href="https://gsa.gov/">General Services Administration</a></p>
-    <nav>
-      <a href="https://www.gsa.gov/about-us">About GSA</a>
-      <a href="https://www.gsa.gov/website-information/accessibility-statement">Accessibility statement</a>
-      <a href="https://www.gsa.gov/reference/freedom-of-information-act-foia">FOIA requests</a>
-      <a href="https://www.gsa.gov/reference/civil-rights-programs/notification-and-federal-employee-antidiscrimination-and-retaliation-act-of-2002">No FEAR Act data</a>
-      <a href="https://www.gsaig.gov/">Office of the Inspector General</a>
-      <a href="https://www.gsa.gov/reference/reports/budget-performance">Performance reports</a>
-      <a href="https://www.gsa.gov/website-information/website-policies">Privacy policy</a>
-    </nav>
-    <div slot="usagov">Looking for U.S. government information and services? <a href="https://www.usa.gov/">Visit USA.gov</a></div>
-  </usa-identifier>
-
-  <h2>Minimal markup - two logos</h2>
-
-  <usa-identifier>
-    <a slot="logo" href="https://www.gsa.gov/">
-      <img
-        src="https://designsystem.digital.gov/img/gsa-logo.svg"
-        alt="General Services Administration logo"/>
-    </a>
-    <a slot="logo" href="https://www.gsa.gov/">
-      <img
-        src="https://designsystem.digital.gov/img/gsa-logo.svg"
-        alt="General Services Administration logo"/>
-    </a>
-    <p slot="domain">designsystem.digital.gov</p>
-    <p slot="disclaimer">An official website of the <a href="https://gsa.gov/">General Services Administration</a></p>
-    <nav>
-      <a href="https://www.gsa.gov/about-us">About GSA</a>
-      <a href="https://www.gsa.gov/website-information/accessibility-statement">Accessibility statement</a>
-      <a href="https://www.gsa.gov/reference/freedom-of-information-act-foia">FOIA requests</a>
-      <a href="https://www.gsa.gov/reference/civil-rights-programs/notification-and-federal-employee-antidiscrimination-and-retaliation-act-of-2002">No FEAR Act data</a>
-      <a href="https://www.gsaig.gov/">Office of the Inspector General</a>
-      <a href="https://www.gsa.gov/reference/reports/budget-performance">Performance reports</a>
-      <a href="https://www.gsa.gov/website-information/website-policies">Privacy policy</a>
-    </nav>
-    <div slot="usagov">Looking for U.S. government information and services? <a href="https://www.usa.gov/">Visit USA.gov</a></div>
-  </usa-identifier>
-
-
-  <h2>Minimal markup - no logos</h2>
-
-  <usa-identifier>
-    <p slot="domain">designsystem.digital.gov</p>
-    <p slot="disclaimer">An official website of the <a href="https://gsa.gov/">General Services Administration</a></p>
-    <nav>
-      <a href="https://www.gsa.gov/about-us">About GSA</a>
-      <a href="https://www.gsa.gov/website-information/accessibility-statement">Accessibility statement</a>
-      <a href="https://www.gsa.gov/reference/freedom-of-information-act-foia">FOIA requests</a>
-      <a href="https://www.gsa.gov/reference/civil-rights-programs/notification-and-federal-employee-antidiscrimination-and-retaliation-act-of-2002">No FEAR Act data</a>
-      <a href="https://www.gsaig.gov/">Office of the Inspector General</a>
-      <a href="https://www.gsa.gov/reference/reports/budget-performance">Performance reports</a>
-      <a href="https://www.gsa.gov/website-information/website-policies">Privacy policy</a>
-    </nav>
-    <div slot="usagov">Looking for U.S. government information and services? <a href="https://www.usa.gov/">Visit USA.gov</a></div>
-  </usa-identifier>
-
-
-  <h2>Attribute-based - one logo</h2>
-
-  <usa-identifier-attributes
-    site_domain="designsystem.digital.gov"
-    parent_name="General Services Administration"
-    parent_shortname="GSA"
-    parent_href="https://www.gsa.gov/"
-    parent_logo="https://designsystem.digital.gov/img/gsa-logo.svg"
-    link_accessibility="https://www.gsa.gov/website-information/accessibility-statement"
-    link_about="https://www.gsa.gov/about-us"
-    link_foia="https://www.gsa.gov/reference/freedom-of-information-act-foia"
-    link_fear="https://www.gsa.gov/reference/civil-rights-programs/notification-and-federal-employee-antidiscrimination-and-retaliation-act-of-2002"
-    link_oig="https://www.gsaig.gov/"
-    link_performance="https://www.gsa.gov/reference/reports/budget-performance"
-    link_privacy="https://www.gsa.gov/website-information/website-policies"
-  >
-  </usa-identifier-attributes>
+  <usa-card headerFirst>
+    <div slot="card-header">
+      <h2 class="usa-card__heading">Media with Header first</h2>
+    </div>
+    <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image">
+    <div slot="card-body">
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
+        tenetur quo cupiditate, eaque qui officia recusandae.
+      </p>
+    </div>
+    <div slot="card-footerd">
+      <a href="#" class="usa-button">Visit Florida Keys</a>
+    </div>
+  </usa-card>
 </body>
 
 </html>

From e588cd8a3f04bc4750559ab3b1e38236905388df Mon Sep 17 00:00:00 2001
From: Charlie Mahoney <charlie.mahoneyy@gmail.com>
Date: Fri, 7 Jun 2024 14:20:26 -0400
Subject: [PATCH 13/37] Add usa-card group component

---
 web-components/index.html                     | 109 +++++++++---------
 .../src/components/usa-card-group/index.js    |  24 ++++
 2 files changed, 81 insertions(+), 52 deletions(-)
 create mode 100644 web-components/src/components/usa-card-group/index.js

diff --git a/web-components/index.html b/web-components/index.html
index fd2f56fa..6dac5c0c 100644
--- a/web-components/index.html
+++ b/web-components/index.html
@@ -8,6 +8,7 @@
   <title>USWDS + Lit</title>
   <script type="module" src="/src/components/usa-banner/index.js"></script>
   <script type="module" src="/src/components/usa-link/index.js"></script>
+  <script type="module" src="/src/components/usa-card-group/index.js"></script>
   <script type="module" src="/src/components/usa-card/index.js"></script>
 
   <style>
@@ -27,56 +28,60 @@
     It's dangerous to go alone. Here, take this.
   </usa-link>
 
-  <usa-card>
-    <div slot="card-header">
-      <h2>Card</h2>
-    </div>
-    <div slot="card-body">
-      <p>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
-        tenetur quo cupiditate, eaque qui officia recusandae.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
-        tenetur quo cupiditate, eaque qui officia recusandae.
-      </p>
-    </div>
-    <div slot="card-footer">
-      <a href="#" class="usa-button">Visit Florida Keys</a>
-    </div>
-  </usa-card>
-  
-  <usa-card>
-    <div slot="card-header">
-      <h2 class="usa-card__heading">Card w/ media</h2>
-    </div>
-    <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image">
-    <div slot="card-body">
-      <p>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
-        tenetur quo cupiditate, eaque qui officia recusandae.
-      </p>
-    </div>
-    <div slot="card-footer">
-      <a href="#" class="usa-button">Visit Florida Keys</a>
-    </div>
-  </usa-card>
-
-  <usa-card headerFirst>
-    <div slot="card-header">
-      <h2 class="usa-card__heading">Media with Header first</h2>
-    </div>
-    <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image">
-    <div slot="card-body">
-      <p>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
-        tenetur quo cupiditate, eaque qui officia recusandae.
-      </p>
-    </div>
-    <div slot="card-footerd">
-      <a href="#" class="usa-button">Visit Florida Keys</a>
-    </div>
-  </usa-card>
-</body>
+  <usa-card-group>
+    <usa-card>
+      <div slot="card-header">
+        <h2>Card</h2>
+      </div>
+      <div slot="card-body">
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
+          tenetur quo cupiditate, eaque qui officia recusandae.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
+          tenetur quo cupiditate, eaque qui officia recusandae.
+        </p>
+      </div>
+      <div slot="card-footer">
+        <a href="#" class="usa-button">Visit Florida Keys</a>
+      </div>
+    </usa-card>
 
-</html>
+    <usa-card flag>
+      <div slot="card-header">
+        <h2 class="usa-card__heading">Card w/ media</h2>
+      </div>
+      <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image">
+      <div slot="card-body">
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
+          tenetur quo cupiditate, eaque qui officia recusandae.
+        </p>
+      </div>
+      <div slot="card-footer">
+        <a href="#" class="usa-button">Visit Florida Keys</a>
+      </div>
+    </usa-card>
+    
+    <usa-card headerFirst flag>
+      <div slot="card-header">
+        <h2 class="usa-card__heading">Media with Header first</h2>
+      </div>
+      <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image">
+      <div slot="card-body">
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
+          tenetur quo cupiditate, eaque qui officia recusandae.
+        </p>
+      </div>
+      <div slot="card-footer">
+        <a href="#" class="usa-button">Visit Florida Keys</a>
+      </div>
+    </usa-card>
+  </usa-card-group>
+    
+  </body>
+  
+  </html>
+  
\ No newline at end of file
diff --git a/web-components/src/components/usa-card-group/index.js b/web-components/src/components/usa-card-group/index.js
new file mode 100644
index 00000000..fc9bb62b
--- /dev/null
+++ b/web-components/src/components/usa-card-group/index.js
@@ -0,0 +1,24 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import usaCardStyle from "@uswds/uswds/scss/usa-card?inline";
+
+export class UsaCardGroup extends LitElement {
+  static styles = [
+    unsafeCSS(usaCardStyle),
+  ]
+
+  constructor() {
+    super();
+
+    this.cards = [...this.children];
+  }
+
+  render() {
+    return html`
+      <ul class="usa-card-group">
+          ${this.cards.map((card) => html`<li>${card}</li>`)}
+      </ul>
+    `
+  }
+}
+
+window.customElements.define("usa-card-group", UsaCardGroup);

From 8b88b4355fba6c87ee446c5f58ed7a0e57d2373c Mon Sep 17 00:00:00 2001
From: Charlie Mahoney <charlie.mahoneyy@gmail.com>
Date: Fri, 7 Jun 2024 14:38:31 -0400
Subject: [PATCH 14/37] Add flag variant

---
 web-components/index.html                     |  2 +-
 .../src/components/usa-card/index.js          | 32 +++++++++----------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/web-components/index.html b/web-components/index.html
index 6dac5c0c..00cec10a 100644
--- a/web-components/index.html
+++ b/web-components/index.html
@@ -31,7 +31,7 @@
   <usa-card-group>
     <usa-card>
       <div slot="card-header">
-        <h2>Card</h2>
+        <h2 class="usa-card__heading">Card</h2>
       </div>
       <div slot="card-body">
         <p>
diff --git a/web-components/src/components/usa-card/index.js b/web-components/src/components/usa-card/index.js
index a7d6129a..99a31037 100644
--- a/web-components/src/components/usa-card/index.js
+++ b/web-components/src/components/usa-card/index.js
@@ -18,24 +18,20 @@ export class UsaCard extends LitElement {
 
   static get properties() {
     return {
-      headerFirst: { type: Boolean}
+      headerFirst: { type: Boolean},
+      flag: { type: Boolean }
     }
   }
   
   constructor() {
     super();
 
-    // TODO: Figure out how to implement slots for each section
-
-    // this.heading = this.querySelector(".usa-card__heading");
-    // this.media = this.querySelector("img");
-    // this.content = this.querySelectorAll("p");
-    // this.link = this.querySelector("a");
-
-    this.header = this.querySelector("[slot='card-header']")
+    this.cardGroup = this.parentElement;
+    console.log("Parent: ", this.cardGroup);
+    this.headerContent = [...this.querySelector("[slot='card-header']").children];
     this.media = this.querySelector("[slot='card-media']")
-    this.body = this.querySelector("[slot='card-body']")
-    this.footer = this.querySelector("[slot='card-footer']")
+    this.bodyContent = [...this.querySelector("[slot='card-body']").children];
+    this.footerContent = [...this.querySelector("[slot='card-footer']").children];
   }
 
   // Render header
@@ -43,7 +39,7 @@ export class UsaCard extends LitElement {
     return html`
       <div class="usa-card__header">
         <div class="usa-card__heading">
-          ${this.header}
+          ${this.headerContent}
         </div>
       </div>
     `;
@@ -65,12 +61,12 @@ export class UsaCard extends LitElement {
 
   // Render body
   bodyTemplate() {
-    return html`<div class="usa-card__body">${this.body}</div>`
+    return html`<div class="usa-card__body">${this.bodyContent}</div>`
   }
 
   // Render footer
   footerTemplate() {
-    return html`<div class="usa-card__footer">${this.footer}</div>`
+    return html`<div class="usa-card__footer">${this.footerContent}</div>`
   }
 
   setClasses() {
@@ -88,9 +84,13 @@ export class UsaCard extends LitElement {
 
   // Render card
   cardTemplate() {
-    const classes = {"usa-card--header-first": this.headerFirst}
+    const classes = {
+      "usa-card": true,
+      "usa-card--header-first": this.headerFirst,
+      "usa-card--flag": this.flag
+    }
     return html`
-        <div class="usa-card ${classMap(classes)}">
+        <div class="${classMap(classes)}">
           <div class="usa-card__container">
             ${this.headerTemplate()}
             ${this.mediaTemplate()}

From d0b9832dd6b2c8731b27fcc59630b4b8bbe3f0a9 Mon Sep 17 00:00:00 2001
From: Charlie Mahoney <charlie.mahoneyy@gmail.com>
Date: Fri, 7 Jun 2024 14:56:23 -0400
Subject: [PATCH 15/37] Remove console.log

---
 web-components/src/components/usa-card/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web-components/src/components/usa-card/index.js b/web-components/src/components/usa-card/index.js
index 99a31037..d0507e13 100644
--- a/web-components/src/components/usa-card/index.js
+++ b/web-components/src/components/usa-card/index.js
@@ -27,7 +27,6 @@ export class UsaCard extends LitElement {
     super();
 
     this.cardGroup = this.parentElement;
-    console.log("Parent: ", this.cardGroup);
     this.headerContent = [...this.querySelector("[slot='card-header']").children];
     this.media = this.querySelector("[slot='card-media']")
     this.bodyContent = [...this.querySelector("[slot='card-body']").children];

From 698f559e01704b43766b5f344aa4ae4666822658 Mon Sep 17 00:00:00 2001
From: Charlie Mahoney <charlie.mahoneyy@gmail.com>
Date: Fri, 7 Jun 2024 17:16:09 -0400
Subject: [PATCH 16/37] Add all variant classes

---
 .../src/components/usa-card/index.js          | 41 ++++++++++++++++---
 1 file changed, 35 insertions(+), 6 deletions(-)

diff --git a/web-components/src/components/usa-card/index.js b/web-components/src/components/usa-card/index.js
index d0507e13..acfe8355 100644
--- a/web-components/src/components/usa-card/index.js
+++ b/web-components/src/components/usa-card/index.js
@@ -18,8 +18,15 @@ export class UsaCard extends LitElement {
 
   static get properties() {
     return {
+      bodyExdent: { type: Boolean },
+      footerExdent: { type: Boolean },
+      headerExdent: { type: Boolean },
       headerFirst: { type: Boolean},
-      flag: { type: Boolean }
+      flag: { type: Boolean },
+      mediaRight: { type: Boolean },
+      mediaInset: { type: Boolean },
+      mediaExdent: { type: Boolean },
+
     }
   }
   
@@ -35,8 +42,13 @@ export class UsaCard extends LitElement {
 
   // Render header
   headerTemplate() {
+    const classes = {
+      "usa-card__header": true,
+      "usa-card__header--exdent": this.headerExdent
+    }
+
     return html`
-      <div class="usa-card__header">
+      <div class="${classMap(classes)}">
         <div class="usa-card__heading">
           ${this.headerContent}
         </div>
@@ -45,12 +57,18 @@ export class UsaCard extends LitElement {
   }
   // Render media
   mediaTemplate() {
+    const classes = {
+      "usa-card__media": true,
+      "usa-card__media--exdent": this.mediaExdent,
+      "usa-card__media--inset": this.mediaInset
+    }
+
     if(!this.media) {
       return;
     }
 
     return html`
-    <div class="usa-card__media">
+    <div class="${classMap(classes)}">
       <div class="usa-card__img">
         ${this.media}
       </div>
@@ -60,12 +78,22 @@ export class UsaCard extends LitElement {
 
   // Render body
   bodyTemplate() {
-    return html`<div class="usa-card__body">${this.bodyContent}</div>`
+    const classes = {
+      "usa-card__body": true,
+      "usa-card__body--exdent": this.bodyExdent
+    };
+
+    return html`<div class="${classMap(classes)}">${this.bodyContent}</div>`
   }
 
   // Render footer
   footerTemplate() {
-    return html`<div class="usa-card__footer">${this.footerContent}</div>`
+    const classes = {
+      "usa-card__footer": true,
+      "usa-card__footer--exdent": this.footerExdent
+    }
+
+    return html`<div class="${classMap(classes)}">${this.footerContent}</div>`
   }
 
   setClasses() {
@@ -86,7 +114,8 @@ export class UsaCard extends LitElement {
     const classes = {
       "usa-card": true,
       "usa-card--header-first": this.headerFirst,
-      "usa-card--flag": this.flag
+      "usa-card--flag": this.flag,
+      "usa-card--media-right": this.mediaRight
     }
     return html`
         <div class="${classMap(classes)}">

From 104f0a34406c6afe0055ba8cf783199dc378a93c Mon Sep 17 00:00:00 2001
From: Charlie Mahoney <charlie.mahoneyy@gmail.com>
Date: Fri, 7 Jun 2024 17:21:55 -0400
Subject: [PATCH 17/37] Add all variants to index.html

---
 web-components/index.html | 69 +++++++++++++++++++++++++++++++++++++--
 1 file changed, 67 insertions(+), 2 deletions(-)

diff --git a/web-components/index.html b/web-components/index.html
index 00cec10a..4fdcfb73 100644
--- a/web-components/index.html
+++ b/web-components/index.html
@@ -48,7 +48,7 @@ <h2 class="usa-card__heading">Card</h2>
       </div>
     </usa-card>
 
-    <usa-card flag>
+    <usa-card>
       <div slot="card-header">
         <h2 class="usa-card__heading">Card w/ media</h2>
       </div>
@@ -64,7 +64,7 @@ <h2 class="usa-card__heading">Card w/ media</h2>
       </div>
     </usa-card>
     
-    <usa-card headerFirst flag>
+    <usa-card headerFirst>
       <div slot="card-header">
         <h2 class="usa-card__heading">Media with Header first</h2>
       </div>
@@ -79,6 +79,71 @@ <h2 class="usa-card__heading">Media with Header first</h2>
         <a href="#" class="usa-button">Visit Florida Keys</a>
       </div>
     </usa-card>
+    
+    <usa-card mediaInset>
+      <div slot="card-header">
+        <h2 class="usa-card__heading">Inset media</h2>
+      </div>
+      <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image">
+      <div slot="card-body">
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
+          tenetur quo cupiditate, eaque qui officia recusandae.
+        </p>
+      </div>
+      <div slot="card-footer">
+        <a href="#" class="usa-button">Visit Florida Keys</a>
+      </div>
+    </usa-card>
+    
+    <usa-card mediaExdent>
+      <div slot="card-header">
+        <h2 class="usa-card__heading">Exdent media</h2>
+      </div>
+      <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image">
+      <div slot="card-body">
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
+          tenetur quo cupiditate, eaque qui officia recusandae.
+        </p>
+      </div>
+      <div slot="card-footer">
+        <a href="#" class="usa-button">Visit Florida Keys</a>
+      </div>
+    </usa-card>
+    
+    <usa-card flag>
+      <div slot="card-header">
+        <h2 class="usa-card__heading">Default flag</h2>
+      </div>
+      <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image">
+      <div slot="card-body">
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
+          tenetur quo cupiditate, eaque qui officia recusandae.
+        </p>
+      </div>
+      <div slot="card-footer">
+        <a href="#" class="usa-button">Visit Florida Keys</a>
+      </div>
+    </usa-card>
+    
+    <usa-card flag mediaRight mediaInset>
+      <div slot="card-header">
+        <h2 class="usa-card__heading">Flag media right inset
+        </h2>
+      </div>
+      <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image">
+      <div slot="card-body">
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
+          tenetur quo cupiditate, eaque qui officia recusandae.
+        </p>
+      </div>
+      <div slot="card-footer">
+        <a href="#" class="usa-button">Visit Florida Keys</a>
+      </div>
+    </usa-card>
   </usa-card-group>
     
   </body>

From fb9d0f8988a26db4a14515c8b38df19fe4c44cc3 Mon Sep 17 00:00:00 2001
From: Charlie Mahoney <charlie.mahoneyy@gmail.com>
Date: Tue, 11 Jun 2024 15:50:22 -0400
Subject: [PATCH 18/37] Update properties to use reactive props syntax

---
 .../src/components/usa-card/index.js          | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/web-components/src/components/usa-card/index.js b/web-components/src/components/usa-card/index.js
index acfe8355..50a9558f 100644
--- a/web-components/src/components/usa-card/index.js
+++ b/web-components/src/components/usa-card/index.js
@@ -16,18 +16,15 @@ export class UsaCard extends LitElement {
     `
   ]
 
-  static get properties() {
-    return {
-      bodyExdent: { type: Boolean },
-      footerExdent: { type: Boolean },
-      headerExdent: { type: Boolean },
-      headerFirst: { type: Boolean},
-      flag: { type: Boolean },
-      mediaRight: { type: Boolean },
-      mediaInset: { type: Boolean },
-      mediaExdent: { type: Boolean },
-
-    }
+  static properties = {
+    bodyExdent: { type: Boolean },
+    footerExdent: { type: Boolean },
+    headerExdent: { type: Boolean },
+    headerFirst: { type: Boolean},
+    flag: { type: Boolean },
+    mediaRight: { type: Boolean },
+    mediaInset: { type: Boolean },
+    mediaExdent: { type: Boolean },
   }
   
   constructor() {

From f977c7021a8b76897467a5043b713a6fc5db14c8 Mon Sep 17 00:00:00 2001
From: Charlie Mahoney <charlie.mahoneyy@gmail.com>
Date: Wed, 12 Jun 2024 15:53:40 -0400
Subject: [PATCH 19/37] Add card variants to storybook

---
 .../src/components/usa-card/card.stories.js   | 161 ++++++++++++++++++
 1 file changed, 161 insertions(+)
 create mode 100644 web-components/src/components/usa-card/card.stories.js

diff --git a/web-components/src/components/usa-card/card.stories.js b/web-components/src/components/usa-card/card.stories.js
new file mode 100644
index 00000000..16210616
--- /dev/null
+++ b/web-components/src/components/usa-card/card.stories.js
@@ -0,0 +1,161 @@
+import "./index";
+
+import { html } from "lit";
+
+export default {
+  title: "Components/card",
+  component: "usa-card",
+  args: {
+    title: "",
+    media: "https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg",
+    content: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.",
+    buttonText: "Visit Florida Keys",
+    variant: "headerExdent"
+  },
+  render: ({ title, variant, content, buttonText }) => {
+    return html`
+      <usa-card ${variant}="">
+        <div slot="card-header">
+          <h2 class="usa-card__heading">${title || "Card"}</h2>
+        </div> 
+        <div slot="card-body">
+          <p>
+            ${content}
+          </p>
+        </div>
+        <div slot="card-footer">
+          <a href="#" class="usa-button">${buttonText}</a>
+        </div>
+      </usa-card>
+    `
+  }
+}
+
+export const Default = {};
+
+export const MediaWithMedia = {
+  render: ({ title, media, content, buttonText }) => {
+    return html`
+      <usa-card>
+        <div slot="card-header">
+          <h2 class="usa-card__heading">${title || "Card w/ Media"}</h2>
+        </div>
+        <img slot="card-media" src="${media}" alt="Placeholder image">
+        <div slot="card-body">
+          <p>
+            ${content}
+          </p>
+        </div>
+        <div slot="card-footer">
+          <a href="#" class="usa-button">${buttonText}</a>
+        </div>
+      </usa-card>
+    `
+  }
+}
+
+export const MediaWithHeaderFirst = {
+  render: ({ title, media, content, buttonText }) => {
+    return html`
+      <usa-card headerFirst>
+        <div slot="card-header">
+          <h2 class="usa-card__heading">${title || "Media with Header first"}</h2>
+        </div>
+        <img slot="card-media" src="${media}" alt="Placeholder image">
+        <div slot="card-body">
+          <p>
+              ${content}
+          </p>
+        </div>
+        <div slot="card-footer">
+          <a href="#" class="usa-button">${buttonText}</a>
+        </div>
+      </usa-card>
+    `
+  }
+}
+
+export const InsetMedia = {
+  render: ({ title, media, content, buttonText }) => {
+    return html`
+      <usa-card mediaInset>
+        <div slot="card-header">
+          <h2 class="usa-card__heading">${title || "Inset media"}</h2>
+        </div>
+        <img slot="card-media" src="${media}" alt="Placeholder image">
+        <div slot="card-body">
+          <p>
+              ${content}
+          </p>
+        </div>
+        <div slot="card-footer">
+          <a href="#" class="usa-button">${buttonText}</a>
+        </div>
+      </usa-card>
+    `
+  }
+}
+
+export const ExdentMedia = {
+  render: ({ title, media, content, buttonText }) => {
+    return html`
+      <usa-card mediaExdent>
+        <div slot="card-header">
+          <h2 class="usa-card__heading">${title || "Exdent media"}</h2>
+        </div>
+        <img slot="card-media" src="${media}" alt="Placeholder image">
+        <div slot="card-body">
+          <p>
+              ${content}
+          </p>
+        </div>
+        <div slot="card-footer">
+          <a href="#" class="usa-button">${buttonText}</a>
+        </div>
+      </usa-card>
+    `
+  }
+}
+
+export const Flag = {
+  render: ({ title, media, content, buttonText }) => {
+    return html`
+      <usa-card flag>
+        <div slot="card-header">
+          <h2 class="usa-card__heading">${title || "Default flag"}</h2>
+        </div>
+        <img slot="card-media" src="${media}" alt="Placeholder image">
+        <div slot="card-body">
+          <p>
+              ${content}
+          </p>
+        </div>
+        <div slot="card-footer">
+          <a href="#" class="usa-button">${buttonText}</a>
+        </div>
+      </usa-card>
+    `
+  }
+}
+
+export const FlagMediaRightInset = {
+  render: ({ title, media, content, buttonText }) => {
+    return html`
+      <usa-card flag mediaRight mediaInset>
+        <div slot="card-header">
+          <h2 class="usa-card__heading">${title || "Flag media right inset"}
+          </h2>
+        </div>
+        <img slot="card-media" src="${media}" alt="Placeholder image">
+        <div slot="card-body">
+          <p>
+              ${content}
+          </p>
+        </div>
+        <div slot="card-footer">
+          <a href="#" class="usa-button">${buttonText}</a>
+        </div>
+      </usa-card>
+    `
+  }
+}

From 833036ab6d9d4fd9b9ef80f8a21ac5eef113b794 Mon Sep 17 00:00:00 2001
From: Charlie Mahoney <charlie.mahoneyy@gmail.com>
Date: Wed, 12 Jun 2024 15:55:00 -0400
Subject: [PATCH 20/37] Remove unused variants

---
 web-components/src/components/usa-card/card.stories.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web-components/src/components/usa-card/card.stories.js b/web-components/src/components/usa-card/card.stories.js
index 16210616..d62dbc36 100644
--- a/web-components/src/components/usa-card/card.stories.js
+++ b/web-components/src/components/usa-card/card.stories.js
@@ -12,9 +12,9 @@ export default {
     buttonText: "Visit Florida Keys",
     variant: "headerExdent"
   },
-  render: ({ title, variant, content, buttonText }) => {
+  render: ({ title, content, buttonText }) => {
     return html`
-      <usa-card ${variant}="">
+      <usa-card>
         <div slot="card-header">
           <h2 class="usa-card__heading">${title || "Card"}</h2>
         </div> 

From 0dc2b0ae72aba68eda9e9faeb4bc9bd252e91ff1 Mon Sep 17 00:00:00 2001
From: Charlie Mahoney <charlie.mahoneyy@gmail.com>
Date: Wed, 12 Jun 2024 16:56:59 -0400
Subject: [PATCH 21/37] testing conditional image

---
 .../src/components/usa-card/card.stories.js           | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/web-components/src/components/usa-card/card.stories.js b/web-components/src/components/usa-card/card.stories.js
index d62dbc36..2a7c0701 100644
--- a/web-components/src/components/usa-card/card.stories.js
+++ b/web-components/src/components/usa-card/card.stories.js
@@ -7,17 +7,19 @@ export default {
   component: "usa-card",
   args: {
     title: "",
+    image: false,
     media: "https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg",
     content: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.",
     buttonText: "Visit Florida Keys",
     variant: "headerExdent"
   },
-  render: ({ title, content, buttonText }) => {
+  render: ({ title, content, buttonText, image, media }) => {
     return html`
       <usa-card>
         <div slot="card-header">
           <h2 class="usa-card__heading">${title || "Card"}</h2>
         </div> 
+        ${image ? html`<img slot="card-media" src="${media}" alt="Placeholder image">`: null}
         <div slot="card-body">
           <p>
             ${content}
@@ -33,6 +35,13 @@ export default {
 
 export const Default = {};
 
+export const Test = {
+  args: {
+    title: "Test card",
+    image: true
+  }
+}
+
 export const MediaWithMedia = {
   render: ({ title, media, content, buttonText }) => {
     return html`

From ed9e4ebadb1ef54804e2d96a03ec83815f384dec Mon Sep 17 00:00:00 2001
From: Charlie Mahoney <charlie.mahoneyy@gmail.com>
Date: Fri, 14 Jun 2024 12:32:36 -0400
Subject: [PATCH 22/37] Add conditional header first logic

---
 web-components/index.html                     | 28 ++++++++++++++-----
 .../src/components/usa-card/index.js          | 24 +++++++++++++++-
 2 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/web-components/index.html b/web-components/index.html
index a2fcf62c..81ccaf37 100644
--- a/web-components/index.html
+++ b/web-components/index.html
@@ -56,10 +56,10 @@ <h2 class="usa-card__heading">Card</h2>
     </usa-card>
 
     <usa-card>
+      <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image">
       <div slot="card-header">
         <h2 class="usa-card__heading">Card w/ media</h2>
       </div>
-      <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image">
       <div slot="card-body">
         <p>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
@@ -72,14 +72,28 @@ <h2 class="usa-card__heading">Card w/ media</h2>
     </usa-card>
     
     <usa-card headerFirst>
+      <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image">
       <div slot="card-header">
-        <h2 class="usa-card__heading">Media with Header first</h2>
+        <h2 class="usa-card__heading">Media with Header first attribute</h2>
+      </div>
+      <div slot="card-body">
+        <p>
+          This card places the header before the `img` using the `headerFirst` attribute. The img tag comes before the header slot in markup.
+        </p>
+      </div>
+      <div slot="card-footer">
+        <a href="#" class="usa-button">Visit Florida Keys</a>
+      </div>
+    </usa-card>
+    
+    <usa-card>
+      <div slot="card-header">
+        <h2 class="usa-card__heading">Media with Header first in markup</h2>
       </div>
       <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image">
       <div slot="card-body">
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
-          tenetur quo cupiditate, eaque qui officia recusandae.
+          This card places the header before the img via markup. The img tag comes after the header slot.
         </p>
       </div>
       <div slot="card-footer">
@@ -88,10 +102,10 @@ <h2 class="usa-card__heading">Media with Header first</h2>
     </usa-card>
     
     <usa-card mediaInset>
+      <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image">
       <div slot="card-header">
         <h2 class="usa-card__heading">Inset media</h2>
       </div>
-      <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image">
       <div slot="card-body">
         <p>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
@@ -104,10 +118,10 @@ <h2 class="usa-card__heading">Inset media</h2>
     </usa-card>
     
     <usa-card mediaExdent>
+      <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image">
       <div slot="card-header">
         <h2 class="usa-card__heading">Exdent media</h2>
       </div>
-      <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image">
       <div slot="card-body">
         <p>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
@@ -120,10 +134,10 @@ <h2 class="usa-card__heading">Exdent media</h2>
     </usa-card>
     
     <usa-card flag>
+      <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image">
       <div slot="card-header">
         <h2 class="usa-card__heading">Default flag</h2>
       </div>
-      <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image">
       <div slot="card-body">
         <p>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
diff --git a/web-components/src/components/usa-card/index.js b/web-components/src/components/usa-card/index.js
index 50a9558f..7b46a715 100644
--- a/web-components/src/components/usa-card/index.js
+++ b/web-components/src/components/usa-card/index.js
@@ -20,7 +20,10 @@ export class UsaCard extends LitElement {
     bodyExdent: { type: Boolean },
     footerExdent: { type: Boolean },
     headerExdent: { type: Boolean },
-    headerFirst: { type: Boolean},
+    headerFirst: { 
+      type: Boolean,
+      reflect: true
+    },
     flag: { type: Boolean },
     mediaRight: { type: Boolean },
     mediaInset: { type: Boolean },
@@ -35,6 +38,25 @@ export class UsaCard extends LitElement {
     this.media = this.querySelector("[slot='card-media']")
     this.bodyContent = [...this.querySelector("[slot='card-body']").children];
     this.footerContent = [...this.querySelector("[slot='card-footer']").children];
+    this.slottedChildren = [...this.children];
+    this.slots = this.slottedChildren.map((child) => {
+      return child.getAttribute("slot")
+    })
+  }
+
+  checkHeader() {
+    if(!this.media) {
+      return
+    }
+
+    if(this.slots.indexOf("card-header") < this.slots.indexOf("card-media")) {
+      this.headerFirst = true;
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.checkHeader();
   }
 
   // Render header

From 873193d0ca237b1e6d186370c200ce240dab4e63 Mon Sep 17 00:00:00 2001
From: Charlie Mahoney <charlie.mahoneyy@gmail.com>
Date: Fri, 14 Jun 2024 12:33:03 -0400
Subject: [PATCH 23/37] Remove unused setClasses function

---
 web-components/src/components/usa-card/index.js | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/web-components/src/components/usa-card/index.js b/web-components/src/components/usa-card/index.js
index 7b46a715..9b144b2e 100644
--- a/web-components/src/components/usa-card/index.js
+++ b/web-components/src/components/usa-card/index.js
@@ -115,19 +115,6 @@ export class UsaCard extends LitElement {
     return html`<div class="${classMap(classes)}">${this.footerContent}</div>`
   }
 
-  setClasses() {
-    const classes = ["usa-card"];
-
-    if (this.headerFirst) {
-      classes.push("usa-card--header-first");
-    }
-
-    classes.forEach((className) => {
-      console.log(className);
-      return `className`
-    });
-  }
-
   // Render card
   cardTemplate() {
     const classes = {

From f89956ba83111dd8da1f6294339603e37dd01abc Mon Sep 17 00:00:00 2001
From: Charlie Mahoney <charlie.mahoneyy@gmail.com>
Date: Fri, 14 Jun 2024 16:49:43 -0400
Subject: [PATCH 24/37] Revise variant approach

---
 .../src/components/usa-card/index.js          | 40 ++++++++++---------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/web-components/src/components/usa-card/index.js b/web-components/src/components/usa-card/index.js
index 9b144b2e..2e3c77ed 100644
--- a/web-components/src/components/usa-card/index.js
+++ b/web-components/src/components/usa-card/index.js
@@ -19,25 +19,26 @@ export class UsaCard extends LitElement {
   static properties = {
     bodyExdent: { type: Boolean },
     footerExdent: { type: Boolean },
-    headerExdent: { type: Boolean },
     headerFirst: { 
       type: Boolean,
       reflect: true
     },
-    flag: { type: Boolean },
-    mediaRight: { type: Boolean },
-    mediaInset: { type: Boolean },
-    mediaExdent: { type: Boolean },
+    inset: { type: Boolean },
+    exdent: { type: Boolean},
+    layout: { type: String },
   }
   
   constructor() {
     super();
 
     this.cardGroup = this.parentElement;
-    this.headerContent = [...this.querySelector("[slot='card-header']").children];
+    this.header = this.querySelector("[slot='card-header']");
+    this.headerContent = [...this.header.children];
     this.media = this.querySelector("[slot='card-media']")
-    this.bodyContent = [...this.querySelector("[slot='card-body']").children];
-    this.footerContent = [...this.querySelector("[slot='card-footer']").children];
+    this.body = this.querySelector("[slot='card-body']");
+    this.bodyContent = [...this.body.children];
+    this.footer = this.querySelector("[slot='card-footer']");
+    this.footerContent = [...this.footer.children];
     this.slottedChildren = [...this.children];
     this.slots = this.slottedChildren.map((child) => {
       return child.getAttribute("slot")
@@ -63,7 +64,7 @@ export class UsaCard extends LitElement {
   headerTemplate() {
     const classes = {
       "usa-card__header": true,
-      "usa-card__header--exdent": this.headerExdent
+      "usa-card__header--exdent": this.exdent || this.header.hasAttribute("exdent")
     }
 
     return html`
@@ -74,18 +75,19 @@ export class UsaCard extends LitElement {
       </div>
     `;
   }
+
   // Render media
   mediaTemplate() {
-    const classes = {
-      "usa-card__media": true,
-      "usa-card__media--exdent": this.mediaExdent,
-      "usa-card__media--inset": this.mediaInset
-    }
-
     if(!this.media) {
       return;
     }
 
+    const classes = {
+      "usa-card__media": true,
+      "usa-card__media--inset": this.media.hasAttribute("inset") && !this.media.hasAttribute("exdent"),
+      "usa-card__media--exdent": this.exdent || this.media.hasAttribute("exdent") && this.media.hasAttribute("indent"),
+    }
+
     return html`
     <div class="${classMap(classes)}">
       <div class="usa-card__img">
@@ -99,7 +101,7 @@ export class UsaCard extends LitElement {
   bodyTemplate() {
     const classes = {
       "usa-card__body": true,
-      "usa-card__body--exdent": this.bodyExdent
+      "usa-card__body--exdent": this.exdent || this.body.hasAttribute("exdent")
     };
 
     return html`<div class="${classMap(classes)}">${this.bodyContent}</div>`
@@ -109,7 +111,7 @@ export class UsaCard extends LitElement {
   footerTemplate() {
     const classes = {
       "usa-card__footer": true,
-      "usa-card__footer--exdent": this.footerExdent
+      "usa-card__footer--exdent": this.exdent || this.footer.hasAttribute("exdent")
     }
 
     return html`<div class="${classMap(classes)}">${this.footerContent}</div>`
@@ -120,8 +122,8 @@ export class UsaCard extends LitElement {
     const classes = {
       "usa-card": true,
       "usa-card--header-first": this.headerFirst,
-      "usa-card--flag": this.flag,
-      "usa-card--media-right": this.mediaRight
+      "usa-card--flag": this.layout === "flag" || this.layout === "flag-alt",
+      "usa-card--media-right": this.layout == "flag-alt",
     }
     return html`
         <div class="${classMap(classes)}">

From 80b53fd446d831596f8689c0b120f2f089f8507c Mon Sep 17 00:00:00 2001
From: Charlie Mahoney <charlie.mahoneyy@gmail.com>
Date: Fri, 14 Jun 2024 16:51:20 -0400
Subject: [PATCH 25/37] Use new variant attributes

---
 web-components/index.html                       | 13 ++++++-------
 web-components/src/components/usa-card/index.js | 14 ++++++++++++++
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/web-components/index.html b/web-components/index.html
index 81ccaf37..9f7898de 100644
--- a/web-components/index.html
+++ b/web-components/index.html
@@ -117,10 +117,10 @@ <h2 class="usa-card__heading">Inset media</h2>
       </div>
     </usa-card>
     
-    <usa-card mediaExdent>
+    <usa-card exdent>
       <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image">
       <div slot="card-header">
-        <h2 class="usa-card__heading">Exdent media</h2>
+        <h2 class="usa-card__heading">Exdent card</h2>
       </div>
       <div slot="card-body">
         <p>
@@ -133,7 +133,7 @@ <h2 class="usa-card__heading">Exdent media</h2>
       </div>
     </usa-card>
     
-    <usa-card flag>
+    <usa-card layout="flag">
       <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image">
       <div slot="card-header">
         <h2 class="usa-card__heading">Default flag</h2>
@@ -149,12 +149,11 @@ <h2 class="usa-card__heading">Default flag</h2>
       </div>
     </usa-card>
     
-    <usa-card flag mediaRight mediaInset>
+    <usa-card layout="flag-alt">
+      <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image" inset>
       <div slot="card-header">
-        <h2 class="usa-card__heading">Flag media right inset
-        </h2>
+        <h2 class="usa-card__heading">Flag media right inset</h2>
       </div>
-      <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image">
       <div slot="card-body">
         <p>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
diff --git a/web-components/src/components/usa-card/index.js b/web-components/src/components/usa-card/index.js
index 2e3c77ed..d51d9a69 100644
--- a/web-components/src/components/usa-card/index.js
+++ b/web-components/src/components/usa-card/index.js
@@ -55,6 +55,20 @@ export class UsaCard extends LitElement {
     }
   }
 
+  getLayout() {
+    if(!this.layout || this.layout === "default" ) {
+      return
+    }
+
+    this.flag = true
+    if(this.layout === "flag") {
+    }
+
+    this.mediaRight = true
+    if(this.layout === "flag-alt") {
+    }
+  }
+
   connectedCallback() {
     super.connectedCallback();
     this.checkHeader();

From 51f84613e66539ff45637eefd7df1e6e4e65ece0 Mon Sep 17 00:00:00 2001
From: Charlie Mahoney <charlie.mahoneyy@gmail.com>
Date: Fri, 14 Jun 2024 16:58:04 -0400
Subject: [PATCH 26/37] Fix exdent check

---
 web-components/src/components/usa-card/index.js | 16 +---------------
 1 file changed, 1 insertion(+), 15 deletions(-)

diff --git a/web-components/src/components/usa-card/index.js b/web-components/src/components/usa-card/index.js
index d51d9a69..2584b995 100644
--- a/web-components/src/components/usa-card/index.js
+++ b/web-components/src/components/usa-card/index.js
@@ -55,20 +55,6 @@ export class UsaCard extends LitElement {
     }
   }
 
-  getLayout() {
-    if(!this.layout || this.layout === "default" ) {
-      return
-    }
-
-    this.flag = true
-    if(this.layout === "flag") {
-    }
-
-    this.mediaRight = true
-    if(this.layout === "flag-alt") {
-    }
-  }
-
   connectedCallback() {
     super.connectedCallback();
     this.checkHeader();
@@ -99,7 +85,7 @@ export class UsaCard extends LitElement {
     const classes = {
       "usa-card__media": true,
       "usa-card__media--inset": this.media.hasAttribute("inset") && !this.media.hasAttribute("exdent"),
-      "usa-card__media--exdent": this.exdent || this.media.hasAttribute("exdent") && this.media.hasAttribute("indent"),
+      "usa-card__media--exdent": this.exdent || this.media.hasAttribute("exdent") && !this.media.hasAttribute("indent"),
     }
 
     return html`

From cb347f6bd6156284225257748500e54bd2180e3d Mon Sep 17 00:00:00 2001
From: Charlie Mahoney <charlie.mahoneyy@gmail.com>
Date: Fri, 14 Jun 2024 17:12:27 -0400
Subject: [PATCH 27/37] Fix indent example in index.html

---
 web-components/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web-components/index.html b/web-components/index.html
index 9f7898de..eae9275b 100644
--- a/web-components/index.html
+++ b/web-components/index.html
@@ -101,8 +101,8 @@ <h2 class="usa-card__heading">Media with Header first in markup</h2>
       </div>
     </usa-card>
     
-    <usa-card mediaInset>
-      <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image">
+    <usa-card>
+      <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image" inset>
       <div slot="card-header">
         <h2 class="usa-card__heading">Inset media</h2>
       </div>

From ef16691323f083376acf7eba8f124cc4b53c86db Mon Sep 17 00:00:00 2001
From: Charlie Mahoney <charlie.mahoneyy@gmail.com>
Date: Fri, 14 Jun 2024 17:12:44 -0400
Subject: [PATCH 28/37] Update storybook controls

---
 .../src/components/usa-card/card.stories.js   | 60 +++++++++++--------
 1 file changed, 34 insertions(+), 26 deletions(-)

diff --git a/web-components/src/components/usa-card/card.stories.js b/web-components/src/components/usa-card/card.stories.js
index 2a7c0701..d55ad44a 100644
--- a/web-components/src/components/usa-card/card.stories.js
+++ b/web-components/src/components/usa-card/card.stories.js
@@ -7,11 +7,11 @@ export default {
   component: "usa-card",
   args: {
     title: "",
-    image: false,
     media: "https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg",
     content: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.",
     buttonText: "Visit Florida Keys",
-    variant: "headerExdent"
+    layout: "",
+    headerFirst: false,
   },
   render: ({ title, content, buttonText, image, media }) => {
     return html`
@@ -19,7 +19,6 @@ export default {
         <div slot="card-header">
           <h2 class="usa-card__heading">${title || "Card"}</h2>
         </div> 
-        ${image ? html`<img slot="card-media" src="${media}" alt="Placeholder image">`: null}
         <div slot="card-body">
           <p>
             ${content}
@@ -35,21 +34,14 @@ export default {
 
 export const Default = {};
 
-export const Test = {
-  args: {
-    title: "Test card",
-    image: true
-  }
-}
-
-export const MediaWithMedia = {
+export const CardWithMedia = {
   render: ({ title, media, content, buttonText }) => {
     return html`
       <usa-card>
+        <img slot="card-media" src="${media}" alt="Placeholder image">
         <div slot="card-header">
           <h2 class="usa-card__heading">${title || "Card w/ Media"}</h2>
         </div>
-        <img slot="card-media" src="${media}" alt="Placeholder image">
         <div slot="card-body">
           <p>
             ${content}
@@ -63,14 +55,18 @@ export const MediaWithMedia = {
   }
 }
 
+// TODO: Fix variant attribute display
 export const MediaWithHeaderFirst = {
-  render: ({ title, media, content, buttonText }) => {
+  args: {
+    headerFirst: true
+  },
+  render: ({ title, media, content, buttonText, headerFirst }) => {
     return html`
-      <usa-card headerFirst>
+      <usa-card ${headerFirst ? "headerFirst" : null}>
+        <img slot="card-media" src="${media}" alt="Placeholder image">
         <div slot="card-header">
           <h2 class="usa-card__heading">${title || "Media with Header first"}</h2>
         </div>
-        <img slot="card-media" src="${media}" alt="Placeholder image">
         <div slot="card-body">
           <p>
               ${content}
@@ -84,14 +80,18 @@ export const MediaWithHeaderFirst = {
   }
 }
 
+// TODO: Fix variant attribute display
 export const InsetMedia = {
-  render: ({ title, media, content, buttonText }) => {
+  args: {
+    inset: true
+  },
+  render: ({ title, media, content, buttonText, inset }) => {
     return html`
-      <usa-card mediaInset>
+      <usa-card>
+        <img slot="card-media" src="${media}" alt="Placeholder image" ${inset ? "inset" : null}>
         <div slot="card-header">
           <h2 class="usa-card__heading">${title || "Inset media"}</h2>
         </div>
-        <img slot="card-media" src="${media}" alt="Placeholder image">
         <div slot="card-body">
           <p>
               ${content}
@@ -105,14 +105,15 @@ export const InsetMedia = {
   }
 }
 
+// TODO: Fix variant attribute display
 export const ExdentMedia = {
   render: ({ title, media, content, buttonText }) => {
     return html`
-      <usa-card mediaExdent>
+      <usa-card>
+        <img slot="card-media" src="${media}" alt="Placeholder image" exdent>
         <div slot="card-header">
           <h2 class="usa-card__heading">${title || "Exdent media"}</h2>
         </div>
-        <img slot="card-media" src="${media}" alt="Placeholder image">
         <div slot="card-body">
           <p>
               ${content}
@@ -127,13 +128,16 @@ export const ExdentMedia = {
 }
 
 export const Flag = {
-  render: ({ title, media, content, buttonText }) => {
+  args: {
+    layout: "flag"
+  },
+  render: ({ title, media, content, buttonText, layout }) => {
     return html`
-      <usa-card flag>
+      <usa-card layout="${layout}">
+        <img slot="card-media" src="${media}" alt="Placeholder image">
         <div slot="card-header">
           <h2 class="usa-card__heading">${title || "Default flag"}</h2>
         </div>
-        <img slot="card-media" src="${media}" alt="Placeholder image">
         <div slot="card-body">
           <p>
               ${content}
@@ -148,14 +152,18 @@ export const Flag = {
 }
 
 export const FlagMediaRightInset = {
-  render: ({ title, media, content, buttonText }) => {
+  args: {
+    layout: "flag-alt"
+  },
+  render: ({ title, media, content, buttonText, layout }) => {
+
     return html`
-      <usa-card flag mediaRight mediaInset>
+      <usa-card layout="${layout}">
+        <img slot="card-media" src="${media}" alt="Placeholder image">
         <div slot="card-header">
           <h2 class="usa-card__heading">${title || "Flag media right inset"}
           </h2>
         </div>
-        <img slot="card-media" src="${media}" alt="Placeholder image">
         <div slot="card-body">
           <p>
               ${content}

From 97b3626cb245c104557414b9431594ec7d927047 Mon Sep 17 00:00:00 2001
From: Charlie Mahoney <charlie.mahoneyy@gmail.com>
Date: Wed, 26 Jun 2024 14:22:02 -0400
Subject: [PATCH 29/37] Remove unused functions, update attributes to kebab
 case

---
 web-components/index.html                     |  6 +++---
 .../src/components/usa-card/index.js          | 21 ++-----------------
 2 files changed, 5 insertions(+), 22 deletions(-)

diff --git a/web-components/index.html b/web-components/index.html
index eae9275b..4192088b 100644
--- a/web-components/index.html
+++ b/web-components/index.html
@@ -71,14 +71,14 @@ <h2 class="usa-card__heading">Card w/ media</h2>
       </div>
     </usa-card>
     
-    <usa-card headerFirst>
+    <usa-card header-first>
       <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image">
       <div slot="card-header">
         <h2 class="usa-card__heading">Media with Header first attribute</h2>
       </div>
       <div slot="card-body">
         <p>
-          This card places the header before the `img` using the `headerFirst` attribute. The img tag comes before the header slot in markup.
+          This card places the header before the `img` using the `header-first` attribute. The img tag comes before the header slot in markup.
         </p>
       </div>
       <div slot="card-footer">
@@ -103,7 +103,7 @@ <h2 class="usa-card__heading">Media with Header first in markup</h2>
     
     <usa-card>
       <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image" inset>
-      <div slot="card-header">
+      <div slot="card-header" exdent>
         <h2 class="usa-card__heading">Inset media</h2>
       </div>
       <div slot="card-body">
diff --git a/web-components/src/components/usa-card/index.js b/web-components/src/components/usa-card/index.js
index 2584b995..adeee53b 100644
--- a/web-components/src/components/usa-card/index.js
+++ b/web-components/src/components/usa-card/index.js
@@ -17,11 +17,9 @@ export class UsaCard extends LitElement {
   ]
 
   static properties = {
-    bodyExdent: { type: Boolean },
-    footerExdent: { type: Boolean },
     headerFirst: { 
-      type: Boolean,
-      reflect: true
+      attribute: 'header-first',
+      type: Boolean
     },
     inset: { type: Boolean },
     exdent: { type: Boolean},
@@ -45,21 +43,6 @@ export class UsaCard extends LitElement {
     })
   }
 
-  checkHeader() {
-    if(!this.media) {
-      return
-    }
-
-    if(this.slots.indexOf("card-header") < this.slots.indexOf("card-media")) {
-      this.headerFirst = true;
-    }
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.checkHeader();
-  }
-
   // Render header
   headerTemplate() {
     const classes = {

From 1c6fb6c5d3337fa7bfac711f252fc040ab3f03dd Mon Sep 17 00:00:00 2001
From: Charlie Mahoney <charlie.mahoneyy@gmail.com>
Date: Thu, 27 Jun 2024 14:13:48 -0400
Subject: [PATCH 30/37] Normalize storybook controls, add card group example

---
 web-components/index.html                     |   2 +-
 .../src/components/usa-card/card.stories.js   | 257 ++++++++++++++++--
 2 files changed, 231 insertions(+), 28 deletions(-)

diff --git a/web-components/index.html b/web-components/index.html
index 4192088b..e697502b 100644
--- a/web-components/index.html
+++ b/web-components/index.html
@@ -103,7 +103,7 @@ <h2 class="usa-card__heading">Media with Header first in markup</h2>
     
     <usa-card>
       <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image" inset>
-      <div slot="card-header" exdent>
+      <div slot="card-header">
         <h2 class="usa-card__heading">Inset media</h2>
       </div>
       <div slot="card-body">
diff --git a/web-components/src/components/usa-card/card.stories.js b/web-components/src/components/usa-card/card.stories.js
index d55ad44a..5543f189 100644
--- a/web-components/src/components/usa-card/card.stories.js
+++ b/web-components/src/components/usa-card/card.stories.js
@@ -1,19 +1,42 @@
 import "./index";
+import "../usa-card-group/index";
 
-import { html } from "lit";
+import { html, nothing} from "lit";
 
 export default {
-  title: "Components/card",
+  title: "Components/Card",
   component: "usa-card",
   args: {
     title: "",
     media: "https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg",
     content: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.",
     buttonText: "Visit Florida Keys",
-    layout: "",
     headerFirst: false,
+    layout: "default"
   },
-  render: ({ title, content, buttonText, image, media }) => {
+  argTypes: {
+    buttonText: {
+      description: "Card button text."
+    },
+    content: {
+      description: "Card body content."
+    },
+    headerFirst: {
+      description: "Place the header above above card media."
+    },
+    media: {
+      description: "Img src for component preview."
+    },
+    layout: {
+      control: { type: 'radio' },
+      options: ['default', 'flag', 'flag-alt'],
+      description: "Media card layout at wide widths."
+    },
+    title: {
+      description: "Card header text."
+    }
+  },
+  render: ({ title, content, buttonText }) => {
     return html`
       <usa-card>
         <div slot="card-header">
@@ -32,12 +55,56 @@ export default {
   }
 }
 
-export const Default = {};
+export const Default = {
+  argTypes: {
+    media: {
+      table: {
+        disable: true
+      }
+    },
+    headerFirst: {
+      table: {
+        disable: true
+      }
+    },
+    layout: {
+      table: {
+        disable: true
+      }
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A default card with a title, text content, and a button.'
+      }
+    }
+  }
+};
 
 export const CardWithMedia = {
-  render: ({ title, media, content, buttonText }) => {
+  argTypes: {
+    headerFirst: {
+      table: {
+        disable: true
+      }
+    },
+    layout: {
+      table: {
+        disable: true
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A card variant featuring media.'
+      }
+    }
+  },
+  render: ({ title, media, content, buttonText, headerFirst }) => {
     return html`
-      <usa-card>
+      <usa-card ?header-first=${headerFirst}>
         <img slot="card-media" src="${media}" alt="Placeholder image">
         <div slot="card-header">
           <h2 class="usa-card__heading">${title || "Card w/ Media"}</h2>
@@ -55,21 +122,34 @@ export const CardWithMedia = {
   }
 }
 
-// TODO: Fix variant attribute display
 export const MediaWithHeaderFirst = {
   args: {
     headerFirst: true
   },
+  argTypes: {
+    layout: {
+      table: {
+        disable: true
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A card variant featuring media, displaying the header first.'
+      }
+    }
+  },
   render: ({ title, media, content, buttonText, headerFirst }) => {
     return html`
-      <usa-card ${headerFirst ? "headerFirst" : null}>
+      <usa-card ?header-first=${headerFirst}>
         <img slot="card-media" src="${media}" alt="Placeholder image">
         <div slot="card-header">
           <h2 class="usa-card__heading">${title || "Media with Header first"}</h2>
         </div>
         <div slot="card-body">
           <p>
-              ${content}
+            ${content}
           </p>
         </div>
         <div slot="card-footer">
@@ -80,21 +160,36 @@ export const MediaWithHeaderFirst = {
   }
 }
 
-// TODO: Fix variant attribute display
 export const InsetMedia = {
-  args: {
-    inset: true
+  argTypes: {
+    headerFirst: {
+      table: {
+        disable: true
+      }
+    },
+    layout: {
+      table: {
+        disable: true
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A card variant featuring media.'
+      }
+    }
   },
-  render: ({ title, media, content, buttonText, inset }) => {
+  render: ({ title, media, content, buttonText }) => {
     return html`
       <usa-card>
-        <img slot="card-media" src="${media}" alt="Placeholder image" ${inset ? "inset" : null}>
+        <img slot="card-media" src="${media}" alt="Placeholder image">
         <div slot="card-header">
-          <h2 class="usa-card__heading">${title || "Inset media"}</h2>
+          <h2 class="usa-card__heading">${title || "Inset Media"}</h2>
         </div>
         <div slot="card-body">
           <p>
-              ${content}
+            ${content}
           </p>
         </div>
         <div slot="card-footer">
@@ -105,8 +200,26 @@ export const InsetMedia = {
   }
 }
 
-// TODO: Fix variant attribute display
 export const ExdentMedia = {
+  argTypes: {
+    headerFirst: {
+      table: {
+        disable: true
+      }
+    },
+    layout: {
+      table: {
+        disable: true
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Extends the media element out over the card border.'
+      }
+    }
+  },
   render: ({ title, media, content, buttonText }) => {
     return html`
       <usa-card>
@@ -116,7 +229,7 @@ export const ExdentMedia = {
         </div>
         <div slot="card-body">
           <p>
-              ${content}
+            ${content}
           </p>
         </div>
         <div slot="card-footer">
@@ -129,18 +242,27 @@ export const ExdentMedia = {
 
 export const Flag = {
   args: {
-    layout: "flag"
+    layout: "flag",
   },
-  render: ({ title, media, content, buttonText, layout }) => {
+
+  parameters: {
+    docs: {
+      description: {
+        story: 'Display in a horizontal (“flag”) orientation at a specified width ($theme-card-flag-min-width).'
+      }
+    }
+  },
+
+  render: ({ title, media, content, buttonText, headerFirst, layout }) => {
     return html`
-      <usa-card layout="${layout}">
+      <usa-card ?header-first=${headerFirst} layout="${layout == 'default' ? nothing : layout}">
         <img slot="card-media" src="${media}" alt="Placeholder image">
         <div slot="card-header">
           <h2 class="usa-card__heading">${title || "Default flag"}</h2>
         </div>
         <div slot="card-body">
           <p>
-              ${content}
+            ${content}
           </p>
         </div>
         <div slot="card-footer">
@@ -155,10 +277,9 @@ export const FlagMediaRightInset = {
   args: {
     layout: "flag-alt"
   },
-  render: ({ title, media, content, buttonText, layout }) => {
-
+  render: ({ title, media, content, buttonText, layout, headerFirst }) => {
     return html`
-      <usa-card layout="${layout}">
+      <usa-card ?header-first=${headerFirst} layout="${layout == 'default' ? nothing : layout}">
         <img slot="card-media" src="${media}" alt="Placeholder image">
         <div slot="card-header">
           <h2 class="usa-card__heading">${title || "Flag media right inset"}
@@ -166,7 +287,7 @@ export const FlagMediaRightInset = {
         </div>
         <div slot="card-body">
           <p>
-              ${content}
+            ${content}
           </p>
         </div>
         <div slot="card-footer">
@@ -176,3 +297,85 @@ export const FlagMediaRightInset = {
     `
   }
 }
+
+export const CardGroup = {
+  render: ({ title, media, content, buttonText }) => {
+    return`
+      <usa-card-group>
+        <usa-card>
+          <div slot="card-header">
+            <h2 class="usa-card__heading">${title}</h2>
+          </div> 
+          <div slot="card-body">
+            <p>
+              ${content}
+            </p>
+          </div>
+          <div slot="card-footer">
+            <a href="#" class="usa-button">${buttonText}</a>
+          </div>
+        </usa-card>
+
+        <usa-card>
+          <img slot="card-media" src="${media}" alt="Placeholder image">
+          <div slot="card-header">
+            <h2 class="usa-card__heading">${"Card w/ Media"}</h2>
+          </div>
+          <div slot="card-body">
+            <p>
+              ${content}
+            </p>
+          </div>
+          <div slot="card-footer">
+            <a href="#" class="usa-button">${buttonText}</a>
+          </div>
+        </usa-card>
+
+        <usa-card header-first>
+          <img slot="card-media" src="${media}" alt="Placeholder image">
+          <div slot="card-header">
+            <h2 class="usa-card__heading">${"Media with Header first"}</h2>
+          </div>
+          <div slot="card-body">
+            <p>
+              ${content}
+            </p>
+          </div>
+          <div slot="card-footer">
+            <a href="#" class="usa-button">${buttonText}</a>
+          </div>
+        </usa-card>
+
+        <usa-card>
+          <img slot="card-media" src="${media}" alt="Placeholder image">
+          <div slot="card-header">
+            <h2 class="usa-card__heading">${"Inset Media"}</h2>
+          </div>
+          <div slot="card-body">
+            <p>
+              ${content}
+            </p>
+          </div>
+          <div slot="card-footer">
+            <a href="#" class="usa-button">${buttonText}</a>
+          </div>
+        </usa-card>
+
+        <usa-card>
+          <img slot="card-media" src="${media}" alt="Placeholder image" exdent>
+          <div slot="card-header">
+            <h2 class="usa-card__heading">${"Exdent media"}</h2>
+          </div>
+          <div slot="card-body">
+            <p>
+              ${content}
+            </p>
+          </div>
+          <div slot="card-footer">
+            <a href="#" class="usa-button">${buttonText}</a>
+          </div>
+        </usa-card>
+      </usa-card-group>
+    `
+  }
+}

From bfe9ccc9693a6e0423a0351fe9ed2c2ea4e24876 Mon Sep 17 00:00:00 2001
From: Charlie Mahoney <charlie.mahoneyy@gmail.com>
Date: Thu, 27 Jun 2024 14:19:43 -0400
Subject: [PATCH 31/37] Add flag variants to card group

---
 .../src/components/usa-card/card.stories.js   | 53 +++++++++++++++++--
 1 file changed, 48 insertions(+), 5 deletions(-)

diff --git a/web-components/src/components/usa-card/card.stories.js b/web-components/src/components/usa-card/card.stories.js
index 5543f189..3b5465d7 100644
--- a/web-components/src/components/usa-card/card.stories.js
+++ b/web-components/src/components/usa-card/card.stories.js
@@ -299,12 +299,24 @@ export const FlagMediaRightInset = {
 }
 
 export const CardGroup = {
+  argTypes: {
+    headerFirst: {
+      table: {
+        disable: true
+      }
+    },
+    layout: {
+      table: {
+        disable: true
+      }
+    }
+  },
   render: ({ title, media, content, buttonText }) => {
     return`
       <usa-card-group>
         <usa-card>
           <div slot="card-header">
-            <h2 class="usa-card__heading">${title}</h2>
+            <h2 class="usa-card__heading">${title || "Card"}</h2>
           </div> 
           <div slot="card-body">
             <p>
@@ -319,7 +331,7 @@ export const CardGroup = {
         <usa-card>
           <img slot="card-media" src="${media}" alt="Placeholder image">
           <div slot="card-header">
-            <h2 class="usa-card__heading">${"Card w/ Media"}</h2>
+            <h2 class="usa-card__heading">${ title || "Card w/ Media"}</h2>
           </div>
           <div slot="card-body">
             <p>
@@ -334,7 +346,7 @@ export const CardGroup = {
         <usa-card header-first>
           <img slot="card-media" src="${media}" alt="Placeholder image">
           <div slot="card-header">
-            <h2 class="usa-card__heading">${"Media with Header first"}</h2>
+            <h2 class="usa-card__heading">${ title || "Media with Header first"}</h2>
           </div>
           <div slot="card-body">
             <p>
@@ -349,7 +361,7 @@ export const CardGroup = {
         <usa-card>
           <img slot="card-media" src="${media}" alt="Placeholder image">
           <div slot="card-header">
-            <h2 class="usa-card__heading">${"Inset Media"}</h2>
+            <h2 class="usa-card__heading">${ title || "Inset Media"}</h2>
           </div>
           <div slot="card-body">
             <p>
@@ -364,7 +376,38 @@ export const CardGroup = {
         <usa-card>
           <img slot="card-media" src="${media}" alt="Placeholder image" exdent>
           <div slot="card-header">
-            <h2 class="usa-card__heading">${"Exdent media"}</h2>
+            <h2 class="usa-card__heading">${ title || "Exdent media"}</h2>
+          </div>
+          <div slot="card-body">
+            <p>
+              ${content}
+            </p>
+          </div>
+          <div slot="card-footer">
+            <a href="#" class="usa-button">${buttonText}</a>
+          </div>
+        </usa-card>
+
+        <usa-card headerFirst layout="flag">
+          <img slot="card-media" src="${media}" alt="Placeholder image">
+          <div slot="card-header">
+            <h2 class="usa-card__heading">${title || "Default flag"}</h2>
+          </div>
+          <div slot="card-body">
+            <p>
+              ${content}
+            </p>
+          </div>
+          <div slot="card-footer">
+            <a href="#" class="usa-button">${buttonText}</a>
+          </div>
+        </usa-card>
+
+        <usa-card headerFirst layout="flag-alt">
+          <img slot="card-media" src="${media}" alt="Placeholder image">
+          <div slot="card-header">
+            <h2 class="usa-card__heading">${title || "Flag media right inset"}
+            </h2>
           </div>
           <div slot="card-body">
             <p>

From 008dc9988b4839c822d618f6ab39b6f75686fd48 Mon Sep 17 00:00:00 2001
From: Charlie Mahoney <charlie.mahoneyy@gmail.com>
Date: Thu, 27 Jun 2024 14:20:13 -0400
Subject: [PATCH 32/37] Add expanded control panel to display descriptions

---
 web-components/.storybook/preview.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web-components/.storybook/preview.js b/web-components/.storybook/preview.js
index e595502d..bc77a741 100644
--- a/web-components/.storybook/preview.js
+++ b/web-components/.storybook/preview.js
@@ -14,6 +14,7 @@ const preview = {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
+      expanded: true,
     },
     docs: {
       toc: true, // Autogenerate table of contents.

From 42393e6154858a17b92a5eb3e1cd92efa4657f2f Mon Sep 17 00:00:00 2001
From: Charlie Mahoney <charlie.mahoneyy@gmail.com>
Date: Tue, 2 Jul 2024 13:34:53 -0400
Subject: [PATCH 33/37] Set heading styles via card-heading slot

---
 web-components/index.html                     | 16 +++++------
 .../src/components/usa-card/card.stories.js   | 28 +++++++++----------
 .../src/components/usa-card/index.js          | 13 ++++++---
 3 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/web-components/index.html b/web-components/index.html
index e697502b..1983d717 100644
--- a/web-components/index.html
+++ b/web-components/index.html
@@ -38,7 +38,7 @@
   <usa-card-group>
     <usa-card>
       <div slot="card-header">
-        <h2 class="usa-card__heading">Card</h2>
+        <h1 slot="card-heading">Card</h1>
       </div>
       <div slot="card-body">
         <p>
@@ -58,7 +58,7 @@ <h2 class="usa-card__heading">Card</h2>
     <usa-card>
       <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image">
       <div slot="card-header">
-        <h2 class="usa-card__heading">Card w/ media</h2>
+        <h2 slot="card-heading">Card w/ media</h2>
       </div>
       <div slot="card-body">
         <p>
@@ -74,7 +74,7 @@ <h2 class="usa-card__heading">Card w/ media</h2>
     <usa-card header-first>
       <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image">
       <div slot="card-header">
-        <h2 class="usa-card__heading">Media with Header first attribute</h2>
+        <h3 slot="card-heading">Media with Header first attribute</h3>
       </div>
       <div slot="card-body">
         <p>
@@ -88,7 +88,7 @@ <h2 class="usa-card__heading">Media with Header first attribute</h2>
     
     <usa-card>
       <div slot="card-header">
-        <h2 class="usa-card__heading">Media with Header first in markup</h2>
+        <h4 slot="card-heading">Media with Header first in markup</h4>
       </div>
       <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image">
       <div slot="card-body">
@@ -104,7 +104,7 @@ <h2 class="usa-card__heading">Media with Header first in markup</h2>
     <usa-card>
       <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image" inset>
       <div slot="card-header">
-        <h2 class="usa-card__heading">Inset media</h2>
+        <h5 slot="card-heading">Inset media</h5>
       </div>
       <div slot="card-body">
         <p>
@@ -120,7 +120,7 @@ <h2 class="usa-card__heading">Inset media</h2>
     <usa-card exdent>
       <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image">
       <div slot="card-header">
-        <h2 class="usa-card__heading">Exdent card</h2>
+        <h6 slot="card-heading">Exdent card</h6>
       </div>
       <div slot="card-body">
         <p>
@@ -136,7 +136,7 @@ <h2 class="usa-card__heading">Exdent card</h2>
     <usa-card layout="flag">
       <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image">
       <div slot="card-header">
-        <h2 class="usa-card__heading">Default flag</h2>
+        <h1 slot="card-heading">Default flag</h1>
       </div>
       <div slot="card-body">
         <p>
@@ -152,7 +152,7 @@ <h2 class="usa-card__heading">Default flag</h2>
     <usa-card layout="flag-alt">
       <img slot="card-media" src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image" inset>
       <div slot="card-header">
-        <h2 class="usa-card__heading">Flag media right inset</h2>
+        <h2 slot="card-heading">Flag media right inset</h2>
       </div>
       <div slot="card-body">
         <p>
diff --git a/web-components/src/components/usa-card/card.stories.js b/web-components/src/components/usa-card/card.stories.js
index 3b5465d7..0ee7dd19 100644
--- a/web-components/src/components/usa-card/card.stories.js
+++ b/web-components/src/components/usa-card/card.stories.js
@@ -40,7 +40,7 @@ export default {
     return html`
       <usa-card>
         <div slot="card-header">
-          <h2 class="usa-card__heading">${title || "Card"}</h2>
+          <h2 slot="card-heading">${title || "Card"}</h2>
         </div> 
         <div slot="card-body">
           <p>
@@ -107,7 +107,7 @@ export const CardWithMedia = {
       <usa-card ?header-first=${headerFirst}>
         <img slot="card-media" src="${media}" alt="Placeholder image">
         <div slot="card-header">
-          <h2 class="usa-card__heading">${title || "Card w/ Media"}</h2>
+          <h2 slot="card-heading">${title || "Card w/ Media"}</h2>
         </div>
         <div slot="card-body">
           <p>
@@ -145,7 +145,7 @@ export const MediaWithHeaderFirst = {
       <usa-card ?header-first=${headerFirst}>
         <img slot="card-media" src="${media}" alt="Placeholder image">
         <div slot="card-header">
-          <h2 class="usa-card__heading">${title || "Media with Header first"}</h2>
+          <h2 slot="card-heading">${title || "Media with Header first"}</h2>
         </div>
         <div slot="card-body">
           <p>
@@ -185,7 +185,7 @@ export const InsetMedia = {
       <usa-card>
         <img slot="card-media" src="${media}" alt="Placeholder image">
         <div slot="card-header">
-          <h2 class="usa-card__heading">${title || "Inset Media"}</h2>
+          <h2 slot="card-heading">${title || "Inset Media"}</h2>
         </div>
         <div slot="card-body">
           <p>
@@ -225,7 +225,7 @@ export const ExdentMedia = {
       <usa-card>
         <img slot="card-media" src="${media}" alt="Placeholder image" exdent>
         <div slot="card-header">
-          <h2 class="usa-card__heading">${title || "Exdent media"}</h2>
+          <h2 slot="card-heading">${title || "Exdent media"}</h2>
         </div>
         <div slot="card-body">
           <p>
@@ -258,7 +258,7 @@ export const Flag = {
       <usa-card ?header-first=${headerFirst} layout="${layout == 'default' ? nothing : layout}">
         <img slot="card-media" src="${media}" alt="Placeholder image">
         <div slot="card-header">
-          <h2 class="usa-card__heading">${title || "Default flag"}</h2>
+          <h2 slot="card-heading">${title || "Default flag"}</h2>
         </div>
         <div slot="card-body">
           <p>
@@ -282,7 +282,7 @@ export const FlagMediaRightInset = {
       <usa-card ?header-first=${headerFirst} layout="${layout == 'default' ? nothing : layout}">
         <img slot="card-media" src="${media}" alt="Placeholder image">
         <div slot="card-header">
-          <h2 class="usa-card__heading">${title || "Flag media right inset"}
+          <h2 slot="card-heading">${title || "Flag media right inset"}
           </h2>
         </div>
         <div slot="card-body">
@@ -316,7 +316,7 @@ export const CardGroup = {
       <usa-card-group>
         <usa-card>
           <div slot="card-header">
-            <h2 class="usa-card__heading">${title || "Card"}</h2>
+            <h2 slot="card-heading">${title || "Card"}</h2>
           </div> 
           <div slot="card-body">
             <p>
@@ -331,7 +331,7 @@ export const CardGroup = {
         <usa-card>
           <img slot="card-media" src="${media}" alt="Placeholder image">
           <div slot="card-header">
-            <h2 class="usa-card__heading">${ title || "Card w/ Media"}</h2>
+            <h2 slot="card-heading">${ title || "Card w/ Media"}</h2>
           </div>
           <div slot="card-body">
             <p>
@@ -346,7 +346,7 @@ export const CardGroup = {
         <usa-card header-first>
           <img slot="card-media" src="${media}" alt="Placeholder image">
           <div slot="card-header">
-            <h2 class="usa-card__heading">${ title || "Media with Header first"}</h2>
+            <h2 slot="card-heading">${ title || "Media with Header first"}</h2>
           </div>
           <div slot="card-body">
             <p>
@@ -361,7 +361,7 @@ export const CardGroup = {
         <usa-card>
           <img slot="card-media" src="${media}" alt="Placeholder image">
           <div slot="card-header">
-            <h2 class="usa-card__heading">${ title || "Inset Media"}</h2>
+            <h2 slot="card-heading">${ title || "Inset Media"}</h2>
           </div>
           <div slot="card-body">
             <p>
@@ -376,7 +376,7 @@ export const CardGroup = {
         <usa-card>
           <img slot="card-media" src="${media}" alt="Placeholder image" exdent>
           <div slot="card-header">
-            <h2 class="usa-card__heading">${ title || "Exdent media"}</h2>
+            <h2 slot="card-heading">${ title || "Exdent media"}</h2>
           </div>
           <div slot="card-body">
             <p>
@@ -391,7 +391,7 @@ export const CardGroup = {
         <usa-card headerFirst layout="flag">
           <img slot="card-media" src="${media}" alt="Placeholder image">
           <div slot="card-header">
-            <h2 class="usa-card__heading">${title || "Default flag"}</h2>
+            <h2 slot="card-heading">${title || "Default flag"}</h2>
           </div>
           <div slot="card-body">
             <p>
@@ -406,7 +406,7 @@ export const CardGroup = {
         <usa-card headerFirst layout="flag-alt">
           <img slot="card-media" src="${media}" alt="Placeholder image">
           <div slot="card-header">
-            <h2 class="usa-card__heading">${title || "Flag media right inset"}
+            <h2 slot="card-heading">${title || "Flag media right inset"}
             </h2>
           </div>
           <div slot="card-body">
diff --git a/web-components/src/components/usa-card/index.js b/web-components/src/components/usa-card/index.js
index adeee53b..e1fbac80 100644
--- a/web-components/src/components/usa-card/index.js
+++ b/web-components/src/components/usa-card/index.js
@@ -10,8 +10,15 @@ export class UsaCard extends LitElement {
     unsafeCSS(usaCardStyle),
     unsafeCSS(usaButtonStyle),
     css`
-    * {
-        box-sizing: border-box;
+      * {
+          box-sizing: border-box;
+        }
+
+      [slot="card-heading"] {
+        font-family: "Merriweather Web", Georgia, Cambria, "Times New Roman", Times, serif;
+        font-size: 1.34rem;
+        line-height: 1.2;
+        margin: 0px;
       }
     `
   ]
@@ -52,9 +59,7 @@ export class UsaCard extends LitElement {
 
     return html`
       <div class="${classMap(classes)}">
-        <div class="usa-card__heading">
           ${this.headerContent}
-        </div>
       </div>
     `;
   }

From 1e190c9ccad4fad88c01fda69bec23215a295f3a Mon Sep 17 00:00:00 2001
From: Charlie Mahoney <charlie.mahoneyy@gmail.com>
Date: Tue, 2 Jul 2024 13:48:06 -0400
Subject: [PATCH 34/37] Abstract styles to usa-card.scss.js

---
 .../src/components/usa-card/index.js          | 26 +++----------------
 .../src/components/usa-card/usa-card.scss.js  | 23 ++++++++++++++++
 2 files changed, 27 insertions(+), 22 deletions(-)
 create mode 100644 web-components/src/components/usa-card/usa-card.scss.js

diff --git a/web-components/src/components/usa-card/index.js b/web-components/src/components/usa-card/index.js
index e1fbac80..0dd97391 100644
--- a/web-components/src/components/usa-card/index.js
+++ b/web-components/src/components/usa-card/index.js
@@ -1,27 +1,9 @@
-import { LitElement, html, unsafeCSS, css } from "lit";
-import { classMap } from "lit/directives/class-map.js"
-import uswdsCoreStyle from "@uswds/uswds/scss/uswds-core?inline";
-import usaCardStyle from "@uswds/uswds/scss/usa-card?inline";
-import usaButtonStyle from "@uswds/uswds/scss/usa-button?inline";
+import { LitElement, html} from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import { cardStyles } from "./usa-card.scss";
 
 export class UsaCard extends LitElement {
-  static styles = [
-    unsafeCSS(uswdsCoreStyle),
-    unsafeCSS(usaCardStyle),
-    unsafeCSS(usaButtonStyle),
-    css`
-      * {
-          box-sizing: border-box;
-        }
-
-      [slot="card-heading"] {
-        font-family: "Merriweather Web", Georgia, Cambria, "Times New Roman", Times, serif;
-        font-size: 1.34rem;
-        line-height: 1.2;
-        margin: 0px;
-      }
-    `
-  ]
+  static styles = [cardStyles];
 
   static properties = {
     headerFirst: { 
diff --git a/web-components/src/components/usa-card/usa-card.scss.js b/web-components/src/components/usa-card/usa-card.scss.js
new file mode 100644
index 00000000..f107daec
--- /dev/null
+++ b/web-components/src/components/usa-card/usa-card.scss.js
@@ -0,0 +1,23 @@
+import uswdsCoreStyle from "@uswds/uswds/scss/uswds-core?inline";
+import usaCardStyle from "@uswds/uswds/scss/usa-card?inline";
+import usaButtonStyle from "@uswds/uswds/scss/usa-button?inline";
+
+import { unsafeCSS, css } from "lit";
+
+export const cardStyles = [
+  unsafeCSS(uswdsCoreStyle),
+  unsafeCSS(usaCardStyle),
+  unsafeCSS(usaButtonStyle),
+  css`
+    * {
+      box-sizing: border-box;
+    }
+
+    [slot="card-heading"] {
+      font-family: "Merriweather Web", Georgia, Cambria, "Times New Roman", Times, serif;
+      font-size: 1.34rem;
+      line-height: 1.2;
+      margin: 0px;
+    }
+  `
+]

From 434007d196345a4d8d35d3659363679782d74baa Mon Sep 17 00:00:00 2001
From: Charlie Mahoney <charlie.mahoneyy@gmail.com>
Date: Wed, 3 Jul 2024 11:14:45 -0400
Subject: [PATCH 35/37] Move components to src/components

---
 {web-components/src => src}/components/usa-card-group/index.js   | 0
 {web-components/src => src}/components/usa-card/card.stories.js  | 0
 {web-components/src => src}/components/usa-card/index.js         | 0
 {web-components/src => src}/components/usa-card/usa-card.scss.js | 0
 4 files changed, 0 insertions(+), 0 deletions(-)
 rename {web-components/src => src}/components/usa-card-group/index.js (100%)
 rename {web-components/src => src}/components/usa-card/card.stories.js (100%)
 rename {web-components/src => src}/components/usa-card/index.js (100%)
 rename {web-components/src => src}/components/usa-card/usa-card.scss.js (100%)

diff --git a/web-components/src/components/usa-card-group/index.js b/src/components/usa-card-group/index.js
similarity index 100%
rename from web-components/src/components/usa-card-group/index.js
rename to src/components/usa-card-group/index.js
diff --git a/web-components/src/components/usa-card/card.stories.js b/src/components/usa-card/card.stories.js
similarity index 100%
rename from web-components/src/components/usa-card/card.stories.js
rename to src/components/usa-card/card.stories.js
diff --git a/web-components/src/components/usa-card/index.js b/src/components/usa-card/index.js
similarity index 100%
rename from web-components/src/components/usa-card/index.js
rename to src/components/usa-card/index.js
diff --git a/web-components/src/components/usa-card/usa-card.scss.js b/src/components/usa-card/usa-card.scss.js
similarity index 100%
rename from web-components/src/components/usa-card/usa-card.scss.js
rename to src/components/usa-card/usa-card.scss.js

From 8808009ac8d96113ece39e3e06b90c77da58dee5 Mon Sep 17 00:00:00 2001
From: Charlie Mahoney <charlie.mahoneyy@gmail.com>
Date: Wed, 3 Jul 2024 11:16:29 -0400
Subject: [PATCH 36/37] Fix card group html display

---
 src/components/usa-card/card.stories.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/usa-card/card.stories.js b/src/components/usa-card/card.stories.js
index 0ee7dd19..bd8886c8 100644
--- a/src/components/usa-card/card.stories.js
+++ b/src/components/usa-card/card.stories.js
@@ -312,7 +312,7 @@ export const CardGroup = {
     }
   },
   render: ({ title, media, content, buttonText }) => {
-    return`
+    return html`
       <usa-card-group>
         <usa-card>
           <div slot="card-header">

From 93a482a0c9c87c9fdbb2fed14705fdf445f807d1 Mon Sep 17 00:00:00 2001
From: Charlie Mahoney <charlie.mahoneyy@gmail.com>
Date: Wed, 3 Jul 2024 12:57:34 -0400
Subject: [PATCH 37/37] Add story description for flag media right

---
 src/components/usa-card/card.stories.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/usa-card/card.stories.js b/src/components/usa-card/card.stories.js
index bd8886c8..ca967d33 100644
--- a/src/components/usa-card/card.stories.js
+++ b/src/components/usa-card/card.stories.js
@@ -176,14 +176,14 @@ export const InsetMedia = {
   parameters: {
     docs: {
       description: {
-        story: 'A card variant featuring media.'
+        story: 'Indents the media element so it doesn’t extend to the edge of the card.'
       }
     }
   },
   render: ({ title, media, content, buttonText }) => {
     return html`
       <usa-card>
-        <img slot="card-media" src="${media}" alt="Placeholder image">
+        <img slot="card-media" src="${media}" alt="Placeholder image" inset>
         <div slot="card-header">
           <h2 slot="card-heading">${title || "Inset Media"}</h2>
         </div>
@@ -244,7 +244,6 @@ export const Flag = {
   args: {
     layout: "flag",
   },
-
   parameters: {
     docs: {
       description: {
@@ -252,7 +251,6 @@ export const Flag = {
       }
     }
   },
-
   render: ({ title, media, content, buttonText, headerFirst, layout }) => {
     return html`
       <usa-card ?header-first=${headerFirst} layout="${layout == 'default' ? nothing : layout}">
@@ -277,6 +275,13 @@ export const FlagMediaRightInset = {
   args: {
     layout: "flag-alt"
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Display in a horizontal (“flag”) orientation with media inset and on the right side.'
+      }
+    }
+  },
   render: ({ title, media, content, buttonText, layout, headerFirst }) => {
     return html`
       <usa-card ?header-first=${headerFirst} layout="${layout == 'default' ? nothing : layout}">