@noctuatech/uswds 0.1.0 → 0.1.3

package/target/lib/modal/modal-heading/modal-heading.element.js

@@ -4,30 +4,8 @@ let USAModalHeadingElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-modal-heading",
             shadowDom: [
-                css `
-      :host {
-        font-family:
-          Merriweather Web,
-          Georgia,
-          Cambria,
-          Times New Roman,
-          Times,
-          serif !important;
-
-        font-size: 1.22rem;
-      }
-
-      h2 {
-        margin-top: 0;
-        line-height: 1.4;
-        font-size: 1.45rem;
-      }
-    `,
-                html `
-      <h2>
-        <slot></slot>
-      </h2>
-    `,
+                css `:host{font-family:Merriweather Web,Georgia,Cambria,Times New Roman,Times,serif!important;font-size:1.22rem}h2{margin-top:0;line-height:1.4;font-size:1.45rem}`,
+                html `<h2><slot></slot></h2>`,
             ],
         })];
     let _classDescriptor;

package/target/lib/modal/modal-heading/modal-heading.test.js

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

package/target/lib/modal/modal.element.js

@@ -4,39 +4,8 @@ let USAModalElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-modal",
             shadowDom: [
-                css `
-      * {
-        box-sizing: border-box;
-      }
-
-      :host {
-        display: contents;
-      }
-
-      dialog {
-        border: none;
-        font-size: 1.06rem;
-        line-height: 1.5;
-        border-radius: 0.5rem;
-        background: #fff;
-        color: #1b1b1b;
-        max-width: 30rem;
-        padding-top: 4rem;
-        padding-left: 4rem;
-        padding-right: 4rem;
-        padding-bottom: 2rem;
-        width: 100%;
-      }
-
-      ::backdrop {
-        background: rgba(0, 0, 0, 0.7);
-      }
-    `,
-                html `
-      <dialog>
-        <slot></slot>
-      </dialog>
-    `,
+                css `*{box-sizing:border-box}:host{display:contents}dialog{border:none;font-size:1.06rem;line-height:1.5;border-radius:.5rem;background:#fff;color:#1b1b1b;max-width:30rem;padding-top:4rem;padding-left:4rem;padding-right:4rem;padding-bottom:2rem;width:100%}::backdrop{background:rgba(0,0,0,.7)}`,
+                html `<dialog><slot></slot></dialog>`,
             ],
         })];
     let _classDescriptor;

package/target/lib/modal/modal.stories.js

@@ -4,24 +4,7 @@ const meta = {
     title: "usa-modal",
     tags: ["autodocs"],
     render() {
-        return html `
-      <usa-button modal-target="mymodal">Open Modal</usa-button>
-
-      <usa-modal id="mymodal">
-        <usa-modal-close></usa-modal-close>
-
-        <usa-modal-heading>
-          Are you sure you want to continue?
-        </usa-modal-heading>
-
-        <usa-input placeholder="foo@email.com" autofocus>
-          Enter your email to continue
-        </usa-input>
-
-        <usa-button modal-action="confirm">Yes I am sure</usa-button>
-        <usa-button modal-action="cancel" variant="outline">Cancel</usa-button>
-      </usa-modal>
-    `;
+        return html `<usa-button modal-target="mymodal">Open Modal</usa-button><usa-modal id="mymodal"><usa-modal-close></usa-modal-close><usa-modal-heading>Are you sure you want to continue?</usa-modal-heading><usa-input placeholder="foo@email.com" autofocus>Enter your email to continue</usa-input><usa-button modal-action="confirm">Yes I am sure</usa-button><usa-button modal-action="cancel" variant="outline">Cancel</usa-button></usa-modal>`;
     },
     argTypes: {},
     args: {},

package/target/lib/modal/modal.test.js

@@ -4,17 +4,7 @@ import "./modal-close/modal-close.element.js";
 import { assert, fixture, html } from "@open-wc/testing";
 describe("usa-modal", () => {
     it("should be accessible", async () => {
-        const modal = await fixture(html `
-      <usa-modal open>
-        <usa-modal-close></usa-modal-close>
-
-        <usa-modal-heading>
-          Are you sure you want to continue?
-        </usa-modal-heading>
-
-        <p>This is some other example of content</p>
-      </usa-modal>
-    `);
+        const modal = await fixture(html `<usa-modal open><usa-modal-close></usa-modal-close><usa-modal-heading>Are you sure you want to continue?</usa-modal-heading><p>This is some other example of content</p></usa-modal>`);
         return assert.isAccessible(modal);
     });
 });

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

@@ -8,22 +8,8 @@ let USARadioOptionElement = (() => {
         }), element({
             tagName: "usa-radio-option",
             shadowDom: [
-                css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        margin-top: 0.05rem;
-      }
-    `,
-                html `
-      <!-- This label will be moved to the shadow dom of its parent -->
-      <label>
-        <input type="radio" tabindex="0" />
-        <slot name="reserved"></slot>
-      </label>
-
-      <slot></slot>
-    `,
+                css `:host{display:flex;flex-direction:column;margin-top:.05rem}`,
+                html `<label><input type="radio" tabindex="0"><slot name="reserved"></slot></label><slot></slot>`,
             ],
         })];
     let _classDescriptor;

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

@@ -3,11 +3,7 @@ import "./radio-option.element.js";
 import { assert, fixture, html } from "@open-wc/testing";
 describe("usa-radio-option", () => {
     it("should map value to slot", async () => {
-        const radio = await fixture(html `
-      <usa-radio>
-        <usa-radio-option value="first">First</usa-radio-option>
-      </usa-radio>
-    `);
+        const radio = await fixture(html `<usa-radio><usa-radio-option value="first">First</usa-radio-option></usa-radio>`);
         const option = radio.querySelectorAll("usa-radio-option");
         assert.equal(option[0].value, option[0].slot);
     });

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: {},