@noctuatech/uswds 0.1.0 → 0.1.3

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

@@ -4,51 +4,18 @@ import { screen } from "@testing-library/dom";
 import { userEvent } from "@testing-library/user-event";
 describe("usa-accordion", () => {
     it("should be accessible", async () => {
-        const accordion = await fixture(html `
-      <usa-accordion id="first" name="ammendment">
-        <h4 slot="heading">First Ammendment</h4>
-
-        <div class="content">
-          Congress shall make no law respecting an establishment of religion, or
-          prohibiting the free exercise thereof; or abridging the freedom of
-          speech, or of the press; or the right of the people peaceably to
-          assemble, and to petition the Government for a redress of grievances.
-        </div>
-      </usa-accordion>
-    `);
+        const accordion = await fixture(html `<usa-accordion id="first" name="ammendment"><h4 slot="heading">First Ammendment</h4><div class="content">Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.</div></usa-accordion>`);
         return assert.isAccessible(accordion);
     });
     it("should toggle the open state when clicked", async () => {
-        const accordion = await fixture(html `
-      <usa-accordion id="first" name="ammendment">
-        <h4 slot="heading">First Ammendment</h4>
-
-        <div class="content">
-          Congress shall make no law respecting an establishment of religion, or
-          prohibiting the free exercise thereof; or abridging the freedom of
-          speech, or of the press; or the right of the people peaceably to
-          assemble, and to petition the Government for a redress of grievances.
-        </div>
-      </usa-accordion>
-    `);
+        const accordion = await fixture(html `<usa-accordion id="first" name="ammendment"><h4 slot="heading">First Ammendment</h4><div class="content">Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.</div></usa-accordion>`);
         const heading = await screen.findByRole("heading");
         const content = accordion.querySelector(".content");
         await userEvent.click(heading);
         assert.isTrue(content?.checkVisibility());
     });
     it("should toggle the open state when clicked", async () => {
-        const accordion = await fixture(html `
-      <usa-accordion id="first" name="ammendment">
-        <h4 slot="heading">First Ammendment</h4>
-
-        <div class="content">
-          Congress shall make no law respecting an establishment of religion, or
-          prohibiting the free exercise thereof; or abridging the freedom of
-          speech, or of the press; or the right of the people peaceably to
-          assemble, and to petition the Government for a redress of grievances.
-        </div>
-      </usa-accordion>
-    `);
+        const accordion = await fixture(html `<usa-accordion id="first" name="ammendment"><h4 slot="heading">First Ammendment</h4><div class="content">Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.</div></usa-accordion>`);
         const heading = await screen.findByRole("heading");
         const content = accordion.querySelector(".content");
         assert.isFalse(content?.checkVisibility());
@@ -56,24 +23,7 @@ describe("usa-accordion", () => {
         assert.isTrue(content.checkVisibility());
     });
     it("should only allow a single accordion in a group to be open", async () => {
-        const el = await fixture(html `
-      <section>
-        <usa-accordion name="ammendment">
-          <h4 slot="heading">First Ammendment</h4>
-          <div class="content">Content for First</div>
-        </usa-accordion>
-
-        <usa-accordion name="ammendment">
-          <h4 slot="heading">Second Ammendment</h4>
-          <div class="content">Content for Second</div>
-        </usa-accordion>
-
-        <usa-accordion name="ammendment">
-          <h4 slot="heading">Third Ammendment</h4>
-          <div class="content">Content for Third</div>
-        </usa-accordion>
-      </section>
-    `);
+        const el = await fixture(html `<section><usa-accordion name="ammendment"><h4 slot="heading">First Ammendment</h4><div class="content">Content for First</div></usa-accordion><usa-accordion name="ammendment"><h4 slot="heading">Second Ammendment</h4><div class="content">Content for Second</div></usa-accordion><usa-accordion name="ammendment"><h4 slot="heading">Third Ammendment</h4><div class="content">Content for Third</div></usa-accordion></section>`);
         const headings = el.querySelectorAll("h4");
         const content = Array.from(el.querySelectorAll(".content"));
         await userEvent.click(headings[0]);
@@ -84,24 +34,7 @@ describe("usa-accordion", () => {
         assert.deepEqual(content.map((el) => el.checkVisibility()), [false, false, true]);
     });
     it("should not close accordion not in the same group", async () => {
-        const el = await fixture(html `
-      <section>
-        <usa-accordion name="ammendment">
-          <h4 slot="heading">First Ammendment</h4>
-          <div class="content">Content for First</div>
-        </usa-accordion>
-
-        <usa-accordion name="ammendment">
-          <h4 slot="heading">Second Ammendment</h4>
-          <div class="content">Content for Second</div>
-        </usa-accordion>
-
-        <usa-accordion name="different">
-          <h4 slot="heading">Third Ammendment</h4>
-          <div class="content">Content for Third</div>
-        </usa-accordion>
-      </section>
-    `);
+        const el = await fixture(html `<section><usa-accordion name="ammendment"><h4 slot="heading">First Ammendment</h4><div class="content">Content for First</div></usa-accordion><usa-accordion name="ammendment"><h4 slot="heading">Second Ammendment</h4><div class="content">Content for Second</div></usa-accordion><usa-accordion name="different"><h4 slot="heading">Third Ammendment</h4><div class="content">Content for Third</div></usa-accordion></section>`);
         const headings = el.querySelectorAll("h4");
         const content = Array.from(el.querySelectorAll(".content"));
         await userEvent.click(headings[0]);

package/target/lib/alert/alert.element.js

@@ -9,77 +9,8 @@ let USAAlertElement = (() => {
                 delegatesFocus: true,
             },
             shadowDom: [
-                css `
-      :host {
-        display: block;
-        border-left: 0.5rem solid #adadad;
-        padding: 1rem 1.2rem;
-        color: #1b1b1b;
-        margin-bottom: 1rem;
-      }
-
-      :host([type="info"]) {
-        border-left-color: #00bde3;
-        background-color: #e7f6f8;
-      }
-
-      :host([type="warning"]) {
-        background-color: #faf3d1;
-        border-left-color: #ffbe2e;
-      }
-
-      :host([type="success"]) {
-        background-color: #ecf3ec;
-        border-left-color: #00a91c;
-      }
-
-      :host([type="error"]) {
-        background-color: #f4e3db;
-        border-left-color: #d54309;
-      }
-
-      :host([type="emergency"]) {
-        background-color: #9c3d10;
-        border-left-color: #9c3d10;
-        color: #fff;
-      }
-
-      :host([type="emergency"]) ::slotted(*) {
-        color: #fff;
-      }
-
-      .alert-heading {
-        display: grid;
-        grid-template-columns: auto 1fr;
-        align-items: center;
-      }
-
-      usa-icon {
-        margin: -0.28rem 0.75rem 0 0;
-      }
-
-      #heading::slotted(*) {
-        font-size: 1.33rem;
-        line-height: 0.9;
-        margin-top: 0;
-        margin-bottom: 0.5rem;
-      }
-    `,
-                html `
-      <div class="alert-heading">
-        <usa-icon icon="check_circle"></usa-icon>
-
-        <div>
-          <slot id="heading" name="heading"></slot>
-        </div>
-
-        <div class="spacer"></div>
-
-        <div>
-          <slot></slot>
-        </div>
-      </div>
-    `,
+                css `:host{display:block;border-left:.5rem solid #adadad;padding:1rem 1.2rem;color:#1b1b1b;margin-bottom:1rem}:host([type=info]){border-left-color:#00bde3;background-color:#e7f6f8}:host([type=warning]){background-color:#faf3d1;border-left-color:#ffbe2e}:host([type=success]){background-color:#ecf3ec;border-left-color:#00a91c}:host([type=error]){background-color:#f4e3db;border-left-color:#d54309}:host([type=emergency]){background-color:#9c3d10;border-left-color:#9c3d10;color:#fff}:host([type=emergency]) ::slotted(*){color:#fff}.alert-heading{display:grid;grid-template-columns:auto 1fr;align-items:center}usa-icon{margin:-.28rem .75rem 0 0}#heading::slotted(*){font-size:1.33rem;line-height:.9;margin-top:0;margin-bottom:.5rem}`,
+                html `<div class="alert-heading"><usa-icon icon="check_circle"></usa-icon><div><slot id="heading" name="heading"></slot></div><div class="spacer"></div><div><slot></slot></div></div>`,
             ],
         })];
     let _classDescriptor;

package/target/lib/alert/alert.stories.js

@@ -10,47 +10,7 @@ export default meta;
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary = {
     render() {
-        return html `
-      <usa-alert type="info">
-        <h3 slot="heading">Informative status</h3>
-
-        Lorem ipsum dolor sit amet,&nbsp;
-        <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
-        eiusmod.
-      </usa-alert>
-
-      <usa-alert type="warning">
-        <h3 slot="heading">Warning status</h3>
-
-        Lorem ipsum dolor sit amet,&nbsp;
-        <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
-        eiusmod.
-      </usa-alert>
-
-      <usa-alert type="success">
-        <h3 slot="heading">Success status</h3>
-
-        Lorem ipsum dolor sit amet,&nbsp;
-        <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
-        eiusmod.
-      </usa-alert>
-
-      <usa-alert type="error">
-        <h3 slot="heading">Error status</h3>
-
-        Lorem ipsum dolor sit amet,&nbsp;
-        <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
-        eiusmod.
-      </usa-alert>
-
-      <usa-alert type="emergency">
-        <h3 slot="heading">Emergency status</h3>
-
-        Lorem ipsum dolor sit amet,&nbsp;
-        <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
-        eiusmod.
-      </usa-alert>
-    `;
+        return html `<usa-alert type="info"><h3 slot="heading">Informative status</h3>Lorem ipsum dolor sit amet, <usa-link href="#">consectetur adipiscing</usa-link> elit, sed do eiusmod.</usa-alert><usa-alert type="warning"><h3 slot="heading">Warning status</h3>Lorem ipsum dolor sit amet, <usa-link href="#">consectetur adipiscing</usa-link> elit, sed do eiusmod.</usa-alert><usa-alert type="success"><h3 slot="heading">Success status</h3>Lorem ipsum dolor sit amet, <usa-link href="#">consectetur adipiscing</usa-link> elit, sed do eiusmod.</usa-alert><usa-alert type="error"><h3 slot="heading">Error status</h3>Lorem ipsum dolor sit amet, <usa-link href="#">consectetur adipiscing</usa-link> elit, sed do eiusmod.</usa-alert><usa-alert type="emergency"><h3 slot="heading">Emergency status</h3>Lorem ipsum dolor sit amet, <usa-link href="#">consectetur adipiscing</usa-link> elit, sed do eiusmod.</usa-alert>`;
     },
 };
 //# sourceMappingURL=alert.stories.js.map

package/target/lib/alert/alert.test.js

@@ -4,15 +4,7 @@ import { USA_ALERT_TYPES } from "./alert-types.js";
 describe("usa-alert", () => {
     for (const alert of USA_ALERT_TYPES) {
         it(`should be accessible: ${alert}`, async () => {
-            const form = await fixture(html `
-        <usa-alert type=${alert}>
-          <h3 slot="heading">Status</h3>
-
-          Lorem ipsum dolor sit amet,&nbsp;
-          <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
-          eiusmod.
-        </usa-alert>
-      `);
+            const form = await fixture(html `<usa-alert type="${alert}"><h3 slot="heading">Status</h3>Lorem ipsum dolor sit amet, <usa-link href="#">consectetur adipiscing</usa-link> elit, sed do eiusmod.</usa-alert>`);
             return assert.isAccessible(form);
         });
     }

package/target/lib/button/button.element.js

@@ -15,148 +15,8 @@ let USAButtonElement = (() => {
                 delegatesFocus: true,
             },
             shadowDom: [
-                css `
-      :host {
-        display: contents;
-      }
-
-      button {
-        box-sizing: border-box;
-        font-size: 1.06rem;
-        line-height: 0.9;
-        color: white;
-        background-color: #005ea2;
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        appearance: none;
-        align-items: center;
-        border: 0;
-        border-radius: 0.25rem;
-        cursor: pointer;
-        -moz-column-gap: 0.5rem;
-        column-gap: 0.5rem;
-        display: inline-flex;
-        font-weight: 700;
-        justify-content: center;
-        padding: 0.75rem 1.25rem;
-        text-align: center;
-        text-decoration: none;
-        width: 100%;
-        cursor: pointer;
-      }
-
-      @media all and (min-width: 30em) {
-        button {
-          width: auto;
-        }
-      }
-
-      button:visited {
-        color: white;
-      }
-
-      button:hover {
-        color: white;
-        background-color: #1a4480;
-        border-bottom: 0;
-        text-decoration: none;
-      }
-
-      button:active {
-        color: white;
-        background-color: #162e51;
-      }
-
-      button:not([disabled]):focus {
-        outline-offset: 0.25rem;
-      }
-
-      button:disabled {
-        color: #454545;
-        background-color: #c9c9c9;
-        cursor: not-allowed;
-        opacity: 1;
-      }
-
-      button:disabled:hover,
-      button:disabled:active,
-      button:disabled:focus {
-        color: #454545;
-        background-color: #c9c9c9;
-      }
-
-      button:focus {
-        outline: 0.25rem solid #2491ff;
-        outline-offset: 0;
-      }
-
-      /** Secondary */
-      :host([variant="secondary"]) button {
-        color: #fff;
-        background-color: #d83933;
-      }
-
-      :host([variant="secondary"]) button:hover {
-        background-color: #b50909;
-      }
-
-      :host([variant="secondary"]) button:active {
-        background-color: #8b0a03;
-      }
-
-      /** cool */
-      :host([variant="cool"]) button {
-        color: #1b1b1b;
-        background-color: #00bde3;
-      }
-
-      :host([variant="cool"]) button:hover {
-        background-color: #28a0cb;
-      }
-
-      :host([variant="cool"]) button:active {
-        color: #fff;
-        background-color: #07648d;
-      }
-
-      /** warm */
-      :host([variant="warm"]) button {
-        color: #1b1b1b;
-        background-color: #fa9441;
-      }
-
-      :host([variant="warm"]) button:hover {
-        color: #fff;
-        background-color: #c05600;
-      }
-
-      :host([variant="warm"]) button:active {
-        color: #fff;
-        background-color: #775540;
-      }
-
-      /** outline */
-      :host([variant="outline"]) button {
-        background-color: transparent;
-        box-shadow: inset 0 0 0 2px #005ea2;
-        color: #005ea2;
-      }
-
-      :host([variant="outline"]) button:hover {
-        box-shadow: inset 0 0 0 2px #1a4480;
-        color: #1a4480;
-      }
-
-      :host([variant="outline"]) button:active {
-        box-shadow: inset 0 0 0 2px #162e51;
-        color: #162e51;
-      }
-    `,
-                html `
-      <button tabindex="0">
-        <slot></slot>
-      </button>
-    `,
+                css `:host{display:contents}button{box-sizing:border-box;font-size:1.06rem;line-height:.9;color:#fff;background-color:#005ea2;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-items:center;border:0;border-radius:.25rem;cursor:pointer;-moz-column-gap:.5rem;column-gap:.5rem;display:inline-flex;font-weight:700;justify-content:center;padding:.75rem 1.25rem;text-align:center;text-decoration:none;width:100%;cursor:pointer}@media all and (min-width:30em){button{width:auto}}button:visited{color:#fff}button:hover{color:#fff;background-color:#1a4480;border-bottom:0;text-decoration:none}button:active{color:#fff;background-color:#162e51}button:not([disabled]):focus{outline-offset:.25rem}button:disabled{color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1}button:disabled:active,button:disabled:focus,button:disabled:hover{color:#454545;background-color:#c9c9c9}button:focus{outline:.25rem solid #2491ff;outline-offset:0}:host([variant=secondary]) button{color:#fff;background-color:#d83933}:host([variant=secondary]) button:hover{background-color:#b50909}:host([variant=secondary]) button:active{background-color:#8b0a03}:host([variant=cool]) button{color:#1b1b1b;background-color:#00bde3}:host([variant=cool]) button:hover{background-color:#28a0cb}:host([variant=cool]) button:active{color:#fff;background-color:#07648d}:host([variant=warm]) button{color:#1b1b1b;background-color:#fa9441}:host([variant=warm]) button:hover{color:#fff;background-color:#c05600}:host([variant=warm]) button:active{color:#fff;background-color:#775540}:host([variant=outline]) button{background-color:transparent;box-shadow:inset 0 0 0 2px #005ea2;color:#005ea2}:host([variant=outline]) button:hover{box-shadow:inset 0 0 0 2px #1a4480;color:#1a4480}:host([variant=outline]) button:active{box-shadow:inset 0 0 0 2px #162e51;color:#162e51}`,
+                html `<button tabindex="0"><slot></slot></button>`,
             ],
         })];
     let _classDescriptor;

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

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

package/target/lib/button/button.test.js

@@ -4,9 +4,7 @@ import { BUTTON_VARIANTS } from "./button.element.js";
 describe("usa-button", () => {
     for (const variant of BUTTON_VARIANTS) {
         it("should be accessible", async () => {
-            const button = await fixture(html `
-        <usa-button variant=${variant}>Hello World</usa-button>
-      `);
+            const button = await fixture(html `<usa-button variant="${variant}">Hello World</usa-button>`);
             return assert.isAccessible(button);
         });
     }

package/target/lib/card/card-body/card-body.element.js

@@ -4,14 +4,7 @@ let USACardBodyElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-card-body",
             shadowDom: [
-                css `
-      :host {
-        display: flex;
-        flex: 1 1 0%;
-        padding: 0.5rem 1.5rem;
-        flex-basis: auto;
-      }
-    `,
+                css `:host{display:flex;flex:1 1 0%;padding:.5rem 1.5rem;flex-basis:auto}`,
                 html `<slot></slot>`,
             ],
         })];

package/target/lib/card/card-footer/card-footer.element.js

@@ -4,12 +4,7 @@ let USACardFooterElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-card-footer",
             shadowDom: [
-                css `
-      :host {
-        display: flex;
-        padding: 0.5rem 1.5rem 1.5rem;
-      }
-    `,
+                css `:host{display:flex;padding:.5rem 1.5rem 1.5rem}`,
                 html `<slot></slot>`,
             ],
         })];

package/target/lib/card/card-group/card-group.element.js

@@ -4,18 +4,7 @@ let USACardGroupElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-card-group",
             shadowDom: [
-                css `
-      :host {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-        gap: 1rem;
-        margin-bottom: 1rem;
-      }
-
-      :host([variant="flag"]) {
-        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
-      }
-    `,
+                css `:host{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-bottom:1rem}:host([variant=flag]){grid-template-columns:repeat(auto-fit,minmax(450px,1fr))}`,
                 html `<slot></slot>`,
             ],
         })];

