@noctuatech/uswds 0.1.0 → 0.1.3

package/target/lib/card/card.stories.js

@@ -10,117 +10,12 @@ export default meta;
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary = {
     render() {
-        return html `
-      <usa-card-group>
-        <usa-card>
-          <usa-card-header>Card</usa-card-header>
-
-          <usa-card-body>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
-            earum tenetur quo cupiditate, eaque qui officia recusandae.
-          </usa-card-body>
-
-          <usa-card-footer>
-            <usa-button>Visit Florida Keys</usa-button>
-          </usa-card-footer>
-        </usa-card>
-
-        <usa-card>
-          <usa-card-media>
-            <img src="./img/built-to-grow--alt.jpg" alt="A placeholder image" />
-          </usa-card-media>
-
-          <usa-card-header>Card with media</usa-card-header>
-
-          <usa-card-body>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
-            earum tenetur quo cupiditate, eaque qui officia recusandae.
-          </usa-card-body>
-
-          <usa-card-footer>
-            <usa-button>Visit Florida Keys</usa-button>
-          </usa-card-footer>
-        </usa-card>
-
-        <usa-card>
-          <usa-card-header>Media with heaer first</usa-card-header>
-
-          <usa-card-media>
-            <img src="./img/built-to-grow--alt.jpg" alt="A placeholder image" />
-          </usa-card-media>
-
-          <usa-card-body>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
-            possimus similique nemo odit doloremque laudantium?
-          </usa-card-body>
-
-          <usa-card-footer>
-            <usa-button>Visit Florida Keys</usa-button>
-          </usa-card-footer>
-        </usa-card>
-
-        <usa-card>
-          <usa-card-media variant="inset">
-            <img src="./img/built-to-grow--alt.jpg" alt="A placeholder image" />
-          </usa-card-media>
-
-          <usa-card-header>Inset media</usa-card-header>
-
-          <usa-card-body>
-            Etiam vitae sodales metus. Fusce id orci dignissim, efficitur risus
-            eget, tempus odio. Donec lectus ante, auctor eget cursus sed,
-            convallis quis magna. Orci varius natoque penatibus et magnis dis
-            parturient montes, nascetur ridiculus mus. Mauris mattis tellus
-            bibendum aliquet malesuada.
-          </usa-card-body>
-
-          <usa-card-footer>
-            <usa-button>Visit Florida Keys</usa-button>
-          </usa-card-footer>
-        </usa-card>
-      </usa-card-group>
-    `;
+        return html `<usa-card-group><usa-card><usa-card-header>Card</usa-card-header><usa-card-body>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.</usa-card-body><usa-card-footer><usa-button>Visit Florida Keys</usa-button></usa-card-footer></usa-card><usa-card><usa-card-media><img src="./img/built-to-grow--alt.jpg" alt="A placeholder image"></usa-card-media><usa-card-header>Card with media</usa-card-header><usa-card-body>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.</usa-card-body><usa-card-footer><usa-button>Visit Florida Keys</usa-button></usa-card-footer></usa-card><usa-card><usa-card-header>Media with heaer first</usa-card-header><usa-card-media><img src="./img/built-to-grow--alt.jpg" alt="A placeholder image"></usa-card-media><usa-card-body>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore possimus similique nemo odit doloremque laudantium?</usa-card-body><usa-card-footer><usa-button>Visit Florida Keys</usa-button></usa-card-footer></usa-card><usa-card><usa-card-media variant="inset"><img src="./img/built-to-grow--alt.jpg" alt="A placeholder image"></usa-card-media><usa-card-header>Inset media</usa-card-header><usa-card-body>Etiam vitae sodales metus. Fusce id orci dignissim, efficitur risus eget, tempus odio. Donec lectus ante, auctor eget cursus sed, convallis quis magna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris mattis tellus bibendum aliquet malesuada.</usa-card-body><usa-card-footer><usa-button>Visit Florida Keys</usa-button></usa-card-footer></usa-card></usa-card-group>`;
     },
 };
 export const Flag = {
     render() {
-        return html `
-      <usa-card-group variant="flag">
-        <usa-card variant="flag">
-          <usa-card-media>
-            <img src="./img/built-to-grow--alt.jpg" alt="A placeholder image" />
-          </usa-card-media>
-
-          <usa-card-header>Card with media</usa-card-header>
-
-          <usa-card-body>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
-            earum tenetur quo cupiditate, eaque qui officia recusandae.
-          </usa-card-body>
-
-          <usa-card-footer>
-            <usa-button>Visit Florida Keys</usa-button>
-          </usa-card-footer>
-        </usa-card>
-
-        <usa-card variant="flag">
-          <usa-card-media variant="inset">
-            <img src="./img/built-to-grow--alt.jpg" alt="A placeholder image" />
-          </usa-card-media>
-
-          <usa-card-header>Card with media</usa-card-header>
-
-          <usa-card-body>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
-            earum tenetur quo cupiditate, eaque qui officia recusandae.
-          </usa-card-body>
-
-          <usa-card-footer>
-            <usa-button>Visit Florida Keys</usa-button>
-          </usa-card-footer>
-        </usa-card>
-      </usa-card-group>
-    `;
+        return html `<usa-card-group variant="flag"><usa-card variant="flag"><usa-card-media><img src="./img/built-to-grow--alt.jpg" alt="A placeholder image"></usa-card-media><usa-card-header>Card with media</usa-card-header><usa-card-body>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.</usa-card-body><usa-card-footer><usa-button>Visit Florida Keys</usa-button></usa-card-footer></usa-card><usa-card variant="flag"><usa-card-media variant="inset"><img src="./img/built-to-grow--alt.jpg" alt="A placeholder image"></usa-card-media><usa-card-header>Card with media</usa-card-header><usa-card-body>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.</usa-card-body><usa-card-footer><usa-button>Visit Florida Keys</usa-button></usa-card-footer></usa-card></usa-card-group>`;
     },
 };
 //# sourceMappingURL=card.stories.js.map

