@noctuatech/uswds 0.1.2 → 0.1.3

package/target/lib/radio/radio.element.js

@@ -9,104 +9,8 @@ let USARadioElement = (() => {
         }), element({
             tagName: "usa-radio",
             shadowDom: [
-                css `
-      :host {
-        --usa-radio-active-color: #005ea2;
-        --usa-radio-tiled-bg: rgba(0, 94, 162, 0.1);
-        --usa-radio-focus-color: #2491ff;
-
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-        max-width: 30rem;
-        margin-bottom: 1.5rem;
-      }
-
-      label {
-        display: flex;
-        cursor: pointer;
-        gap: 0.5rem;
-        position: relative;
-      }
-
-      input {
-        position: absolute;
-      }
-
-      label::before {
-        content: " ";
-        display: block;
-        left: 0;
-        height: 1.25rem;
-        border-radius: 99rem;
-        width: 1.25rem;
-        background: #fff;
-        box-shadow: 0 0 0 2px #1b1b1b;
-        flex: 0 0 1.25rem;
-        position: relative;
-        z-index: 1000;
-      }
-
-      label:has(input:checked)::before {
-        background-color: var(--usa-radio-active-color);
-        box-shadow:
-          0 0 0 2px var(--usa-radio-active-color),
-          inset 0 0 0 2px #fff;
-      }
-
-      label:has(input:checked:is(:disabled))::before {
-        background-color: #757575;
-        box-shadow:
-          0 0 0 2px #757575,
-          inset 0 0 0 2px #fff;
-      }
-
-      label:has(input:disabled) {
-        cursor: not-allowed;
-        color: #757575 !important;
-      }
-
-      label:has(input:disabled)::before {
-        background-color: #fff;
-        box-shadow: 0 0 0 2px #757575;
-      }
-      
-      label:has(input:focus)::before {
-        outline: 0.25rem solid var(--usa-radio-focus-color);
-        outline-offset: 0.25rem;
-      }
-
-      :host([tiled]) {
-        gap: 0.5rem;
-      }
-
-      :host([tiled]) label {
-        background-color: #fff;
-        border: 2px solid #c9c9c9;
-        color: #1b1b1b;
-        border-radius: 0.25rem;
-        padding: 0.75rem 1rem 0.75rem 0.75rem;
-      }
-
-      :host([tiled]) label:has(input:checked) {
-        background-color: var(--usa-radio-tiled-bg);
-        border-color: var(--usa-radio-active-color);
-      }
-
-      :host([tiled]) label:has(input:checked:is(:disabled)) {
-        background-color: #fff;
-        border-color: #757575;
-      }
-
-      slot {
-        display: flex;
-      }
-    `,
-                html `
-      <slot name="legend" id="legend" tabindex="-1"></slot>
-
-      <slot></slot>
-    `,
+                css `:host{--usa-radio-active-color:#005ea2;--usa-radio-tiled-bg:rgba(0, 94, 162, 0.1);--usa-radio-focus-color:#2491ff;display:flex;flex-direction:column;gap:1rem;max-width:30rem;margin-bottom:1.5rem}label{display:flex;cursor:pointer;gap:.5rem;position:relative}input{position:absolute}label::before{content:" ";display:block;left:0;height:1.25rem;border-radius:99rem;width:1.25rem;background:#fff;box-shadow:0 0 0 2px #1b1b1b;flex:0 0 1.25rem;position:relative;z-index:1000}label:has(input:checked)::before{background-color:var(--usa-radio-active-color);box-shadow:0 0 0 2px var(--usa-radio-active-color),inset 0 0 0 2px #fff}label:has(input:checked:is(:disabled))::before{background-color:#757575;box-shadow:0 0 0 2px #757575,inset 0 0 0 2px #fff}label:has(input:disabled){cursor:not-allowed;color:#757575!important}label:has(input:disabled)::before{background-color:#fff;box-shadow:0 0 0 2px #757575}label:has(input:focus)::before{outline:.25rem solid var(--usa-radio-focus-color);outline-offset:.25rem}:host([tiled]){gap:.5rem}:host([tiled]) label{background-color:#fff;border:2px solid #c9c9c9;color:#1b1b1b;border-radius:.25rem;padding:.75rem 1rem .75rem .75rem}:host([tiled]) label:has(input:checked){background-color:var(--usa-radio-tiled-bg);border-color:var(--usa-radio-active-color)}:host([tiled]) label:has(input:checked:is(:disabled)){background-color:#fff;border-color:#757575}slot{display:flex}`,
+                html `<slot name="legend" id="legend" tabindex="-1"></slot><slot></slot>`,
             ],
         })];
     let _classDescriptor;

