refactor: replace Shoelace with Nebula across documentation and codebase

docs/_includes/component.njk

@@ -59,32 +59,32 @@
 
     <sl-tab-panel name="script">
       <p>
-        To import this component from <a href="https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace">the CDN</a>
+        To import this component from <a href="https://www.jsdelivr.com/package/npm/@onsonr/nebula">the CDN</a>
         using a script tag:
       </p>
-      <pre><code class="language-html">&lt;script type=&quot;module&quot; src=&quot;https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@{{ meta.version }}/{{ meta.cdndir }}/{{ component.path }}&quot;&gt;&lt;/script&gt;</code></pre>
+      <pre><code class="language-html">&lt;script type=&quot;module&quot; src=&quot;https://cdn.jsdelivr.net/npm/@onsonr/nebula@{{ meta.version }}/{{ meta.cdndir }}/{{ component.path }}&quot;&gt;&lt;/script&gt;</code></pre>
     </sl-tab-panel>
 
     <sl-tab-panel name="import">
       <p>
-        To import this component from <a href="https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace">the CDN</a>
+        To import this component from <a href="https://www.jsdelivr.com/package/npm/@onsonr/nebula">the CDN</a>
         using a JavaScript import:
       </p>
-      <pre><code class="language-js">import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@{{ meta.version }}/{{ meta.cdndir }}/{{ component.path }}';</code></pre>
+      <pre><code class="language-js">import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@{{ meta.version }}/{{ meta.cdndir }}/{{ component.path }}';</code></pre>
     </sl-tab-panel>
 
     <sl-tab-panel name="bundler">
       <p>
         To import this component using <a href="{{ rootUrl('/getting-started/installation#bundling') }}">a bundler</a>:
       </p>
-      <pre><code class="language-js">import '@shoelace-style/shoelace/{{ meta.npmdir }}/{{ component.path }}';</code></pre>
+      <pre><code class="language-js">import '@onsonr/nebula/{{ meta.npmdir }}/{{ component.path }}';</code></pre>
     </sl-tab-panel>
 
     <sl-tab-panel name="react">
       <p>
         To import this component as a <a href="/frameworks/react">React component</a>:
       </p>
-      <pre><code class="language-js">import {{ component.name }} from '@shoelace-style/shoelace/{{ meta.npmdir }}/react/{{ component.tagNameWithoutPrefix }}';</code></pre>
+      <pre><code class="language-js">import {{ component.name }} from '@onsonr/nebula/{{ meta.npmdir }}/react/{{ component.tagNameWithoutPrefix }}';</code></pre>
     </sl-tab-panel>
   </sl-tab-group>
 

docs/_includes/default.njk

@@ -33,7 +33,7 @@
     <meta property="og:description" content="{{ meta.description }}" />
     <meta property="og:image" content="{{ assetUrl(meta.image, true) }}" />
 