package/target/lib/card/card.test.js

@@ -7,26 +7,7 @@ import "./card-media/card-media.element.js";
 import { assert, fixture, html } from "@open-wc/testing";
 describe("usa-card", () => {
     it("should be accessible", async () => {
-        const card = await fixture(html `
-      <usa-card-group>
-        <usa-card>
-          <usa-card-media>
-            <img alt="A placeholder image" />
-          </usa-card-media>
-
-          <usa-card-header>Card with media</usa-card-header>
-
-          <usa-card-body>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
-            earum tenetur quo cupiditate, eaque qui officia recusandae.
-          </usa-card-body>
-
-          <usa-card-footer>
-            <usa-button>Visit Florida Keys</usa-button>
-          </usa-card-footer>
-        </usa-card>
-      </usa-card-group>
-    `);
+        const card = await fixture(html `<usa-card-group><usa-card><usa-card-media><img alt="A placeholder image"></usa-card-media><usa-card-header>Card with media</usa-card-header><usa-card-body>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.</usa-card-body><usa-card-footer><usa-button>Visit Florida Keys</usa-button></usa-card-footer></usa-card></usa-card-group>`);
         return assert.isAccessible(card);
     });
 });

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

@@ -4,16 +4,8 @@ let USACheckboxGroupElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-checkbox-group",
             shadowDom: [
-                css `
-      :host {
-        display: flex;
-        gap: 0.75rem;
-        flex-direction: column;
-      }
-    `,
-                html `
-      <slot></slot>
-    `,
+                css `:host{display:flex;gap:.75rem;flex-direction:column}`,
+                html `<slot></slot>`,
             ],
         })];
     let _classDescriptor;

package/target/lib/checkbox/checkbox.element.js

