@mdn/fred 0.1.0 → 0.2.0

package/components/live-sample-result/element.css

@@ -1,3 +1,4 @@
+@import url("../global/global.css");
 @import url("../code-example/common.css");
 
 .code-example {

package/components/live-sample-result/element.js

@@ -75,6 +75,8 @@ export class MDNLiveSampleResult extends L10nMixin(LitElement) {
     }
     const playUrl = new URL("/en-US/play", location.href);
     playUrl.search = new URL(this._runnerSrc).search;
+    if (this.srcPrefix)
+      playUrl.searchParams.append("srcPrefix", this.srcPrefix);
     this.breakoutLink = playUrl.href;
   }
 
@@ -92,7 +94,11 @@ export class MDNLiveSampleResult extends L10nMixin(LitElement) {
       <div class="code-example">
         <div class="example-header">
           ${this.breakoutLink
-            ? html`<mdn-button variant="secondary" href=${this.breakoutLink}
+            ? html`<mdn-button
+                variant="secondary"
+                href=${this.breakoutLink}
+                target="_blank"
+                rel="opener"
                 >${this.l10n`Play`}</mdn-button
               >`
             : nothing}
@@ -104,7 +110,9 @@ export class MDNLiveSampleResult extends L10nMixin(LitElement) {
           .sandbox=${this.sandbox}
           .srcPrefix=${this.srcPrefix}
           style=${styleMap({
-            height: this.height ? this.height + "px" : undefined,
+            height: this.height
+              ? `${this.height}${/[0-9]$/.test(this.height) ? "px" : ""}`
+              : undefined,
           })}
         ></mdn-play-runner>
       </div>

package/components/logo/server.css

@@ -1,3 +1,8 @@
+.logo {
+  display: block;
+  padding: 0.5rem;
+}
+
 .logo__image {
   display: block;
 }

package/components/mandala/server.css

@@ -1,6 +1,6 @@
 .mandala {
   svg {
-    font-size: 1.5rem;
+    font-size: var(--font-size-large);
     font-weight: 300;
     user-select: none;
   }
@@ -26,6 +26,6 @@
   }
 
   textPath[href="#circle5"] {
-    font-size: 1rem;
+    font-size: var(--font-size-normal);
   }
 }

package/components/media/index.css

@@ -19,3 +19,6 @@
 @custom-media --screen-xlarge-and-narrower (width <= 1441px);
 
 @custom-media --screen-xxlarge (1441px < width);
+
+@custom-media --screen-menu-full (width > 1006px);
+@custom-media --screen-menu-hamburger (width <= 1006px);

package/components/menu/base.css

@@ -113,14 +113,14 @@
   dl {
     display: grid;
 
-    row-gap: 0.825rem;
+    row-gap: var(--font-size-small);
     align-content: start;
 
     margin: 0;
   }
 
   dt {
-    font-size: 0.825rem;
+    font-size: var(--font-size-small);
 
     color: var(--color-text-secondary);
 
@@ -154,18 +154,47 @@
   }
 }
 
-/* Featured */
+/* Icon */
 
-.menu__panel-featured {
-  color: tomato;
+.menu__panel-icon {
+  display: inline-flex;
+  column-gap: 0.5rem;
+  align-items: center;
 
-  a {
-    display: flex;
-    column-gap: 0.25rem;
-    align-items: center;
+  &::before {
+    display: inline-block;
+
+    width: 1.25rem;
+    height: 1.25rem;
+
+    content: "";
+
+    background-color: currentcolor;
+
+    mask-size: cover;
+  }
+
+  &[data-icon="circle-play"]::before {
+    mask-image: url("../icon/circle-play.svg");
+  }
+
+  &[data-icon="shield-check"]::before {
+    mask-image: url("../icon/shield-check.svg");
+  }
+
+  &[data-icon="mdn-m"]::before {
+    mask-image: url("../icon/mdn-m.svg");
+  }
+
+  &[data-icon="chart-no-axes-combined"]::before {
+    mask-image: url("../icon/chart-no-axes-combined.svg");
+  }
+
+  &[data-icon="users"]::before {
+    mask-image: url("../icon/users.svg");
   }
 
-  svg {
-    fill: currentcolor;
+  &[data-icon="github"]::before {
+    mask-image: url("../icon/social/github.svg");
   }
 }

package/components/menu/desktop.css

@@ -1,6 +1,6 @@
 /* Desktop */
 
-@media (width > 1006px) {
+@media (--screen-menu-full) {
   .menu {
     --menu-button-padding: 0.5rem 0.7rem;
 

package/components/menu/mobile.css

@@ -1,6 +1,6 @@
 /* Mobile */
 
-@media (width <= 1006px) {
+@media (--screen-menu-hamburger) {
   .menu {
     --menu-button-padding: 0.9rem 0.7rem;
   }

package/components/menu/server.js

@@ -263,7 +263,7 @@ export class Menu extends ServerComponent {
                         <a
                           href=${`/${context.locale}/docs/Web/JavaScript/Reference/Global_Objects`}
                         >
-                          Built-in objects
+                          Standard built-in objects
                         </a>
                       </li>
                       <li>
@@ -657,24 +657,22 @@ export class Menu extends ServerComponent {
             <div class="menu__panel" slot="dropdown">
               <p class="menu__panel-title">Discover our tools</p>
               <div class="menu__panel-content">
-                <ul class="menu__panel-featured">
+                <ul>
                   <li>
-                    <a href=${`/en-US/play`}>
-                      <svg viewBox="0 -960 960 960" width="24" height="24">
-                        <path
-                          d="m426-334 191.5-122.5q13-8.45 13-23.48 0-15.02-13-23.52L426-626q-14-9-28.5-1.25T383-602.5v245q0 17 14.5 24.75T426-334Zm54 244q-80.91 0-152.07-30.76-71.15-30.77-123.79-83.5Q151.5-257 120.75-328.09 90-399.17 90-480q0-80.91 30.76-152.07 30.77-71.15 83.5-123.79Q257-808.5 328.09-839.25 399.17-870 480-870q80.91 0 152.07 30.76 71.15 30.77 123.79 83.5Q808.5-703 839.25-631.91 870-560.83 870-480q0 80.91-30.76 152.07-30.77 71.15-83.5 123.79Q703-151.5 631.91-120.75 560.83-90 480-90Zm0-75q131.5 0 223.25-91.75T795-480q0-131.5-91.75-223.25T480-795q-131.5 0-223.25 91.75T165-480q0 131.5 91.75 223.25T480-165Zm0-315Z"
-                        />
-                      </svg>
+                    <a
+                      class="menu__panel-icon"
+                      data-icon="circle-play"
+                      href=${`/en-US/play`}
+                    >
                       Playground
                     </a>
                   </li>
                   <li>
-                    <a href=${`/en-US/observatory`}>
-                      <svg viewBox="0 -960 960 960" width="24" height="24">
-                        <path
-                          d="m439-450-57.5-57.5Q370.18-519 355.09-519t-26.59 11.5Q317-496 317-480.75T328.5-454l84 84.5q11.32 11.5 26.41 11.5t26.59-11.5l167-167Q644-548 644-563.25T632.5-590q-11.5-11.5-26.75-11.5T579-590L439-450Zm41 356q-6.58 0-12.22-1-5.64-1-11.28-3-132-44.5-209.75-162.75T169-516.23V-701.5q0-23.48 13.52-42.26 13.53-18.79 34.98-27.24l236-89q13.25-5 26.5-5t26.5 5l236 89q21.45 8.45 34.98 27.24Q791-724.98 791-701.5v185.27q0 137.23-77.75 255.48T503.5-98q-5.64 2-11.28 3T480-94Zm0-74.5q102.5-33 169.25-130.6Q716-396.71 716-516v-185.61L480-790l-236 88.39V-516q0 119.29 66.75 216.9Q377.5-201.5 480-168.5Zm0-311Z"
-                        />
-                      </svg>
+                    <a
+                      class="menu__panel-icon"
+                      data-icon="shield-check"
+                      href=${`/en-US/observatory`}
+                    >
                       HTTP Observatory
                     </a>
                   </li>
@@ -721,51 +719,42 @@ export class Menu extends ServerComponent {
             <div class="menu__panel" slot="dropdown">
               <p class="menu__panel-title">Get to know MDN better</p>
               <div class="menu__panel-content">
-                <ul class="menu__panel-featured">
+                <ul>
                   <li>
-                    <a href=${`/en-US/about`}>
-                      <svg width="24" height="24" viewBox="0 0 24 24">
-                        <path
-                          d="M9.4 0 2.81 21.17H.12L6.69 0H9.4Zm2.38 0v21.17H9.4V0h2.4Zm9.27 0-6.56 21.17H11.8L18.36 0h2.69Zm2.39 0v21.17h-2.4V0h2.4Z"
-                        />
-                      </svg>
+                    <a
+                      class="menu__panel-icon"
+                      data-icon="mdn-m"
+                      href=${`/en-US/about`}
+                    >
                       About MDN
                     </a>
                   </li>
                   <li>
-                    <a href=${`/en-US/advertising`}>
-                      <svg viewBox="0 -960 960 960" width="24" height="24">
-                        <path
-                          d="M160-122.5q-15.5 0-26.5-11t-11-26.5v-39q0-15.5 11-26.5t26.5-11q15.5 0 26.5 11t11 26.5v39q0 15.5-11 26.5t-26.5 11Zm160 0q-15.5 0-26.5-11t-11-26.5v-219q0-15.5 11-26.5t26.5-11q15.5 0 26.5 11t11 26.5v219q0 15.5-11 26.5t-26.5 11Zm160 0q-15.5 0-26.5-11t-11-26.5v-139q0-15.5 11-26.25T480-336q15.5 0 26.5 10.75t11 26.25v139q0 15.5-11 26.5t-26.5 11Zm160 0q-15.5 0-26.5-11t-11-26.5v-199q0-15.5 11-26.5t26.5-11q15.5 0 26.5 11t11 26.5v199q0 15.5-11 26.5t-26.5 11Zm160 0q-15.5 0-26.5-11t-11-26.5v-359q0-15.5 11-26.5t26.5-11q15.5 0 26.5 11t11 26.5v359q0 15.5-11 26.5t-26.5 11ZM560-482q-15 0-28.25-5.5t-24.75-16l-107-107L186.5-397q-11.5 11.5-26.75 11T133-398q-10.5-11.5-10.25-26.5T133.5-450L347-663.5q11.5-11.5 24.75-16.5t28.25-5q15 0 28.75 5T453-663.5l107 107L773.5-770q11.5-11.5 26.75-11T827-769q10.5 11.5 10.25 26.5T826.5-717L613-503.5q-10.5 10.5-24.25 16T560-482Z"
-                        />
-                      </svg>
+                    <a
+                      class="menu__panel-icon"
+                      data-icon="chart-no-axes-combined"
+                      href=${`/en-US/advertising`}
+                    >
                       Advertise with us
                     </a>
                   </li>
                 </ul>
-                <ul class="menu__panel-featured">
+                <ul>
                   <li>
-                    <a href=${`/en-US/community`}>
-                      <svg viewBox="0 -960 960 960" width="24" height="24">
-                        <path
-                          d="M54.5-279.03q0-32.97 16.75-60.22t45.27-41.76Q177.5-411 240-426.25q62.5-15.25 126-15.25t125.75 15.25Q554-411 614.98-381.01q28.52 14.51 45.27 41.76Q677-312 677-279.03V-248q0 30.94-22.03 52.97Q632.94-173 602-173H129.5q-30.94 0-52.97-22.03Q54.5-217.06 54.5-248v-31.03ZM830.5-173h-99q10-17 15.25-36t5.25-39v-35q0-43.65-22.5-83.82Q707-407 663-434.5q48.5 6 91.25 19.75t80.25 34.25Q869-362 887.25-338t18.25 52v37.81q0 31.19-22.03 53.19-22.03 22-52.97 22ZM366-479q-64 0-109-45t-45-109q0-64 45-109t109-45q64 0 109 45t45 109q0 64-45 109t-109 45Zm382-154.5q0 63.53-45 108.76-45 45.24-109 45.24-9.5 0-25.18-2.34-15.68-2.35-25.82-5.16 26.52-30.69 40.76-68.1Q598-592.5 598-633.25q0-40.75-14.25-78.5T543-780q12.5-4.5 25.5-5.75T594-787q64 0 109 45.09t45 108.41ZM129.5-248H602v-31q0-11.19-5.5-20.34-5.5-9.16-15-14.16Q528-340 474.33-353.25 420.65-366.5 366-366.5q-54.82 0-108.66 13.25Q203.5-340 150-313.5q-9.5 5-15 14.16-5.5 9.15-5.5 20.34v31Zm236.44-306q32.56 0 55.81-23.19T445-632.94q0-32.56-23.19-55.81T366.06-712q-32.56 0-55.81 23.19T287-633.06q0 32.56 23.19 55.81T365.94-554Zm.06 306Zm0-385Z"
-                        />
-                      </svg>
+                    <a
+                      class="menu__panel-icon"
+                      data-icon="users"
+                      href=${`/en-US/community`}
+                    >
                       Community
                     </a>
                   </li>
                   <li>
-                    <a class="external" href="https://github.com/mdn">
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="24"
-                        height="24"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M11.98 1.86a10.33 10.33 0 0 1 2.8 20.28.8.8 0 0 1-.24-.56v-2.86a2.7 2.7 0 0 0-.72-1.92c2.28-.27 4.67-1.13 4.67-5.12a4 4 0 0 0-1.06-2.77 3.8 3.8 0 0 0-.1-2.76s-.86-.27-2.81 1.07a9.59 9.59 0 0 0-5.13 0c-1.94-1.34-2.8-1.07-2.82-1.07a3.78 3.78 0 0 0-.1 2.77 4.1 4.1 0 0 0-1.08 2.79c0 3.97 2.43 4.86 4.67 5.12-.37.37-.6.87-.64 1.39-.59.27-2.08.72-2.99-.87a2.13 2.13 0 0 0-1.56-1.1s-1 0-.07.65c0 0 .67.33 1.14 1.52 0 0 .6 1.84 3.44 1.22v1.93a.8.8 0 0 1-.23.57 10.34 10.34 0 0 1 2.83-20.28Z"
-                        />
-                      </svg>
+                    <a
+                      class="menu__panel-icon"
+                      data-icon="github"
+                      href="https://github.com/mdn"
+                    >
                       MDN on GitHub
                     </a>
                   </li>

package/components/modal/element.js

@@ -27,7 +27,7 @@ export class MDNModal extends LitElement {
 
   render() {
     return html`
-      <dialog>
+      <dialog closedby="any">
         <header>
           ${this.modalTitle ? html`<h2>${this.modalTitle}</h2>` : nothing}
           <mdn-button

package/components/navigation/base.css

@@ -8,11 +8,3 @@
     color-scheme: dark;
   }
 }