-    {# Shoelace #}
+    {# Nebula #}
     <link rel="stylesheet" href="/dist/themes/light.css" />
     <link rel="stylesheet" href="/dist/themes/dark.css" />
     <script type="module" src="/dist/shoelace-autoloader.js"></script>
@@ -71,12 +71,12 @@
     {# Icon toolbar #}
     <div id="icon-toolbar">
       {# GitHub #}
-      <a href="https://github.com/shoelace-style/shoelace" title="View Shoelace on GitHub">
+      <a href="https://github.com/onsonr/nebula" title="View Nebula on GitHub">
         <sl-icon name="github"></sl-icon>
       </a>
 
       {# Twitter #}
-      <a href="https://twitter.com/shoelace_style" title="Follow Shoelace on Twitter">
+      <a href="https://twitter.com/shoelace_style" title="Follow Nebula on Twitter">
         <sl-icon name="twitter"></sl-icon>
       </a>
 
@@ -106,7 +106,7 @@
         </svg>
         <span>
           <strong style="white-space: nowrap;">Get ready for more awesome!</strong>
-          Web Awesome, the next iteration of Shoelace, is on Kickstarter.
+          Web Awesome, the next iteration of Nebula, is on Kickstarter.
         </span>
       </span>
       <span class="faux-button">Read Our Story</span>
@@ -115,18 +115,18 @@
     <aside id="sidebar" data-preserve-scroll>
       <header>
         <a href="/">
-          <img src="{{ assetUrl('images/wordmark.svg') }}" alt="Shoelace" />
+          <img src="{{ assetUrl('images/wordmark.svg') }}" alt="Nebula" />
         </a>
         <div class="sidebar-version">
           {{ meta.version }}
         </div>
       </header>
 
       <div class="sidebar-buttons">
-        <sl-button size="small" class="repo-button repo-button--github" href="https://github.com/shoelace-style/shoelace" target="_blank">
+        <sl-button size="small" class="repo-button repo-button--github" href="https://github.com/onsonr/nebula" target="_blank">
           <sl-icon slot="prefix" name="github"></sl-icon> Code
         </sl-button>
-        <sl-button size="small" class="repo-button repo-button--star" href="https://github.com/shoelace-style/shoelace/stargazers" target="_blank">
+        <sl-button size="small" class="repo-button repo-button--star" href="https://github.com/onsonr/nebula/stargazers" target="_blank">
           <sl-icon slot="prefix" name="star-fill"></sl-icon> Star
         </sl-button>
         <sl-button size="small" class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" target="_blank">

docs/_includes/sidebar.njk

@@ -23,7 +23,7 @@
     <h2>Resources</h2>
     <ul>
       <li><a href="/resources/community">Community</a></li>
-      <li><a href="https://github.com/shoelace-style/shoelace/discussions">Help &amp; Support</a></li>
+      <li><a href="https://github.com/onsonr/nebula/discussions">Help &amp; Support</a></li>
       <li><a href="/resources/accessibility">Accessibility</a></li>
       <li><a href="/resources/contributing">Contributing</a></li>
       <li><a href="/resources/changelog">Changelog</a></li>

docs/_utilities/markdown.cjs

@@ -59,7 +59,7 @@ markdown.use(markdownItContainer, 'details', {
 markdownItReplaceIt.replacements.push({
   name: 'github-issues',
   re: /\[#([0-9]+)\]/gs,
-  sub: '<a href="https://github.com/shoelace-style/shoelace/issues/$1">#$1</a>',
+  sub: '<a href="https://github.com/onsonr/nebula/issues/$1">#$1</a>',
   html: true,
   default: true
 });

docs/assets/scripts/code-previews.js

@@ -1,7 +1,7 @@
 (() => {
   function convertModuleLinks(html) {
     html = html
-      .replace(/@shoelace-style\/shoelace/g, `https://esm.sh/@shoelace-style/shoelace@${shoelaceVersion}`)
+      .replace(/@shoelace-style\/shoelace/g, `https://esm.sh/@onsonr/nebula@${shoelaceVersion}`)
       .replace(/from 'react'/g, `from 'https://esm.sh/react@${reactVersion}'`)
       .replace(/from "react"/g, `from "https://esm.sh/react@${reactVersion}"`);
 
@@ -182,7 +182,7 @@
       // HTML templates
       if (!isReact) {
         htmlTemplate =
-          `<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${shoelaceVersion}/${cdndir}/shoelace.js"></script>\n` +
+          `<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@${shoelaceVersion}/${cdndir}/shoelace.js"></script>\n` +
           `\n${htmlExample}`;
         jsTemplate = '';
       }
@@ -193,18 +193,18 @@
         jsTemplate =
           `import React from 'https://esm.sh/react@${reactVersion}';\n` +
           `import ReactDOM from 'https://esm.sh/react-dom@${reactVersion}';\n` +
-          `import { setBasePath } from 'https://esm.sh/@shoelace-style/shoelace@${shoelaceVersion}/${cdndir}/utilities/base-path';\n` +
+          `import { setBasePath } from 'https://esm.sh/@onsonr/nebula@${shoelaceVersion}/${cdndir}/utilities/base-path';\n` +
           `\n` +
-          `// Set the base path for Shoelace assets\n` +
-          `setBasePath('https://esm.sh/@shoelace-style/shoelace@${shoelaceVersion}/${npmdir}/')\n` +
+          `// Set the base path for Nebula assets\n` +
+          `setBasePath('https://esm.sh/@onsonr/nebula@${shoelaceVersion}/${npmdir}/')\n` +
           `\n${convertModuleLinks(reactExample)}\n` +
           `\n` +
           `ReactDOM.render(<App />, document.getElementById('root'));`;
       }
 
       // CSS templates
       cssTemplate =
-        `@import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${shoelaceVersion}/${cdndir}/themes/${
+        `@import 'https://cdn.jsdelivr.net/npm/@onsonr/nebula@${shoelaceVersion}/${cdndir}/themes/${
           isDark ? 'dark' : 'light'
         }.css';\n` +
         '\n' +

docs/eleventy.config.cjs

@@ -33,7 +33,7 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addGlobalData('toc', true); // enable the table of contents
   eleventyConfig.addGlobalData('meta', {
     title: 'Nebula',
-    description: 'A specialized fork of Shoelace for Crypto and Blockchain interfaces.',
+    description: 'A specialized fork of Nebula for Crypto and Blockchain interfaces.',
     image: 'images/og-image.png',
     version: customElementsManifest.package.version,
     components: allComponents,
@@ -74,7 +74,7 @@ module.exports = function (eleventyConfig) {
     if (!component) {
       throw new Error(
         `Unable to find a component called "${tagName}". Make sure the file name is the same as the component's tag ` +
-        `name (minus the sl- prefix).`
+          `name (minus the sl- prefix).`
       );
     }
     return component;

docs/pages/components/alert.md

@@ -13,8 +13,8 @@ layout: component
 ```
 
 ```jsx:react
-import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlAlert from '@onsonr/nebula/dist/react/alert';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
 
 const App = () => (
   <SlAlert open>
@@ -75,8 +75,8 @@ Set the `variant` attribute to change the alert's variant.
 ```
 
 ```jsx:react
-import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlAlert from '@onsonr/nebula/dist/react/alert';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
 
 const App = () => (
   <>
@@ -146,8 +146,8 @@ Add the `closable` attribute to show a close button that will hide the alert.
 
 ```jsx:react
 import { useState } from 'react';
-import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlAlert from '@onsonr/nebula/dist/react/alert';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
 
 const App = () => {
   const [open, setOpen] = useState(true);
@@ -175,7 +175,7 @@ Icons are optional. Simply omit the `icon` slot if you don't want them.
 ```
 
 ```jsx:react
-import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
+import SlAlert from '@onsonr/nebula/dist/react/alert';
 
 const App = () => (
   <SlAlert variant="primary" open>
@@ -215,9 +215,9 @@ Set the `duration` attribute to automatically hide an alert after a period of ti
 
 ```jsx:react
 import { useState } from 'react';
-import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlAlert from '@onsonr/nebula/dist/react/alert';
+import SlButton from '@onsonr/nebula/dist/react/button';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
 
 const css = `
   .alert-duration sl-alert {
@@ -306,9 +306,9 @@ You should always use the `closable` attribute so users can dismiss the notifica
 
 ```jsx:react
 import { useRef } from 'react';
-import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlAlert from '@onsonr/nebula/dist/react/alert';
+import SlButton from '@onsonr/nebula/dist/react/button';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
 
 function showToast(alert) {
   alert.toast();

docs/pages/components/animated-image.md

@@ -13,7 +13,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';
+import SlAnimatedImage from '@onsonr/nebula/dist/react/animated-image';
 
 const App = () => (
   <SlAnimatedImage
@@ -41,7 +41,7 @@ Both GIF and WEBP images are supported.
 ```
 
 ```jsx:react
-import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';
+import SlAnimatedImage from '@onsonr/nebula/dist/react/animated-image';
 
 const App = () => (
   <SlAnimatedImage src="https://shoelace.style/assets/images/tie.webp" alt="Animation of a shoe being tied" />
@@ -64,7 +64,7 @@ To set a custom size, apply a width and/or height to the host element.
 {% raw %}
 
 ```jsx:react
-import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';
+import SlAnimatedImage from '@onsonr/nebula/dist/react/animated-image';
 
 const App = () => (
   <SlAnimatedImage
@@ -102,7 +102,7 @@ You can change the appearance and location of the control box by targeting the `
 ```
 
 ```jsx:react
-import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';
+import SlAnimatedImage from '@onsonr/nebula/dist/react/animated-image';
 
 const css = `
   .animated-image-custom-control-box::part(control-box) {

docs/pages/components/animation.md

@@ -27,7 +27,7 @@ To animate an element, wrap it in `<sl-animation>` and set an animation `name`.
 ```
 
 ```jsx:react
-import SlAnimation from '@shoelace-style/shoelace/dist/react/animation';
+import SlAnimation from '@onsonr/nebula/dist/react/animation';
 
 const css = `
   .animation-overview .box {
@@ -173,7 +173,7 @@ Use an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/
 
 ```jsx:react
 import { useEffect, useRef, useState } from 'react';
-import SlAnimation from '@shoelace-style/shoelace/dist/react/animation';
+import SlAnimation from '@onsonr/nebula/dist/react/animation';
 
 const css = `
   .animation-scroll {
@@ -262,7 +262,7 @@ Supply your own [keyframe formats](https://developer.mozilla.org/en-US/docs/Web/
 ```
 
 ```jsx:react
-import SlAnimation from '@shoelace-style/shoelace/dist/react/animation';
+import SlAnimation from '@onsonr/nebula/dist/react/animation';
 
 const css = `
   .animation-keyframes .box {
@@ -329,8 +329,8 @@ Animations won't play until you apply the `play` attribute. You can omit it init
 
 ```jsx:react
 import { useState } from 'react';
-import SlAnimation from '@shoelace-style/shoelace/dist/react/animation';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlAnimation from '@onsonr/nebula/dist/react/animation';
+import SlButton from '@onsonr/nebula/dist/react/button';
 
 const App = () => {
   const [play, setPlay] = useState(false);

docs/pages/components/avatar.md

@@ -12,7 +12,7 @@ By default, a generic icon will be shown. You can personalize avatars by adding
 ```
 
 ```jsx:react
-import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
+import SlAvatar from '@onsonr/nebula/dist/react/avatar';
 
 const App = () => <SlAvatar label="User avatar" />;
 ```
@@ -37,7 +37,7 @@ Avatar images can be lazily loaded by setting the `loading` attribute to `lazy`.
 ```
 
 ```jsx:react
-import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
+import SlAvatar from '@onsonr/nebula/dist/react/avatar';
 
 const App = () => (
   <SlAvatar
@@ -61,7 +61,7 @@ When you don't have an image to use, you can set the `initials` attribute to sho
 ```
 
 ```jsx:react
-import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
+import SlAvatar from '@onsonr/nebula/dist/react/avatar';
 
 const App = () => <SlAvatar initials="SL" label="Avatar with initials: SL" />;
 ```
@@ -85,8 +85,8 @@ When no image or initials are set, an icon will be shown. The default avatar sho
 ```
 
 ```jsx:react
-import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlAvatar from '@onsonr/nebula/dist/react/avatar';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
 
 const App = () => (
   <>
@@ -116,8 +116,8 @@ Avatars can be shaped using the `shape` attribute.
 ```
 
 ```jsx:react
-import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlAvatar from '@onsonr/nebula/dist/react/avatar';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
 
 const App = () => (
   <>
@@ -167,8 +167,8 @@ You can group avatars with a few lines of CSS.
 ```
 
 ```jsx:react
-import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlAvatar from '@onsonr/nebula/dist/react/avatar';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
 
 const css = `
   .avatar-group sl-avatar:not(:first-of-type) {