@@ -4,118 +4,8 @@ let USACheckboxElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-checkbox",
             shadowDom: [
-                css `
-      * {
-        box-sizing: border-box;
-      }
-
-      :host {
-        display: inline-block;
-        max-width: 30rem;
-        position: relative;
-      }
-
-      :host([tiled]) label {
-        background-color: #fff;
-        border: 2px solid #c9c9c9;
-        border-radius: 0.25rem;
-        color: #1b1b1b;
-        padding: 0.75rem 1rem 0.75rem 0.75rem;
-      }
-
-      label {
-        display: inline-flex;
-        cursor: pointer;
-        font-size: 1.06rem;
-        line-height: 1.3;
-        width: 100%;
-      }
-
-      .checkbox {
-        background: #fff;
-        box-shadow: 0 0 0 2px #1b1b1b;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 1.25rem;
-        min-width: 1.25rem;
-        max-width: 1.25rem;
-        border-radius: 2px;
-        position: relative;
-        margin-right: 0.75rem;
-      }
-
-      input:disabled + .checkbox {
-        background-color: #fff;
-        box-shadow: 0 0 0 2px #757575;
-      }
-
-      input:disabled:is(:checked) + .checkbox {
-        background-color: #757575;
-        box-shadow: 0 0 0 2px #757575;
-      }
-
-      :host([disabled]) label {
-        color: #757575;
-        cursor: not-allowed;
-      }
-
-      input:checked + .checkbox {
-        background-color: #005ea2;
-        box-shadow: 0 0 0 2px #005ea2;
-      }
-      
-      input:checked + .checkbox::after {
-        content: " ";
-        display: block;
-        height: 1rem;
-        width: 0.5rem;
-        border-right: 4px solid rgb(255, 255, 255);
-        border-bottom: 4px solid rgb(255, 255, 255);
-        transform: rotate(45deg) scale(0.65);
-      }
-
-      input {
-        position: absolute;
-      }
-
-      input:focus + .checkbox {
-        outline: 0.25rem solid #2491ff;
-        outline-offset: 0.25rem;
-      }
-
-      .description {
-        display: block;
-        font-size: 0.93rem;
-        margin-top: 0.5rem;
-      }
-
-      .break {
-        flex-basis: 100%;
-        height: 0;
-      }
-
-      :host([tiled]) label:has(input:checked) {
-        background-color: rgba(0, 94, 162, 0.1);
-        border-color: #005ea2;
-      }
-
-      :host([tiled]) label:has(input:checked:is(:disabled)) {
-        background-color: #fff;
-        border-color: #757575;
-      }
-    `,
-                html `
-      <label>
-        <input type="checkbox" tabindex="0"/>
-
-        <div class="checkbox"></div>
-
-        <div class="title">
-          <slot></slot>
-        </div>
-      </label>
-    `,
+                css `*{box-sizing:border-box}:host{display:inline-block;max-width:30rem;position:relative}:host([tiled]) label{background-color:#fff;border:2px solid #c9c9c9;border-radius:.25rem;color:#1b1b1b;padding:.75rem 1rem .75rem .75rem}label{display:inline-flex;cursor:pointer;font-size:1.06rem;line-height:1.3;width:100%}.checkbox{background:#fff;box-shadow:0 0 0 2px #1b1b1b;display:flex;align-items:center;justify-content:center;height:1.25rem;min-width:1.25rem;max-width:1.25rem;border-radius:2px;position:relative;margin-right:.75rem}input:disabled+.checkbox{background-color:#fff;box-shadow:0 0 0 2px #757575}input:disabled:is(:checked)+.checkbox{background-color:#757575;box-shadow:0 0 0 2px #757575}:host([disabled]) label{color:#757575;cursor:not-allowed}input:checked+.checkbox{background-color:#005ea2;box-shadow:0 0 0 2px #005ea2}input:checked+.checkbox::after{content:" ";display:block;height:1rem;width:.5rem;border-right:4px solid #fff;border-bottom:4px solid #fff;transform:rotate(45deg) scale(.65)}input{position:absolute}input:focus+.checkbox{outline:.25rem solid #2491ff;outline-offset:.25rem}.description{display:block;font-size:.93rem;margin-top:.5rem}.break{flex-basis:100%;height:0}:host([tiled]) label:has(input:checked){background-color:rgba(0,94,162,.1);border-color:#005ea2}:host([tiled]) label:has(input:checked:is(:disabled)){background-color:#fff;border-color:#757575}`,
+                html `<label><input type="checkbox" tabindex="0"><div class="checkbox"></div><div class="title"><slot></slot></div></label>`,
             ],
         })];
     let _classDescriptor;

