@noctuatech/uswds 0.1.0 → 0.1.3

package/target/lib/select/select.test.js

@@ -4,46 +4,18 @@ import { assert, fixture, html } from "@open-wc/testing";
 import { userEvent } from "@testing-library/user-event";
 describe("usa-select", () => {
     it("should be accessible", async () => {
-        const el = await fixture(html `
-      <usa-select name="example">
-        Hello World
-
-        <usa-select-option value="first">First</usa-select-option>
-        <usa-select-option value="second">Second</usa-select-option>
-        <usa-select-option value="third">Third</usa-select-option>
-      </usa-select>
-    `);
+        const el = await fixture(html `<usa-select name="example">Hello World<usa-select-option value="first">First</usa-select-option><usa-select-option value="second">Second</usa-select-option><usa-select-option value="third">Third</usa-select-option></usa-select>`);
         return assert.isAccessible(el);
     });
     it("should create local select options", async () => {
-        const form = await fixture(html `
-      <form>
-        <usa-select name="example">
-          Hello World
-
-          <usa-select-option value="first">First</usa-select-option>
-          <usa-select-option value="second">Second</usa-select-option>
-          <usa-select-option value="third">Third</usa-select-option>
-        </usa-select>
-      </form>
-    `);
+        const form = await fixture(html `<form><usa-select name="example">Hello World<usa-select-option value="first">First</usa-select-option><usa-select-option value="second">Second</usa-select-option><usa-select-option value="third">Third</usa-select-option></usa-select></form>`);
         const nativeInputs = form
             .querySelector("usa-select")
             ?.shadowRoot?.querySelectorAll("option");
         assert.deepEqual(Array.from(nativeInputs ?? []).map((input) => input.value), ["first", "second", "third"]);
     });
     it("should remove select options when options are removed", async () => {
-        const form = await fixture(html `
-      <form>
-        <usa-select name="example">
-          Hello World
-
-          <usa-select-option value="first">First</usa-select-option>
-          <usa-select-option value="second">Second</usa-select-option>
-          <usa-select-option value="third">Third</usa-select-option>
-        </usa-select>
-      </form>
-    `);
+        const form = await fixture(html `<form><usa-select name="example">Hello World<usa-select-option value="first">First</usa-select-option><usa-select-option value="second">Second</usa-select-option><usa-select-option value="third">Third</usa-select-option></usa-select></form>`);
         const options = form.querySelectorAll("usa-select-option");
         options[1].remove();
         const nativeInputs = form
@@ -52,32 +24,12 @@ describe("usa-select", () => {
         assert.deepEqual(Array.from(nativeInputs ?? []).map((input) => input.value), ["first", "third"]);
     });
     it("should submit form with default values", async () => {
-        const form = await fixture(html `
-      <form>
-        <usa-select name="example" value="second">
-          Hello World
-
-          <usa-select-option value="first">First</usa-select-option>
-          <usa-select-option value="second">Second</usa-select-option>
-          <usa-select-option value="third">Third</usa-select-option>
-        </usa-select>
-      </form>
-    `);
+        const form = await fixture(html `<form><usa-select name="example" value="second">Hello World<usa-select-option value="first">First</usa-select-option><usa-select-option value="second">Second</usa-select-option><usa-select-option value="third">Third</usa-select-option></usa-select></form>`);
         const value = new FormData(form);
         assert.equal(value.get("example"), "second");
     });
     it("should update form value as select value changed", async () => {
-        const form = await fixture(html `
-      <form>
-        <usa-select name="example" value="second">
-          Hello World
-
-          <usa-select-option value="first">First</usa-select-option>
-          <usa-select-option value="second">Second</usa-select-option>
-          <usa-select-option value="third">Third</usa-select-option>
-        </usa-select>
-      </form>
-    `);
+        const form = await fixture(html `<form><usa-select name="example" value="second">Hello World<usa-select-option value="first">First</usa-select-option><usa-select-option value="second">Second</usa-select-option><usa-select-option value="third">Third</usa-select-option></usa-select></form>`);
         const select = form.querySelector("usa-select");
         const nativeSelect = select?.shadowRoot?.querySelector("select");
         if (nativeSelect) {
@@ -87,17 +39,7 @@ describe("usa-select", () => {
         assert.equal(value.get("example"), "third");
     });
     it("should not submit when not valid", async () => {
-        const form = await fixture(html `
-      <form>
-        <usa-select name="example" required>
-          Hello World
-
-          <usa-select-option value="first">First</usa-select-option>
-          <usa-select-option value="second">Second</usa-select-option>
-          <usa-select-option value="third">Third</usa-select-option>
-        </usa-select>
-      </form>
-    `);
+        const form = await fixture(html `<form><usa-select name="example" required>Hello World<usa-select-option value="first">First</usa-select-option><usa-select-option value="second">Second</usa-select-option><usa-select-option value="third">Third</usa-select-option></usa-select></form>`);
         assert.equal(form.checkValidity(), false);
     });
 });

package/target/lib/side-nav/side-nav-item/side-nav-item.element.js

@@ -4,73 +4,8 @@ let USASideNavItemElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-side-nav-item",
             shadowDom: [
-                css `
-      :host {
-        --usa-nav-item-padding-left: 2rem;
-
-        display: block;
-        border-top: 1px solid #e6e6e6;
-      }
-
-      .side-nav-item {
-        display: flex;
-        padding: 0.5rem 1rem;
-        text-decoration: none;
-        position: relative;
-      }
-
-      .side-nav-item:hover {
-        background-color: #f0f0f0;
-        color: #005ea2;
-      }
-
-      ::slotted(*) {
-        color: #5c5c5c;
-        text-decoration: none;
-        display: block;
-        width: 100%;
-      }
-
-      :host(:hover) ::slotted(*) {
-        color: #005ea2;
-      }
-
-      :host([current]) ::slotted(*:not(usa-side-nav-item)) {
-        color: #005ea2;
-        font-weight: 700;
-      }
-
-      :host([current]) .side-nav-item::after {
-        background-color: #005ea2;
-        border-radius: 99rem;
-        content: "";
-        display: block;
-        position: absolute;
-        bottom: 0.25rem;
-        top: 0.25rem;
-        width: 0.25rem;
-        left: 0;
-      }
-
-      :host([slot="children"]) .side-nav-item {
-        padding-left: var(--usa-nav-item-padding-left);
-      }
-
-      :host([slot="children"]) ::slotted(usa-side-nav-item) {
-        --usa-nav-item-padding-left: 3rem;
-      }
-
-      :host([slot="children"]) .side-nav-item::after {
-        display: none;
-      }
-    `,
-                html `
-      <div class="side-nav-item">
-        <slot></slot>
-      </div>
-
-      <slot name="children"></slot>
-    `,
+                css `:host{--usa-nav-item-padding-left:2rem;display:block;border-top:1px solid #e6e6e6}.side-nav-item{display:flex;padding:.5rem 1rem;text-decoration:none;position:relative}.side-nav-item:hover{background-color:#f0f0f0;color:#005ea2}::slotted(*){color:#5c5c5c;text-decoration:none;display:block;width:100%}:host(:hover) ::slotted(*){color:#005ea2}:host([current]) ::slotted(:not(usa-side-nav-item)){color:#005ea2;font-weight:700}:host([current]) .side-nav-item::after{background-color:#005ea2;border-radius:99rem;content:"";display:block;position:absolute;bottom:.25rem;top:.25rem;width:.25rem;left:0}:host([slot=children]) .side-nav-item{padding-left:var(--usa-nav-item-padding-left)}:host([slot=children]) ::slotted(usa-side-nav-item){--usa-nav-item-padding-left:3rem}:host([slot=children]) .side-nav-item::after{display:none}`,
+                html `<div class="side-nav-item"><slot></slot></div><slot name="children"></slot>`,
             ],
         })];
     let _classDescriptor;

package/target/lib/side-nav/side-nav.element.js

@@ -4,14 +4,7 @@ let USASideNavElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-side-nav",
             shadowDom: [
-                css `
-      :host {
-        display: block;
-        font-size: 1.06rem;
-        line-height: 1.3;
-        border-bottom: 1px solid #e6e6e6;
-      }
-    `,
+                css `:host{display:block;font-size:1.06rem;line-height:1.3;border-bottom:1px solid #e6e6e6}`,
                 html `<slot></slot>`,
             ],
         })];