package/target/lib/radio/radio.stories.js

@@ -4,32 +4,7 @@ const meta = {
     title: "usa-radio",
     tags: ["autodocs"],
     render(args) {
-        return html `
-      <usa-radio
-        name="historical-figures"
-        value="frederick-douglass"
-        ?tiled=${args.tiled}
-      >
-        <legend>Select one historical figure</legend>
-
-        <usa-radio-option value="sojourner-truth">
-          Sojourner Truth
-        </usa-radio-option>
-
-        <usa-radio-option value="frederick-douglass">
-          Frederick Douglass
-          <usa-description>This is optional text that can be used to describe the label in more detail.</usa-description>
-        </usa-radio-option>
-
-        <usa-radio-option value="booker-t-washington">
-          Booker T. Washington
-        </usa-radio-option>
-
-        <usa-radio-option value="george-washington-carver" disabled>
-          George Washington Carver
-        </usa-radio-option>
-      </usa-radio>
-    `;
+        return html `<usa-radio name="historical-figures" value="frederick-douglass" ?tiled="${args.tiled}"><legend>Select one historical figure</legend><usa-radio-option value="sojourner-truth">Sojourner Truth</usa-radio-option><usa-radio-option value="frederick-douglass">Frederick Douglass<usa-description>This is optional text that can be used to describe the label in more detail.</usa-description></usa-radio-option><usa-radio-option value="booker-t-washington">Booker T. Washington</usa-radio-option><usa-radio-option value="george-washington-carver" disabled="disabled">George Washington Carver</usa-radio-option></usa-radio>`;
     },
     argTypes: {},
     args: {

package/target/lib/radio/radio.test.js

@@ -3,49 +3,11 @@ import "./radio-option/radio-option.element.js";
 import { assert, fixture, html } from "@open-wc/testing";
 describe("usa-radio", () => {
     it("should be accessible", async () => {
-        const radio = await fixture(html `
-      <usa-radio name="historical-figures" value="frederick-douglass" tiled>
-        <usa-radio-option value="sojourner-truth">
-          Sojourner Truth
-        </usa-radio-option>
-
-        <usa-radio-option value="frederick-douglass">
-          Frederick Douglass
-        </usa-radio-option>
-
-        <usa-radio-option value="booker-t-washington">
-          Booker T. Washington
-        </usa-radio-option>
-
-        <usa-radio-option value="george-washington-carver">
-          George Washington Carver
-        </usa-radio-option>
-      </usa-radio>
-    `);
+        const radio = await fixture(html `<usa-radio name="historical-figures" value="frederick-douglass" tiled><usa-radio-option value="sojourner-truth">Sojourner Truth</usa-radio-option><usa-radio-option value="frederick-douglass">Frederick Douglass</usa-radio-option><usa-radio-option value="booker-t-washington">Booker T. Washington</usa-radio-option><usa-radio-option value="george-washington-carver">George Washington Carver</usa-radio-option></usa-radio>`);
         return assert.isAccessible(radio);
     });
     it("should create local inputs for each option", async () => {
-        const form = await fixture(html `
-      <form>
-        <usa-radio name="historical-figures" value="frederick-douglass">
-          <usa-radio-option value="sojourner-truth">
-            Sojourner Truth
-          </usa-radio-option>
-
-          <usa-radio-option value="frederick-douglass">
-            Frederick Douglass
-          </usa-radio-option>
-
-          <usa-radio-option value="booker-t-washington">
-            Booker T. Washington
-          </usa-radio-option>
-
-          <usa-radio-option value="george-washington-carver">
-            George Washington Carver
-          </usa-radio-option>
-        </usa-radio>
-      </form>
-    `);
+        const form = await fixture(html `<form><usa-radio name="historical-figures" value="frederick-douglass"><usa-radio-option value="sojourner-truth">Sojourner Truth</usa-radio-option><usa-radio-option value="frederick-douglass">Frederick Douglass</usa-radio-option><usa-radio-option value="booker-t-washington">Booker T. Washington</usa-radio-option><usa-radio-option value="george-washington-carver">George Washington Carver</usa-radio-option></usa-radio></form>`);
         const nativeInputs = form.querySelector("usa-radio")?.shadowRoot?.querySelectorAll("input") ??
             [];
         assert.deepEqual(Array.from(nativeInputs).map((input) => input.value), [
@@ -56,27 +18,7 @@ describe("usa-radio", () => {
         ]);
     });
     it("should remove inputs when options are removed", async () => {
-        const form = await fixture(html `
-      <form>
-        <usa-radio name="historical-figures" value="frederick-douglass">
-          <usa-radio-option value="sojourner-truth">
-            Sojourner Truth
-          </usa-radio-option>
-
-          <usa-radio-option value="frederick-douglass">
-            Frederick Douglass
-          </usa-radio-option>
-
-          <usa-radio-option value="booker-t-washington">
-            Booker T. Washington
-          </usa-radio-option>
-
-          <usa-radio-option value="george-washington-carver">
-            George Washington Carver
-          </usa-radio-option>
-        </usa-radio>
-      </form>
-    `);
+        const form = await fixture(html `<form><usa-radio name="historical-figures" value="frederick-douglass"><usa-radio-option value="sojourner-truth">Sojourner Truth</usa-radio-option><usa-radio-option value="frederick-douglass">Frederick Douglass</usa-radio-option><usa-radio-option value="booker-t-washington">Booker T. Washington</usa-radio-option><usa-radio-option value="george-washington-carver">George Washington Carver</usa-radio-option></usa-radio></form>`);
         const options = form.querySelectorAll("usa-radio-option");
         options[2].remove();
         const nativeInputs = form.querySelector("usa-radio")?.shadowRoot?.querySelectorAll("input") ??
@@ -84,27 +26,7 @@ describe("usa-radio", () => {
         assert.deepEqual(Array.from(nativeInputs).map((input) => input.value), ["sojourner-truth", "frederick-douglass", "george-washington-carver"]);
     });
     it("should submit form with default values", async () => {
-        const form = await fixture(html `
-      <form>
-        <usa-radio name="historical-figures" value="frederick-douglass">
-          <usa-radio-option value="sojourner-truth">
-            Sojourner Truth
-          </usa-radio-option>
-
-          <usa-radio-option value="frederick-douglass">
-            Frederick Douglass
-          </usa-radio-option>
-
-          <usa-radio-option value="booker-t-washington">
-            Booker T. Washington
-          </usa-radio-option>
-
-          <usa-radio-option value="george-washington-carver">
-            George Washington Carver
-          </usa-radio-option>
-        </usa-radio>
-      </form>
-    `);
+        const form = await fixture(html `<form><usa-radio name="historical-figures" value="frederick-douglass"><usa-radio-option value="sojourner-truth">Sojourner Truth</usa-radio-option><usa-radio-option value="frederick-douglass">Frederick Douglass</usa-radio-option><usa-radio-option value="booker-t-washington">Booker T. Washington</usa-radio-option><usa-radio-option value="george-washington-carver">George Washington Carver</usa-radio-option></usa-radio></form>`);
         const value = new FormData(form);
         const nativeInputs = form.querySelector("usa-radio")?.shadowRoot?.querySelectorAll("input") ??
             [];
@@ -112,27 +34,7 @@ describe("usa-radio", () => {
         assert.equal(value.get("historical-figures"), "frederick-douglass");
     });
     it("should submit form with changed value", async () => {
-        const form = await fixture(html `
-      <form>
-        <usa-radio name="historical-figures" value="frederick-douglass">
-          <usa-radio-option value="sojourner-truth">
-            Sojourner Truth
-          </usa-radio-option>
-
-          <usa-radio-option value="frederick-douglass">
-            Frederick Douglass
-          </usa-radio-option>
-
-          <usa-radio-option value="booker-t-washington">
-            Booker T. Washington
-          </usa-radio-option>
-
-          <usa-radio-option value="george-washington-carver">
-            George Washington Carver
-          </usa-radio-option>
-        </usa-radio>
-      </form>
-    `);
+        const form = await fixture(html `<form><usa-radio name="historical-figures" value="frederick-douglass"><usa-radio-option value="sojourner-truth">Sojourner Truth</usa-radio-option><usa-radio-option value="frederick-douglass">Frederick Douglass</usa-radio-option><usa-radio-option value="booker-t-washington">Booker T. Washington</usa-radio-option><usa-radio-option value="george-washington-carver">George Washington Carver</usa-radio-option></usa-radio></form>`);
         const nativeInputs = form.querySelector("usa-radio")?.shadowRoot?.querySelectorAll("input") ??
             [];
         nativeInputs[3].click();

package/target/lib/range-slider/range-slider.element.js

@@ -4,58 +4,8 @@ let USARangeSliderElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-range-slider",
             shadowDom: [
-                css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        max-width: 30rem;
-      }
-
-      input {
-        height: 2.5rem;
-        -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
-        width: 100%; /* Specific width is required for Firefox. */
-        background: transparent; /* Otherwise white in Chrome */
-        border-radius: 0;
-        color: #1b1b1b;
-        display: block;
-        margin-top: .5rem;
-      }
-
-      input:focus {
-        outline: .25rem solid #2491ff;
-        outline-offset: 0;
-      }
-
-      input::-webkit-slider-thumb {
-        height: 1.25rem;
-        border-radius: 99rem;
-        width: 1.25rem;
-        background: #f0f0f0;
-        border: 0;
-        box-shadow: 0 0 0 2px #757575;
-        cursor: pointer;
-        -webkit-appearance: none;
-        appearance: none;
-        margin-top: -.19rem;
-      }
-
-      input::-webkit-slider-runnable-track {
-        background-color: #f0f0f0;
-        border-radius: 99rem;
-        border: 1px solid #757575;
-        cursor: pointer;
-        height: 1rem;
-        width: 100%;
-      }
-    `,
-                html `
-      <label>
-        <slot></slot>
-      </label>
-
-      <input type="range">
-    `,
+                css `:host{display:flex;flex-direction:column;max-width:30rem}input{height:2.5rem;-webkit-appearance:none;width:100%;background:0 0;border-radius:0;color:#1b1b1b;display:block;margin-top:.5rem}input:focus{outline:.25rem solid #2491ff;outline-offset:0}input::-webkit-slider-thumb{height:1.25rem;border-radius:99rem;width:1.25rem;background:#f0f0f0;border:0;box-shadow:0 0 0 2px #757575;cursor:pointer;-webkit-appearance:none;appearance:none;margin-top:-.19rem}input::-webkit-slider-runnable-track{background-color:#f0f0f0;border-radius:99rem;border:1px solid #757575;cursor:pointer;height:1rem;width:100%}`,
+                html `<label><slot></slot></label> <input type="range">`,
             ],
         })];
     let _classDescriptor;

package/target/lib/range-slider/range-slider.test.js

@@ -2,30 +2,16 @@ import "./range-slider.element.js";
 import { assert, fixture, html } from "@open-wc/testing";
 describe("usa-range-slider", () => {
     it("should be accessible", async () => {
-        const rangeSlider = await fixture(html `
-      <usa-range-slider name="slider" value="0">Hello World</usa-range-slider>
-    `);
+        const rangeSlider = await fixture(html `<usa-range-slider name="slider" value="0">Hello World</usa-range-slider>`);
         return assert.isAccessible(rangeSlider);
     });
     it("should submit form with default values", async () => {
-        const form = await fixture(html `
-      <form>
-        <usa-range-slider name="slider" value="50">Hello World</usa-range-slider>
-
-        <button>Submit</button>
-      </form>
-    `);
+        const form = await fixture(html `<form><usa-range-slider name="slider" value="50">Hello World</usa-range-slider><button>Submit</button></form>`);
         const value = new FormData(form);
         assert.equal(value.get("slider"), "50");
     });
     it("should update form value as input value changed", async () => {
-        const form = await fixture(html `
-        <form>
-          <usa-range-slider name="slider" value="50">Hello World</usa-range-slider>
-  
-          <button>Submit</button>
-        </form>
-      `);
+        const form = await fixture(html `<form><usa-range-slider name="slider" value="50">Hello World</usa-range-slider><button>Submit</button></form>`);
         const input = form.querySelector("usa-input");
         const nativeInput = input?.shadowRoot?.querySelector("input");
         if (nativeInput) {

package/target/lib/select/select-option/select-option.element.js

@@ -6,11 +6,7 @@ let USASelecOptionElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-select-option",
             shadowDom: [
-                css `
-      :host {
-        display: none;
-      }
-    `,
+                css `:host{display:none}`,
                 html `<slot></slot>`,
             ],
         }), injectable({

package/target/lib/select/select.element.js

@@ -9,55 +9,8 @@ let USASelectElement = (() => {
         }), element({
             tagName: "usa-select",
             shadowDom: [
-                css `
-      :host {
-        display: block;
-        line-height: 1.3;
-        position: relative;
-        width: 100%;
-        max-width: 30rem;
-        margin-bottom: 1.5rem;
-      }
-
-      select {
-        font-size: 1.06rem;
-        appearance: none;
-        border-width: 1px;
-        border-color: #5c5c5c;
-        border-style: solid;
-        border-radius: 0;
-        color: #1b1b1b;
-        display: block;
-        height: 2.5rem;
-        margin-top: 0.5rem;
-        padding: 0.5rem;
-        width: 100%;
-      }
-
-      select:not(:disabled):focus {
-        outline: 0.25rem solid #2491ff;
-        outline-offset: 0;
-      }
-
-      usa-icon {
-        position: absolute;
-        right: 0.5rem;
-        bottom: 12%;
-        height: 1.5rem;
-        width: 1.5rem;
-      }
-    `,
-                html `
-      <usa-icon icon="unfold_more"></usa-icon>
-
-      <label>
-        <div class="label">
-          <slot></slot>
-        </div>
-
-        <select></select>
-      </label>
-    `,
+                css `:host{display:block;line-height:1.3;position:relative;width:100%;max-width:30rem;margin-bottom:1.5rem}select{font-size:1.06rem;appearance:none;border-width:1px;border-color:#5c5c5c;border-style:solid;border-radius:0;color:#1b1b1b;display:block;height:2.5rem;margin-top:.5rem;padding:.5rem;width:100%}select:not(:disabled):focus{outline:.25rem solid #2491ff;outline-offset:0}usa-icon{position:absolute;right:.5rem;bottom:12%;height:1.5rem;width:1.5rem}`,
+                html `<usa-icon icon="unfold_more"></usa-icon><label><div class="label"><slot></slot></div><select></select></label>`,
             ],
         })];
     let _classDescriptor;

package/target/lib/select/select.stories.js

@@ -4,16 +4,7 @@ const meta = {
     title: "usa-select",
     tags: ["autodocs"],
     render() {
-        return html `
-      <usa-select value="third">
-        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-option value="fourth">fourth</usa-select-option>
-      </usa-select>
-    `;
+        return html `<usa-select value="third">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-option value="fourth">fourth</usa-select-option></usa-select>`;
     },
     argTypes: {},
     args: {},

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>`,
             ],
         })];