-
-/* Tools */
-
-.navigation__tools {
-  display: flex;
-  column-gap: 1rem;
-  align-items: center;
-}

package/components/navigation/desktop.css

@@ -1,8 +1,8 @@
 /* Desktop */
 
-@media (width > 1006px) {
+@media (--screen-menu-full) {
   :root {
-    --top-nav-height: 4.125rem;
+    --navigation-height: 4.125rem;
   }
 
   .navigation {
@@ -14,7 +14,7 @@
     align-items: center;
     justify-items: center;
 
-    height: var(--top-nav-height);
+    height: var(--navigation-height);
 
     padding-block: 0.75rem;
     padding-inline: var(--layout-side-padding);
@@ -23,8 +23,6 @@
   /* Logo */
 
   .navigation__logo {
-    padding: 0.5rem;
-    padding-right: 0;
     margin-inline-start: -6px;
   }
 
@@ -39,4 +37,23 @@
   .navigation__button {
     display: none;
   }
+
+  /* Search */
+
+  .navigation__search {
+    &[data-view="mobile"] {
+      display: none;
+    }
+
+    &[data-view="desktop"] {
+      display: block;
+    }
+  }
+
+  /* User menu */
+
+  mdn-user-menu {
+    width: 2.125rem;
+    height: 2.125rem;
+  }
 }

package/components/navigation/mobile.css

@@ -1,18 +1,20 @@
 /* Mobile */
 
-@media (width <= 1006px) {
+@media (--screen-menu-hamburger) {
   :root {
-    --top-nav-height: 2.9rem;
+    --navigation-height: 2.9rem;
   }
 
   .navigation {
     display: grid;
 
-    grid-template-columns: 1fr min-content;
+    grid-template-columns: 1fr min-content min-content;
 
+    column-gap: 0.25rem;
+    align-items: center;
     justify-items: start;
 
-    height: var(--top-nav-height);
+    height: var(--navigation-height);
 
     &[data-open="true"] {
       position: fixed;
@@ -42,7 +44,7 @@
   /* Logo */
 
   .navigation__logo {
-    padding: 0.7rem;
+    padding: 0.2rem;
   }
 
   /* Button */
@@ -52,10 +54,15 @@
     margin: 0;
 
     cursor: pointer;
+    outline-offset: -2px;
 
     background-color: transparent;
     border: none;
 
+    &:hover {
+      background-color: var(--color-background-secondary);
+    }
+
     &::before {
       display: block;
 
@@ -81,7 +88,19 @@
   /* Search */
 
   .navigation__search {
-    padding: 0.7rem;
+    &[data-view="mobile"] {
+      display: block;
+    }
+
+    &[data-view="desktop"] {
+      display: none;
+    }
+  }
+
+  /* User menu */
+
+  mdn-user-menu {
+    display: block;
     border-top: 1px solid var(--color-border-primary);
   }
 }

package/components/navigation/server.js

@@ -20,6 +20,9 @@ export class Navigation extends ServerComponent {
     return html`
       <nav class="navigation" data-scheme=${colorScheme} data-open="false">
         <div class="navigation__logo">${Logo.render(context)}</div>
+        <div class="navigation__search" data-view="mobile">
+          <mdn-search-button></mdn-search-button>
+        </div>
         <button
           class="navigation__button"
           type="button"
@@ -29,15 +32,15 @@ export class Navigation extends ServerComponent {
         ></button>
         <div class="navigation__popup" id="navigation__popup">
           <div class="navigation__menu">${Menu.render(context)}</div>
-          <div class="navigation__search">
+          <div class="navigation__search" data-view="desktop">
             <mdn-search-button></mdn-search-button>
           </div>
           ${WRITER_MODE
             ? nothing
             : html`<mdn-user-menu locale=${context.locale}></mdn-user-menu>`}
         </div>
-        <mdn-search-modal id="search"></mdn-search-modal>
       </nav>
+      <mdn-search-modal id="search"></mdn-search-modal>
     `;
   }
 }

package/components/not-found/element.css

@@ -1,3 +1,4 @@
+@import url("../global/global.css");
 @import url("../notecard/index.css");
 
 code {

package/components/not-found/element.js

@@ -83,7 +83,7 @@ export class MDNNotFound extends L10nMixin(LitElement) {
                     <a
                       href=${`/${locale}/search?q=${encodeURIComponent(part)}`}
                     >
-                      <code>${part}</code>
+                      ${part}
                     </a>
                   </li>`,
               )}

package/components/observatory/colors.css

@@ -0,0 +1,64 @@
+/* observatory color definitions */
+.observatory {
+  --progress-color: var(--observatory-accent);
+
+  --observatory-accent: light-dark(
+    var(--color-purple-20),
+    var(--color-purple-80)
+  );
+  --observatory-accent-light: light-dark(
+    var(--color-purple-20),
+    var(--color-purple-80)
+  );
+
+  --observatory-pass-icon-bg: light-dark(
+    var(--color-green-90),
+    var(--color-green-20)
+  );
+  --observatory-pass-icon-color: light-dark(
+    var(--color-green-50),
+    var(--color-green-80)
+  );
+  --observatory-fail-icon-bg: light-dark(
+    var(--color-red-90),
+    var(--color-red-10)
+  );
+  --observatory-fail-icon-color: light-dark(
+    var(--color-red-50),
+    var(--color-red-80)
+  );
+
+  --observatory-table-bg: light-dark(var(--color-white), var(--color-gray-10));
+  --observatory-table-bg-alternate: light-dark(
+    var(--color-gray-90),
+    var(--color-gray-10)
+  );
+  --observatory-table-header-bg: light-dark(
+    var(--color-gray-90),
+    var(--color-gray-10)
+  );
+
+  --observatory-grade-a-bg: light-dark(#d2fadd, #265c3d);
+  --observatory-grade-a-border: light-dark(#017a37, #89fca1);
+  --observatory-grade-b-bg: light-dark(#e8fad2, #52662a);
+  --observatory-grade-b-border: light-dark(#547a01, #d5fc88);
+  --observatory-grade-c-bg: light-dark(#faf8d2, #66602a);
+  --observatory-grade-c-border: light-dark(#7a7001, #fcf988);
+  --observatory-grade-d-bg: light-dark(#fae8d2, #5c3d26);
+  --observatory-grade-d-border: light-dark(#a65001, #ff6a00);
+  --observatory-grade-f-bg: light-dark(#fad2d2, #5c2626);
+  --observatory-grade-f-border: light-dark(#aa0000, #fc8888);
+  --observatory-arrow-down-color: light-dark(
+    var(--color-red-20),
+    var(--color-red-80)
+  );
+  --observatory-arrow-up-color: light-dark(
+    var(--color-green-50),
+    var(--color-green-80)
+  );
+
+  --form-invalid-color: light-dark(var(--color-red-50), var(--color-red-80));
+
+  /* icons */
+  --alert-circle-img: url("./assets/alert-circle.svg");
+}

package/components/observatory/common.css

@@ -0,0 +1,5 @@
+/* observatory assets */
+.observatory {
+  line-height: var(--font-line-content);
+  color: var(--color-text-primary);
+}

package/components/observatory-comparison-table/element.css

@@ -1,3 +1,4 @@
+@import url("../global/global.css");
 @import url("../visually-hidden/global.css");
 
 .grade {
@@ -6,8 +7,8 @@
   width: 5rem;
   height: 5rem;
 
-  font-size: 1.7rem;
-  font-weight: 600;
+  font-size: var(--font-size-large);
+  font-weight: var(--font-weight-bold);
 
   line-height: 5rem;
 
@@ -52,7 +53,7 @@
 
 .tick text {
   font-family: var(--font-body);
-  font-size: 1rem;
+  font-size: var(--font-size-normal);
   font-weight: 300;
 
   fill: var(--color-text-secondary);
@@ -73,7 +74,6 @@
 }
 
 .tick line {
-  /* color: light-dark(var(--color-gray-60), var(--color-gray-40)); */
   opacity: 0.9;
 
   stroke: light-dark(var(--color-gray-60), var(--color-gray-40));
@@ -100,8 +100,8 @@
 
   & text {
     font-family: var(--font-body);
-    font-size: 0.85rem;
-    font-weight: 300;
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-normal);
 
     fill: var(--color-text-primary);
   }

package/components/observatory-form/element.css

@@ -1,9 +1,10 @@
-/* TODO */
-@import url("../../components/button/server.css");
-@import url("../../components/visually-hidden/global.css");
+@import url("../global/global.css");
+@import url("../button/server.css");
+@import url("../visually-hidden/global.css");
 
 :host {
   font: 400 var(--base-font-size) var(--font-body);
+  --border-radius: 0.3rem;
 }
 
 .observatory-form__input-group {
@@ -46,15 +47,9 @@
 
     padding: 0 2rem;
 
-    font: var(--type-emphasis-m);
-    font-size: 1rem;
+    font-size: var(--font-size-normal);
+    font-weight: var(--font-weight-bold);
 
-    /* color: var(--button-color--default); */
-
-    /* appearance: none;
-    cursor: pointer; */
-
-    /* background: var(--button-bg--default); */
     border: none;
     border-radius: 0 var(--border-radius) var(--border-radius) 0;
     border-top-right-radius: var(--border-radius);

package/components/observatory-header-link/element.css

@@ -1,9 +1 @@
-a {
-  color: var(--color-text-primary);
-  text-decoration: underline;
-  text-decoration-color: var(--color-text-secondary);
-}
-
-a:hover {
-  text-decoration: none;
-}
+@import url("../global/global.css");

package/components/observatory-human-duration/element.css

@@ -0,0 +1 @@
+@import url("../global/global.css");

package/components/observatory-human-duration/element.js

@@ -1,18 +1,19 @@
-import { LitElement, css, html } from "lit";
+import { LitElement, html } from "lit";
 
 import {
   formatDateTime,
   humanizedDurationFromNow,
 } from "../observatory/utils.js";
 
+import styles from "./element.css?lit";
+
 export class MDNObservatoryHumanDuration extends LitElement {
+  static styles = styles;
   static properties = {
     date: { type: Date },
     _text: { state: true },
   };
 
-  static styles = css``;
-
   constructor() {
     super();
     this.date = new Date();