package/target/lib/side-nav/side-nav.stories.js

@@ -4,45 +4,7 @@ const meta = {
     title: "usa-side-nav",
     tags: ["autodocs"],
     render() {
-        return html `
-      <usa-side-nav>
-        <usa-side-nav-item current>
-          <usa-link href="#">Current Page</usa-link>
-
-          <usa-side-nav-item slot="children">
-            <usa-link href="#">Child</usa-link>
-          </usa-side-nav-item>
-
-          <usa-side-nav-item slot="children" current>
-            <usa-link href="#">Child</usa-link>
-
-            <usa-side-nav-item slot="children">
-              <usa-link href="#">Grandchild</usa-link>
-            </usa-side-nav-item>
-
-            <usa-side-nav-item slot="children" current>
-              <usa-link href="#">Grandchild</usa-link>
-            </usa-side-nav-item>
-
-            <usa-side-nav-item slot="children">
-              <usa-link href="#">Grandchild</usa-link>
-            </usa-side-nav-item>
-          </usa-side-nav-item>
-
-          <usa-side-nav-item slot="children">
-            <usa-link href="#">Child</usa-link>
-          </usa-side-nav-item>
-        </usa-side-nav-item>
-
-        <usa-side-nav-item>
-          <usa-link href="#">Parent</usa-link>
-        </usa-side-nav-item>
-
-        <usa-side-nav-item>
-          <usa-link href="#">Parent</usa-link>
-        </usa-side-nav-item>
-      </usa-side-nav>
-    `;
+        return html `<usa-side-nav><usa-side-nav-item current><usa-link href="#">Current Page</usa-link><usa-side-nav-item slot="children"><usa-link href="#">Child</usa-link></usa-side-nav-item><usa-side-nav-item slot="children" current><usa-link href="#">Child</usa-link><usa-side-nav-item slot="children"><usa-link href="#">Grandchild</usa-link></usa-side-nav-item><usa-side-nav-item slot="children" current><usa-link href="#">Grandchild</usa-link></usa-side-nav-item><usa-side-nav-item slot="children"><usa-link href="#">Grandchild</usa-link></usa-side-nav-item></usa-side-nav-item><usa-side-nav-item slot="children"><usa-link href="#">Child</usa-link></usa-side-nav-item></usa-side-nav-item><usa-side-nav-item><usa-link href="#">Parent</usa-link></usa-side-nav-item><usa-side-nav-item><usa-link href="#">Parent</usa-link></usa-side-nav-item></usa-side-nav>`;
     },
     argTypes: {},
     args: {},

package/target/lib/side-nav/side-nav.test.js

@@ -4,87 +4,11 @@ import "./side-nav-item/side-nav-item.element.js";
 import { assert, fixture, html } from "@open-wc/testing";
 describe("usa-side-nav", () => {
     it("should be accessible", async () => {
-        const sideNav = await fixture(html `
-      <usa-side-nav>
-        <usa-side-nav-item current>
-          <usa-link href="#">Current Page</usa-link>
-
-          <usa-side-nav-item slot="children">
-            <usa-link href="#">Child</usa-link>
-          </usa-side-nav-item>
-
-          <usa-side-nav-item slot="children" current>
-            <usa-link href="#">Child</usa-link>
-
-            <usa-side-nav-item slot="children">
-              <usa-link href="#">Grandchild</usa-link>
-            </usa-side-nav-item>
-
-            <usa-side-nav-item slot="children" current>
-              <usa-link href="#">Grandchild</usa-link>
-            </usa-side-nav-item>
-
-            <usa-side-nav-item slot="children">
-              <usa-link href="#">Grandchild</usa-link>
-            </usa-side-nav-item>
-          </usa-side-nav-item>
-
-          <usa-side-nav-item slot="children">
-            <usa-link href="#">Child</usa-link>
-          </usa-side-nav-item>
-        </usa-side-nav-item>
-
-        <usa-side-nav-item>
-          <usa-link href="#">Parent</usa-link>
-        </usa-side-nav-item>
-
-        <usa-side-nav-item>
-          <usa-link href="#">Parent</usa-link>
-        </usa-side-nav-item>
-      </usa-side-nav>
-    `);
+        const sideNav = await fixture(html `<usa-side-nav><usa-side-nav-item current><usa-link href="#">Current Page</usa-link><usa-side-nav-item slot="children"><usa-link href="#">Child</usa-link></usa-side-nav-item><usa-side-nav-item slot="children" current><usa-link href="#">Child</usa-link><usa-side-nav-item slot="children"><usa-link href="#">Grandchild</usa-link></usa-side-nav-item><usa-side-nav-item slot="children" current><usa-link href="#">Grandchild</usa-link></usa-side-nav-item><usa-side-nav-item slot="children"><usa-link href="#">Grandchild</usa-link></usa-side-nav-item></usa-side-nav-item><usa-side-nav-item slot="children"><usa-link href="#">Child</usa-link></usa-side-nav-item></usa-side-nav-item><usa-side-nav-item><usa-link href="#">Parent</usa-link></usa-side-nav-item><usa-side-nav-item><usa-link href="#">Parent</usa-link></usa-side-nav-item></usa-side-nav>`);
         return assert.isAccessible(sideNav);
     });
     it("should set child padding correctly", async () => {
-        const sideNav = await fixture(html `
-      <usa-side-nav>
-        <usa-side-nav-item current>
-          <usa-link href="#">Current Page</usa-link>
-
-          <usa-side-nav-item slot="children">
-            <usa-link href="#">Child</usa-link>
-          </usa-side-nav-item>
-
-          <usa-side-nav-item slot="children" current>
-            <usa-link href="#">Child</usa-link>
-
-            <usa-side-nav-item slot="children">
-              <usa-link href="#">Grandchild</usa-link>
-            </usa-side-nav-item>
-
-            <usa-side-nav-item slot="children" current>
-              <usa-link href="#">Grandchild</usa-link>
-            </usa-side-nav-item>
-
-            <usa-side-nav-item slot="children">
-              <usa-link href="#">Grandchild</usa-link>
-            </usa-side-nav-item>
-          </usa-side-nav-item>
-
-          <usa-side-nav-item slot="children">
-            <usa-link href="#">Child</usa-link>
-          </usa-side-nav-item>
-        </usa-side-nav-item>
-
-        <usa-side-nav-item>
-          <usa-link href="#">Parent</usa-link>
-        </usa-side-nav-item>
-
-        <usa-side-nav-item>
-          <usa-link href="#">Parent</usa-link>
-        </usa-side-nav-item>
-      </usa-side-nav>
-    `);
+        const sideNav = await fixture(html `<usa-side-nav><usa-side-nav-item current><usa-link href="#">Current Page</usa-link><usa-side-nav-item slot="children"><usa-link href="#">Child</usa-link></usa-side-nav-item><usa-side-nav-item slot="children" current><usa-link href="#">Child</usa-link><usa-side-nav-item slot="children"><usa-link href="#">Grandchild</usa-link></usa-side-nav-item><usa-side-nav-item slot="children" current><usa-link href="#">Grandchild</usa-link></usa-side-nav-item><usa-side-nav-item slot="children"><usa-link href="#">Grandchild</usa-link></usa-side-nav-item></usa-side-nav-item><usa-side-nav-item slot="children"><usa-link href="#">Child</usa-link></usa-side-nav-item></usa-side-nav-item><usa-side-nav-item><usa-link href="#">Parent</usa-link></usa-side-nav-item><usa-side-nav-item><usa-link href="#">Parent</usa-link></usa-side-nav-item></usa-side-nav>`);
         const items = sideNav.querySelectorAll("usa-side-nav-item");
         assert.equal(getComputedStyle(items[1]).getPropertyValue("--usa-nav-item-padding-left"), "2rem");
         assert.equal(getComputedStyle(items[3]).getPropertyValue("--usa-nav-item-padding-left"), "3rem");

package/target/lib/step-indicator/step/step.element.js

@@ -4,102 +4,8 @@ let USAStepIndicatorStepElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-step",
             shadowDom: [
-                css `
-      :host {
-        color: #5c5c5c;
-        display: block;
-        flex: 1 1 0%;
-        position: relative;
-        counter-increment: usa-step-indicator;
-      }
-
-      :host([counter]):after {
-        content: counter(usa-step-indicator);
-        height: 2.5rem;
-        border-radius: 99rem;
-        width: 2.5rem;
-        background-color: #fff;
-        box-shadow:
-          inset 0 0 0 0.25rem #919191,
-          0 0 0 0.25rem #fff;
-        color: #5c5c5c;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-weight: 700;
-        left: 0;
-        line-height: 0.9;
-        padding: calc((2.5rem - 2ex * 0.9) * 0.5);
-        position: absolute;
-        z-index: 100;
-        top: 0;
-        transform: translateY(-40%);
-        box-sizing: border-box;
-      }
-
-      :host([state="complete"]) {
-        color: #162e51;
-      }
-
-      :host([state="complete"])::before {
-        background-color: #162e51;
-      }
-
-      :host([state="current"]) {
-        color: #005ea2;
-        font-weight: bold;
-      }
-
-      :host([state="current"])::before {
-        background-color: #005ea2;
-      }
-
-      :host:before {
-        background-color: #919191;
-        content: "";
-        display: block;
-        height: 0.5rem;
-      }
-
-      .label {
-        display: block;
-        font-size: 1.06rem;
-        margin-top: 0.5rem;
-        padding-right: 2rem;
-        text-align: left;
-      }
-
-      :host([counter]) .label {
-        margin-top: 1.5rem;
-      }
-
-      :host([counter][state="complete"]):after {
-        background-color: #162e51;
-        box-shadow: 0 0 0 0.25rem #fff;
-        color: #fff;
-      }
-
-      :host([counter][state="current"]):after {
-        background-color: #005ea2;
-        box-shadow: 0 0 0 0.25rem #fff;
-        color: #fff;
-      }
-
-      :host([counter="small"]):after {
-        height: 1.5rem;
-        width: 1.5rem;
-        font-size: 0.93rem;
-      }
-
-      :host([counter]:last-child):before {
-        width: 0;
-      }
-    `,
-                html `
-      <div class="label">
-        <slot></slot>
-      </div>
-    `,
+                css `:host{color:#5c5c5c;display:block;flex:1 1 0%;position:relative;counter-increment:usa-step-indicator}:host([counter]):after{content:counter(usa-step-indicator);height:2.5rem;border-radius:99rem;width:2.5rem;background-color:#fff;box-shadow:inset 0 0 0 .25rem #919191,0 0 0 .25rem #fff;color:#5c5c5c;display:flex;align-items:center;justify-content:center;font-weight:700;left:0;line-height:.9;padding:calc((2.5rem - 2ex * .9) * .5);position:absolute;z-index:100;top:0;transform:translateY(-40%);box-sizing:border-box}:host([state=complete]){color:#162e51}:host([state=complete])::before{background-color:#162e51}:host([state=current]){color:#005ea2;font-weight:700}:host([state=current])::before{background-color:#005ea2}:host:before{background-color:#919191;content:"";display:block;height:.5rem}.label{display:block;font-size:1.06rem;margin-top:.5rem;padding-right:2rem;text-align:left}:host([counter]) .label{margin-top:1.5rem}:host([counter][state=complete]):after{background-color:#162e51;box-shadow:0 0 0 .25rem #fff;color:#fff}:host([counter][state=current]):after{background-color:#005ea2;box-shadow:0 0 0 .25rem #fff;color:#fff}:host([counter=small]):after{height:1.5rem;width:1.5rem;font-size:.93rem}:host([counter]:last-child):before{width:0}`,
+                html `<div class="label"><slot></slot></div>`,
             ],
         })];
     let _classDescriptor;

package/target/lib/step-indicator/step-indicator.element.js

@@ -4,15 +4,7 @@ let USAStepIndicatorElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-step-indicator",
             shadowDom: [
-                css `
-      :host {
-        display: flex;
-        gap: 2px;
-        counter-reset: usa-step-indicator 0;
-        padding-top: 1rem;
-        margin-bottom: 1rem;
-      }
-    `,
+                css `:host{display:flex;gap:2px;counter-reset:usa-step-indicator 0;padding-top:1rem;margin-bottom:1rem}`,
                 html `<slot></slot>`,
             ],
         })];