package/target/lib/checkbox/checkbox.stories.js

@@ -10,53 +10,12 @@ export default meta;
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary = {
     render() {
-        return html `
-      <usa-checkbox-group>
-        <legend class="usa-legend">Select any historical figure</legend>
-
-        <usa-checkbox name="historical-figure" value="sojurner-truth">
-          Sojourner Truth
-        </usa-checkbox>
-
-        <usa-checkbox name="historical-figure" value="frederick-douglass">
-          Frederick Douglass
-        </usa-checkbox>
-
-        <usa-checkbox name="historical-figure" value="booker-t-washington">
-          Booker T. Washington
-        </usa-checkbox>
-
-        <usa-checkbox name="historical-figure" value="gw-carver" disabled>
-          George Washington Carver
-        </usa-checkbox>
-      </usa-checkbox-group>
-    `;
+        return html `<usa-checkbox-group><legend class="usa-legend">Select any historical figure</legend><usa-checkbox name="historical-figure" value="sojurner-truth">Sojourner Truth</usa-checkbox><usa-checkbox name="historical-figure" value="frederick-douglass">Frederick Douglass</usa-checkbox><usa-checkbox name="historical-figure" value="booker-t-washington">Booker T. Washington</usa-checkbox><usa-checkbox name="historical-figure" value="gw-carver" disabled="disabled">George Washington Carver</usa-checkbox></usa-checkbox-group>`;
     },
 };
 export const Tiled = {
     render() {
-        return html `
-      <usa-checkbox-group>
-        <legend class="usa-legend">Select any historical figure</legend>
-
-        <usa-checkbox name="historical-figure" value="sojurner-truth" tiled>
-          Sojourner Truth
-          <usa-description>This is optional text that can be used to describe the label in more detail.</usa-description>
-        </usa-checkbox>
-
-        <usa-checkbox name="historical-figure" value="frederick-douglass" tiled>
-          Frederick Douglass
-        </usa-checkbox>
-
-        <usa-checkbox name="historical-figure" value="booker-t-washington" tiled>
-          Booker T. Washington
-        </usa-checkbox>
-
-        <usa-checkbox name="historical-figure" value="gw-carver" tiled disabled>
-          George Washington Carver
-        </usa-checkbox>
-      </usa-checkbox-group>
-    `;
+        return html `<usa-checkbox-group><legend class="usa-legend">Select any historical figure</legend><usa-checkbox name="historical-figure" value="sojurner-truth" tiled>Sojourner Truth<usa-description>This is optional text that can be used to describe the label in more detail.</usa-description></usa-checkbox><usa-checkbox name="historical-figure" value="frederick-douglass" tiled>Frederick Douglass</usa-checkbox><usa-checkbox name="historical-figure" value="booker-t-washington" tiled>Booker T. Washington</usa-checkbox><usa-checkbox name="historical-figure" value="gw-carver" tiled disabled="disabled">George Washington Carver</usa-checkbox></usa-checkbox-group>`;
     },
 };
 //# sourceMappingURL=checkbox.stories.js.map

package/target/lib/checkbox/checkbox.test.js