package/target/lib/card/card-header/card-header.element.js

@@ -4,22 +4,7 @@ let USACardHeaderElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-card-header",
             shadowDom: [
-                css `
-      :host {
-        font-family:
-          Merriweather Web,
-          Georgia,
-          Cambria,
-          Times New Roman,
-          Times,
-          serif !important;
-        display: flex;
-        padding: 1.5rem 1.5rem 0.5rem;
-        font-size: 1.22rem;
-        font-weight: bold;
-        line-height: 1.2;
-      }
-    `,
+                css `:host{font-family:Merriweather Web,Georgia,Cambria,Times New Roman,Times,serif!important;display:flex;padding:1.5rem 1.5rem .5rem;font-size:1.22rem;font-weight:700;line-height:1.2}`,
                 html `<slot></slot>`,
             ],
         })];

package/target/lib/card/card-media/card-media.element.js

@@ -4,39 +4,8 @@ let USACardImgElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-card-media",
             shadowDom: [
-                css `
-      :host {
-        display: block;
-        border-top-left-radius: calc(0.25rem - 2px);
-        border-top-right-radius: calc(0.25rem - 2px);
-        background-color: #f0f0f0;
-        position: relative;
-        overflow: hidden;
-        box-sizing: border-box;
-      }
-
-      :host([variant="inset"]) {
-        background-color: #fff;
-        padding-top: 1.5rem;
-        padding-left: 1.5rem;
-        padding-right: 1.5rem;
-      }
-
-      ::slotted(img) {
-        display: block;
-        height: 100%;
-        width: 100%;
-        -o-object-fit: cover;
-        object-fit: cover;
-      }
-
-      :host(:not(:first-child)) {
-        margin-top: 0.5rem;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-      }
-    `,
-                html ` <slot></slot> `,
+                css `:host{display:block;border-top-left-radius:calc(.25rem - 2px);border-top-right-radius:calc(.25rem - 2px);background-color:#f0f0f0;position:relative;overflow:hidden;box-sizing:border-box}:host([variant=inset]){background-color:#fff;padding-top:1.5rem;padding-left:1.5rem;padding-right:1.5rem}::slotted(img){display:block;height:100%;width:100%;-o-object-fit:cover;object-fit:cover}:host(:not(:first-child)){margin-top:.5rem;border-top-left-radius:0;border-top-right-radius:0}`,
+                html `<slot></slot>`,
             ],
         })];
     let _classDescriptor;