package/target/lib/step-indicator/step-indicator.stories.js

@@ -5,27 +5,7 @@ const meta = {
     title: "usa-step-indicator",
     tags: ["autodocs"],
     render(args) {
-        return html `
-      <usa-step-indicator>
-        <usa-step state="complete" counter=${ifDefined(args.counter)}>
-          Personal information
-        </usa-step>
-
-        <usa-step state="complete" counter=${ifDefined(args.counter)}>
-          Household status
-        </usa-step>
-
-        <usa-step state="current" counter=${ifDefined(args.counter)}>
-          Supporting documents
-        </usa-step>
-
-        <usa-step counter=${ifDefined(args.counter)}>Signature</usa-step>
-
-        <usa-step counter=${ifDefined(args.counter)}>
-          Review and submit
-        </usa-step>
-      </usa-step-indicator>
-    `;
+        return html `<usa-step-indicator><usa-step state="complete" counter="${ifDefined(args.counter)}">Personal information</usa-step><usa-step state="complete" counter="${ifDefined(args.counter)}">Household status</usa-step><usa-step state="current" counter="${ifDefined(args.counter)}">Supporting documents</usa-step><usa-step counter="${ifDefined(args.counter)}">Signature</usa-step><usa-step counter="${ifDefined(args.counter)}">Review and submit</usa-step></usa-step-indicator>`;
     },
     argTypes: {
         counter: {

package/target/lib/step-indicator/step-indicator.test.js

@@ -3,15 +3,7 @@ import "./step/step.element.js";
 import { assert, fixture, html } from "@open-wc/testing";
 describe("usa-step-indicator", () => {
     it("should be accessible", async () => {
-        const stepIndicator = await fixture(html `
-      <usa-step-indicator>
-        <usa-step state="complete" counter="on">Personal information</usa-step>
-        <usa-step state="complete" counter="on">Household status</usa-step>
-        <usa-step state="current" counter="on">Supporting documents</usa-step>
-        <usa-step counter="on">Signature</usa-step>
-        <usa-step counter="on">Review and submit</usa-step>
-      </usa-step-indicator>
-    `);
+        const stepIndicator = await fixture(html `<usa-step-indicator><usa-step state="complete" counter="on">Personal information</usa-step><usa-step state="complete" counter="on">Household status</usa-step><usa-step state="current" counter="on">Supporting documents</usa-step><usa-step counter="on">Signature</usa-step><usa-step counter="on">Review and submit</usa-step></usa-step-indicator>`);
         return assert.isAccessible(stepIndicator);
     });
 });

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

@@ -4,20 +4,8 @@ let USASummaryBoxElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-summary-box",
             shadowDom: [
-                css `
-      :host {
-        font-size: 1.06rem;
-        line-height: 1.5;
-        color: #1b1b1b;
-        background-color: #e7f6f8;
-        border-radius: 0.25rem;
-        border: 1px #99deea solid;
-        padding: 1.5rem;
-        position: relative;
-        display: block;
-      }
-    `,
-                html ` <slot></slot> `,
+                css `:host{font-size:1.06rem;line-height:1.5;color:#1b1b1b;background-color:#e7f6f8;border-radius:.25rem;border:1px #99deea solid;padding:1.5rem;position:relative;display:block}`,
+                html `<slot></slot>`,
             ],
         })];
     let _classDescriptor;