@@ -2,32 +2,16 @@ import "./checkbox.element.js";
 import { assert, fixture, html } from "@open-wc/testing";
 describe("usa-checkbox", () => {
     it("should be accessible", async () => {
-        const form = await fixture(html `
-      <usa-checkbox name="fname" value="Foo">Hello World</usa-checkbox>
-    `);
+        const form = await fixture(html `<usa-checkbox name="fname" value="Foo">Hello World</usa-checkbox>`);
         return assert.isAccessible(form);
     });
     it("should submit form with default values", async () => {
-        const form = await fixture(html `
-      <form>
-        <usa-checkbox name="enabled" value="test" checked>
-          Hello World
-        </usa-checkbox>
-
-        <button>Submit</button>
-      </form>
-    `);
+        const form = await fixture(html `<form><usa-checkbox name="enabled" value="test" checked="checked">Hello World</usa-checkbox><button>Submit</button></form>`);
         const value = new FormData(form);
         assert.equal(value.get("enabled"), "test");
     });
     it("should update form value as input value changed", async () => {
-        const form = await fixture(html `
-      <form>
-        <usa-checkbox name="enabled" value="test">Hello World</usa-checkbox>
-
-        <button>Submit</button>
-      </form>
-    `);
+        const form = await fixture(html `<form><usa-checkbox name="enabled" value="test">Hello World</usa-checkbox><button>Submit</button></form>`);
         const checkbox = form.querySelector("usa-checkbox");
         const nativeInput = checkbox?.shadowRoot?.querySelector("input");
         if (nativeInput) {
@@ -37,15 +21,7 @@ describe("usa-checkbox", () => {
         assert.equal(value.get("enabled"), "test");
     });
     it("should not submit when not valid", async () => {
-        const form = await fixture(html `
-      <form>
-        <usa-checkbox name="enabled" value="test" required>
-          Hello World
-        </usa-checkbox>
-
-        <button>Submit</button>
-      </form>
-    `);
+        const form = await fixture(html `<form><usa-checkbox name="enabled" value="test" required>Hello World</usa-checkbox><button>Submit</button></form>`);
         assert.equal(form.checkValidity(), false);
     });
 });

package/target/lib/collection/collection-item/collection-item.element.js

@@ -4,46 +4,8 @@ let USACollectionItemElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-collection-item",
             shadowDom: [
-                css `
-      :host {
-        display: flex;
-        gap: 1rem;
-      }
-
-      .content {
-        display: flex;
-        flex-direction: column;
-      }
-
-      slot[name="heading"]::slotted(*) {
-        font-size: 1.13rem;
-        line-height: 1.3;
-        margin-bottom: 0;
-        margin-top: 0;
-      }
-
-      .description {
-        margin-bottom: .5rem;
-        margin-top: .5rem;
-      }
-    `,
-                html `
-      <slot name="img"></slot>
-
-      <div class="content">
-        <div class="heading">
-          <slot name="heading"></slot>
-        </div>
-
-        <div class="description">
-          <slot name="description"></slot>
-        </div>
-
-        <div class="slots">
-          <slot name="tags"></slot>
-        </div>
-      </div>
-    `,
+                css `:host{display:flex;gap:1rem}.content{display:flex;flex-direction:column}slot[name=heading]::slotted(*){font-size:1.13rem;line-height:1.3;margin-bottom:0;margin-top:0}.description{margin-bottom:.5rem;margin-top:.5rem}`,
+                html `<slot name="img"></slot><div class="content"><div class="heading"><slot name="heading"></slot></div><div class="description"><slot name="description"></slot></div><div class="slots"><slot name="tags"></slot></div></div>`,
             ],
         })];
     let _classDescriptor;

package/target/lib/collection/collection-item/collection-item.test.js

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

package/target/lib/collection/collection.element.js

