Merge branch 'next' into current

Author: claviska

docs/_includes/default.njk

@@ -95,23 +95,52 @@
       </sl-dropdown>
     </div>
 
-    <a
-      class="ks-banner{% if toc %} with-toc{% endif %}"
-      href="https://webawesome.com/"
-      target="_blank"
-    >
-      <span>
-        <svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
-          <path fill="white" d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"/>
-        </svg>
-        <span>
-          <strong style="white-space: nowrap;">Web Awesome</strong> has launched!
-          <br>
-          <small>Come see the latest version of Shoelace.</small>
-        </span>
-      </span>
-      <span class="faux-button">Take me there &rarr;</span>
-    </a>
+    <sl-dialog id="wa-dialog" label="Shoelace is now Web Awesome!">
+      <div class="dialog-billboard">
+        <div class="dialog-billboard-content">
+          {% include 'wa-logo-icon.njk' %}
+          <h2>Shoelace is now Web Awesome!</h2>
+        </div>
+      </div>
+
+      <div class="dialog-body">
+        <p>Web Awesome, like Shoelace before it, has an even larger library of free web <a href="https://webawesome.com/docs/components/?utm_source=shoelace-docs&utm_medium=web&utm_campaign=wa-dialog" target="_blank">components</a>. Plus, it has <a href="https://webawesome.com/docs/themes/?utm_source=shoelace-docs&utm_medium=web&utm_campaign=wa-dialog" target="_blank">themes</a>, <a href="https://webawesome.com/docs/utilities/?utm_source=shoelace-docs&utm_medium=web&utm_campaign=wa-dialog" target="_blank">utilities</a>, <a href="https://webawesome.com/docs/patterns/?utm_source=shoelace-docs&utm_medium=web&utm_campaign=wa-dialog" target="_blank">patterns</a>, and more.</p>
+
+        <p>Switch from Shoelace for free today. <strong>Grab Web Awesome Pro and get even more at a 20% discount!</strong></p>
+
+        <sl-divider></sl-divider>
+
+        <div class="dialog-actions">
+          <sl-button variant="text" class="close-wa-dialog">Okay, got it</sl-button>
+          <div class="wa-ctas">
+            <sl-button variant="primary" outline class="wa-cta" href="https://webawesome.com/docs?utm_source=shoelace-docs&utm_medium=web&utm_campaign=wa-dialog" target="_blank">Try Web Awesome</sl-button>
+            <sl-button variant="primary" class="wa-pro-cta" href="https://webawesome.com/purchase?discount=TRYPRO20&utm_source=shoelace-docs&utm_medium=web&utm_campaign=wa-dialog" target="_blank">Save 20% on Pro!</sl-button>
+          </div>
+        </div>
+      </div>
+
+      <div slot="footer">
+        <div class="sl-status">
+          <strong>FYI, Shoelace is no longer actively being developed</strong>
+          <p>But it is still available for use and may receive updates as needed.</p>
+        </div>
+      </div>
+    </sl-dialog>
+    <script>
+      if (!sessionStorage.getItem('wa-dialog-dismissed')) {
+        customElements.whenDefined('sl-dialog').then(() => {
+          const dialog = document.getElementById('wa-dialog');
+          const closeButton = dialog.querySelector('sl-button.close-wa-dialog');
+
+          closeButton.addEventListener('click', () => dialog.hide());
+          dialog.addEventListener('sl-after-hide', () => {
+            sessionStorage.setItem('wa-dialog-dismissed', 'true');
+          }, { once: true });
+
+          dialog.show();
+        });
+      }
+    </script>
 
     <aside id="sidebar" data-preserve-scroll>
       <header>

docs/_includes/wa-logo-icon.njk

@@ -0,0 +1 @@
+<svg class="wa-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" aria-hidden="true"><path fill="currentColor" d="M372.2 116C372.2 136.9 359.8 155 342 163.2L448 256L552.4 235.1C547.1 227.4 544 218 544 208C544 181.5 565.5 160 592 160C618.5 160 640 181.5 640 208C640 234 619.4 255.1 593.6 256L481 506.3C470.7 529.3 447.8 544 422.6 544L217.4 544C192.2 544 169.4 529.2 159 506.3L46.4 256C20.6 255.1 0 234 0 208C0 181.5 21.5 160 48 160C74.5 160 96 181.5 96 208C96 218.1 92.9 227.4 87.6 235.1L192 256L298.1 163.1C280.4 154.8 268.1 136.8 268.1 116C268.1 87.3 291.4 64 320.1 64C348.8 64 372.1 87.3 372.1 116L372.2 116z"/></svg>