@noctuatech/uswds 0.1.2 → 0.1.3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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;