@@ -4,16 +4,8 @@ let USACollectionElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-collection",
             shadowDom: [
-                css `
-      :host {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-        gap: 2rem;
-      }
-    `,
-                html `
-      <slot></slot>
-    `,
+                css `:host{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}`,
+                html `<slot></slot>`,
             ],
         })];
     let _classDescriptor;

package/target/lib/collection/collection.stories.js

@@ -4,69 +4,7 @@ const meta = {
     title: "usa-collection",
     tags: ["autodocs"],
     render() {
-        return html `
-      <usa-collection>
-        <usa-collection-item>
-          <h4 slot="heading">
-            <usa-link href="#">Gears of Government President's Award winners</usa-link>
-          </h4>
-
-          <div slot="description">
-            Today, the Administration announces the winners of the Gears of Government President's Award. This program recognizes the contributions of individuals and teams across the federal workforce who make a profound difference in the lives of the American people.
-          </div>
-
-          <usa-tag slot="tags" type="new">NEW</usa-tag>
-          <usa-tag slot="tags">PMA</usa-tag>
-          <usa-tag slot="tags">OMB</usa-tag>
-        </usa-collection-item>
-
-        <usa-collection-item>
-          <img height="80" width="80" src="/assets/img/gog-logo.png" slot="img"/>
-
-          <h4 slot="heading">
-            <usa-link href="#">Gears of Government President's Award winners</usa-link>
-          </h4>
-
-          <div slot="description">
-            Today, the Administration announces the winners of the Gears of Government President's Award. This program recognizes the contributions of individuals and teams across the federal workforce who make a profound difference in the lives of the American people.
-          </div>
-
-          <usa-tag slot="tags" type="new">NEW</usa-tag>
-          <usa-tag slot="tags">PMA</usa-tag>
-          <usa-tag slot="tags">OMB</usa-tag>
-        </usa-collection-item>
-
-        <usa-collection-item>
-          <h4 slot="heading">
-            <usa-link href="#">Women-owned small business dashboard</usa-link>
-          </h4>
-
-          <div slot="description">
-            In honor of National Women's Small Business Month, we've partnered with SBA's Office of Government Contracting and Business Development and Office of Program Performance, Analysis, and Evaluation to highlight the Women-Owned Small Businesses (WOSBs) data dashboard!
-          </div>
-
-          <usa-tag slot="tags" type="new">NEW</usa-tag>
-          <usa-tag slot="tags">PMA</usa-tag>
-          <usa-tag slot="tags">OMB</usa-tag>
-        </usa-collection-item>
-
-        <usa-collection-item>
-          <img height="52" width="80" src="/assets/img/wosb1.jpg" slot="img"/>
-
-          <h4 slot="heading">
-            <usa-link href="#">Women-owned small business dashboard</usa-link>
-          </h4>
-          
-          <div slot="description">
-            In honor of National Women's Small Business Month, we've partnered with SBA's Office of Government Contracting and Business Development and Office of Program Performance, Analysis, and Evaluation to highlight the Women-Owned Small Businesses (WOSBs) data dashboard!
-          </div>
-
-          <usa-tag slot="tags" type="new">NEW</usa-tag>
-          <usa-tag slot="tags">PMA</usa-tag>
-          <usa-tag slot="tags">OMB</usa-tag>
-        </usa-collection-item>
-      </usa-collection>
-    `;
+        return html `<usa-collection><usa-collection-item><h4 slot="heading"><usa-link href="#">Gears of Government President's Award winners</usa-link></h4><div slot="description">Today, the Administration announces the winners of the Gears of Government President's Award. This program recognizes the contributions of individuals and teams across the federal workforce who make a profound difference in the lives of the American people.</div><usa-tag slot="tags" type="new">NEW</usa-tag><usa-tag slot="tags">PMA</usa-tag><usa-tag slot="tags">OMB</usa-tag></usa-collection-item><usa-collection-item><img height="80" width="80" src="/assets/img/gog-logo.png" slot="img"><h4 slot="heading"><usa-link href="#">Gears of Government President's Award winners</usa-link></h4><div slot="description">Today, the Administration announces the winners of the Gears of Government President's Award. This program recognizes the contributions of individuals and teams across the federal workforce who make a profound difference in the lives of the American people.</div><usa-tag slot="tags" type="new">NEW</usa-tag><usa-tag slot="tags">PMA</usa-tag><usa-tag slot="tags">OMB</usa-tag></usa-collection-item><usa-collection-item><h4 slot="heading"><usa-link href="#">Women-owned small business dashboard</usa-link></h4><div slot="description">In honor of National Women's Small Business Month, we've partnered with SBA's Office of Government Contracting and Business Development and Office of Program Performance, Analysis, and Evaluation to highlight the Women-Owned Small Businesses (WOSBs) data dashboard!</div><usa-tag slot="tags" type="new">NEW</usa-tag><usa-tag slot="tags">PMA</usa-tag><usa-tag slot="tags">OMB</usa-tag></usa-collection-item><usa-collection-item><img height="52" width="80" src="/assets/img/wosb1.jpg" slot="img"><h4 slot="heading"><usa-link href="#">Women-owned small business dashboard</usa-link></h4><div slot="description">In honor of National Women's Small Business Month, we've partnered with SBA's Office of Government Contracting and Business Development and Office of Program Performance, Analysis, and Evaluation to highlight the Women-Owned Small Businesses (WOSBs) data dashboard!</div><usa-tag slot="tags" type="new">NEW</usa-tag><usa-tag slot="tags">PMA</usa-tag><usa-tag slot="tags">OMB</usa-tag></usa-collection-item></usa-collection>`;
     },
     argTypes: {},
     args: {},

package/target/lib/collection/collection.test.js

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

package/target/lib/combo-box/combo-box-option/combo-box-option.element.d.ts

@@ -6,7 +6,6 @@ declare global {
 export declare class USAComboBoxOptionElement extends HTMLElement {
     #private;
     accessor value: string;
-    constructor();
     attributeChangedCallback(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/target/lib/combo-box/combo-box-option/combo-box-option.element.js

@@ -1,13 +1,22 @@
 import { __esDecorate, __runInitializers } from "tslib";
 import { inject, injectable } from "@joist/di";
-import { attr, element, html } from "@joist/element";
+import { attr, css, element, html, query } from "@joist/element";
 import { COMBO_BOX_CTX } from "../context.js";
+const template = document.createElement("template");
+template.innerHTML = /*html*/ `
+  <li tabindex="-1" role="option">
+    <slot></slot>
+  </li>
+`;
 let USAComboBoxOptionElement = (() => {
     let _classDecorators = [injectable({
             name: "usa-combo-box-option-ctx",
         }), element({
             tagName: "usa-combo-box-option",
-            shadowDom: [html `<slot></slot>`],
+            shadowDom: [
+                css `:host{display:flex;align-items:center;gap:.5rem;padding:.5rem}`,
+                html `<slot></slot>`,
+            ],
         })];
     let _classDescriptor;
     let _classExtraInitializers = [];
@@ -30,24 +39,24 @@ let USAComboBoxOptionElement = (() => {
         #value_accessor_storage = __runInitializers(this, _value_initializers, "");
         get value() { return this.#value_accessor_storage; }
         set value(value) { this.#value_accessor_storage = value; }
-        #li = (__runInitializers(this, _value_extraInitializers), document.createElement("li"));
+        #listItem = (__runInitializers(this, _value_extraInitializers), template.content.cloneNode(true));
+        #li = query("li", this.#listItem);
+        #slot = query("slot", this.#listItem);
         #ctx = inject(COMBO_BOX_CTX);
-        constructor() {
-            super();
-            this.#li.tabIndex = -1;
-        }
         attributeChangedCallback() {
-            this.#li.dataset.value = this.value;
-            this.#li.textContent = this.value;
+            const value = this.value.split(" ").join("-").toLocaleLowerCase();
+            this.#li().dataset.value = this.value;
+            this.#slot({ name: value });
+            this.slot = value;
         }
         connectedCallback() {
             const ctx = this.#ctx();
-            ctx.addOption(this.#li);
+            ctx.addOption(this.#li());
         }
         disconnectedCallback() {
             const ctx = this.#ctx();
-            ctx.removeOption(this.#li);
-            this.#li.remove();
+            ctx.removeOption(this.#li());
+            this.#li().remove();
         }
     };
     return USAComboBoxOptionElement = _classThis;

package/target/lib/combo-box/combo-box-option/combo-box-option.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"combo-box-option.element.js","sourceRoot":"","sources":["../../../../src/lib/combo-box/combo-box-option/combo-box-option.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAO,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;IAejC,wBAAwB;4BAPpC,UAAU,CAAC;YACV,IAAI,EAAE,0BAA0B;SACjC,CAAC,EACD,OAAO,CAAC;YACP,OAAO,EAAE,sBAAsB;YAC/B,SAAS,EAAE,CAAC,IAAI,CAAA,eAAe,CAAC;SACjC,CAAC;;;;sBAC4C,WAAW;;;;wCAAnB,SAAQ,WAAW;;;;iCACtD,IAAI,EAAE;YACP,oKAAS,KAAK,6BAAL,KAAK,qFAAM;YAFtB,6KA+BC;;;YA/BY,uDAAwB;;QAEnC,uEAAiB,EAAE,EAAC;QAApB,IAAS,KAAK,2CAAM;QAApB,IAAS,KAAK,iDAAM;QAEpB,GAAG,uDAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,EAAC;QACnC,IAAI,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;QAE7B;YACE,KAAK,EAAE,CAAC;YAER,IAAI,CAAC,GAAG,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;QACzB,CAAC;QAED,wBAAwB;YACtB,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;YACpC,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC;QACpC,CAAC;QAED,iBAAiB;YACf,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;YAExB,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC1B,CAAC;QAED,oBAAoB;YAClB,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;YAExB,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAE3B,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC;QACpB,CAAC;;;;SA9BU,wBAAwB"}
+{"version":3,"file":"combo-box-option.element.js","sourceRoot":"","sources":["../../../../src/lib/combo-box/combo-box-option/combo-box-option.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEjE,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAQ9C,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;AAEpD,QAAQ,CAAC,SAAS,GAAG,QAAQ,CAAC;;;;CAI7B,CAAC;IAmBW,wBAAwB;4BAjBpC,UAAU,CAAC;YACV,IAAI,EAAE,0BAA0B;SACjC,CAAC,EACD,OAAO,CAAC;YACP,OAAO,EAAE,sBAAsB;YAC/B,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;KAOF;gBACD,IAAI,CAAA,eAAe;aACpB;SACF,CAAC;;;;sBAC4C,WAAW;;;;wCAAnB,SAAQ,WAAW;;;;iCACtD,IAAI,EAAE;YACP,oKAAS,KAAK,6BAAL,KAAK,qFAAM;YAFtB,6KAgCC;;;YAhCY,uDAAwB;;QAEnC,uEAAiB,EAAE,EAAC;QAApB,IAAS,KAAK,2CAAM;QAApB,IAAS,KAAK,iDAAM;QAEpB,SAAS,uDAAG,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAkB,EAAC;QAC9D,GAAG,GAAG,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QAClC,KAAK,GAAG,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QACtC,IAAI,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;QAE7B,wBAAwB;YACtB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,iBAAiB,EAAE,CAAC;YAElE,IAAI,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;YAEtC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;YAE5B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,CAAC;QAED,iBAAiB;YACf,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;YAExB,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;QAC5B,CAAC;QAED,oBAAoB;YAClB,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;YAExB,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;YAE7B,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,EAAE,CAAC;QACtB,CAAC;;;;SA/BU,wBAAwB"}