package/target/lib/summary-box/summary-box.stories.js

@@ -4,7 +4,7 @@ const meta = {
     title: "usa-summary-box",
     tags: ["autodocs"],
     render() {
-        return html `<usa-summary-box> Hello World </usa-summary-box>`;
+        return html `<usa-summary-box>Hello World</usa-summary-box>`;
     },
     argTypes: {},
     args: {},

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

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

package/target/lib/tag/tag.element.js

@@ -6,28 +6,7 @@ let USATagElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-tag",
             shadowDom: [
-                css `
-      :host {
-        font-size: 0.93rem;
-        color: #1b1b1b;
-        text-transform: uppercase;
-        background-color: #e6e6e6;
-        border-radius: 2px;
-        margin-right: 0.25rem;
-        padding: 1px 0.5rem;
-      }
-
-      :host([variant="big"]) {
-        padding-left: 0.5rem;
-        padding-right: 0.5rem;
-        font-size: 1.06rem;
-      }
-
-      :host([type="new"]) {
-        background-color: #c05600;
-        color: #fff;
-      }
-    `,
+                css `:host{font-size:.93rem;color:#1b1b1b;text-transform:uppercase;background-color:#e6e6e6;border-radius:2px;margin-right:.25rem;padding:1px .5rem}:host([variant=big]){padding-left:.5rem;padding-right:.5rem;font-size:1.06rem}:host([type=new]){background-color:#c05600;color:#fff}`,
                 html `<slot></slot>`,
             ],
         })];

package/target/lib/tag/tag.stories.js

@@ -5,7 +5,7 @@ const meta = {
     title: "usa-tag",
     tags: ["autodocs"],
     render(args) {
-        return html `<usa-tag variant=${args.variant}>Hello World</usa-tag>`;
+        return html `<usa-tag variant="${args.variant}">Hello World</usa-tag>`;
     },
     argTypes: {
         variant: {

package/target/lib/tag/tag.test.js

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