package/target/lib/card/card.element.js

@@ -4,38 +4,7 @@ let USACardElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-card",
             shadowDom: [
-                css `
-      :host {
-        color: #1b1b1b;
-        background-color: #fff;
-        font-size: 1.06rem;
-        line-height: 1.5;
-        border-width: 2px;
-        border-color: #e6e6e6;
-        border-style: solid;
-        display: flex;
-        flex-direction: column;
-        position: relative;
-        border-radius: 0.25rem;
-      }
-
-      :host([variant="flag"]) {
-        padding-left: 15rem;
-      }
-
-      :host([variant="flag"]) ::slotted(usa-card-media) {
-        position: absolute;
-        bottom: 0;
-        top: 0;
-        left: 0;
-        width: 15rem;
-      }
-
-      :host([variant="flag"]) ::slotted(usa-card-media[variant="inset"]) {
-        padding-bottom: 1.5rem;
-        padding-right: 0;
-      }
-    `,
+                css `:host{color:#1b1b1b;background-color:#fff;font-size:1.06rem;line-height:1.5;border-width:2px;border-color:#e6e6e6;border-style:solid;display:flex;flex-direction:column;position:relative;border-radius:.25rem}:host([variant=flag]){padding-left:15rem}:host([variant=flag]) ::slotted(usa-card-media){position:absolute;bottom:0;top:0;left:0;width:15rem}:host([variant=flag]) ::slotted(usa-card-media[variant=inset]){padding-bottom:1.5rem;padding-right:0}`,
                 html `<slot></slot>`,
             ],
         })];