feat: rename folders

2024-06-30 20:31:53 -06:00
parent e494f3a3aa
commit 90f5981b60
195 changed files with 20 additions and 18 deletions
--- a/lit/src/my-element.ts
+++ b/lit/src/my-element.ts
@@ -0,0 +1,127 @@
+import { LitElement, css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import litLogo from './assets/lit.svg'
+import viteLogo from '/vite.svg'
+
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+@customElement('my-element')
+export class MyElement extends LitElement {
+  /**
+   * Copy for the read the docs hint.
+   */
+  @property()
+  docsHint = 'Click on the Vite and Lit logos to learn more'
+
+  /**
+   * The number of times the button has been clicked.
+   */
+  @property({ type: Number })
+  count = 0
+
+  render() {
+    return html`
+      <div>
+        <a href="https://vitejs.dev" target="_blank">
+          <img src=${viteLogo} class="logo" alt="Vite logo" />
+        </a>
+        <a href="https://lit.dev" target="_blank">
+          <img src=${litLogo} class="logo lit" alt="Lit logo" />
+        </a>
+      </div>
+      <slot></slot>
+      <div class="card">
+        <button @click=${this._onClick} part="button">
+          count is ${this.count}
+        </button>
+      </div>
+      <p class="read-the-docs">${this.docsHint}</p>
+    `
+  }
+
+  private _onClick() {
+    this.count++
+  }
+
+  static styles = css`
+    :host {
+      max-width: 1280px;
+      margin: 0 auto;
+      padding: 2rem;
+      text-align: center;
+    }
+
+    .logo {
+      height: 6em;
+      padding: 1.5em;
+      will-change: filter;
+      transition: filter 300ms;
+    }
+    .logo:hover {
+      filter: drop-shadow(0 0 2em #646cffaa);
+    }
+    .logo.lit:hover {
+      filter: drop-shadow(0 0 2em #325cffaa);
+    }
+
+    .card {
+      padding: 2em;
+    }
+
+    .read-the-docs {
+      color: #888;
+    }
+
+    ::slotted(h1) {
+      font-size: 3.2em;
+      line-height: 1.1;
+    }
+
+    a {
+      font-weight: 500;
+      color: #646cff;
+      text-decoration: inherit;
+    }
+    a:hover {
+      color: #535bf2;
+    }
+
+    button {
+      border-radius: 8px;
+      border: 1px solid transparent;
+      padding: 0.6em 1.2em;
+      font-size: 1em;
+      font-weight: 500;
+      font-family: inherit;
+      background-color: #1a1a1a;
+      cursor: pointer;
+      transition: border-color 0.25s;
+    }
+    button:hover {
+      border-color: #646cff;
+    }
+    button:focus,
+    button:focus-visible {
+      outline: 4px auto -webkit-focus-ring-color;
+    }
+
+    @media (prefers-color-scheme: light) {
+      a:hover {
+        color: #747bff;
+      }
+      button {
+        background-color: #f9f9f9;
+      }
+    }
+  `
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'my-element': MyElement
+  }
+}