[demo] Shoelace

package.json

@@ -27,6 +27,7 @@
     "start": "pnpm run serve"
   },
   "dependencies": {
+    "@shoelace-style/shoelace": "^2.18.0",
     "lit": "^3.2.1"
   },
   "devDependencies": {

src/components/card.ts

@@ -82,7 +82,7 @@ export class Card extends LitElement {
       <div>
         <h3>${title}</h3>
         <img src="${thumbnail}" alt="${title}" loading="lazy" width="100%">
-        <button @click="${this.selectItem}">View Item Details</button>
+        <sl-button variant="neutral" @click="${this.selectItem}">View Item Details</sl-button>
       </div>
     `;
   }

src/components/modal.ts

@@ -58,7 +58,7 @@ export class Modal extends LitElement {
   }
 
   firstUpdated() {
-    const button = this.shadowRoot.querySelector('button');
+    const button = this.shadowRoot.querySelector('sl-button');
     const dialog = this.shadowRoot.querySelector('dialog');
 
     button.addEventListener("click", () => dialog.close());
@@ -70,7 +70,7 @@ export class Modal extends LitElement {
     return html`
       <dialog>
         <h3 id="content">${content}</h3>
-        <button autofocus>Close</button>
+        <sl-button variant="neutral" autofocus>Close</sl-button>
       </dialog>
     `;
   }

src/layouts/app.html

@@ -9,7 +9,10 @@
     <link rel="icon" href="/favicon.ico"/>
 
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
+    <link rel="stylesheet" href="/node_modules/@shoelace-style/shoelace/dist/themes/light.css" />
     <link rel="stylesheet" href="../styles/main.css">
+
+    <script type="module" src="/node_modules/@shoelace-style/shoelace/dist/shoelace.js"></script>
     <script type="module" src="../components/card.ts"></script>
     <script type="module" src="../components/modal.ts"></script>
   </head>

src/pages/index.html

@@ -41,17 +41,17 @@ <h2>JSON API</h2>
       <p>This is an example of a Greenwood API Route returning JSON when fetched on-submit of the form to display a message on the page.  You can see it fire in the network tab as <i>/api/greeting</i></p>
       <form>
         <label>
-          <input type="text" name="name" placeholder="your name..." required/>
+          <sl-input type="text" name="name" placeholder="your name..." required></sl-input>
         </label>
-        <button type="submit">Click me for a greeting!</button>
+        <sl-button variant="neutral" type="submit">Click me for a greeting!</sl-button>
       </form>
       <h2 id="greeting-output"></h2>
     </article>
     <article>
       <h2>Fragments API (w/ Lit+SSR)</h2>
       <p>This is an example of a Greenwood API route returning an HTML response that is generated by server-rendering a Web Component (with Declarative Shadow DOM).  This same component is loaded on the client-side too, so that when you click the <i>Product Details</i> button, state and interactivity can still be resumed. You can see it fire in the network tab as <i>/api/fragment</i></p>
       <div id="load-products-output" class="products-cards-container" aria-live="polite"></div>
-      <button id="load-products">Load More Products</button>
+      <sl-button id="load-products" variant="neutral">Load More Products</sl-button>
     </article>
   </body>
 </html>

src/pages/search.html

@@ -31,9 +31,9 @@ <h2>Search API (w/ Lit+SSR)</h2>
       <p>This is an example of a Greenwood API leveraging the FormData API and returning an HTML response that is generated by server-rendering a Web Component (with Declarative Shadow DOM).  This same component is loaded on the client-side too, so that when you click the <i>Item Details</i> button, state and interactivity can still be resumed. You can see it fire in the network tab as <i>/api/search</i></p>
       <form id="search">
         <label for="term">
-          <input type="search" name="term" placeholder="a product..." required/>
+          <sl-input size="small" type="search" name="term" placeholder="a product..." required></sl-input>
         </label>
-        <button type="submit">Search</button>
+        <sl-button type="submit" variant="neutral">Search</sl-button>
       </form>
       <div id="search-products-output" class="products-cards-container" aria-live="polite"></div>
     </article>

src/styles/main.css

@@ -60,20 +60,11 @@ h2 {
   text-decoration: underline;
 }
 
-button {
-  background: var(--color-accent);
-  color: var(--color-white);
-  padding: 1rem 2rem;
-  border: 0;
-  font-size: 1rem;
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-input {
+sl-input {
   padding: 1rem;
   margin: 0 10px;
   font-size: 16px;
+  display: inline-block;
 }
 
 label {