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,7 +115,7 @@
     <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 }}
@@ -123,10 +123,10 @@
       </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,10 +193,10 @@
         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` +
+          `// Set the base path for Nebula assets\n` +
-          `setBasePath('https://esm.sh/@shoelace-style/shoelace@${shoelaceVersion}/${npmdir}/')\n` +
+          `setBasePath('https://esm.sh/@onsonr/nebula@${shoelaceVersion}/${npmdir}/')\n` +
           `\n${convertModuleLinks(reactExample)}\n` +
           `\n` +
           `ReactDOM.render(<App />, document.getElementById('root'));`;
@@ -204,7 +204,7 @@
 
       // 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,

docs/pages/components/alert.md

@@ -13,8 +13,8 @@ layout: component
 ```
 
 ```jsx:react
-import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
+import SlAlert from '@onsonr/nebula/dist/react/alert';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+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 SlAlert from '@onsonr/nebula/dist/react/alert';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+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 SlAlert from '@onsonr/nebula/dist/react/alert';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+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 SlAlert from '@onsonr/nebula/dist/react/alert';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+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 SlAlert from '@onsonr/nebula/dist/react/alert';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+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 SlAnimation from '@onsonr/nebula/dist/react/animation';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+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 SlAvatar from '@onsonr/nebula/dist/react/avatar';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+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 SlAvatar from '@onsonr/nebula/dist/react/avatar';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+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 SlAvatar from '@onsonr/nebula/dist/react/avatar';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
 
 const css = `
   .avatar-group sl-avatar:not(:first-of-type) {

docs/pages/components/badge.md

@@ -10,7 +10,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
+import SlBadge from '@onsonr/nebula/dist/react/badge';
 
 const App = () => <SlBadge>Badge</SlBadge>;
 ```
@@ -30,7 +30,7 @@ Set the `variant` attribute to change the badge's variant.
 ```
 
 ```jsx:react
-import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
+import SlBadge from '@onsonr/nebula/dist/react/badge';
 
 const App = () => (
   <>
@@ -56,7 +56,7 @@ Use the `pill` attribute to give badges rounded edges.
 ```
 
 ```jsx:react
-import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
+import SlBadge from '@onsonr/nebula/dist/react/badge';
 
 const App = () => (
   <>
@@ -100,7 +100,7 @@ Use the `pulse` attribute to draw attention to the badge with a subtle animation
 ```
 
 ```jsx:react
-import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
+import SlBadge from '@onsonr/nebula/dist/react/badge';
 
 const css = `
   .badge-pulse sl-badge:not(:last-of-type) {
@@ -157,8 +157,8 @@ One of the most common use cases for badges is attaching them to buttons. To mak
 {% raw %}
 
 ```jsx:react
-import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
+import SlBadge from '@onsonr/nebula/dist/react/badge';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
 
 const App = () => (
   <>
@@ -201,11 +201,11 @@ When including badges in menu items, use the `suffix` slot to make sure they're
 {% raw %}
 
 ```jsx:react
-import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
+import SlBadge from '@onsonr/nebula/dist/react/badge';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
-import SlMenuLabel from '@shoelace-style/shoelace/dist/react/menu-label';
+import SlMenuLabel from '@onsonr/nebula/dist/react/menu-label';
 
 const App = () => (
   <SlMenu

docs/pages/components/breadcrumb-item.md

@@ -17,9 +17,9 @@ layout: component
 ```
 
 ```jsx:react
-import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
+import SlBreadcrumb from '@onsonr/nebula/dist/react/breadcrumb';
-import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
+import SlBreadcrumbItem from '@onsonr/nebula/dist/react/breadcrumb-item';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
 
 const App = () => (
   <SlBreadcrumb>

docs/pages/components/breadcrumb.md

@@ -17,8 +17,8 @@ Breadcrumbs are usually placed before a page's main content with the current pag
 ```
 
 ```jsx:react
-import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
+import SlBreadcrumb from '@onsonr/nebula/dist/react/breadcrumb';
-import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
+import SlBreadcrumbItem from '@onsonr/nebula/dist/react/breadcrumb-item';
 
 const App = () => (
   <SlBreadcrumb>
@@ -51,8 +51,8 @@ For websites, you'll probably want to use links instead. You can make any breadc
 ```
 
 ```jsx:react
-import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
+import SlBreadcrumb from '@onsonr/nebula/dist/react/breadcrumb';
-import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
+import SlBreadcrumbItem from '@onsonr/nebula/dist/react/breadcrumb-item';
 
 const App = () => (
   <SlBreadcrumb>
@@ -99,9 +99,9 @@ Use the `separator` slot to change the separator that goes between breadcrumb it
 ```
 
 ```jsx:react
-import '@shoelace-style/shoelace/dist/components/icon/icon.js';
+import '@onsonr/nebula/dist/components/icon/icon.js';
-import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
+import SlBreadcrumb from '@onsonr/nebula/dist/react/breadcrumb';
-import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
+import SlBreadcrumbItem from '@onsonr/nebula/dist/react/breadcrumb-item';
 
 const App = () => (
   <>
@@ -149,9 +149,9 @@ Use the `prefix` slot to add content before any breadcrumb item.
 ```
 
 ```jsx:react
-import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
+import SlBreadcrumb from '@onsonr/nebula/dist/react/breadcrumb';
-import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
+import SlBreadcrumbItem from '@onsonr/nebula/dist/react/breadcrumb-item';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
 
 const App = () => (
   <SlBreadcrumb>
@@ -181,9 +181,9 @@ Use the `suffix` slot to add content after any breadcrumb item.
 ```
 
 ```jsx:react
-import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
+import SlBreadcrumb from '@onsonr/nebula/dist/react/breadcrumb';
-import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
+import SlBreadcrumbItem from '@onsonr/nebula/dist/react/breadcrumb-item';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
 
 const App = () => (
   <SlBreadcrumb>
@@ -231,7 +231,7 @@ import {
   SlIcon,
   SlMenu,
   SlMenuItem
-} from '@shoelace-style/shoelace/dist/react';
+} from '@onsonr/nebula/dist/react';
 
 const App = () => (
   <SlBreadcrumb>

docs/pages/components/button-group.md

@@ -14,8 +14,8 @@ layout: component
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
+import SlButtonGroup from '@onsonr/nebula/dist/react/button-group';
 
 const App = () => (
   <SlButtonGroup label="Alignment">
@@ -57,8 +57,8 @@ All button sizes are supported, but avoid mixing sizes within the same button gr
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
+import SlButtonGroup from '@onsonr/nebula/dist/react/button-group';
 
 const App = () => (
   <>
@@ -134,8 +134,8 @@ Theme buttons are supported through the button's `variant` attribute.
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
+import SlButtonGroup from '@onsonr/nebula/dist/react/button-group';
 
 const App = () => (
   <>
@@ -213,8 +213,8 @@ Pill buttons are supported through the button's `pill` attribute.
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
+import SlButtonGroup from '@onsonr/nebula/dist/react/button-group';
 
 const App = () => (
   <>
@@ -283,11 +283,11 @@ Dropdowns can be placed inside button groups as long as the trigger is an `<sl-b
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
+import SlButtonGroup from '@onsonr/nebula/dist/react/button-group';
-import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import SlDropdown from '@onsonr/nebula/dist/react/dropdown';
-import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
 
 const App = () => (
   <SlButtonGroup label="Example Button Group">
@@ -328,11 +328,11 @@ Create a split button using a button and a dropdown. Use a [visually hidden](/co
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
+import SlButtonGroup from '@onsonr/nebula/dist/react/button-group';
-import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import SlDropdown from '@onsonr/nebula/dist/react/dropdown';
-import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
 
 const App = () => (
   <SlButtonGroup label="Example Button Group">
@@ -370,9 +370,9 @@ Buttons can be wrapped in tooltips to provide more detail when the user interact
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
+import SlButtonGroup from '@onsonr/nebula/dist/react/button-group';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
+import SlTooltip from '@onsonr/nebula/dist/react/tooltip';
 
 const App = () => (
   <>
@@ -441,10 +441,10 @@ Create interactive toolbars with button groups.
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
+import SlButtonGroup from '@onsonr/nebula/dist/react/button-group';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
+import SlTooltip from '@onsonr/nebula/dist/react/tooltip';
 
 const css = `
   .button-group-toolbar sl-button-group:not(:last-of-type) {

docs/pages/components/button.md

@@ -10,7 +10,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
 
 const App = () => <SlButton>Button</SlButton>;
 ```
@@ -31,7 +31,7 @@ Use the `variant` attribute to set the button's variant.
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
 
 const App = () => (
   <>
@@ -56,7 +56,7 @@ Use the `size` attribute to change a button's size.
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
 
 const App = () => (
   <>
@@ -81,7 +81,7 @@ Use the `outline` attribute to draw outlined buttons with transparent background
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
 
 const App = () => (
   <>
@@ -118,7 +118,7 @@ Use the `pill` attribute to give buttons rounded edges.
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
 
 const App = () => (
   <>
@@ -154,8 +154,8 @@ Use the `circle` attribute to create circular icon buttons. When this attribute
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
 
 const App = () => (
   <>
@@ -183,7 +183,7 @@ Use the `text` variant to create text buttons that share the same size as regula
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
 
 const App = () => (
   <>
@@ -212,7 +212,7 @@ It's often helpful to have a button that works like a link. This is possible by
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
 
 const App = () => (
   <>
@@ -247,7 +247,7 @@ As expected, buttons can be given a custom width by passing inline styles to the
 {% raw %}
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
 
 const App = () => (
   <>
@@ -325,8 +325,8 @@ Use the `prefix` and `suffix` slots to add icons.
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
 
 const App = () => (
   <>
@@ -398,7 +398,7 @@ Use the `caret` attribute to add a dropdown indicator when a button will trigger
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
 
 const App = () => (
   <>
@@ -429,7 +429,7 @@ Use the `loading` attribute to make a button busy. The width will remain the sam
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
 
 const App = () => (
   <>
@@ -469,7 +469,7 @@ Use the `disabled` attribute to disable a button.
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
 
 const App = () => (
   <>

docs/pages/components/card.md

@@ -41,9 +41,9 @@ layout: component
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlCard from '@shoelace-style/shoelace/dist/react/card';
+import SlCard from '@onsonr/nebula/dist/react/card';
-import SlRating from '@shoelace-style/shoelace/dist/react/rating';
+import SlRating from '@onsonr/nebula/dist/react/rating';
 
 const css = `
   .card-overview {
@@ -106,7 +106,7 @@ Basic cards aren't very exciting, but they can display any content you want them
 ```
 
 ```jsx:react
-import SlCard from '@shoelace-style/shoelace/dist/react/card';
+import SlCard from '@onsonr/nebula/dist/react/card';
 
 const css = `
   .card-basic {
@@ -161,8 +161,8 @@ Headers can be used to display titles and more.
 ```
 
 ```jsx:react
-import SlCard from '@shoelace-style/shoelace/dist/react/card';
+import SlCard from '@onsonr/nebula/dist/react/card';
-import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
+import SlIconButton from '@onsonr/nebula/dist/react/icon-button';
 
 const css = `
   .card-header {
@@ -227,9 +227,9 @@ Footers can be used to display actions, summaries, or other relevant content.
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlCard from '@shoelace-style/shoelace/dist/react/card';
+import SlCard from '@onsonr/nebula/dist/react/card';
-import SlRating from '@shoelace-style/shoelace/dist/react/rating';
+import SlRating from '@onsonr/nebula/dist/react/rating';
 
 const css = `
   .card-footer {
@@ -282,7 +282,7 @@ Cards accept an `image` slot. The image is displayed atop the card and stretches
 ```
 
 ```jsx:react
-import SlCard from '@shoelace-style/shoelace/dist/react/card';
+import SlCard from '@onsonr/nebula/dist/react/card';
 
 const css = `
   .card-image {

docs/pages/components/carousel-item.md

@@ -41,8 +41,8 @@ layout: component
 ```
 
 ```jsx:react
-import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
+import SlCarousel from '@onsonr/nebula/dist/react/carousel';
-import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
+import SlCarouselItem from '@onsonr/nebula/dist/react/carousel-item';
 
 const App = () => (
   <SlCarousel pagination>

docs/pages/components/carousel.md

@@ -41,8 +41,8 @@ layout: component
 ```
 
 ```jsx:react
-import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
+import SlCarousel from '@onsonr/nebula/dist/react/carousel';
-import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
+import SlCarouselItem from '@onsonr/nebula/dist/react/carousel-item';
 
 const App = () => (
   <>
@@ -124,8 +124,8 @@ Use the `pagination` attribute to show the total number of slides and the curren
 ```
 
 ```jsx:react
-import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
+import SlCarousel from '@onsonr/nebula/dist/react/carousel';
-import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
+import SlCarouselItem from '@onsonr/nebula/dist/react/carousel-item';
 
 const App = () => (
   <SlCarousel pagination>
@@ -203,8 +203,8 @@ Use the `navigation` attribute to show previous and next buttons.
 ```
 
 ```jsx:react
-import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
+import SlCarousel from '@onsonr/nebula/dist/react/carousel';
-import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
+import SlCarouselItem from '@onsonr/nebula/dist/react/carousel-item';
 
 const App = () => (
   <SlCarousel navigation>
@@ -282,8 +282,8 @@ By default, the carousel will not advanced beyond the first and last slides. You
 ```
 
 ```jsx:react
-import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
+import SlCarousel from '@onsonr/nebula/dist/react/carousel';
-import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
+import SlCarouselItem from '@onsonr/nebula/dist/react/carousel-item';
 
 const App = () => (
   <SlCarousel loop navigation pagination>
@@ -361,8 +361,8 @@ The carousel will automatically advance when the `autoplay` attribute is used. T
 ```
 
 ```jsx:react
-import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
+import SlCarousel from '@onsonr/nebula/dist/react/carousel';
-import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
+import SlCarouselItem from '@onsonr/nebula/dist/react/carousel-item';
 
 const App = () => (
   <SlCarousel autoplay loop pagination>
@@ -459,10 +459,10 @@ This example is best demonstrated using a mouse. Try clicking and dragging the s
 
 ```jsx:react
 import { useState } from 'react';
-import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
+import SlCarousel from '@onsonr/nebula/dist/react/carousel';
-import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
+import SlCarouselItem from '@onsonr/nebula/dist/react/carousel-item';
-import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
-import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
+import SlSwitch from '@onsonr/nebula/dist/react/switch';
 
 const App = () => {
   const [isEnabled, setIsEnabled] = useState(false);
@@ -530,8 +530,8 @@ The `slides-per-page` attribute makes it possible to display multiple slides at
 {% raw %}
 
 ```jsx:react
-import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
+import SlCarousel from '@onsonr/nebula/dist/react/carousel';
-import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
+import SlCarouselItem from '@onsonr/nebula/dist/react/carousel-item';
 
 const App = () => (
   <SlCarousel navigation pagination slidesPerPage={2} slidesPerMove={2}>
@@ -623,8 +623,8 @@ The content of the carousel can be changed by adding or removing carousel items.
 
 ```jsx:react
 import { useState } from 'react';
-import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
+import SlCarousel from '@onsonr/nebula/dist/react/carousel';
-import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
+import SlCarouselItem from '@onsonr/nebula/dist/react/carousel-item';
 
 const css = `
   .dynamic-carousel {
@@ -740,8 +740,8 @@ Setting the `orientation` attribute to `vertical` will render the carousel in a
 ```
 
 ```jsx:react
-import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
+import SlCarousel from '@onsonr/nebula/dist/react/carousel';
-import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
+import SlCarouselItem from '@onsonr/nebula/dist/react/carousel-item';
 
 const css = `
   .vertical {
@@ -863,11 +863,11 @@ Use the `--aspect-ratio` custom property to customize the size of the carousel's
 
 ```jsx:react
 import { useState } from 'react';
-import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
+import SlCarousel from '@onsonr/nebula/dist/react/carousel';
-import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
+import SlCarouselItem from '@onsonr/nebula/dist/react/carousel-item';
-import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlSelect from '@onsonr/nebula/dist/react/select';
-import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlOption from '@onsonr/nebula/dist/react/option';
 
 const App = () => {
   const [aspectRatio, setAspectRatio] = useState('3/2');
@@ -971,10 +971,10 @@ Use the `--scroll-hint` custom property to add inline padding in horizontal caro
 
 ```jsx:react
 import { useState } from 'react';
-import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
+import SlCarousel from '@onsonr/nebula/dist/react/carousel';
-import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
+import SlCarouselItem from '@onsonr/nebula/dist/react/carousel-item';
-import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
-import SlRange from '@shoelace-style/shoelace/dist/react/range';
+import SlRange from '@onsonr/nebula/dist/react/range';
 
 const App = () => (
   <>
@@ -1137,10 +1137,10 @@ The carousel has a robust API that makes it possible to extend and customize. Th
 
 ```jsx:react
 import { useRef } from 'react';
-import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
+import SlCarousel from '@onsonr/nebula/dist/react/carousel';
-import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
+import SlCarouselItem from '@onsonr/nebula/dist/react/carousel-item';
-import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
-import SlRange from '@shoelace-style/shoelace/dist/react/range';
+import SlRange from '@onsonr/nebula/dist/react/range';
 
 const css = `
   .carousel-thumbnails {

docs/pages/components/checkbox.md

@@ -10,7 +10,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
+import SlCheckbox from '@onsonr/nebula/dist/react/checkbox';
 
 const App = () => <SlCheckbox>Checkbox</SlCheckbox>;
 ```
@@ -30,7 +30,7 @@ Use the `checked` attribute to activate the checkbox.
 ```
 
 ```jsx:react
-import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
+import SlCheckbox from '@onsonr/nebula/dist/react/checkbox';
 
 const App = () => <SlCheckbox checked>Checked</SlCheckbox>;
 ```
@@ -44,7 +44,7 @@ Use the `indeterminate` attribute to make the checkbox indeterminate.
 ```
 
 ```jsx:react
-import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
+import SlCheckbox from '@onsonr/nebula/dist/react/checkbox';
 
 const App = () => <SlCheckbox indeterminate>Indeterminate</SlCheckbox>;
 ```
@@ -58,7 +58,7 @@ Use the `disabled` attribute to disable the checkbox.
 ```
 
 ```jsx:react
-import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
+import SlCheckbox from '@onsonr/nebula/dist/react/checkbox';
 
 const App = () => <SlCheckbox disabled>Disabled</SlCheckbox>;
 ```
@@ -76,7 +76,7 @@ Use the `size` attribute to change a checkbox's size.
 ```
 
 ```jsx:react
-import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
+import SlCheckbox from '@onsonr/nebula/dist/react/checkbox';
 
 const App = () => (
   <>
@@ -98,7 +98,7 @@ Add descriptive help text to a switch with the `help-text` attribute. For help t
 ```
 
 ```jsx:react
-import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
+import SlCheckbox from '@onsonr/nebula/dist/react/checkbox';
 
 const App = () => <SlCheckbox help-text="What should the user know about the switch?">Label</SlCheckbox>;
 ```
@@ -141,8 +141,8 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
 
 ```jsx:react
 import { useEffect, useRef } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
+import SlCheckbox from '@onsonr/nebula/dist/react/checkbox';
 
 const App = () => {
   const checkbox = useRef(null);

docs/pages/components/color-picker.md

@@ -10,7 +10,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
+import SlColorPicker from '@onsonr/nebula/dist/react/color-picker';
 
 const App = () => <SlColorPicker label="Select a color" />;
 ```
@@ -30,7 +30,7 @@ Use the `value` attribute to set an initial value for the color picker.
 ```
 
 ```jsx:react
-import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
+import SlColorPicker from '@onsonr/nebula/dist/react/color-picker';
 
 const App = () => <SlColorPicker value="#4a90e2" label="Select a color" />;
 ```
@@ -44,7 +44,7 @@ Use the `opacity` attribute to enable the opacity slider. When this is enabled,
 ```
 
 ```jsx:react
-import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
+import SlColorPicker from '@onsonr/nebula/dist/react/color-picker';
 
 const App = () => <SlColorPicker opacity label="Select a color" />;
 ```
@@ -63,7 +63,7 @@ To prevent users from toggling the format themselves, add the `no-format-toggle`
 ```
 
 ```jsx:react
-import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
+import SlColorPicker from '@onsonr/nebula/dist/react/color-picker';
 
 const App = () => (
   <>
@@ -90,7 +90,7 @@ Use the `swatches` attribute to add convenient presets to the color picker. Any
 ```
 
 ```jsx:react
-import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
+import SlColorPicker from '@onsonr/nebula/dist/react/color-picker';
 
 const App = () => (
   <SlColorPicker
@@ -114,7 +114,7 @@ Use the `size` attribute to change the color picker's trigger size.
 ```
 
 ```jsx:react
-import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
+import SlColorPicker from '@onsonr/nebula/dist/react/color-picker';
 
 const App = () => (
   <>
@@ -134,7 +134,7 @@ The color picker can be rendered inline instead of in a dropdown using the `inli
 ```
 
 ```jsx:react
-import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
+import SlColorPicker from '@onsonr/nebula/dist/react/color-picker';
 
 const App = () => <SlColorPicker inline label="Select a color" />;
 ```

docs/pages/components/copy-button.md

@@ -6,14 +6,14 @@ layout: component
 ---
 
 ```html:preview
-<sl-copy-button value="Shoelace rocks!"></sl-copy-button>
+<sl-copy-button value="Nebula rocks!"></sl-copy-button>
 ```
 
 ```jsx:react
-import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
+import { SlCopyButton } from '@onsonr/nebula/dist/react/copy-button';
 
 const App = () => (
-  <SlCopyButton value="Shoelace rocks!" />
+  <SlCopyButton value="Nebula rocks!" />
 );
 ```
 
@@ -33,7 +33,7 @@ Copy Buttons display feedback in a tooltip. You can customize the labels using t
 ```
 
 ```jsx:react
-import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
+import { SlCopyButton } from '@onsonr/nebula/dist/react/copy-button';
 
 const App = () => (
   <SlCopyButton
@@ -58,8 +58,8 @@ Use the `copy-icon`, `success-icon`, and `error-icon` slots to customize the ico
 ```
 
 ```jsx:react
-import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
+import { SlCopyButton } from '@onsonr/nebula/dist/react/copy-button';
-import { SlIcon } from '@shoelace-style/shoelace/dist/react/icon';
+import { SlIcon } from '@onsonr/nebula/dist/react/icon';
 
 const App = () => (
   <>
@@ -94,13 +94,13 @@ To copy data from an attribute, use `from="id[attr]"` where `id` is the id of th
 <br><br>
 
 <!-- Copies the link's "href" attribute -->
-<a id="my-link" href="https://shoelace.style/">Shoelace Website</a>
+<a id="my-link" href="https://shoelace.style/">Nebula Website</a>
 <sl-copy-button from="my-link[href]"></sl-copy-button>
 ```
 
 ```jsx:react
-import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
+import { SlCopyButton } from '@onsonr/nebula/dist/react/copy-button';
-import { SlInput } from '@shoelace-style/shoelace/dist/react/input';
+import { SlInput } from '@onsonr/nebula/dist/react/input';
 
 const App = () => (
   <>
@@ -117,7 +117,7 @@ const App = () => (
     <br /><br />
 
     {/* Copies the link's "href" attribute */}
-    <a id="my-link" href="https://shoelace.style/">Shoelace Website</a>
+    <a id="my-link" href="https://shoelace.style/">Nebula Website</a>
     <SlCopyButton from="my-link[href]" />
   </>
 );
@@ -134,7 +134,7 @@ This example demonstrates what happens when a copy error occurs. You can customi
 ```
 
 ```jsx:react
-import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
+import { SlCopyButton } from '@onsonr/nebula/dist/react/copy-button';
 
 const App = () => (
   <SlCopyButton from="i-do-not-exist" />
@@ -150,7 +150,7 @@ Copy buttons can be disabled by adding the `disabled` attribute.
 ```
 
 ```jsx:react
-import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
+import { SlCopyButton } from '@onsonr/nebula/dist/react/copy-button';
 
 const App = () => (
   <SlCopyButton value="You can't copy me" disabled />
@@ -162,14 +162,14 @@ const App = () => (
 A success indicator is briefly shown after copying. You can customize the length of time the indicator is shown using the `feedback-duration` attribute.
 
 ```html:preview
-<sl-copy-button value="Shoelace rocks!" feedback-duration="250"></sl-copy-button>
+<sl-copy-button value="Nebula rocks!" feedback-duration="250"></sl-copy-button>
 ```
 
 ```jsx:react
-import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
+import { SlCopyButton } from '@onsonr/nebula/dist/react/copy-button';
 
 const App = () => (
-  <SlCopyButton value="Shoelace rocks!" feedback-duration={250} />
+  <SlCopyButton value="Nebula rocks!" feedback-duration={250} />
 );
 ```
 
@@ -216,7 +216,7 @@ You can customize the button to your liking with CSS.
 ```
 
 ```jsx:react
-import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
+import { SlCopyButton } from '@onsonr/nebula/dist/react/copy-button';
 
 const css = `
   .custom-styles {

docs/pages/components/details.md

@@ -15,7 +15,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlDetails from '@shoelace-style/shoelace/dist/react/details';
+import SlDetails from '@onsonr/nebula/dist/react/details';
 
 const App = () => (
   <SlDetails summary="Toggle Me">
@@ -39,7 +39,7 @@ Use the `disable` attribute to prevent the details from expanding.
 ```
 
 ```jsx:react
-import SlDetails from '@shoelace-style/shoelace/dist/react/details';
+import SlDetails from '@onsonr/nebula/dist/react/details';
 
 const App = () => (
   <SlDetails summary="Disabled" disabled>
@@ -71,8 +71,8 @@ Use the `expand-icon` and `collapse-icon` slots to change the expand and collaps
 ```
 
 ```jsx:react
-import SlDetails from '@shoelace-style/shoelace/dist/react/details';
+import SlDetails from '@onsonr/nebula/dist/react/details';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
 
 const css = `
   sl-details.custom-icon::part(summary-icon) {

docs/pages/components/dialog.md

@@ -27,8 +27,8 @@ layout: component
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlDialog from '@shoelace-style/shoelace/dist/react/dialog';
+import SlDialog from '@onsonr/nebula/dist/react/dialog';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -76,8 +76,8 @@ Use the `--width` custom property to set the dialog's width.
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlDialog from '@shoelace-style/shoelace/dist/react/dialog';
+import SlDialog from '@onsonr/nebula/dist/react/dialog';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -127,8 +127,8 @@ By design, a dialog's height will never exceed that of the viewport. As such, di
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlDialog from '@shoelace-style/shoelace/dist/react/dialog';
+import SlDialog from '@onsonr/nebula/dist/react/dialog';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -186,9 +186,9 @@ The header shows a functional close button by default. You can use the `header-a
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlDialog from '@shoelace-style/shoelace/dist/react/dialog';
+import SlDialog from '@onsonr/nebula/dist/react/dialog';
-import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
+import SlIconButton from '@onsonr/nebula/dist/react/icon-button';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -249,8 +249,8 @@ You can use `event.detail.source` to determine what triggered the request to clo
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlDialog from '@shoelace-style/shoelace/dist/react/dialog';
+import SlDialog from '@onsonr/nebula/dist/react/dialog';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -302,9 +302,9 @@ By default, the dialog's panel will gain focus when opened. This allows a subseq
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlDialog from '@shoelace-style/shoelace/dist/react/dialog';
+import SlDialog from '@onsonr/nebula/dist/react/dialog';
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import SlInput from '@onsonr/nebula/dist/react/input';
 
 const App = () => {
   const [open, setOpen] = useState(false);

docs/pages/components/divider.md

@@ -10,7 +10,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
 
 const App = () => <SlDivider />;
 ```
@@ -28,7 +28,7 @@ Use the `--width` custom property to change the width of the divider.
 {% raw %}
 
 ```jsx:react
-import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
 
 const App = () => <SlDivider style={{ '--width': '4px' }} />;
 ```
@@ -46,7 +46,7 @@ Use the `--color` custom property to change the color of the divider.
 {% raw %}
 
 ```jsx:react
-import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
 
 const App = () => <SlDivider style={{ '--color': 'tomato' }} />;
 ```
@@ -68,7 +68,7 @@ Use the `--spacing` custom property to change the amount of space between the di
 {% raw %}
 
 ```jsx:react
-import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
 
 const App = () => (
   <>
@@ -98,7 +98,7 @@ Add the `vertical` attribute to draw the divider in a vertical orientation. The
 {% raw %}
 
 ```jsx:react
-import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
 
 const App = () => (
   <div
@@ -138,9 +138,9 @@ Use dividers in [menus](/components/menu) to visually group menu items.
 {% raw %}
 
 ```jsx:react
-import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
-import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
 
 const App = () => (
   <SlMenu style={{ maxWidth: '200px' }}>

docs/pages/components/drawer.md

@@ -27,8 +27,8 @@ layout: component
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+import SlDrawer from '@onsonr/nebula/dist/react/drawer';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -74,8 +74,8 @@ By default, drawers slide in from the end. To make the drawer slide in from the
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+import SlDrawer from '@onsonr/nebula/dist/react/drawer';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -119,8 +119,8 @@ To make the drawer slide in from the top, set the `placement` attribute to `top`
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+import SlDrawer from '@onsonr/nebula/dist/react/drawer';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -164,8 +164,8 @@ To make the drawer slide in from the bottom, set the `placement` attribute to `b
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+import SlDrawer from '@onsonr/nebula/dist/react/drawer';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -219,8 +219,8 @@ Unlike normal drawers, contained drawers are not modal. This means they do not s
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+import SlDrawer from '@onsonr/nebula/dist/react/drawer';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -287,8 +287,8 @@ Use the `--size` custom property to set the drawer's size. This will be applied
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+import SlDrawer from '@onsonr/nebula/dist/react/drawer';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -338,8 +338,8 @@ By design, a drawer's height will never exceed 100% of its container. As such, d
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+import SlDrawer from '@onsonr/nebula/dist/react/drawer';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -396,9 +396,9 @@ The header shows a functional close button by default. You can use the `header-a
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+import SlDrawer from '@onsonr/nebula/dist/react/drawer';
-import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
+import SlIconButton from '@onsonr/nebula/dist/react/icon-button';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -454,8 +454,8 @@ You can use `event.detail.source` to determine what triggered the request to clo
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+import SlDrawer from '@onsonr/nebula/dist/react/drawer';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -507,9 +507,9 @@ By default, the drawer's panel will gain focus when opened. This allows a subseq
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+import SlDrawer from '@onsonr/nebula/dist/react/drawer';
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import SlInput from '@onsonr/nebula/dist/react/input';
 
 const App = () => {
   const [open, setOpen] = useState(false);

docs/pages/components/dropdown.md

@@ -33,12 +33,12 @@ Dropdowns are designed to work well with [menus](/components/menu) to provide a
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
-import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import SlDropdown from '@onsonr/nebula/dist/react/dropdown';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
-import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
 
 const App = () => (
   <SlDropdown>
@@ -98,10 +98,10 @@ When dropdowns are used with [menus](/components/menu), you can listen for the [
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import SlDropdown from '@onsonr/nebula/dist/react/dropdown';
-import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
 
 const App = () => {
   function handleSelect(event) {
@@ -151,10 +151,10 @@ Alternatively, you can listen for the `click` event on individual menu items. No
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import SlDropdown from '@onsonr/nebula/dist/react/dropdown';
-import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
 
 const App = () => {
   function handleCut() {
@@ -203,11 +203,11 @@ The preferred placement of the dropdown can be set with the `placement` attribut
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
-import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import SlDropdown from '@onsonr/nebula/dist/react/dropdown';
-import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
 
 const App = () => (
   <SlDropdown placement="top-start">
@@ -245,11 +245,11 @@ The distance from the panel to the trigger can be customized using the `distance
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
-import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import SlDropdown from '@onsonr/nebula/dist/react/dropdown';
-import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
 
 const App = () => (
   <SlDropdown distance={30}>
@@ -287,11 +287,11 @@ The offset of the panel along the trigger can be customized using the `skidding`
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
-import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import SlDropdown from '@onsonr/nebula/dist/react/dropdown';
-import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
 
 const App = () => (
   <SlDropdown skidding={30}>
@@ -347,11 +347,11 @@ To create a submenu, nest an `<sl-menu slot="submenu">` element in a [menu item]
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
-import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import SlDropdown from '@onsonr/nebula/dist/react/dropdown';
-import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
 
 const css = `
   .dropdown-hoist {
@@ -436,11 +436,11 @@ Dropdown panels will be clipped if they're inside a container that has `overflow
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
-import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import SlDropdown from '@onsonr/nebula/dist/react/dropdown';
-import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
 
 const css = `
   .dropdown-hoist {

docs/pages/components/format-bytes.md

@@ -24,9 +24,9 @@ layout: component
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
+import SlFormatBytes from '@onsonr/nebula/dist/react/format-bytes';
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import SlInput from '@onsonr/nebula/dist/react/input';
 
 const App = () => {
   const [value, setValue] = useState(1000);
@@ -64,7 +64,7 @@ Set the `value` attribute to a number to get the value in bytes.
 ```
 
 ```jsx:react
-import SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
+import SlFormatBytes from '@onsonr/nebula/dist/react/format-bytes';
 
 const App = () => (
   <>
@@ -91,7 +91,7 @@ To get the value in bits, set the `unit` attribute to `bit`.
 ```
 
 ```jsx:react
-import SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
+import SlFormatBytes from '@onsonr/nebula/dist/react/format-bytes';
 
 const App = () => (
   <>
@@ -118,7 +118,7 @@ Use the `lang` attribute to set the number formatting locale.
 ```
 
 ```jsx:react
-import SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
+import SlFormatBytes from '@onsonr/nebula/dist/react/format-bytes';
 
 const App = () => (
   <>

docs/pages/components/format-date.md

@@ -8,12 +8,12 @@ layout: component
 Localization is handled by the browser's [`Intl.DateTimeFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat). No language packs are required.
 
 ```html:preview
-<!-- Shoelace 2 release date 🎉 -->
+<!-- Nebula 2 release date 🎉 -->
 <sl-format-date date="2020-07-15T09:17:00-04:00"></sl-format-date>
 ```
 
 ```jsx:react
-import SlFormatDate from '@shoelace-style/shoelace/dist/react/format-date';
+import SlFormatDate from '@onsonr/nebula/dist/react/format-date';
 
 const App = () => <SlFormatDate date="2020-07-15T09:17:00-04:00" />;
 ```
@@ -51,7 +51,7 @@ Formatting options are based on those found in the [`Intl.DateTimeFormat` API](h
 ```
 
 ```jsx:react
-import SlFormatDate from '@shoelace-style/shoelace/dist/react/format-date';
+import SlFormatDate from '@onsonr/nebula/dist/react/format-date';
 
 const App = () => (
   <>
@@ -91,7 +91,7 @@ By default, the browser will determine whether to use 12-hour or 24-hour time. T
 ```
 
 ```jsx:react
-import SlFormatDate from '@shoelace-style/shoelace/dist/react/format-date';
+import SlFormatDate from '@onsonr/nebula/dist/react/format-date';
 
 const App = () => (
   <>
@@ -113,7 +113,7 @@ Russian: <sl-format-date lang="ru"></sl-format-date>
 ```
 
 ```jsx:react
-import SlFormatDate from '@shoelace-style/shoelace/dist/react/format-date';
+import SlFormatDate from '@onsonr/nebula/dist/react/format-date';
 
 const App = () => (
   <>

docs/pages/components/format-number.md

@@ -27,8 +27,8 @@ Localization is handled by the browser's [`Intl.NumberFormat` API](https://devel
 
 ```jsx:react
 import { useState } from 'react';
-import SlFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';
+import SlFormatNumber from '@onsonr/nebula/dist/react/format-number';
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import SlInput from '@onsonr/nebula/dist/react/input';
 
 const App = () => {
   const [value, setValue] = useState(1000);
@@ -67,7 +67,7 @@ To get the value as a percent, set the `type` attribute to `percent`.
 ```
 
 ```jsx:react
-import SlFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';
+import SlFormatNumber from '@onsonr/nebula/dist/react/format-number';
 
 const App = () => (
   <>
@@ -95,7 +95,7 @@ Russian: <sl-format-number value="2000" lang="ru" minimum-fraction-digits="2"></
 ```
 
 ```jsx:react
-import SlFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';
+import SlFormatNumber from '@onsonr/nebula/dist/react/format-number';
 
 const App = () => (
   <>
@@ -121,7 +121,7 @@ To format a number as a monetary value, set the `type` attribute to `currency` a
 ```
 
 ```jsx:react
-import SlFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';
+import SlFormatNumber from '@onsonr/nebula/dist/react/format-number';
 
 const App = () => (
   <>

docs/pages/components/icon-button.md

@@ -5,14 +5,14 @@ meta:
 layout: component
 ---
 
-For a full list of icons that come bundled with Shoelace, refer to the [icon component](/components/icon).
+For a full list of icons that come bundled with Nebula, refer to the [icon component](/components/icon).
 
 ```html:preview
 <sl-icon-button name="gear" label="Settings"></sl-icon-button>
 ```
 
 ```jsx:react
-import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
+import SlIconButton from '@onsonr/nebula/dist/react/icon-button';
 
 const App = () => <SlIconButton name="gear" label="Settings" />;
 ```
@@ -32,7 +32,7 @@ Icon buttons inherit their parent element's `font-size`.
 {% raw %}
 
 ```jsx:react
-import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
+import SlIconButton from '@onsonr/nebula/dist/react/icon-button';
 
 const App = () => (
   <>
@@ -73,7 +73,7 @@ Icon buttons are designed to have a uniform appearance, so their color is not in
 ```
 
 ```jsx:react
-import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
+import SlIconButton from '@onsonr/nebula/dist/react/icon-button';
 
 const css = `
   .icon-button-color sl-icon-button::part(base) {
@@ -112,7 +112,7 @@ Use the `href` attribute to convert the button to a link.
 ```
 
 ```jsx:react
-import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
+import SlIconButton from '@onsonr/nebula/dist/react/icon-button';
 
 const App = () => <SlIconButton name="gear" label="Settings" href="https://example.com" target="_blank" />;
 ```
@@ -128,8 +128,8 @@ Wrap a tooltip around an icon button to provide contextual information to the us
 ```
 
 ```jsx:react
-import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
+import SlIconButton from '@onsonr/nebula/dist/react/icon-button';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
+import SlTooltip from '@onsonr/nebula/dist/react/tooltip';
 
 const App = () => (
   <SlTooltip content="Settings">
@@ -147,7 +147,7 @@ Use the `disabled` attribute to disable the icon button.
 ```
 
 ```jsx:react
-import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
+import SlIconButton from '@onsonr/nebula/dist/react/icon-button';
 
 const App = () => <SlIconButton name="gear" label="Settings" disabled />;
 ```

docs/pages/components/icon.md

@@ -5,10 +5,10 @@ meta:
 layout: component
 ---
 
-Shoelace comes bundled with over 1,500 icons courtesy of the [Bootstrap Icons](https://icons.getbootstrap.com/) project. These icons are part of the `default` icon library. If you prefer, you can register [custom icon libraries](#icon-libraries) as well.
+Nebula comes bundled with over 1,500 icons courtesy of the [Bootstrap Icons](https://icons.getbootstrap.com/) project. These icons are part of the `default` icon library. If you prefer, you can register [custom icon libraries](#icon-libraries) as well.
 
 :::tip
-Depending on how you're loading Shoelace, you may need to copy icon assets and/or [set the base path](/getting-started/installation/#setting-the-base-path) so Shoelace knows where to load them from. Otherwise, icons may not appear and you'll see 404 Not Found errors in the dev console.
+Depending on how you're loading Nebula, you may need to copy icon assets and/or [set the base path](/getting-started/installation/#setting-the-base-path) so Nebula knows where to load them from. Otherwise, icons may not appear and you'll see 404 Not Found errors in the dev console.
 :::
 
 ## Default Icons
@@ -70,7 +70,7 @@ Icons inherit their color from the current text color. Thus, you can set the `co
 {% raw %}
 
 ```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
 
 const App = () => (
   <>
@@ -132,7 +132,7 @@ Icons are sized relative to the current font size. To change their size, set the
 {% raw %}
 
 ```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
 
 const App = () => (
   <div style={{ fontSize: '32px' }}>
@@ -167,7 +167,7 @@ For non-decorative icons, use the `label` attribute to announce it to assistive
 ```
 
 ```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
 
 const App = () => <SlIcon name="star-fill" label="Add to favorites" />;
 ```
@@ -183,7 +183,7 @@ Custom icons can be loaded individually with the `src` attribute. Only SVGs on a
 {% raw %}
 
 ```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
 
 const App = () => <SlIcon src="https://shoelace.style/assets/images/shoe.svg" style={{ fontSize: '8rem' }}></SlIcon>;
 ```
@@ -194,7 +194,7 @@ const App = () => <SlIcon src="https://shoelace.style/assets/images/shoe.svg" st
 
 You can register additional icons to use with the `<sl-icon>` component through icon libraries. Icon files can exist locally or on a CORS-enabled endpoint (e.g. a CDN). There is no limit to how many icon libraries you can register and there is no cost associated with registering them, as individual icons are only requested when they're used.
 
-Shoelace ships with two built-in icon libraries, `default` and `system`. The [default icon library](#customizing-the-default-library) contains all of the icons in the Bootstrap Icons project. The [system icon library](#customizing-the-system-library) contains only a small subset of icons that are used internally by Shoelace components.
+Nebula ships with two built-in icon libraries, `default` and `system`. The [default icon library](#customizing-the-default-library) contains all of the icons in the Bootstrap Icons project. The [system icon library](#customizing-the-system-library) contains only a small subset of icons that are used internally by Nebula components.
 
 To register an additional icon library, use the `registerIconLibrary()` function that's exported from `utilities/icon-library.js`. At a minimum, you must provide a name and a resolver function. The resolver function translates an icon name to a URL where the corresponding SVG file exists. Refer to the examples below to better understand how it works.
 
@@ -682,9 +682,9 @@ For security reasons, browsers may apply the same-origin policy on `<use>` eleme
 
 ### Customizing the System Library
 
-The system library contains only the icons used internally by Shoelace components. Unlike the default icon library, the system library does not rely on physical assets. Instead, its icons are hard-coded as data URIs into the resolver to ensure their availability.
+The system library contains only the icons used internally by Nebula components. Unlike the default icon library, the system library does not rely on physical assets. Instead, its icons are hard-coded as data URIs into the resolver to ensure their availability.
 
-If you want to change the icons Shoelace uses internally, you can register an icon library using the `system` name and a custom resolver. If you choose to do this, it's your responsibility to provide all of the icons that are required by components. You can reference `src/components/library.system.ts` for a complete list of system icons used by Shoelace.
+If you want to change the icons Nebula uses internally, you can register an icon library using the `system` name and a custom resolver. If you choose to do this, it's your responsibility to provide all of the icons that are required by components. You can reference `src/components/library.system.ts` for a complete list of system icons used by Nebula.
 
 ```html
 <script type="module">
@@ -737,7 +737,7 @@ If you want to change the icons Shoelace uses internally, you can register an ic
         list.appendChild(item);
 
         // Wrap it with a tooltip the first time the mouse lands on it. We do this instead of baking them into the DOM
-        // to improve this page's performance. See: https://github.com/shoelace-style/shoelace/issues/1122
+        // to improve this page's performance. See: https://github.com/onsonr/nebula/issues/1122
         item.addEventListener('mouseover', () => wrapWithTooltip(item), { once: true });
 
         // Copy on click

docs/pages/components/image-comparer.md

@@ -23,7 +23,7 @@ For best results, use images that share the same dimensions. The slider can be c
 ```
 
 ```jsx:react
-import SlImageComparer from '@shoelace-style/shoelace/dist/react/image-comparer';
+import SlImageComparer from '@onsonr/nebula/dist/react/image-comparer';
 
 const App = () => (
   <SlImageComparer>
@@ -63,7 +63,7 @@ Use the `position` attribute to set the initial position of the slider. This is
 ```
 
 ```jsx:react
-import SlImageComparer from '@shoelace-style/shoelace/dist/react/image-comparer';
+import SlImageComparer from '@onsonr/nebula/dist/react/image-comparer';
 
 const App = () => (
   <SlImageComparer position={25}>

docs/pages/components/include.md

@@ -14,7 +14,7 @@ The included content will be inserted into the `<sl-include>` element's default
 ```
 
 ```jsx:react
-import SlInclude from '@shoelace-style/shoelace/dist/react/include';
+import SlInclude from '@onsonr/nebula/dist/react/include';
 
 const App = () => <SlInclude src="https://shoelace.style/assets/examples/include.html" />;
 ```

docs/pages/components/input.md

@@ -10,7 +10,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import SlInput from '@onsonr/nebula/dist/react/input';
 
 const App = () => <SlInput />;
 ```
@@ -30,8 +30,8 @@ Use the `label` attribute to give the input an accessible label. For labels that
 ```
 
 ```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import SlInput from '@onsonr/nebula/dist/react/input';
 
 const App = () => <SlInput label="What is your name?" />;
 ```
@@ -45,8 +45,8 @@ Add descriptive help text to an input with the `help-text` attribute. For help t
 ```
 
 ```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import SlInput from '@onsonr/nebula/dist/react/input';
 
 const App = () => <SlInput label="Nickname" help-text="What would you like people to call you?" />;
 ```
@@ -60,7 +60,7 @@ Use the `placeholder` attribute to add a placeholder.
 ```
 
 ```jsx:react
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import SlInput from '@onsonr/nebula/dist/react/input';
 
 const App = () => <SlInput placeholder="Type something" />;
 ```
@@ -74,7 +74,7 @@ Add the `clearable` attribute to add a clear button when the input has content.
 ```
 
 ```jsx:react
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import SlInput from '@onsonr/nebula/dist/react/input';
 
 const App = () => <SlInput placeholder="Clearable" clearable />;
 ```
@@ -88,7 +88,7 @@ Add the `password-toggle` attribute to add a toggle button that will show the pa
 ```
 
 ```jsx:react
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import SlInput from '@onsonr/nebula/dist/react/input';
 
 const App = () => <SlInput type="password" placeholder="Password Toggle" size="medium" password-toggle />;
 ```
@@ -102,7 +102,7 @@ Add the `filled` attribute to draw a filled input.
 ```
 
 ```jsx:react
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import SlInput from '@onsonr/nebula/dist/react/input';
 
 const App = () => <SlInput placeholder="Type something" filled />;
 ```
@@ -116,7 +116,7 @@ Use the `disabled` attribute to disable an input.
 ```
 
 ```jsx:react
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import SlInput from '@onsonr/nebula/dist/react/input';
 
 const App = () => <SlInput placeholder="Disabled" disabled />;
 ```
@@ -134,7 +134,7 @@ Use the `size` attribute to change an input's size.
 ```
 
 ```jsx:react
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import SlInput from '@onsonr/nebula/dist/react/input';
 
 const App = () => (
   <>
@@ -160,7 +160,7 @@ Use the `pill` attribute to give inputs rounded edges.
 ```
 
 ```jsx:react
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import SlInput from '@onsonr/nebula/dist/react/input';
 
 const App = () => (
   <>
@@ -186,7 +186,7 @@ The `type` attribute controls the type of input the browser renders.
 ```
 
 ```jsx:react
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import SlInput from '@onsonr/nebula/dist/react/input';
 
 const App = () => (
   <>
@@ -221,8 +221,8 @@ Use the `prefix` and `suffix` slots to add icons.
 ```
 
 ```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import SlInput from '@onsonr/nebula/dist/react/input';
 
 const App = () => (
   <>

docs/pages/components/menu-item.md

@@ -28,10 +28,10 @@ layout: component
 {% raw %}
 
 ```jsx:react
-import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
-import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
 
 const App = () => (
   <SlMenu style={{ maxWidth: '200px' }}>
@@ -89,11 +89,11 @@ Add content to the start and end of menu items using the `prefix` and `suffix` s
 {% raw %}
 
 ```jsx:react
-import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
+import SlBadge from '@onsonr/nebula/dist/react/badge';
-import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
-import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
 
 const App = () => (
   <SlMenu style={{ maxWidth: '200px' }}>
@@ -137,8 +137,8 @@ Add the `disabled` attribute to disable the menu item so it cannot be selected.
 {% raw %}
 
 ```jsx:react
-import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
 
 const App = () => (
   <SlMenu style={{ maxWidth: '200px' }}>
@@ -166,8 +166,8 @@ Use the `loading` attribute to indicate that a menu item is busy. Like a disable
 {% raw %}
 
 ```jsx:react
-import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
 
 const App = () => (
   <SlMenu style={{ maxWidth: '200px' }}>
@@ -197,8 +197,8 @@ Checkbox menu items are visually indistinguishable from regular menu items. Thei
 {% raw %}
 
 ```jsx:react
-import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
 
 const App = () => (
   <SlMenu style={{ maxWidth: '200px' }}>
@@ -247,8 +247,8 @@ The `value` attribute can be used to assign a hidden value, such as a unique ide
 {% raw %}
 
 ```jsx:react
-import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
 
 const App = () => {
   function handleSelect(event) {

docs/pages/components/menu-label.md

@@ -22,10 +22,10 @@ layout: component
 {% raw %}
 
 ```jsx:react
-import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
-import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
-import SlMenuLabel from '@shoelace-style/shoelace/dist/react/menu-label';
+import SlMenuLabel from '@onsonr/nebula/dist/react/menu-label';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
 
 const App = () => (
   <SlMenu style={{ maxWidth: '200px' }}>

docs/pages/components/menu.md

@@ -22,9 +22,9 @@ You can use [menu items](/components/menu-item), [menu labels](/components/menu-
 {% raw %}
 
 ```jsx:react
-import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
-import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
 
 const App = () => (
   <SlMenu style={{ maxWidth: '200px' }}>
@@ -63,10 +63,10 @@ Menus work really well when used inside [dropdowns](/components/dropdown).
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import SlDropdown from '@onsonr/nebula/dist/react/dropdown';
-import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
 
 const App = () => (
   <SlDropdown>
@@ -115,9 +115,9 @@ To create a submenu, nest an `<sl-menu slot="submenu">` in any [menu item](/comp
 {% raw %}
 
 ```jsx:react
-import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
-import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenu from '@onsonr/nebula/dist/react/menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
 
 const App = () => (
   <SlMenu style={{ maxWidth: '200px' }}>

docs/pages/components/mutation-observer.md

@@ -45,8 +45,8 @@ The mutation observer will report changes to the content it wraps through the `s
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlMutationObserver from '@shoelace-style/shoelace/dist/react/mutation-observer';
+import SlMutationObserver from '@onsonr/nebula/dist/react/mutation-observer';
 
 const css = `
   .resize-observer-overview div {
@@ -147,8 +147,8 @@ Use the `child-list` attribute to watch for new child elements that are added or
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlMutationObserver from '@shoelace-style/shoelace/dist/react/mutation-observer';
+import SlMutationObserver from '@onsonr/nebula/dist/react/mutation-observer';
 
 const css = `
   .mutation-child-list .buttons {

docs/pages/components/option.md

@@ -14,8 +14,8 @@ layout: component
 ```
 
 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlOption from '@onsonr/nebula/dist/react/option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlSelect from '@onsonr/nebula/dist/react/select';
 
 const App = () => (
   <SlSelect>
@@ -41,8 +41,8 @@ Use the `disabled` attribute to disable an option and prevent it from being sele
 ```
 
 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlOption from '@onsonr/nebula/dist/react/option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlSelect from '@onsonr/nebula/dist/react/select';
 
 const App = () => (
   <SlSelect>

docs/pages/components/popup.md

@@ -104,11 +104,11 @@ Popup is a low-level utility built specifically for positioning elements. Do not
 
 ```jsx:react
 import { useState } from 'react';
-import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
+import SlPopup from '@onsonr/nebula/dist/react/popup';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlSelect from '@onsonr/nebula/dist/react/select';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import SlInput from '@onsonr/nebula/dist/react/input';
-import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
+import SlSwitch from '@onsonr/nebula/dist/react/switch';
 
 const css = `
   .popup-overview sl-popup {
@@ -273,8 +273,8 @@ Popups are inactive and hidden until the `active` attribute is applied. Removing
 
 ```jsx:react
 import { useState } from 'react';
-import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
+import SlPopup from '@onsonr/nebula/dist/react/popup';
-import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
+import SlSwitch from '@onsonr/nebula/dist/react/switch';
 
 const css = `
   .popup-active span[slot='anchor'] {
@@ -346,7 +346,7 @@ By default, anchors are slotted into the popup using the `anchor` slot. If your
 ```
 
 ```jsx:react
-import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
+import SlPopup from '@onsonr/nebula/dist/react/popup';
 
 const css = `
   #external-anchor {
@@ -441,9 +441,9 @@ Since placement is preferred when using `flip`, you can observe the popup's curr
 
 ```jsx:react
 import { useState } from 'react';
-import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
+import SlPopup from '@onsonr/nebula/dist/react/popup';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlSelect from '@onsonr/nebula/dist/react/select';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
 
 const css = `
   .popup-placement span[slot='anchor'] {
@@ -545,8 +545,8 @@ Use the `distance` attribute to change the distance between the popup and its an
 
 ```jsx:react
 import { useState } from 'react';
-import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
+import SlPopup from '@onsonr/nebula/dist/react/popup';
-import SlRange from '@shoelace-style/shoelace/dist/react/range';
+import SlRange from '@onsonr/nebula/dist/react/range';
 
 const css = `
   .popup-distance span[slot='anchor'] {
@@ -642,8 +642,8 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
 
 ```jsx:react
 import { useState } from 'react';
-import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
+import SlPopup from '@onsonr/nebula/dist/react/popup';
-import SlRange from '@shoelace-style/shoelace/dist/react/range';
+import SlRange from '@onsonr/nebula/dist/react/range';
 
 const css = `
   .popup-skidding span[slot='anchor'] {
@@ -786,10 +786,10 @@ By default, the arrow will be aligned as close to the center of the _anchor_ as
 
 ```jsx:react
 import { useState } from 'react';
-import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
+import SlPopup from '@onsonr/nebula/dist/react/popup';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlSelect from '@onsonr/nebula/dist/react/select';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
-import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
+import SlSwitch from '@onsonr/nebula/dist/react/switch';
 
 const css = `
   .popup-arrow sl-popup {
@@ -942,9 +942,9 @@ Use the `sync` attribute to make the popup the same width or height as the ancho
 
 ```jsx:react
 import { useState } from 'react';
-import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
+import SlPopup from '@onsonr/nebula/dist/react/popup';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlSelect from '@onsonr/nebula/dist/react/select';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
 
 const css = `
   .popup-sync span[slot='anchor'] {
@@ -1055,8 +1055,8 @@ Toggle the switch and scroll the container to see the difference.
 
 ```jsx:react
 import { useState } from 'react';
-import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
+import SlPopup from '@onsonr/nebula/dist/react/popup';
-import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
+import SlSwitch from '@onsonr/nebula/dist/react/switch';
 
 const css = `
   .popup-strategy .overflow {
@@ -1164,8 +1164,8 @@ Scroll the container to see how the popup flips to prevent clipping.
 
 ```jsx:react
 import { useState } from 'react';
-import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
+import SlPopup from '@onsonr/nebula/dist/react/popup';
-import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
+import SlSwitch from '@onsonr/nebula/dist/react/switch';
 
 const css = `
   .popup-flip .overflow {
@@ -1262,7 +1262,7 @@ Scroll the container to see how the popup changes it's fallback placement to pre
 ```
 
 ```jsx:react
-import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
+import SlPopup from '@onsonr/nebula/dist/react/popup';
 
 const css = `
   .popup-flip-fallbacks .overflow {
@@ -1358,8 +1358,8 @@ Toggle the switch to see the difference.
 
 ```jsx:react
 import { useState } from 'react';
-import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
+import SlPopup from '@onsonr/nebula/dist/react/popup';
-import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
+import SlSwitch from '@onsonr/nebula/dist/react/switch';
 
 const css = `
   .popup-shift .overflow {
@@ -1471,8 +1471,8 @@ Scroll the container to see the popup resize as its available space changes.
 
 ```jsx:react
 import { useState } from 'react';
-import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
+import SlPopup from '@onsonr/nebula/dist/react/popup';
-import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
+import SlSwitch from '@onsonr/nebula/dist/react/switch';
 
 const css = `
   .popup-auto-size .overflow {
@@ -1589,9 +1589,9 @@ When a gap exists between the anchor and the popup element, this option will add
 
 ```jsx:react
 import { useState } from 'react';
-import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
+import SlPopup from '@onsonr/nebula/dist/react/popup';
-import SlRange from '@shoelace-style/shoelace/dist/react/range';
+import SlRange from '@onsonr/nebula/dist/react/range';
-import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
+import SlSwitch from '@onsonr/nebula/dist/react/switch';
 
 const css = `
   .popup-hover-bridge span[slot='anchor'] {
@@ -1757,8 +1757,8 @@ This example anchors a popup to the mouse cursor using a virtual element. As suc
 
 ```jsx:react
 import { useRef, useState } from 'react';
-import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
+import SlPopup from '@onsonr/nebula/dist/react/popup';
-import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
+import SlSwitch from '@onsonr/nebula/dist/react/switch';
 
 const css = `
   /* If you need to set a z-index, set it on the popup part like this */

docs/pages/components/progress-bar.md

@@ -10,7 +10,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
+import SlProgressBar from '@onsonr/nebula/dist/react/progress-bar';
 
 const App = () => <SlProgressBar value={50} />;
 ```
@@ -26,7 +26,7 @@ Use the `label` attribute to label the progress bar and tell assistive devices h
 ```
 
 ```jsx:react
-import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
+import SlProgressBar from '@onsonr/nebula/dist/react/progress-bar';
 
 const App = () => <SlProgressBar value="50" label="Upload progress" />;
 ```
@@ -42,7 +42,7 @@ Use the `--height` custom property to set the progress bar's height.
 {% raw %}
 
 ```jsx:react
-import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
+import SlProgressBar from '@onsonr/nebula/dist/react/progress-bar';
 
 const App = () => <SlProgressBar value={50} style={{ '--height': '6px' }} />;
 ```
@@ -82,9 +82,9 @@ Use the default slot to show a value.
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
-import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
+import SlProgressBar from '@onsonr/nebula/dist/react/progress-bar';
 
 const App = () => {
   const [value, setValue] = useState(50);
@@ -123,7 +123,7 @@ The `indeterminate` attribute can be used to inform the user that the operation
 ```
 
 ```jsx:react
-import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
+import SlProgressBar from '@onsonr/nebula/dist/react/progress-bar';
 
 const App = () => <SlProgressBar indeterminate />;
 ```

docs/pages/components/progress-ring.md

@@ -10,7 +10,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
+import SlProgressRing from '@onsonr/nebula/dist/react/progress-ring';
 
 const App = () => <SlProgressRing value="25" />;
 ```
@@ -28,7 +28,7 @@ Use the `--size` custom property to set the diameter of the progress ring.
 {% raw %}
 
 ```jsx:react
-import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
+import SlProgressRing from '@onsonr/nebula/dist/react/progress-ring';
 
 const App = () => <SlProgressRing value="50" style={{ '--size': '200px' }} />;
 ```
@@ -46,7 +46,7 @@ Use the `--track-width` and `--indicator-width` custom properties to set the wid
 {% raw %}
 
 ```jsx:react
-import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
+import SlProgressRing from '@onsonr/nebula/dist/react/progress-ring';
 
 const App = () => <SlProgressRing value="50" style={{ '--track-width': '6px', '--indicator-width': '12px' }} />;
 ```
@@ -70,7 +70,7 @@ To change the color, use the `--track-color` and `--indicator-color` custom prop
 {% raw %}
 
 ```jsx:react
-import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
+import SlProgressRing from '@onsonr/nebula/dist/react/progress-ring';
 
 const App = () => (
   <SlProgressRing
@@ -94,7 +94,7 @@ Use the `label` attribute to label the progress ring and tell assistive devices
 ```
 
 ```jsx:react
-import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
+import SlProgressRing from '@onsonr/nebula/dist/react/progress-ring';
 
 const App = () => <SlProgressRing value="50" label="Upload progress" />;
 ```
@@ -134,9 +134,9 @@ Use the default slot to show a label inside the progress ring.
 
 ```jsx:react
 import { useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
-import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
+import SlProgressRing from '@onsonr/nebula/dist/react/progress-ring';
 
 const App = () => {
   const [value, setValue] = useState(50);

docs/pages/components/qr-code.md

@@ -9,7 +9,7 @@ QR codes are useful for providing small pieces of information to users who can q
 
 ```html:preview
 <div class="qr-overview">
-  <sl-qr-code value="https://shoelace.style/" label="Scan this code to visit Shoelace on the web!"></sl-qr-code>
+  <sl-qr-code value="https://shoelace.style/" label="Scan this code to visit Nebula on the web!"></sl-qr-code>
   <br />
 
   <sl-input maxlength="255" clearable label="Value"></sl-input>
@@ -39,8 +39,8 @@ QR codes are useful for providing small pieces of information to users who can q
 
 ```jsx:react
 import { useState } from 'react';
-import SlQrCode from '@shoelace-style/shoelace/dist/react/qr-code';
+import SlQrCode from '@onsonr/nebula/dist/react/qr-code';
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import SlInput from '@onsonr/nebula/dist/react/input';
 
 const css = `
   .qr-overview {
@@ -58,7 +58,7 @@ const App = () => {
   return (
     <>
       <div className="qr-overview">
-        <SlQrCode value={value} label="Scan this code to visit Shoelace on the web!" />
+        <SlQrCode value={value} label="Scan this code to visit Nebula on the web!" />
         <br />
 
         <SlInput maxlength="255" clearable onInput={event => setValue(event.target.value)} />
@@ -81,7 +81,7 @@ Use the `fill` and `background` attributes to modify the QR code's colors. You s
 ```
 
 ```jsx:react
-import SlQrCode from '@shoelace-style/shoelace/dist/react/qr-code';
+import SlQrCode from '@onsonr/nebula/dist/react/qr-code';
 
 const App = () => <SlQrCode value="https://shoelace.style/" fill="deeppink" background="white" />;
 ```
@@ -95,7 +95,7 @@ Use the `size` attribute to change the size of the QR code.
 ```
 
 ```jsx:react
-import SlQrCode from '@shoelace-style/shoelace/dist/react/qr-code';
+import SlQrCode from '@onsonr/nebula/dist/react/qr-code';
 
 const App = () => <SlQrCode value="https://shoelace.style/" size="64" />;
 ```
@@ -109,7 +109,7 @@ Create a rounded effect with the `radius` attribute.
 ```
 
 ```jsx:react
-import SlQrCode from '@shoelace-style/shoelace/dist/react/qr-code';
+import SlQrCode from '@onsonr/nebula/dist/react/qr-code';
 
 const App = () => <SlQrCode value="https://shoelace.style/" radius="0.5" />;
 ```
@@ -136,7 +136,7 @@ QR codes can be rendered with various levels of [error correction](https://www.q
 ```
 
 ```jsx:react
-import SlQrCode from '@shoelace-style/shoelace/dist/react/qr-code';
+import SlQrCode from '@onsonr/nebula/dist/react/qr-code';
 
 const css = `
   .qr-error-correction {

docs/pages/components/radio-button.md

@@ -16,8 +16,8 @@ Radio buttons are designed to be used with [radio groups](/components/radio-grou
 ```
 
 ```jsx:react
-import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
+import SlRadioButton from '@onsonr/nebula/dist/react/radio-button';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
 
 const App = () => (
   <SlRadioGroup label="Select an option" name="a" value="1">
@@ -43,8 +43,8 @@ To set the initial value and checked state, use the `value` attribute on the con
 ```
 
 ```jsx:react
-import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
+import SlRadioButton from '@onsonr/nebula/dist/react/radio-button';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
 
 const App = () => (
   <SlRadioGroup label="Select an option" name="a" value="1">
@@ -68,8 +68,8 @@ Use the `disabled` attribute to disable a radio button.
 ```
 
 ```jsx:react
-import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
+import SlRadioButton from '@onsonr/nebula/dist/react/radio-button';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
 
 const App = () => (
   <SlRadioGroup label="Select an option" name="a" value="1">
@@ -111,8 +111,8 @@ Use the `size` attribute to change a radio button's size.
 ```
 
 ```jsx:react
-import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
+import SlRadioButton from '@onsonr/nebula/dist/react/radio-button';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
 
 const App = () => (
   <SlRadioGroup size="small" label="Select an option" name="a" value="1">
@@ -168,8 +168,8 @@ Use the `pill` attribute to give radio buttons rounded edges.
 ```
 
 ```jsx:react
-import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
+import SlRadioButton from '@onsonr/nebula/dist/react/radio-button';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
 
 const App = () => (
   <SlRadioGroup size="small" label="Select an option" name="a" value="1">
@@ -221,9 +221,9 @@ Use the `prefix` and `suffix` slots to add icons.
 ```
 
 ```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
-import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
+import SlRadioButton from '@onsonr/nebula/dist/react/radio-button';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
 
 const App = () => (
   <SlRadioGroup label="Select an option" name="a" value="1">
@@ -275,9 +275,9 @@ You can omit button labels and use icons instead. Make sure to set a `label` att
 ```
 
 ```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
-import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
+import SlRadioButton from '@onsonr/nebula/dist/react/radio-button';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
 
 const App = () => (
   <SlRadioGroup label="Select an option" name="a" value="neutral">

docs/pages/components/radio-group.md

@@ -14,8 +14,8 @@ layout: component
 ```
 
 ```jsx:react
-import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
+import SlRadio from '@onsonr/nebula/dist/react/radio';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
 
 const App = () => (
   <SlRadioGroup label="Select an option" name="a" value="1">
@@ -41,8 +41,8 @@ Add descriptive help text to a radio group with the `help-text` attribute. For h
 ```
 
 ```jsx:react
-import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
+import SlRadio from '@onsonr/nebula/dist/react/radio';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
 
 const App = () => (
   <SlRadioGroup label="Select an option" help-text="Choose the most appropriate option." name="a" value="1">
@@ -66,8 +66,8 @@ const App = () => (
 ```
 
 ```jsx:react
-import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
+import SlRadioButton from '@onsonr/nebula/dist/react/radio-button';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
 
 const App = () => (
   <SlRadioGroup label="Select an option" name="a" value="1">
@@ -91,8 +91,8 @@ Radios and radio buttons can be disabled by adding the `disabled` attribute to t
 ```
 
 ```jsx:react
-import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
+import SlRadio from '@onsonr/nebula/dist/react/radio';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
 
 const App = () => (
   <SlRadioGroup label="Select an option" name="a" value="1">
@@ -127,8 +127,8 @@ The size of [Radios](/components/radio) and [Radio Buttons](/components/radio-bu
 
 ```jsx react
 import { useState } from 'react';
-import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
+import SlRadio from '@onsonr/nebula/dist/react/radio';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
 
 const App = () => {
   const [size, setSize] = useState('medium');
@@ -182,10 +182,10 @@ Setting the `required` attribute to make selecting an option mandatory. If a val
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
-import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
+import SlRadio from '@onsonr/nebula/dist/react/radio';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
 const App = () => {
   function handleSubmit(event) {
     event.preventDefault();
@@ -255,10 +255,10 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
 
 ```jsx:react
 import { useEffect, useRef } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
-import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
+import SlRadio from '@onsonr/nebula/dist/react/radio';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
 const App = () => {
   const radioGroup = useRef(null);
   const errorMessage = 'You must choose this option';

docs/pages/components/radio.md

@@ -16,8 +16,8 @@ Radios are designed to be used with [radio groups](/components/radio-group).
 ```
 
 ```jsx:react
-import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
+import SlRadio from '@onsonr/nebula/dist/react/radio';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
 
 const App = () => (
   <SlRadioGroup label="Select an option" name="a" value="1">
@@ -47,8 +47,8 @@ To set the initial value and checked state, use the `value` attribute on the con
 ```
 
 ```jsx:react
-import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
+import SlRadio from '@onsonr/nebula/dist/react/radio';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
 
 const App = () => (
   <SlRadioGroup label="Select an option" name="a" value="3">
@@ -72,8 +72,8 @@ Use the `disabled` attribute to disable a radio.
 ```
 
 ```jsx:react
-import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
+import SlRadio from '@onsonr/nebula/dist/react/radio';
-import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
+import SlRadioGroup from '@onsonr/nebula/dist/react/radio-group';
 
 const App = () => (
   <SlRadioGroup label="Select an option" name="a" value="1">
@@ -115,7 +115,7 @@ Add the `size` attribute to the [Radio Group](/components/radio-group) to change
 ```
 
 ```jsx react
-import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
+import SlRadio from '@onsonr/nebula/dist/react/radio';
 
 const App = () => (
   <>

docs/pages/components/range.md

@@ -10,7 +10,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlRange from '@shoelace-style/shoelace/dist/react/range';
+import SlRange from '@onsonr/nebula/dist/react/range';
 
 const App = () => <SlRange />;
 ```
@@ -30,7 +30,7 @@ Use the `label` attribute to give the range an accessible label. For labels that
 ```
 
 ```jsx:react
-import SlRange from '@shoelace-style/shoelace/dist/react/range';
+import SlRange from '@onsonr/nebula/dist/react/range';
 
 const App = () => <SlRange label="Volume" min={0} max={100} />;
 ```
@@ -44,7 +44,7 @@ Add descriptive help text to a range with the `help-text` attribute. For help te
 ```
 
 ```jsx:react
-import SlRange from '@shoelace-style/shoelace/dist/react/range';
+import SlRange from '@onsonr/nebula/dist/react/range';
 
 const App = () => <SlRange label="Volume" help-text="Controls the volume of the current song." min={0} max={100} />;
 ```
@@ -58,7 +58,7 @@ Use the `min` and `max` attributes to set the range's minimum and maximum values
 ```
 
 ```jsx:react
-import SlRange from '@shoelace-style/shoelace/dist/react/range';
+import SlRange from '@onsonr/nebula/dist/react/range';
 
 const App = () => <SlRange min={0} max={10} step={1} />;
 ```
@@ -72,7 +72,7 @@ Use the `disabled` attribute to disable a slider.
 ```
 
 ```jsx:react
-import SlRange from '@shoelace-style/shoelace/dist/react/range';
+import SlRange from '@onsonr/nebula/dist/react/range';
 
 const App = () => <SlRange disabled />;
 ```
@@ -86,7 +86,7 @@ By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it be
 ```
 
 ```jsx:react
-import SlRange from '@shoelace-style/shoelace/dist/react/range';
+import SlRange from '@onsonr/nebula/dist/react/range';
 
 const App = () => <SlRange tooltip="bottom" />;
 ```
@@ -100,7 +100,7 @@ To disable the tooltip, set `tooltip` to `none`.
 ```
 
 ```jsx:react
-import SlRange from '@shoelace-style/shoelace/dist/react/range';
+import SlRange from '@onsonr/nebula/dist/react/range';
 
 const App = () => <SlRange tooltip="none" />;
 ```
@@ -121,7 +121,7 @@ You can customize the active and inactive portions of the track using the `--tra
 {% raw %}
 
 ```jsx:react
-import SlRange from '@shoelace-style/shoelace/dist/react/range';
+import SlRange from '@onsonr/nebula/dist/react/range';
 
 const App = () => (
   <SlRange
@@ -154,7 +154,7 @@ You can customize the initial offset of the active track using the `--track-acti
 {% raw %}
 
 ```jsx:react
-import SlRange from '@shoelace-style/shoelace/dist/react/range';
+import SlRange from '@onsonr/nebula/dist/react/range';
 
 const App = () => (
   <SlRange
@@ -185,7 +185,7 @@ You can change the tooltip's content by setting the `tooltipFormatter` property
 ```
 
 ```jsx:react
-import SlRange from '@shoelace-style/shoelace/dist/react/range';
+import SlRange from '@onsonr/nebula/dist/react/range';
 
 const App = () => <SlRange min={0} max={100} step={1} tooltipFormatter={value => `Total - ${value}%`} />;
 ```

docs/pages/components/rating.md

@@ -10,7 +10,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlRating from '@shoelace-style/shoelace/dist/react/rating';
+import SlRating from '@onsonr/nebula/dist/react/rating';
 
 const App = () => <SlRating label="Rating" />;
 ```
@@ -26,7 +26,7 @@ Ratings are commonly identified contextually, so labels aren't displayed. Howeve
 ```
 
 ```jsx:react
-import SlRating from '@shoelace-style/shoelace/dist/react/rating';
+import SlRating from '@onsonr/nebula/dist/react/rating';
 
 const App = () => <SlRating label="Rate this component" />;
 ```
@@ -40,7 +40,7 @@ Ratings are 0-5 by default. To change the maximum possible value, use the `max`
 ```
 
 ```jsx:react
-import SlRating from '@shoelace-style/shoelace/dist/react/rating';
+import SlRating from '@onsonr/nebula/dist/react/rating';
 
 const App = () => <SlRating label="Rating" max={3} />;
 ```
@@ -54,7 +54,7 @@ Use the `precision` attribute to let users select fractional ratings.
 ```
 
 ```jsx:react
-import SlRating from '@shoelace-style/shoelace/dist/react/rating';
+import SlRating from '@onsonr/nebula/dist/react/rating';
 
 const App = () => <SlRating label="Rating" precision={0.5} value={2.5} />;
 ```
@@ -70,7 +70,7 @@ Set the `--symbol-size` custom property to adjust the size.
 {% raw %}
 
 ```jsx:react
-import SlRating from '@shoelace-style/shoelace/dist/react/rating';
+import SlRating from '@onsonr/nebula/dist/react/rating';
 
 const App = () => <SlRating label="Rating" style={{ '--symbol-size': '2rem' }} />;
 ```
@@ -86,7 +86,7 @@ Use the `readonly` attribute to display a rating that users can't change.
 ```
 
 ```jsx:react
-import SlRating from '@shoelace-style/shoelace/dist/react/rating';
+import SlRating from '@onsonr/nebula/dist/react/rating';
 
 const App = () => <SlRating label="Rating" readonly value={3} />;
 ```
@@ -100,7 +100,7 @@ Use the `disable` attribute to disable the rating.
 ```
 
 ```jsx:react
-import SlRating from '@shoelace-style/shoelace/dist/react/rating';
+import SlRating from '@onsonr/nebula/dist/react/rating';
 
 const App = () => <SlRating label="Rating" disabled value={3} />;
 ```
@@ -152,7 +152,7 @@ The event has a payload with `phase` and `value` properties. The `phase` propert
 
 ```jsx:react
 import { useState } from 'react';
-import SlRating from '@shoelace-style/shoelace/dist/react/rating';
+import SlRating from '@onsonr/nebula/dist/react/rating';
 
 const terms = ['No rating', 'Terrible', 'Bad', 'OK', 'Good', 'Excellent'];
 const css = `
@@ -214,7 +214,7 @@ You can provide custom icons by passing a function to the `getSymbol` property.
 {% raw %}
 
 ```jsx:react
-import SlRating from '@shoelace-style/shoelace/dist/react/rating';
+import SlRating from '@onsonr/nebula/dist/react/rating';
 
 const App = () => (
   <SlRating
@@ -245,7 +245,7 @@ You can also use the `getSymbol` property to render different icons based on val
 ```
 
 ```jsx:react
-import SlRating from '@shoelace-style/shoelace/dist/react/rating';
+import SlRating from '@onsonr/nebula/dist/react/rating';
 
 function getSymbol(value) {
   const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing'];

docs/pages/components/relative-time.md

@@ -8,12 +8,12 @@ layout: component
 Localization is handled by the browser's [`Intl.RelativeTimeFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat). No language packs are required.
 
 ```html:preview
-<!-- Shoelace 2 release date 🎉 -->
+<!-- Nebula 2 release date 🎉 -->
 <sl-relative-time date="2020-07-15T09:17:00-04:00"></sl-relative-time>
 ```
 
 ```jsx:react
-import SlRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time';
+import SlRelativeTime from '@onsonr/nebula/dist/react/relative-time';
 
 const App = () => <SlRelativeTime date="2020-07-15T09:17:00-04:00" />;
 ```
@@ -44,7 +44,7 @@ Use the `sync` attribute to update the displayed value automatically as time pas
 ```
 
 ```jsx:react
-import SlRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time';
+import SlRelativeTime from '@onsonr/nebula/dist/react/relative-time';
 
 const date = new Date(new Date().getTime() - 60000);
 
@@ -62,7 +62,7 @@ You can change how the time is displayed using the `format` attribute. Note that
 ```
 
 ```jsx:react
-import SlRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time';
+import SlRelativeTime from '@onsonr/nebula/dist/react/relative-time';
 
 const App = () => (
   <>
@@ -88,7 +88,7 @@ Russian: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="ru"></sl-relat
 ```
 
 ```jsx:react
-import SlRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time';
+import SlRelativeTime from '@onsonr/nebula/dist/react/relative-time';
 
 const App = () => (
   <>

docs/pages/components/resize-observer.md

@@ -36,7 +36,7 @@ The resize observer will report changes to the dimensions of the elements it wra
 ```
 
 ```jsx:react
-import SlResizeObserver from '@shoelace-style/shoelace/dist/react/resize-observer';
+import SlResizeObserver from '@onsonr/nebula/dist/react/resize-observer';
 
 const css = `
   .resize-observer-overview div {

docs/pages/components/select.md

@@ -17,8 +17,8 @@ layout: component
 ```
 
 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlOption from '@onsonr/nebula/dist/react/option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlSelect from '@onsonr/nebula/dist/react/select';
 
 const App = () => (
   <SlSelect>
@@ -51,8 +51,8 @@ Use the `label` attribute to give the select an accessible label. For labels tha
 ```
 
 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlOption from '@onsonr/nebula/dist/react/option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlSelect from '@onsonr/nebula/dist/react/select';
 
 const App = () => (
   <SlSelect label="Select one">
@@ -76,8 +76,8 @@ Add descriptive help text to a select with the `help-text` attribute. For help t
 ```
 
 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlOption from '@onsonr/nebula/dist/react/option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlSelect from '@onsonr/nebula/dist/react/select';
 
 const App = () => (
   <SlSelect label="Experience" help-text="Please tell us your skill level.">
@@ -101,8 +101,8 @@ Use the `placeholder` attribute to add a placeholder.
 ```
 
 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlOption from '@onsonr/nebula/dist/react/option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlSelect from '@onsonr/nebula/dist/react/select';
 
 const App = () => (
   <SlSelect placeholder="Select one">
@@ -126,8 +126,8 @@ Use the `clearable` attribute to make the control clearable. The clear button on
 ```
 
 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlOption from '@onsonr/nebula/dist/react/option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlSelect from '@onsonr/nebula/dist/react/select';
 
 const App = () => (
   <SlSelect placeholder="Clearable" clearable>
@@ -151,8 +151,8 @@ Add the `filled` attribute to draw a filled select.
 ```
 
 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlOption from '@onsonr/nebula/dist/react/option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlSelect from '@onsonr/nebula/dist/react/select';
 
 const App = () => (
   <SlSelect filled>
@@ -176,8 +176,8 @@ Use the `pill` attribute to give selects rounded edges.
 ```
 
 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlOption from '@onsonr/nebula/dist/react/option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlSelect from '@onsonr/nebula/dist/react/select';
 
 const App = () => (
   <SlSelect pill>
@@ -201,8 +201,8 @@ Use the `disabled` attribute to disable a select.
 ```
 
 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlOption from '@onsonr/nebula/dist/react/option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlSelect from '@onsonr/nebula/dist/react/select';
 
 const App = () => (
   <SlSelect placeholder="Disabled" disabled>
@@ -229,8 +229,8 @@ To allow multiple options to be selected, use the `multiple` attribute. It's a g
 ```
 
 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlOption from '@onsonr/nebula/dist/react/option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlSelect from '@onsonr/nebula/dist/react/select';
 
 const App = () => (
   <SlSelect label="Select a Few" value={["option-1", "option-2", "option-3"]} multiple clearable>
@@ -264,9 +264,9 @@ When using `multiple`, the `value` _attribute_ uses space-delimited values to se
 ```
 
 ```jsx:react
-import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDivider from '@onsonr/nebula/dist/react/divider';
-import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlOption from '@onsonr/nebula/dist/react/option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlSelect from '@onsonr/nebula/dist/react/select';
 
 const App = () => (
   <SlSelect value={["option-1", "option-2"]} multiple clearable>
@@ -296,8 +296,8 @@ Use `<sl-divider>` to group listbox items visually. You can also use `<small>` t
 ```
 
 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlOption from '@onsonr/nebula/dist/react/option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlSelect from '@onsonr/nebula/dist/react/select';
 
 const App = () => (
   <SlSelect>
@@ -340,8 +340,8 @@ Use the `size` attribute to change a select's size. Note that size does not appl
 ```
 
 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlOption from '@onsonr/nebula/dist/react/option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlSelect from '@onsonr/nebula/dist/react/select';
 
 const App = () => (
   <>
@@ -383,8 +383,8 @@ The preferred placement of the select's listbox can be set with the `placement`
 ```
 
 ```jsx:react
-import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlOption from '@onsonr/nebula/dist/react/option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlSelect from '@onsonr/nebula/dist/react/select';
 
 const App = () => (
   <SlSelect placement="top">
@@ -423,9 +423,9 @@ Use the `prefix` slot to prepend an icon to the control.
 ```
 
 ```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
-import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlOption from '@onsonr/nebula/dist/react/option';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlSelect from '@onsonr/nebula/dist/react/select';
 
 const App = () => (
   <>

docs/pages/components/skeleton.md

@@ -56,7 +56,7 @@ Skeletons try not to be opinionated, as there are endless possibilities for desi
 ```
 
 ```jsx:react
-import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
+import SlSkeleton from '@onsonr/nebula/dist/react/skeleton';
 
 const css = `
   .skeleton-overview header {
@@ -139,7 +139,7 @@ There are two built-in effects, `sheen` and `pulse`. Effects are intentionally s
 ```
 
 ```jsx:react
-import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
+import SlSkeleton from '@onsonr/nebula/dist/react/skeleton';
 
 const css = `
   .skeleton-effects {
@@ -200,7 +200,7 @@ Use multiple skeletons and some clever styles to simulate paragraphs.
 ```
 
 ```jsx:react
-import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
+import SlSkeleton from '@onsonr/nebula/dist/react/skeleton';
 
 const css = `
   .skeleton-paragraphs sl-skeleton {
@@ -265,7 +265,7 @@ Set a matching width and height to make a circle, square, or rounded avatar skel
 ```
 
 ```jsx:react
-import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
+import SlSkeleton from '@onsonr/nebula/dist/react/skeleton';
 
 const css = `
   .skeleton-avatars sl-skeleton {
@@ -360,7 +360,7 @@ Use the `--border-radius` custom property to make circles, squares, and rectangl
 ```
 
 ```jsx:react
-import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
+import SlSkeleton from '@onsonr/nebula/dist/react/skeleton';
 
 const css = `
   .skeleton-shapes sl-skeleton {
@@ -423,7 +423,7 @@ Set the `--color` and `--sheen-color` custom properties to adjust the skeleton's
 {% raw %}
 
 ```jsx:react
-import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
+import SlSkeleton from '@onsonr/nebula/dist/react/skeleton';
 
 const css = `
   .skeleton-avatars sl-skeleton {

docs/pages/components/spinner.md

@@ -10,7 +10,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlSpinner from '@shoelace-style/shoelace/dist/react/spinner';
+import SlSpinner from '@onsonr/nebula/dist/react/spinner';
 
 const App = () => <SlSpinner />;
 ```
@@ -30,7 +30,7 @@ Spinners are sized based on the current font size. To change their size, set the
 {% raw %}
 
 ```jsx:react
-import SlSpinner from '@shoelace-style/shoelace/dist/react/spinner';
+import SlSpinner from '@onsonr/nebula/dist/react/spinner';
 
 const App = () => (
   <>
@@ -54,7 +54,7 @@ The width of the spinner's track can be changed by setting the `--track-width` c
 {% raw %}
 
 ```jsx:react
-import SlSpinner from '@shoelace-style/shoelace/dist/react/spinner';
+import SlSpinner from '@onsonr/nebula/dist/react/spinner';
 
 const App = () => (
   <SlSpinner
@@ -79,7 +79,7 @@ The spinner's colors can be changed by setting the `--indicator-color` and `--tr
 {% raw %}
 
 ```jsx:react
-import SlSpinner from '@shoelace-style/shoelace/dist/react/spinner';
+import SlSpinner from '@onsonr/nebula/dist/react/spinner';
 
 const App = () => (
   <SlSpinner

docs/pages/components/split-panel.md

@@ -25,7 +25,7 @@ layout: component
 {% raw %}
 
 ```jsx:react
-import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
+import SlSplitPanel from '@onsonr/nebula/dist/react/split-panel';
 
 const App = () => (
   <SlSplitPanel>
@@ -106,7 +106,7 @@ To set the initial position in pixels instead of a percentage, use the `position
 {% raw %}
 
 ```jsx:react
-import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
+import SlSplitPanel from '@onsonr/nebula/dist/react/split-panel';
 
 const App = () => (
   <SlSplitPanel position="200">
@@ -164,7 +164,7 @@ Add the `vertical` attribute to render the split panel in a vertical orientation
 {% raw %}
 
 ```jsx:react
-import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
+import SlSplitPanel from '@onsonr/nebula/dist/react/split-panel';
 
 const App = () => (
   <SlSplitPanel vertical style={{ height: '400px' }}>
@@ -252,7 +252,7 @@ To snap panels at specific positions while dragging, add the `snap` attribute wi
 {% raw %}
 
 ```jsx:react
-import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
+import SlSplitPanel from '@onsonr/nebula/dist/react/split-panel';
 
 const css = `
   .split-panel-snapping {
@@ -344,7 +344,7 @@ Add the `disabled` attribute to prevent the divider from being repositioned.
 {% raw %}
 
 ```jsx:react
-import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
+import SlSplitPanel from '@onsonr/nebula/dist/react/split-panel';
 
 const App = () => (
   <SlSplitPanel disabled>
@@ -421,9 +421,9 @@ Try resizing the example below with each option and notice how the panels respon
 
 ```jsx:react
 import { useState } from 'react';
-import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
+import SlSplitPanel from '@onsonr/nebula/dist/react/split-panel';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlSelect from '@onsonr/nebula/dist/react/select';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
 
 const App = () => {
   const [primary, setPrimary] = useState('');
@@ -500,7 +500,7 @@ This examples demonstrates how you can ensure both panels are at least 150px usi
 {% raw %}
 
 ```jsx:react
-import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
+import SlSplitPanel from '@onsonr/nebula/dist/react/split-panel';
 
 const App = () => (
   <SlSplitPanel style={{ '--min': '150px', '--max': 'calc(100% - 150px)' }}>
@@ -568,7 +568,7 @@ Create complex layouts that can be repositioned independently by nesting split p
 {% raw %}
 
 ```jsx:react
-import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
+import SlSplitPanel from '@onsonr/nebula/dist/react/split-panel';
 
 const App = () => (
   <SlSplitPanel>
@@ -643,8 +643,8 @@ You can target the `divider` part to apply CSS properties to the divider. To add
 {% raw %}
 
 ```jsx:react
-import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
+import SlSplitPanel from '@onsonr/nebula/dist/react/split-panel';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
 
 const App = () => (
   <SlSplitPanel style={{ '--divider-width': '20px' }}>
@@ -731,8 +731,8 @@ Here's a more elaborate example that changes the divider's color and width and a
 {% raw %}
 
 ```jsx:react
-import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
+import SlSplitPanel from '@onsonr/nebula/dist/react/split-panel';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
 
 const css = `
   .split-panel-divider sl-split-panel {

docs/pages/components/switch.md

@@ -10,7 +10,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
+import SlSwitch from '@onsonr/nebula/dist/react/switch';
 
 const App = () => <SlSwitch>Switch</SlSwitch>;
 ```
@@ -30,7 +30,7 @@ Use the `checked` attribute to activate the switch.
 ```
 
 ```jsx:react
-import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
+import SlSwitch from '@onsonr/nebula/dist/react/switch';
 
 const App = () => <SlSwitch checked>Checked</SlSwitch>;
 ```
@@ -44,7 +44,7 @@ Use the `disabled` attribute to disable the switch.
 ```
 
 ```jsx:react
-import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
+import SlSwitch from '@onsonr/nebula/dist/react/switch';
 
 const App = () => <SlSwitch disabled>Disabled</SlSwitch>;
 ```
@@ -62,7 +62,7 @@ Use the `size` attribute to change a switch's size.
 ```
 
 ```jsx:react
-import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
+import SlSwitch from '@onsonr/nebula/dist/react/switch';
 
 const App = () => (
   <>
@@ -84,7 +84,7 @@ Add descriptive help text to a switch with the `help-text` attribute. For help t
 ```
 
 ```jsx:react
-import SlSwitch from '@shoelace-style/shoelace/dist/react/checkbox';
+import SlSwitch from '@onsonr/nebula/dist/react/checkbox';
 
 const App = () => <SlSwitch help-text="What should the user know about the switch?">Label</SlSwitch>;
 ```
@@ -100,7 +100,7 @@ Use the available custom properties to change how the switch is styled.
 {% raw %}
 
 ```jsx:react
-import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
+import SlSwitch from '@onsonr/nebula/dist/react/switch';
 
 const App = () => (
   <SlSwitch

docs/pages/components/tab-group.md

@@ -22,9 +22,9 @@ Tab groups make use of [tabs](/components/tab) and [tab panels](/components/tab-
 ```
 
 ```jsx:react
-import SlTab from '@shoelace-style/shoelace/dist/react/tab';
+import SlTab from '@onsonr/nebula/dist/react/tab';
-import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
+import SlTabGroup from '@onsonr/nebula/dist/react/tab-group';
-import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
+import SlTabPanel from '@onsonr/nebula/dist/react/tab-panel';
 
 const App = () => (
   <SlTabGroup>
@@ -70,9 +70,9 @@ Tabs can be shown on the bottom by setting `placement` to `bottom`.
 ```
 
 ```jsx:react
-import SlTab from '@shoelace-style/shoelace/dist/react/tab';
+import SlTab from '@onsonr/nebula/dist/react/tab';
-import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
+import SlTabGroup from '@onsonr/nebula/dist/react/tab-group';
-import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
+import SlTabPanel from '@onsonr/nebula/dist/react/tab-panel';
 
 const App = () => (
   <SlTabGroup placement="bottom">
@@ -116,9 +116,9 @@ Tabs can be shown on the starting side by setting `placement` to `start`.
 ```
 
 ```jsx:react
-import SlTab from '@shoelace-style/shoelace/dist/react/tab';
+import SlTab from '@onsonr/nebula/dist/react/tab';
-import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
+import SlTabGroup from '@onsonr/nebula/dist/react/tab-group';
-import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
+import SlTabPanel from '@onsonr/nebula/dist/react/tab-panel';
 
 const App = () => (
   <SlTabGroup placement="start">
@@ -162,9 +162,9 @@ Tabs can be shown on the ending side by setting `placement` to `end`.
 ```
 
 ```jsx:react
-import SlTab from '@shoelace-style/shoelace/dist/react/tab';
+import SlTab from '@onsonr/nebula/dist/react/tab';
-import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
+import SlTabGroup from '@onsonr/nebula/dist/react/tab-group';
-import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
+import SlTabPanel from '@onsonr/nebula/dist/react/tab-panel';
 
 const App = () => (
   <SlTabGroup placement="end">
@@ -226,9 +226,9 @@ Add the `closable` attribute to a tab to show a close button. This example shows
 ```
 
 ```jsx:react
-import SlTab from '@shoelace-style/shoelace/dist/react/tab';
+import SlTab from '@onsonr/nebula/dist/react/tab';
-import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
+import SlTabGroup from '@onsonr/nebula/dist/react/tab-group';
-import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
+import SlTabPanel from '@onsonr/nebula/dist/react/tab-panel';
 
 const App = () => {
   function handleClose(event) {
@@ -320,9 +320,9 @@ When there are more tabs than horizontal space allows, the nav will be scrollabl
 ```
 
 ```jsx:react
-import SlTab from '@shoelace-style/shoelace/dist/react/tab';
+import SlTab from '@onsonr/nebula/dist/react/tab';
-import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
+import SlTabGroup from '@onsonr/nebula/dist/react/tab-group';
-import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
+import SlTabPanel from '@onsonr/nebula/dist/react/tab-panel';
 
 const App = () => (
   <SlTabGroup>
@@ -430,9 +430,9 @@ When focused, keyboard users can press [[Left]] or [[Right]] to select the desir
 ```
 
 ```jsx:react
-import SlTab from '@shoelace-style/shoelace/dist/react/tab';
+import SlTab from '@onsonr/nebula/dist/react/tab';
-import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
+import SlTabGroup from '@onsonr/nebula/dist/react/tab-group';
-import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
+import SlTabPanel from '@onsonr/nebula/dist/react/tab-panel';
 
 const App = () => (
   <SlTabGroup activation="manual">

docs/pages/components/tab-panel.md

@@ -20,9 +20,9 @@ layout: component
 ```
 
 ```jsx:react
-import SlTab from '@shoelace-style/shoelace/dist/react/tab';
+import SlTab from '@onsonr/nebula/dist/react/tab';
-import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
+import SlTabGroup from '@onsonr/nebula/dist/react/tab-group';
-import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
+import SlTabPanel from '@onsonr/nebula/dist/react/tab-panel';
 
 const App = () => (
   <SlTabGroup>

docs/pages/components/tag.md

@@ -14,7 +14,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlTag from '@shoelace-style/shoelace/dist/react/tag';
+import SlTag from '@onsonr/nebula/dist/react/tag';
 
 const App = () => (
   <>
@@ -40,7 +40,7 @@ Use the `size` attribute to change a tab's size.
 ```
 
 ```jsx:react
-import SlTag from '@shoelace-style/shoelace/dist/react/tag';
+import SlTag from '@onsonr/nebula/dist/react/tag';
 
 const App = () => (
   <>
@@ -62,7 +62,7 @@ Use the `pill` attribute to give tabs rounded edges.
 ```
 
 ```jsx:react
-import SlTag from '@shoelace-style/shoelace/dist/react/tag';
+import SlTag from '@onsonr/nebula/dist/react/tag';
 
 const App = () => (
   <>
@@ -108,7 +108,7 @@ Use the `removable` attribute to add a remove button to the tag.
 ```
 
 ```jsx:react
-import SlTag from '@shoelace-style/shoelace/dist/react/tag';
+import SlTag from '@onsonr/nebula/dist/react/tag';
 
 const css = `
   .tags-removable sl-tag {

docs/pages/components/textarea.md

@@ -10,7 +10,7 @@ layout: component
 ```
 
 ```jsx:react
-import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
+import SlTextarea from '@onsonr/nebula/dist/react/textarea';
 
 const App = () => <SlTextarea />;
 ```
@@ -30,7 +30,7 @@ Use the `label` attribute to give the textarea an accessible label. For labels t
 ```
 
 ```jsx:react
-import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
+import SlTextarea from '@onsonr/nebula/dist/react/textarea';
 
 const App = () => <SlTextarea label="Comments" />;
 ```
@@ -44,7 +44,7 @@ Add descriptive help text to a textarea with the `help-text` attribute. For help
 ```
 
 ```jsx:react
-import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
+import SlTextarea from '@onsonr/nebula/dist/react/textarea';
 
 const App = () => <SlTextarea label="Feedback" help-text="Please tell us what you think." />;
 ```
@@ -58,7 +58,7 @@ Use the `rows` attribute to change the number of text rows that get shown.
 ```
 
 ```jsx:react
-import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
+import SlTextarea from '@onsonr/nebula/dist/react/textarea';
 
 const App = () => <SlTextarea rows={2} />;
 ```
@@ -72,7 +72,7 @@ Use the `placeholder` attribute to add a placeholder.
 ```
 
 ```jsx:react
-import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
+import SlTextarea from '@onsonr/nebula/dist/react/textarea';
 
 const App = () => <SlTextarea placeholder="Type something" />;
 ```
@@ -86,7 +86,7 @@ Add the `filled` attribute to draw a filled textarea.
 ```
 
 ```jsx:react
-import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
+import SlTextarea from '@onsonr/nebula/dist/react/textarea';
 
 const App = () => <SlTextarea placeholder="Type something" filled />;
 ```
@@ -100,7 +100,7 @@ Use the `disabled` attribute to disable a textarea.
 ```
 
 ```jsx:react
-import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
+import SlTextarea from '@onsonr/nebula/dist/react/textarea';
 
 const App = () => <SlTextarea placeholder="Textarea" disabled />;
 ```
@@ -118,7 +118,7 @@ Use the `size` attribute to change a textarea's size.
 ```
 
 ```jsx:react
-import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
+import SlTextarea from '@onsonr/nebula/dist/react/textarea';
 
 const App = () => (
   <>
@@ -140,7 +140,7 @@ By default, textareas can be resized vertically by the user. To prevent resizing
 ```
 
 ```jsx:react
-import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
+import SlTextarea from '@onsonr/nebula/dist/react/textarea';
 
 const App = () => <SlTextarea resize="none" />;
 ```
@@ -154,7 +154,7 @@ Textareas will automatically resize to expand to fit their content when `resize`
 ```
 
 ```jsx:react
-import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
+import SlTextarea from '@onsonr/nebula/dist/react/textarea';
 
 const App = () => <SlTextarea resize="auto" />;
 ```

docs/pages/components/tooltip.md

@@ -16,8 +16,8 @@ Tooltips use `display: contents` so they won't interfere with how elements are p
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
+import SlTooltip from '@onsonr/nebula/dist/react/tooltip';
 
 const App = () => (
   <SlTooltip content="This is a tooltip">
@@ -126,8 +126,8 @@ Use the `placement` attribute to set the preferred placement of the tooltip.
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
+import SlTooltip from '@onsonr/nebula/dist/react/tooltip';
 
 const css = `
   .tooltip-placement-example {
@@ -237,8 +237,8 @@ Set the `trigger` attribute to `click` to toggle the tooltip on click instead of
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
+import SlTooltip from '@onsonr/nebula/dist/react/tooltip';
 
 const App = () => (
   <SlTooltip content="Click again to dismiss" trigger="click">
@@ -270,9 +270,9 @@ Tooltips can be controlled programmatically by setting the `trigger` attribute t
 
 ```jsx:react
 import { useState } from 'react';
-import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
+import SlAvatar from '@onsonr/nebula/dist/react/avatar';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
+import SlTooltip from '@onsonr/nebula/dist/react/tooltip';
 
 const App = () => {
   const [open, setOpen] = useState(false);
@@ -306,8 +306,8 @@ You can control the size of tooltip arrows by overriding the `--sl-tooltip-arrow
 {% raw %}
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
+import SlTooltip from '@onsonr/nebula/dist/react/tooltip';
 
 const App = () => (
   <div style={{ '--sl-tooltip-arrow-size': '0' }}>
@@ -324,7 +324,7 @@ const App = () => (
 
 {% endraw %}
 
-To override it globally, set it in a root block in your stylesheet after the Shoelace stylesheet is loaded.
+To override it globally, set it in a root block in your stylesheet after the Nebula stylesheet is loaded.
 
 ```css
 :root {
@@ -345,8 +345,8 @@ Use the `content` slot to create tooltips with HTML content. Tooltips are design
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
+import SlTooltip from '@onsonr/nebula/dist/react/tooltip';
 
 const App = () => (
   <SlTooltip>
@@ -372,8 +372,8 @@ Use the `--max-width` custom property to change the width the tooltip can grow t
 {% raw %}
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
+import SlTooltip from '@onsonr/nebula/dist/react/tooltip';
 
 const App = () => (
   <SlTooltip style={{ '--max-width': '80px' }} content="This tooltip will wrap after only 80 pixels.">
@@ -410,8 +410,8 @@ Tooltips will be clipped if they're inside a container that has `overflow: auto|
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
+import SlTooltip from '@onsonr/nebula/dist/react/tooltip';
 
 const css = `
   .tooltip-hoist {

docs/pages/components/tree-item.md

@@ -20,8 +20,8 @@ layout: component
 
 <!-- prettier-ignore -->
 ```jsx:react
-import SlTree from '@shoelace-style/shoelace/dist/react/tree';
+import SlTree from '@onsonr/nebula/dist/react/tree';
-import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
+import SlTreeItem from '@onsonr/nebula/dist/react/tree-item';
 
 const App = () => (
   <SlTree>
@@ -63,8 +63,8 @@ A tree item can contain other tree items. This allows the node to be expanded or
 
 <!-- prettier-ignore -->
 ```jsx:react
-import SlTree from '@shoelace-style/shoelace/dist/react/tree';
+import SlTree from '@onsonr/nebula/dist/react/tree';
-import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
+import SlTreeItem from '@onsonr/nebula/dist/react/tree-item';
 
 const App = () => (
   <SlTree>
@@ -104,8 +104,8 @@ Use the `selected` attribute to select a tree item initially.
 
 <!-- prettier-ignore -->
 ```jsx:react
-import SlTree from '@shoelace-style/shoelace/dist/react/tree';
+import SlTree from '@onsonr/nebula/dist/react/tree';
-import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
+import SlTreeItem from '@onsonr/nebula/dist/react/tree-item';
 
 const App = () => (
   <SlTree>
@@ -145,8 +145,8 @@ Use the `expanded` attribute to expand a tree item initially.
 
 <!-- prettier-ignore -->
 ```jsx:react
-import SlTree from '@shoelace-style/shoelace/dist/react/tree';
+import SlTree from '@onsonr/nebula/dist/react/tree';
-import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
+import SlTreeItem from '@onsonr/nebula/dist/react/tree-item';
 
 const App = () => (
   <SlTree>

docs/pages/components/tree.md

@@ -37,8 +37,8 @@ layout: component
 
 <!-- prettier-ignore -->
 ```jsx:react
-import SlTree from '@shoelace-style/shoelace/dist/react/tree';
+import SlTree from '@onsonr/nebula/dist/react/tree';
-import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
+import SlTreeItem from '@onsonr/nebula/dist/react/tree-item';
 
 const App = () => (
   <SlTree>
@@ -119,8 +119,8 @@ The `selection` attribute lets you change the selection behavior of the tree.
 
 <!-- prettier-ignore -->
 ```jsx:react
-import SlTree from '@shoelace-style/shoelace/dist/react/tree';
+import SlTree from '@onsonr/nebula/dist/react/tree';
-import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
+import SlTreeItem from '@onsonr/nebula/dist/react/tree-item';
 
 const App = () => {
   const [selection, setSelection] = useState('single');
@@ -199,8 +199,8 @@ Indent guides can be drawn by setting `--indent-guide-width`. You can also chang
 
 <!-- prettier-ignore -->
 ```jsx:react
-import SlTree from '@shoelace-style/shoelace/dist/react/tree';
+import SlTree from '@onsonr/nebula/dist/react/tree';
-import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
+import SlTreeItem from '@onsonr/nebula/dist/react/tree-item';
 
 const App = () => (
   <SlTree class="tree-with-lines" style={{ '--indent-guide-width': '1px' }}>
@@ -268,8 +268,8 @@ If you want to disable this behavior after the first load, simply remove the `la
 ```
 
 ```jsx:react
-import SlTree from '@shoelace-style/shoelace/dist/react/tree';
+import SlTree from '@onsonr/nebula/dist/react/tree';
-import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
+import SlTreeItem from '@onsonr/nebula/dist/react/tree-item';
 
 const App = () => {
   const [childItems, setChildItems] = useState([]);
@@ -344,8 +344,8 @@ Use the `expand-icon` and `collapse-icon` slots to change the expand and collaps
 
 <!-- prettier-ignore -->
 ```jsx:react
-import SlTree from '@shoelace-style/shoelace/dist/react/tree';
+import SlTree from '@onsonr/nebula/dist/react/tree';
-import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
+import SlTreeItem from '@onsonr/nebula/dist/react/tree-item';
 
 const App = () => (
   <SlTree>
@@ -429,9 +429,9 @@ Decorative icons can be used before labels to provide hints for each node.
 ```
 
 ```jsx:react
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
+import SlIcon from '@onsonr/nebula/dist/react/icon';
-import SlTree from '@shoelace-style/shoelace/dist/react/tree';
+import SlTree from '@onsonr/nebula/dist/react/tree';
-import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
+import SlTreeItem from '@onsonr/nebula/dist/react/tree-item';
 
 const App = () => {
   return (

docs/pages/frameworks/angular.md

@@ -1,21 +1,21 @@
 ---
 meta:
   title: Angular
-  description: Tips for using Shoelace in your Angular app.
+  description: Tips for using Nebula in your Angular app.
 ---
 
 # Angular
 
-Angular [plays nice](https://custom-elements-everywhere.com/#angular) with custom elements, so you can use Shoelace in your Angular apps with ease.
+Angular [plays nice](https://custom-elements-everywhere.com/#angular) with custom elements, so you can use Nebula in your Angular apps with ease.
 
 ## Installation
 
 ### Download the npm package
 
-To add Shoelace to your Angular app, install the package from npm.
+To add Nebula to your Angular app, install the package from npm.
 
 ```bash
-npm install @shoelace-style/shoelace
+npm install @onsonr/nebula
 ```
 
 ### Update the Angular Configuration
@@ -32,10 +32,10 @@ Its also important to load the components by using a `<script>` tag into the ind
       ...
       "styles": [
         "src/styles.scss",
-        "@shoelace-style/shoelace/dist/themes/light.css"
+        "@onsonr/nebula/dist/themes/light.css"
        ],
       "scripts": [
-        "@shoelace-style/shoelace/dist/shoelace.js"
+        "@onsonr/nebula/dist/shoelace.js"
       ]
       ...
 ```
@@ -45,13 +45,13 @@ Its also important to load the components by using a `<script>` tag into the ind
 Next, set the [base path](/getting-started/installation#setting-the-base-path) for icons and other assets in the `main.ts`. In this example, we'll use the CDN as a base path.
 
 ```jsx
-import { setBasePath } from '@shoelace-style/shoelace/%NPMDIR%/utilities/base-path';
+import { setBasePath } from '@onsonr/nebula/%NPMDIR%/utilities/base-path';
 
-setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/');
+setBasePath('https://cdn.jsdelivr.net/npm/@onsonr/nebula@%VERSION%/%CDNDIR%/');
 ```
 
 :::tip
-If you'd rather not use the CDN for assets, you can create a build task that copies `node_modules/@shoelace-style/shoelace/%NPMDIR%/assets` into a public folder in your app. Then you can point the base path to that folder instead.
+If you'd rather not use the CDN for assets, you can create a build task that copies `node_modules/@onsonr/nebula/%NPMDIR%/assets` into a public folder in your app. Then you can point the base path to that folder instead.
 :::
 
 ## Configuration
@@ -74,10 +74,10 @@ import { AppComponent } from './app.component';
 export class AppModule {}
 ```
 
-## Reference Shoelace components in your Angular component code
+## Reference Nebula components in your Angular component code
 
 ```js
-import { SlDrawer } from '@shoelace-style/shoelace';
+import { SlDrawer } from '@onsonr/nebula';
 
 @Component({
   selector: 'app-drawer-example',
@@ -100,14 +100,14 @@ export class DrawerExampleComponent implements OnInit {
   ...
 
   showDrawer() {
-    // use nativeElement to access Shoelace components
+    // use nativeElement to access Nebula components
     this.drawer?.nativeElement.show();
   }
 }
 ```
 
-Now you can start using Shoelace components in your app!
+Now you can start using Nebula components in your app!
 
 :::tip
-Are you using Shoelace with Angular? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/angular.md)
+Are you using Nebula with Angular? [Help us improve this page!](https://github.com/onsonr/nebula/blob/next/docs/frameworks/angular.md)
 :::

docs/pages/frameworks/react.md

@@ -1,33 +1,33 @@
 ---
 meta:
   title: React
-  description: Tips for using Shoelace in your React app.
+  description: Tips for using Nebula in your React app.
 ---
 
 # React
 
-Shoelace offers a React version of every component to provide an idiomatic experience for React users. You can easily toggle between HTML and React examples throughout the documentation.
+Nebula offers a React version of every component to provide an idiomatic experience for React users. You can easily toggle between HTML and React examples throughout the documentation.
 
 ## Installation
 
-To add Shoelace to your React app, install the package from npm.
+To add Nebula to your React app, install the package from npm.
 
 ```bash
-npm install @shoelace-style/shoelace
+npm install @onsonr/nebula
 ```
 
 Next, [include a theme](/getting-started/themes) and set the [base path](/getting-started/installation#setting-the-base-path) for icons and other assets. In this example, we'll import the light theme and use the CDN as a base path.
 
 ```jsx
 // App.jsx
-import '@shoelace-style/shoelace/%NPMDIR%/themes/light.css';
+import '@onsonr/nebula/%NPMDIR%/themes/light.css';
-import { setBasePath } from '@shoelace-style/shoelace/%NPMDIR%/utilities/base-path';
+import { setBasePath } from '@onsonr/nebula/%NPMDIR%/utilities/base-path';
 
-setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/');
+setBasePath('https://cdn.jsdelivr.net/npm/@onsonr/nebula@%VERSION%/%CDNDIR%/');
 ```
 
 :::tip
-If you'd rather not use the CDN for assets, you can create a [build task](https://webpack.js.org/plugins/copy-webpack-plugin/) that copies `node_modules/@shoelace-style/shoelace/%NPMDIR%/assets` into your app's `public` directory. Then you can point the base path to that folder instead.
+If you'd rather not use the CDN for assets, you can create a [build task](https://webpack.js.org/plugins/copy-webpack-plugin/) that copies `node_modules/@onsonr/nebula/%NPMDIR%/assets` into your app's `public` directory. Then you can point the base path to that folder instead.
 :::
 
 Now you can start using components!
@@ -40,10 +40,10 @@ Preact users facing type errors using components may benefit from setting "paths
 
 ### Importing Components
 
-Every Shoelace component is available to import as a React component. Note that we're importing the `<SlButton>` _React component_ instead of the `<sl-button>` _custom element_ in the example below.
+Every Nebula component is available to import as a React component. Note that we're importing the `<SlButton>` _React component_ instead of the `<sl-button>` _custom element_ in the example below.
 
 ```jsx
-import SlButton from '@shoelace-style/shoelace/%NPMDIR%/react/button';
+import SlButton from '@onsonr/nebula/%NPMDIR%/react/button';
 
 const MyComponent = () => <SlButton variant="primary">Click me</SlButton>;
 
@@ -55,27 +55,27 @@ export default MyComponent;
 Previously, it was recommended to import from a single entrypoint like so:
 
 ```jsx
-import { SlButton } from '@shoelace-style/shoelace/%NPMDIR%/react';
+import { SlButton } from '@onsonr/nebula/%NPMDIR%/react';
 ```
 
-However, tree-shaking extra Shoelace components proved to be a challenge. As a result, we now recommend cherry-picking components you want to use, rather than importing from a single entrypoint.
+However, tree-shaking extra Nebula components proved to be a challenge. As a result, we now recommend cherry-picking components you want to use, rather than importing from a single entrypoint.
 
 ```diff
-- import { SlButton } from '@shoelace-style/shoelace/%NPMDIR%/react';
+- import { SlButton } from '@onsonr/nebula/%NPMDIR%/react';
-+ import SlButton from '@shoelace-style/shoelace/%NPMDIR%/react/button';
++ import SlButton from '@onsonr/nebula/%NPMDIR%/react/button';
 ```
 
 You can find a copy + paste import for each component in the "importing" section of its documentation.
 
 ### Event Handling
 
-Many Shoelace components emit [custom events](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent). For example, the [input component](/components/input) emits the `sl-input` event when it receives input. In React, you can listen for the event using `onSlInput`.
+Many Nebula components emit [custom events](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent). For example, the [input component](/components/input) emits the `sl-input` event when it receives input. In React, you can listen for the event using `onSlInput`.
 
 Here's how you can bind the input's value to a state variable.
 
 ```jsx
 import { useState } from 'react';
-import SlInput from '@shoelace-style/shoelace/%NPMDIR%/react/input';
+import SlInput from '@onsonr/nebula/%NPMDIR%/react/input';
 
 function MyComponent() {
   const [value, setValue] = useState('');
@@ -90,8 +90,8 @@ If you're using TypeScript, it's important to note that `event.target` will be a
 
 ```tsx
 import { useState } from 'react';
-import SlInput from '@shoelace-style/shoelace/%NPMDIR%/react/input';
+import SlInput from '@onsonr/nebula/%NPMDIR%/react/input';
-import type SlInputElement from '@shoelace-style/shoelace/%NPMDIR%/components/input/input';
+import type SlInputElement from '@onsonr/nebula/%NPMDIR%/components/input/input';
 
 function MyComponent() {
   const [value, setValue] = useState('');
@@ -106,8 +106,8 @@ You can also import the event type for use in your callbacks, shown below.
 
 ```tsx
 import { useCallback, useState } from 'react';
-import SlInput, { type SlInputEvent } from '@shoelace-style/shoelace/%NPMDIR%/react/input';
+import SlInput, { type SlInputEvent } from '@onsonr/nebula/%NPMDIR%/react/input';
-import type SlInputElement from '@shoelace-style/shoelace/%NPMDIR%/components/input/input';
+import type SlInputElement from '@onsonr/nebula/%NPMDIR%/components/input/input';
 
 function MyComponent() {
   const [value, setValue] = useState('');
@@ -125,7 +125,7 @@ export default MyComponent;
 
 Testing with web components can be challenging if your test environment runs in a Node environment (i.e. it doesn't run in a real browser). Fortunately, [Jest](https://jestjs.io/) has made a number of strides to support web components and provide additional browser APIs. However, it's still not a complete replication of a browser environment.
 
-Here are some tips that will help smooth things over if you're having trouble with Jest + Shoelace.
+Here are some tips that will help smooth things over if you're having trouble with Jest + Nebula.
 
 :::tip
 If you're looking for a fast, modern testing alternative, consider [Web Test Runner](https://modern-web.dev/docs/test-runner/overview/).
@@ -167,13 +167,13 @@ For more details, refer to Jest's [manual mocking](https://jestjs.io/docs/manual
 
 ### Transform ES Modules
 
-ES Modules are a [well-supported browser standard](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/). This is how Shoelace is distributed, but most React apps expect CommonJS. As a result, you'll probably run into the following error.
+ES Modules are a [well-supported browser standard](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/). This is how Nebula is distributed, but most React apps expect CommonJS. As a result, you'll probably run into the following error.
 
 ```
 Error: Unable to import outside of a module
 ```
 
-To fix this, add the following to your `package.json` which tells the transpiler to process Shoelace modules.
+To fix this, add the following to your `package.json` which tells the transpiler to process Nebula modules.
 
 ```js
 {
@@ -188,5 +188,5 @@ These instructions are for apps created via Create React App. If you're using Je
 For more details, refer to Jest's [`transformIgnorePatterns` customization](https://jestjs.io/docs/tutorial-react-native#transformignorepatterns-customization) documentation.
 
 :::tip
-Are you using Shoelace with React? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/react.md)
+Are you using Nebula with React? [Help us improve this page!](https://github.com/onsonr/nebula/blob/next/docs/frameworks/react.md)
 :::

docs/pages/frameworks/templ.md

@@ -0,0 +1,13 @@
+---
+meta:
+  title: Templ
+  description: Tips for using Nebula in your Go Project.
+---
+
+# Templ (golang)
+
+Nebula was designed with the purpose to enable the creation of HyperMedia Systems in Golang.
+
+## Installation
+
+TODO

docs/pages/frameworks/vue-2.md

@@ -1,12 +1,12 @@
 ---
 meta:
   title: Vue (version 2)
-  description: Tips for using Shoelace in your Vue 2 app.
+  description: Tips for using Nebula in your Vue 2 app.
 ---
 
 # Vue (version 2)
 
-Vue [plays nice](https://custom-elements-everywhere.com/#vue) with custom elements, so you can use Shoelace in your Vue apps with ease.
+Vue [plays nice](https://custom-elements-everywhere.com/#vue) with custom elements, so you can use Nebula in your Vue apps with ease.
 
 :::tip
 These instructions are for Vue 2. If you're using Vue 3 or above, please see the [Vue 3 instructions](/frameworks/vue).
@@ -14,28 +14,28 @@ These instructions are for Vue 2. If you're using Vue 3 or above, please see the
 
 ## Installation
 
-To add Shoelace to your Vue app, install the package from npm.
+To add Nebula to your Vue app, install the package from npm.
 
 ```bash
-npm install @shoelace-style/shoelace
+npm install @onsonr/nebula
 ```
 
 Next, [include a theme](/getting-started/themes) and set the [base path](/getting-started/installation#setting-the-base-path) for icons and other assets. In this example, we'll import the light theme and use the CDN as a base path.
 
 ```jsx
-import '@shoelace-style/shoelace/%NPMDIR%/themes/light.css';
+import '@onsonr/nebula/%NPMDIR%/themes/light.css';
-import { setBasePath } from '@shoelace-style/shoelace/%NPMDIR%/utilities/base-path';
+import { setBasePath } from '@onsonr/nebula/%NPMDIR%/utilities/base-path';
 
-setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/');
+setBasePath('https://cdn.jsdelivr.net/npm/@onsonr/nebula@%VERSION%/%CDNDIR%/');
 ```
 
 :::tip
-If you'd rather not use the CDN for assets, you can create a build task that copies `node_modules/@shoelace-style/shoelace/dist/assets` into a public folder in your app. Then you can point the base path to that folder instead.
+If you'd rather not use the CDN for assets, you can create a build task that copies `node_modules/@onsonr/nebula/dist/assets` into a public folder in your app. Then you can point the base path to that folder instead.
 :::
 
 ## Configuration
 
-You'll need to tell Vue to ignore Shoelace components. This is pretty easy because they all start with `sl-`.
+You'll need to tell Vue to ignore Nebula components. This is pretty easy because they all start with `sl-`.
 
 ```js
 import Vue from 'vue';
@@ -50,7 +50,7 @@ const app = new Vue({
 app.$mount('#app');
 ```
 
-Now you can start using Shoelace components in your app!
+Now you can start using Nebula components in your app!
 
 ## Usage
 
@@ -73,7 +73,7 @@ One caveat is there's currently [no support for v-model on custom elements](http
 <sl-input :value="name" @input="name = $event.target.value"></sl-input>
 ```
 
-If that's too verbose for your liking, you can use a custom directive instead. [This utility](https://www.npmjs.com/package/@shoelace-style/vue-sl-model) adds a custom directive that will work just like `v-model` but for Shoelace components. To install it, use this command.
+If that's too verbose for your liking, you can use a custom directive instead. [This utility](https://www.npmjs.com/package/@shoelace-style/vue-sl-model) adds a custom directive that will work just like `v-model` but for Nebula components. To install it, use this command.
 
 ```bash
 npm install @shoelace-style/vue-sl-model@1
@@ -83,10 +83,10 @@ Next, import the directive and enable it like this.
 
 ```js
 import Vue from 'vue';
-import ShoelaceModelDirective from '@shoelace-style/vue-sl-model';
+import NebulaModelDirective from '@shoelace-style/vue-sl-model';
 import App from './App.vue';
 
-Vue.use(ShoelaceModelDirective);
+Vue.use(NebulaModelDirective);
 Vue.config.ignoredElements = [/sl-/];
 
 const app = new Vue({
@@ -103,5 +103,5 @@ Now you can use the `v-sl-model` directive to keep your data in sync!
 ```
 
 :::tip
-Are you using Shoelace with Vue? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/vue-2.md)
+Are you using Nebula with Vue? [Help us improve this page!](https://github.com/onsonr/nebula/blob/next/docs/frameworks/vue-2.md)
 :::

docs/pages/frameworks/vue.md

@@ -1,12 +1,12 @@
 ---
 meta:
   title: Vue
-  description: Tips for using Shoelace in your Vue 3 app.
+  description: Tips for using Nebula in your Vue 3 app.
 ---
 
 # Vue
 
-Vue [plays nice](https://custom-elements-everywhere.com/#vue) with custom elements, so you can use Shoelace in your Vue apps with ease.
+Vue [plays nice](https://custom-elements-everywhere.com/#vue) with custom elements, so you can use Nebula in your Vue apps with ease.
 
 :::tip
 These instructions are for Vue 3 and above. If you're using Vue 2, please see the [Vue 2 instructions](/frameworks/vue-2).
@@ -14,40 +14,40 @@ These instructions are for Vue 3 and above. If you're using Vue 2, please see th
 
 ## Installation
 
-To add Shoelace to your Vue app, install the package from npm.
+To add Nebula to your Vue app, install the package from npm.
 
 ```bash
-npm install @shoelace-style/shoelace
+npm install @onsonr/nebula
 ```
 
 Next, [include a theme](/getting-started/themes) and set the [base path](/getting-started/installation#setting-the-base-path) for icons and other assets. In this example, we'll import the light theme and use the CDN as a base path.
 
 ```jsx
 // main.js or main.ts
-import '@shoelace-style/shoelace/dist/themes/light.css';
+import '@onsonr/nebula/dist/themes/light.css';
-import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path';
+import { setBasePath } from '@onsonr/nebula/dist/utilities/base-path';
 
-setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/');
+setBasePath('https://cdn.jsdelivr.net/npm/@onsonr/nebula@%VERSION%/%CDNDIR%/');
 ```
 
 :::tip
-If you'd rather not use the CDN for assets, you can create a build task that copies `node_modules/@shoelace-style/shoelace/dist/assets` into a public folder in your app. Then you can point the base path to that folder instead.
+If you'd rather not use the CDN for assets, you can create a build task that copies `node_modules/@onsonr/nebula/dist/assets` into a public folder in your app. Then you can point the base path to that folder instead.
 :::
 
 ## Configuration
 
 If you haven't configured your Vue.js project to work with custom elements/web components, follow [the instructions here](https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue) based on your project type to ensure your project will not throw an error when it encounters a custom element.
 
-Now you can start using Shoelace components in your app!
+Now you can start using Nebula components in your app!
 
 ## Types
 
-Once you have configured your application for custom elements, you should be able to use Shoelace in your application without it causing any errors. Unfortunately, this doesn't register the custom elements to behave like components built using Vue. To provide autocomplete information and type safety for your components, you can import the Shoelace Vue types into your `tsconfig.json` to get better integration in your standard Vue and JSX templates.
+Once you have configured your application for custom elements, you should be able to use Nebula in your application without it causing any errors. Unfortunately, this doesn't register the custom elements to behave like components built using Vue. To provide autocomplete information and type safety for your components, you can import the Nebula Vue types into your `tsconfig.json` to get better integration in your standard Vue and JSX templates.
 
 ```json
 {
   "compilerOptions": {
-    "types": ["@shoelace-style/shoelace/dist/types/vue"]
+    "types": ["@onsonr/nebula/dist/types/vue"]
   }
 }
 ```
@@ -69,8 +69,8 @@ Once you have configured your application for custom elements, you should be abl
 
 <script setup>
   import { ref } from 'vue';
-  import '@shoelace-style/shoelace/dist/components/qr-code/qr-code.js';
+  import '@onsonr/nebula/dist/components/qr-code/qr-code.js';
-  import '@shoelace-style/shoelace/dist/components/input/input.js';
+  import '@onsonr/nebula/dist/components/input/input.js';
 
   const qrCode = ref();
 </script>
@@ -106,15 +106,15 @@ One caveat is there's currently [no support for v-model on custom elements](http
 <sl-input :value="name" @input="name = $event.target.value"></sl-input>
 ```
 
-If that's too verbose for your liking, you can use a custom directive instead. [This utility](https://www.npmjs.com/package/@shoelace-style/vue-sl-model) adds a custom directive that will work just like `v-model` but for Shoelace components.
+If that's too verbose for your liking, you can use a custom directive instead. [This utility](https://www.npmjs.com/package/@shoelace-style/vue-sl-model) adds a custom directive that will work just like `v-model` but for Nebula components.
 
 :::tip
-Are you using Shoelace with Vue? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/vue.md)
+Are you using Nebula with Vue? [Help us improve this page!](https://github.com/onsonr/nebula/blob/next/docs/frameworks/vue.md)
 :::
 
 ### Slots
 
-Slots in Shoelace/web components are functionally the same as basic slots in Vue. Slots can be assigned to elements using the `slot` attribute followed by the name of the slot it is being assigned to.
+Slots in Nebula/web components are functionally the same as basic slots in Vue. Slots can be assigned to elements using the `slot` attribute followed by the name of the slot it is being assigned to.
 
 Here is an example:
 

docs/pages/getting-started/customizing.md

@@ -1,16 +1,16 @@
 ---
 meta:
   title: Customizing
-  description: Learn how to customize Shoelace through parts and custom properties.
+  description: Learn how to customize Nebula through parts and custom properties.
 ---
 
 # Customizing
 
-Shoelace components can be customized at a high level through design tokens. This gives you control over theme colors and general styling. For more advanced customizations, you can make use of CSS parts and custom properties to target individual components.
+Nebula components can be customized at a high level through design tokens. This gives you control over theme colors and general styling. For more advanced customizations, you can make use of CSS parts and custom properties to target individual components.
 
 ## Design Tokens
 
-Shoelace makes use of several design tokens to provide a consistent appearance across components. You can customize them and use them in your own application with pure CSS — no preprocessor required.
+Nebula makes use of several design tokens to provide a consistent appearance across components. You can customize them and use them in your own application with pure CSS — no preprocessor required.
 
 Design tokens offer a high-level way to customize the library with minimal effort. There are no component-specific variables, however, as design tokens are intended to be generic and highly reusable. To customize an individual component, refer to the section entitled [CSS Parts](#css-parts).
 
@@ -35,13 +35,13 @@ To customize a design token, simply override it in your stylesheet using a `:roo
 }
 ```
 
-Many design tokens are described further along in this documentation. For a complete list, refer to `src/themes/light.css` in the project's [source code](https://github.com/shoelace-style/shoelace/blob/current/src/themes/light.css).
+Many design tokens are described further along in this documentation. For a complete list, refer to `src/themes/light.css` in the project's [source code](https://github.com/onsonr/nebula/blob/current/src/themes/light.css).
 
 ## CSS Parts
 
 Whereas design tokens offer a high-level way to customize the library, CSS parts offer a low-level way to customize individual components. Again, this is done with pure CSS — no preprocessor required.
 
-Shoelace components use a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate their styles and behaviors. As a result, you can't simply target their internals with the usual CSS selectors. Instead, components expose "parts" that can be targeted with the [CSS part selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part), or `::part()`.
+Nebula components use a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate their styles and behaviors. As a result, you can't simply target their internals with the usual CSS selectors. Instead, components expose "parts" that can be targeted with the [CSS part selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part), or `::part()`.
 
 Here's an example that modifies buttons with the `tomato-button` class.
 
@@ -112,14 +112,14 @@ Not all components expose CSS custom properties. For those that do, they can be
 
 ## Animations
 
-Some components use animation, such as when a dialog is shown or hidden. Animations are performed using the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) rather than CSS. However, you can still customize them through Shoelace's animation registry. If a component has customizable animations, they'll be listed in the "Animation" section of its documentation.
+Some components use animation, such as when a dialog is shown or hidden. Animations are performed using the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) rather than CSS. However, you can still customize them through Nebula's animation registry. If a component has customizable animations, they'll be listed in the "Animation" section of its documentation.
 
 To customize a default animation, use the `setDefaultAnimation()` method. The function accepts an animation name (found in the component's docs) and an object with `keyframes`, and `options` or `null` to disable the animation.
 
 This example will make all dialogs use a custom show animation.
 
 ```js
-import { setDefaultAnimation } from '@shoelace-style/shoelace/dist/utilities/animation-registry.js';
+import { setDefaultAnimation } from '@onsonr/nebula/dist/utilities/animation-registry.js';
 
 // Change the default animation for all dialogs
 setDefaultAnimation('dialog.show', {
@@ -142,7 +142,7 @@ If you only want to target a single component, use the `setAnimation()` method i
 In this example, only the target dialog will use a custom show animation.
 
 ```js
-import { setAnimation } from '@shoelace-style/shoelace/dist/utilities/animation-registry.js';
+import { setAnimation } from '@onsonr/nebula/dist/utilities/animation-registry.js';
 
 // Change the animation for a single dialog
 const dialog = document.querySelector('#my-dialog');

docs/pages/getting-started/form-controls.md

@@ -1,17 +1,17 @@
 ---
 meta:
   title: Form Controls
-  description: Some things to note about Shoelace and forms.
+  description: Some things to note about Nebula and forms.
 ---
 
 # Form Controls
 
-Every Shoelace component makes use of a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate markup, styles, and behavior. One caveat of this approach is that native `<form>` elements do not recognize form controls located inside a shadow root.
+Every Nebula component makes use of a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate markup, styles, and behavior. One caveat of this approach is that native `<form>` elements do not recognize form controls located inside a shadow root.
 
-Shoelace solves this problem by using the [`formdata`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/formdata_event) event, which is [available in all modern browsers](https://caniuse.com/mdn-api_htmlformelement_formdata_event). This means, when a form is submitted, Shoelace form controls will automatically append their values to the `FormData` object that's used to submit the form. In most cases, things will "just work." However, if you're using a form serialization library, it might need to be adapted to recognize Shoelace form controls.
+Nebula solves this problem by using the [`formdata`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/formdata_event) event, which is [available in all modern browsers](https://caniuse.com/mdn-api_htmlformelement_formdata_event). This means, when a form is submitted, Nebula form controls will automatically append their values to the `FormData` object that's used to submit the form. In most cases, things will "just work." However, if you're using a form serialization library, it might need to be adapted to recognize Nebula form controls.
 
 :::tip
-Shoelace uses event listeners to intercept the form's `formdata` and `submit` events. This allows it to inject data and trigger validation as necessary. If you're also attaching an event listener to the form, _you must attach it after Shoelace form controls are connected to the DOM_, otherwise your logic will run before Shoelace has a chance to inject form data and validate form controls.
+Nebula uses event listeners to intercept the form's `formdata` and `submit` events. This allows it to inject data and trigger validation as necessary. If you're also attaching an event listener to the form, _you must attach it after Nebula form controls are connected to the DOM_, otherwise your logic will run before Nebula has a chance to inject form data and validate form controls.
 :::
 
 ## Data Serialization
@@ -27,10 +27,10 @@ const data = new FormData(form);
 // All form control data is available in a FormData object
 ```
 
-However, some folks find `FormData` tricky to work with or they need to pass a JSON payload to their server. To accommodate this, Shoelace offers a serialization utility that gathers form data and returns a simple JavaScript object instead.
+However, some folks find `FormData` tricky to work with or they need to pass a JSON payload to their server. To accommodate this, Nebula offers a serialization utility that gathers form data and returns a simple JavaScript object instead.
 
 ```js
-import { serialize } from '@shoelace-style/shoelace/dist/utilities/form.js';
+import { serialize } from '@onsonr/nebula/dist/utilities/form.js';
 
 const form = document.querySelector('form');
 const data = serialize(form);
@@ -42,7 +42,7 @@ This results in an object with name/value pairs that map to each form control. I
 
 ## Constraint Validation
 
-Client-side validation can be enabled through the browser's [Constraint Validation API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation) for Shoelace form controls. You can activate it using attributes such as `required`, `pattern`, `minlength`, `maxlength`, etc. Shoelace implements many of the same attributes as native form controls, but check the documentation for a list of supported properties for each component.
+Client-side validation can be enabled through the browser's [Constraint Validation API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation) for Nebula form controls. You can activate it using attributes such as `required`, `pattern`, `minlength`, `maxlength`, etc. Nebula implements many of the same attributes as native form controls, but check the documentation for a list of supported properties for each component.
 
 If you don't want to use client-side validation, you can suppress this behavior by adding `novalidate` to the surrounding `<form>` element.
 
@@ -99,12 +99,12 @@ The form will not be submitted if a required field is incomplete.
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
+import SlCheckbox from '@onsonr/nebula/dist/react/checkbox';
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import SlInput from '@onsonr/nebula/dist/react/input';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+import SlMenuItem from '@onsonr/nebula/dist/react/menu-item';
-import SlSelect from '@shoelace-style/shoelace/dist/react/select';
+import SlSelect from '@onsonr/nebula/dist/react/select';
-import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
+import SlTextarea from '@onsonr/nebula/dist/react/textarea';
 
 const App = () => {
   function handleSubmit(event) {
@@ -165,8 +165,8 @@ To restrict a value to a specific [pattern](https://developer.mozilla.org/en-US/
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import SlInput from '@onsonr/nebula/dist/react/input';
 
 const App = () => {
   function handleSubmit(event) {
@@ -217,8 +217,8 @@ Some input types will automatically trigger constraints, such as `email` and `ur
 ```
 
 ```jsx:react
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import SlInput from '@onsonr/nebula/dist/react/input';
 
 const App = () => {
   function handleSubmit(event) {
@@ -279,8 +279,8 @@ To create a custom validation error, pass a non-empty string to the `setCustomVa
 
 ```jsx:react
 import { useRef, useState } from 'react';
-import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlButton from '@onsonr/nebula/dist/react/button';
-import SlInput from '@shoelace-style/shoelace/dist/react/input';
+import SlInput from '@onsonr/nebula/dist/react/input';
 
 const App = () => {
   const input = useRef(null);
@@ -319,7 +319,7 @@ Custom validation can be applied to any form control that supports the `setCusto
 
 ## Custom Validation Styles
 
-Due to the many ways form controls are used, Shoelace doesn't provide out of the box validation styles for form controls as part of its default theme. Instead, the following attributes will be applied to reflect a control's validity as users interact with it. You can use them to create custom styles for any of the validation states you're interested in.
+Due to the many ways form controls are used, Nebula doesn't provide out of the box validation styles for form controls as part of its default theme. Instead, the following attributes will be applied to reflect a control's validity as users interact with it. You can use them to create custom styles for any of the validation states you're interested in.
 
 - `data-required` - the form control is required
 - `data-optional` - the form control is optional
@@ -331,7 +331,7 @@ Due to the many ways form controls are used, Shoelace doesn't provide out of the
 These attributes map to the browser's built-in pseudo classes for validation: [`:required`](https://developer.mozilla.org/en-US/docs/Web/CSS/:required), [`:optional`](https://developer.mozilla.org/en-US/docs/Web/CSS/:optional), [`:invalid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid), [`:valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:valid), and the proposed [`:user-invalid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-invalid) and [`:user-valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid).
 
 :::tip
-In the future, data attributes will be replaced with custom pseudo classes such as `:--valid` and `:--invalid`. Shoelace is using data attributes as a workaround until browsers support custom states through [`ElementInternals.states`](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/states).
+In the future, data attributes will be replaced with custom pseudo classes such as `:--valid` and `:--invalid`. Nebula is using data attributes as a workaround until browsers support custom states through [`ElementInternals.states`](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/states).
 :::
 
 ### Styling Invalid Form Controls
@@ -442,7 +442,7 @@ This example demonstrates custom validation styles using `data-user-invalid` and
 
 ## Inline Form Validation
 
-By default, Shoelace form controls use the browser's tooltip-style error messages. No mechanism is provided to show errors inline, as there are too many opinions on how that would work when combined with native form controls and other custom elements. You can, however, implement your own solution using the following technique.
+By default, Nebula form controls use the browser's tooltip-style error messages. No mechanism is provided to show errors inline, as there are too many opinions on how that would work when combined with native form controls and other custom elements. You can, however, implement your own solution using the following technique.
 
 To disable the browser's error messages, you need to cancel the `sl-invalid` event. Then you can apply your own inline validation errors. This example demonstrates a primitive way to do this.
 
@@ -554,10 +554,10 @@ This example is meant to demonstrate the concept of providing your own error mes
 
 ## Getting Associated Form Controls
 
-At this time, using [`HTMLFormElement.elements`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements) will not return Shoelace form controls because the browser is unaware of their status as custom element form controls. Fortunately, Shoelace provides an `elements()` function that does something very similar. However, instead of returning an [`HTMLFormControlsCollection`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormControlsCollection), it returns an array of HTML and Shoelace form controls in the order they appear in the DOM.
+At this time, using [`HTMLFormElement.elements`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements) will not return Nebula form controls because the browser is unaware of their status as custom element form controls. Fortunately, Nebula provides an `elements()` function that does something very similar. However, instead of returning an [`HTMLFormControlsCollection`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormControlsCollection), it returns an array of HTML and Nebula form controls in the order they appear in the DOM.
 
 ```js
-import { getFormControls } from '@shoelace-style/shoelace/dist/utilities/form.js';
+import { getFormControls } from '@onsonr/nebula/dist/utilities/form.js';
 
 const form = document.querySelector('#my-form');
 const formControls = getFormControls(form);

docs/pages/getting-started/installation.md

@@ -6,7 +6,7 @@ meta:
 
 # Installation
 
-You can load Shoelace via CDN or by installing it locally. If you're using a framework, make sure to check out the pages for [React](/frameworks/react), [Vue](/frameworks/vue), and [Angular](/frameworks/angular) for additional information.
+You can load Nebula via CDN or by installing it locally. If you're using a framework, make sure to check out the pages for [React](/frameworks/react), [Vue](/frameworks/vue), and [Angular](/frameworks/angular) for additional information.
 
 ## CDN Installation (Easiest)
 
@@ -16,26 +16,26 @@ You can load Shoelace via CDN or by installing it locally. If you're using a fra
 
 <sl-tab-panel name="autoloader">
 
-The experimental autoloader is the easiest and most efficient way to use Shoelace. A lightweight script watches the DOM for unregistered Shoelace elements and lazy loads them for you — even if they're added dynamically.
+The experimental autoloader is the easiest and most efficient way to use Nebula. A lightweight script watches the DOM for unregistered Nebula elements and lazy loads them for you — even if they're added dynamically.
 
 While convenient, autoloading may lead to a [Flash of Undefined Custom Elements](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/). The linked article describes some ways to alleviate it.
 
 <!-- prettier-ignore -->
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/themes/light.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@onsonr/nebula@%VERSION%/%CDNDIR%/themes/light.css" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/shoelace-autoloader.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@%VERSION%/%CDNDIR%/shoelace-autoloader.js"></script>
 ```
 
 </sl-tab-panel>
 
 <sl-tab-panel name="traditional">
 
-The traditional CDN loader registers all Shoelace elements up front. Note that, if you're only using a handful of components, it will be much more efficient to stick with the autoloader. However, you can also [cherry pick](#cherry-picking) components if you want to load specific ones up front.
+The traditional CDN loader registers all Nebula elements up front. Note that, if you're only using a handful of components, it will be much more efficient to stick with the autoloader. However, you can also [cherry pick](#cherry-picking) components if you want to load specific ones up front.
 
 <!-- prettier-ignore -->
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/themes/light.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@onsonr/nebula@%VERSION%/%CDNDIR%/themes/light.css" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/shoelace.js" ></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@%VERSION%/%CDNDIR%/shoelace.js" ></script>
 ```
 
 </sl-tab-panel>
@@ -47,7 +47,7 @@ The code above will load the light theme. If you want to use the [dark theme](/g
 
 <!-- prettier-ignore -->
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/themes/dark.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@onsonr/nebula@%VERSION%/%CDNDIR%/themes/dark.css" />
 ```
 
 ### Light & Dark Theme
@@ -58,27 +58,27 @@ If you want to load the light or dark theme based on the user's `prefers-color-s
 <link
   rel="stylesheet"
   media="(prefers-color-scheme:light)"
-  href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/themes/light.css"
+  href="https://cdn.jsdelivr.net/npm/@onsonr/nebula@%VERSION%/%CDNDIR%/themes/light.css"
 />
 <link
   rel="stylesheet"
   media="(prefers-color-scheme:dark)"
-  href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/themes/dark.css"
+  href="https://cdn.jsdelivr.net/npm/@onsonr/nebula@%VERSION%/%CDNDIR%/themes/dark.css"
   onload="document.documentElement.classList.add('sl-theme-dark');"
 />
 ```
 
-Now you can [start using Shoelace!](/getting-started/usage)
+Now you can [start using Nebula!](/getting-started/usage)
 
 ## npm installation
 
-If you don't want to use the CDN, you can install Shoelace from npm with the following command.
+If you don't want to use the CDN, you can install Nebula from npm with the following command.
 
 ```bash
-npm install @shoelace-style/shoelace
+npm install @onsonr/nebula
 ```
 
-It's up to you to make the source files available to your app. One way to do this is to create a route in your app called `/shoelace` that serves static files from `node_modules/@shoelace-style/shoelace`.
+It's up to you to make the source files available to your app. One way to do this is to create a route in your app called `/shoelace` that serves static files from `node_modules/@onsonr/nebula`.
 
 Once you've done that, add the following tags to your page. Make sure to update `href` and `src` so they point to the route you created.
 
@@ -90,14 +90,14 @@ Once you've done that, add the following tags to your page. Make sure to update
 Alternatively, [you can use a bundler](#bundling).
 
 :::tip
-For clarity, the docs will usually show imports from `@shoelace-style/shoelace`. If you're not using a module resolver or bundler, you'll need to adjust these paths to point to the folder Shoelace is in.
+For clarity, the docs will usually show imports from `@onsonr/nebula`. If you're not using a module resolver or bundler, you'll need to adjust these paths to point to the folder Nebula is in.
 :::
 
 ## Setting the Base Path
 
-Some components rely on assets (icons, images, etc.) and Shoelace needs to know where they're located. For convenience, Shoelace will try to auto-detect the correct location based on the script you've loaded it from. This assumes assets are colocated with `shoelace.js` or `shoelace-autoloader.js` and will "just work" for most users.
+Some components rely on assets (icons, images, etc.) and Nebula needs to know where they're located. For convenience, Nebula will try to auto-detect the correct location based on the script you've loaded it from. This assumes assets are colocated with `shoelace.js` or `shoelace-autoloader.js` and will "just work" for most users.
 
-However, if you're [cherry picking](#cherry-picking) or [bundling](#bundling) Shoelace, you'll need to set the base path. You can do this one of two ways.
+However, if you're [cherry picking](#cherry-picking) or [bundling](#bundling) Nebula, you'll need to set the base path. You can do this one of two ways.
 
 ```html
 <!-- Option 1: the data-shoelace attribute -->
@@ -106,7 +106,7 @@ However, if you're [cherry picking](#cherry-picking) or [bundling](#bundling) Sh
 <!-- Option 2: the setBasePath() method -->
 <script src="bundle.js"></script>
 <script type="module">
-  import { setBasePath } from '@shoelace-style/shoelace/%NPMDIR%/utilities/base-path.js';
+  import { setBasePath } from '@onsonr/nebula/%NPMDIR%/utilities/base-path.js';
   setBasePath('/path/to/shoelace/%NPMDIR%');
 </script>
 ```
@@ -117,11 +117,11 @@ An easy way to make sure the base path is configured properly is to check if [ic
 
 ### Referencing Assets
 
-Most of the magic behind assets is handled internally by Shoelace, but if you need to reference the base path for any reason, the same module exports a function called `getBasePath()`. An optional string argument can be passed, allowing you to get the full path to any asset.
+Most of the magic behind assets is handled internally by Nebula, but if you need to reference the base path for any reason, the same module exports a function called `getBasePath()`. An optional string argument can be passed, allowing you to get the full path to any asset.
 
 ```html
 <script type="module">
-  import { getBasePath, setBasePath } from '@shoelace-style/shoelace/%NPMDIR%/utilities/base-path.js';
+  import { getBasePath, setBasePath } from '@onsonr/nebula/%NPMDIR%/utilities/base-path.js';
 
   setBasePath('/path/to/assets');
 
@@ -139,13 +139,13 @@ Most of the magic behind assets is handled internally by Shoelace, but if you ne
 
 Cherry picking can be done from [the CDN](#cdn-installation-easiest) or from [npm](#npm-installation). This approach will load only the components you need up front, while limiting the number of files the browser has to download. The disadvantage is that you need to import each individual component.
 
-Here's an example that loads only the button component. Again, if you're not using a module resolver, you'll need to adjust the path to point to the folder Shoelace is in.
+Here's an example that loads only the button component. Again, if you're not using a module resolver, you'll need to adjust the path to point to the folder Nebula is in.
 
 ```html
 <link rel="stylesheet" href="/path/to/shoelace/%NPMDIR%/themes/light.css" />
 
 <script type="module" data-shoelace="/path/to/shoelace/%NPMDIR%">
-  import '@shoelace-style/shoelace/%NPMDIR%/components/button/button.js';
+  import '@onsonr/nebula/%NPMDIR%/components/button/button.js';
 
   // <sl-button> is ready to use!
 </script>
@@ -163,12 +163,12 @@ You will see files named `chunk.[hash].js` in the `chunks` directory. Never impo
 
 ## Bundling
 
-Shoelace is distributed as a collection of standard ES modules that [all modern browsers can understand](https://caniuse.com/es6-module). However, importing a lot of modules can result in a lot of HTTP requests and potentially longer load times. Using a CDN can alleviate this, but some users may wish to further optimize their imports with a bundler.
+Nebula is distributed as a collection of standard ES modules that [all modern browsers can understand](https://caniuse.com/es6-module). However, importing a lot of modules can result in a lot of HTTP requests and potentially longer load times. Using a CDN can alleviate this, but some users may wish to further optimize their imports with a bundler.
 
-To use Shoelace with a bundler, first install Shoelace along with your bundler of choice.
+To use Nebula with a bundler, first install Nebula along with your bundler of choice.
 
 ```bash
-npm install @shoelace-style/shoelace
+npm install @onsonr/nebula
 ```
 
 Now it's time to configure your bundler. Configurations vary for each tool, but here are some examples to help you get started.
@@ -176,24 +176,24 @@ Now it's time to configure your bundler. Configurations vary for each tool, but
 - [Example webpack config](https://github.com/shoelace-style/webpack-example/blob/master/webpack.config.js)
 - [Example Rollup config](https://github.com/shoelace-style/rollup-example/blob/master/rollup.config.js)
 
-Once your bundler is configured, you'll be able to import Shoelace components and utilities.
+Once your bundler is configured, you'll be able to import Nebula components and utilities.
 
 ```js
-import '@shoelace-style/shoelace/%NPMDIR%/themes/light.css';
+import '@onsonr/nebula/%NPMDIR%/themes/light.css';
-import '@shoelace-style/shoelace/%NPMDIR%/components/button/button.js';
+import '@onsonr/nebula/%NPMDIR%/components/button/button.js';
-import '@shoelace-style/shoelace/%NPMDIR%/components/icon/icon.js';
+import '@onsonr/nebula/%NPMDIR%/components/icon/icon.js';
-import '@shoelace-style/shoelace/%NPMDIR%/components/input/input.js';
+import '@onsonr/nebula/%NPMDIR%/components/input/input.js';
-import '@shoelace-style/shoelace/%NPMDIR%/components/rating/rating.js';
+import '@onsonr/nebula/%NPMDIR%/components/rating/rating.js';
-import { setBasePath } from '@shoelace-style/shoelace/%NPMDIR%/utilities/base-path.js';
+import { setBasePath } from '@onsonr/nebula/%NPMDIR%/utilities/base-path.js';
 
-// Set the base path to the folder you copied Shoelace's assets to
+// Set the base path to the folder you copied Nebula's assets to
 setBasePath('/path/to/shoelace/%NPMDIR%');
 
 // <sl-button>, <sl-icon>, <sl-input>, and <sl-rating> are ready to use!
 ```
 
 :::warning
-Component modules include side effects for registration purposes. Because of this, importing directly from `@shoelace-style/shoelace` may result in a larger bundle size than necessary. For optimal tree shaking, always cherry pick, i.e. import components and utilities from their respective files, as shown above.
+Component modules include side effects for registration purposes. Because of this, importing directly from `@onsonr/nebula` may result in a larger bundle size than necessary. For optimal tree shaking, always cherry pick, i.e. import components and utilities from their respective files, as shown above.
 :::
 
 ### Avoiding auto-registering imports
@@ -201,8 +201,8 @@ Component modules include side effects for registration purposes. Because of thi
 By default, imports to components will auto-register themselves. This may not be ideal in all cases. To import just the component's class without auto-registering it's tag we can do the following:
 
 ```diff
-- import SlButton from '@shoelace-style/shoelace/%NPMDIR%/components/button/button.js';
+- import SlButton from '@onsonr/nebula/%NPMDIR%/components/button/button.js';
-+ import SlButton from '@shoelace-style/shoelace/%NPMDIR%/components/button/button.component.js';
++ import SlButton from '@onsonr/nebula/%NPMDIR%/components/button/button.component.js';
 ```
 
 Notice how the import ends with `.component.js`. This is the current convention to convey the import does not register itself.
@@ -217,7 +217,7 @@ You'll notice that the CDN links all start with `/%CDNDIR%/<path>` and npm impor
 
 TL;DR:
 
-- `@shoelace-style/shoelace/%CDNDIR%` is for CDN users
+- `@onsonr/nebula/%CDNDIR%` is for CDN users
-- `@shoelace-style/shoelace/%NPMDIR%` is for npm users
+- `@onsonr/nebula/%NPMDIR%` is for npm users
 
-This change was introduced in `v2.5.0` to address issues around installations from npm loading multiple versions of libraries (such as the Lit) that Shoelace uses internally.
+This change was introduced in `v2.5.0` to address issues around installations from npm loading multiple versions of libraries (such as the Lit) that Nebula uses internally.

docs/pages/getting-started/localization.md

@@ -1,12 +1,12 @@
 ---
 meta:
   title: Localization
-  description: Discover how to localize Shoelace with minimal effort.
+  description: Discover how to localize Nebula with minimal effort.
 ---
 
 # Localization
 
-Components can be localized by importing the appropriate translation file and setting the desired [`lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) and/or [`dir` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) on the `<html>` element. Here's an example that renders Shoelace components in Spanish.
+Components can be localized by importing the appropriate translation file and setting the desired [`lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) and/or [`dir` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) on the `<html>` element. Here's an example that renders Nebula components in Spanish.
 
 ```html
 <html lang="es">
@@ -24,12 +24,12 @@ Through the magic of a mutation observer, changing the `lang` attribute will aut
 
 ## Available Translations
 
-Shoelace ships with a number of translations. The default is English (US), which also serves as the fallback locale. As such, you do not need to import the English translation. To see a list of all available translations in the latest version, [refer to this directory](https://github.com/shoelace-style/shoelace/tree/current/src/translations).
+Nebula ships with a number of translations. The default is English (US), which also serves as the fallback locale. As such, you do not need to import the English translation. To see a list of all available translations in the latest version, [refer to this directory](https://github.com/onsonr/nebula/tree/current/src/translations).
 
-The location of translations depends on how you're consuming Shoelace.
+The location of translations depends on how you're consuming Nebula.
 
-- If you're using the CDN, [import them from the CDN](https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace?path=%CDNDIR%%2Ftranslations)
+- If you're using the CDN, [import them from the CDN](https://www.jsdelivr.com/package/npm/@onsonr/nebula?path=%CDNDIR%%2Ftranslations)
-- If you're using a bundler, import them from `@shoelace-style/shoelace/%NPMDIR%/translations/[lang].js`
+- If you're using a bundler, import them from `@onsonr/nebula/%NPMDIR%/translations/[lang].js`
 
 You do not need to load translations up front. You can import them dynamically even after updating the `lang` attribute. Once a translation is registered, localized components will update automatically.
 
@@ -49,18 +49,18 @@ The locale set by `<html lang="...">` is the default locale for the document. If
 2. Look for `es`
 3. Fall back to `en`
 
-Shoelace uses English as a fallback to provide a better experience than rendering nothing or throwing an error.
+Nebula uses English as a fallback to provide a better experience than rendering nothing or throwing an error.
 
 ### Submitting New Translations or Improvements
 
-To contribute new translations or improvements to existing translations, please submit a pull request on GitHub. Translations are located in [`src/translations`](https://github.com/shoelace-style/shoelace/blob/next/src/translations) and can be edited directly on GitHub if you don't want to clone the repo locally.
+To contribute new translations or improvements to existing translations, please submit a pull request on GitHub. Translations are located in [`src/translations`](https://github.com/onsonr/nebula/blob/next/src/translations) and can be edited directly on GitHub if you don't want to clone the repo locally.
 
 Regional translations are welcome! For example, if a German translation (`de`) exists it's perfectly acceptable to submit a German (Switzerland) (`de-CH`) translation.
 
-If you have any questions, please start a [discussion](https://github.com/shoelace-style/shoelace/discussions) or ask in the [community chat](https://discord.gg/mg8f26C).
+If you have any questions, please start a [discussion](https://github.com/onsonr/nebula/discussions) or ask in the [community chat](https://discord.gg/mg8f26C).
 
 :::tip
-Shoelace provides a localization mechanism for component internals. This is not designed to be used as localization tool for your entire application. You should use a more appropriate tool such as [i18next](https://www.i18next.com/) if you need to localize content in your app.
+Nebula provides a localization mechanism for component internals. This is not designed to be used as localization tool for your entire application. You should use a more appropriate tool such as [i18next](https://www.i18next.com/) if you need to localize content in your app.
 :::
 
 ## Multiple Locales Per Page
@@ -101,8 +101,8 @@ You can provide your own translations if you have specific needs or if you don't
 Let's create a Spanish translation as an example. The following assumes you're using TypeScript, but you can also create translations with regular JavaScript.
 
 ```js
-import { registerTranslation } from '@shoelace-style/shoelace/dist/utilities/localize';
+import { registerTranslation } from '@onsonr/nebula/dist/utilities/localize';
-import type { Translation } from '@shoelace-style/shoelace/dist/utilities/localize';
+import type { Translation } from '@onsonr/nebula/dist/utilities/localize';
 
 const translation: Translation = {
   $code: 'es',

docs/pages/getting-started/themes.md

@@ -1,14 +1,14 @@
 ---
 meta:
   title: Themes
-  description: Everything you need to know about theming Shoelace.
+  description: Everything you need to know about theming Nebula.
 ---
 
 # Themes
 
-Shoelace is designed to be highly customizable through pure CSS. Out of the box, you can choose from a light or dark theme. Alternatively, you can design your own theme.
+Nebula is designed to be highly customizable through pure CSS. Out of the box, you can choose from a light or dark theme. Alternatively, you can design your own theme.
 
-A theme is nothing more than a stylesheet that uses the Shoelace API to define design tokens and apply custom styles to components. To create a theme, you will need a decent understanding of CSS, including [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) and the [`::part` selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part).
+A theme is nothing more than a stylesheet that uses the Nebula API to define design tokens and apply custom styles to components. To create a theme, you will need a decent understanding of CSS, including [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) and the [`::part` selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part).
 
 :::tip
 For component developers, built-in themes are also available as JavaScript modules that export [Lit CSSResult](https://lit.dev/docs/api/styles/#CSSResult) objects. You can find them in `%NPMDIR%/themes/*.styles.js`.
@@ -76,7 +76,7 @@ There are two ways to create themes. The easiest way is to customize a built-in
 
 ### Customizing a Built-in Theme
 
-The easiest way to customize Shoelace is to override one of the built-in themes. You can do this by importing the light or dark theme as-is, then creating a separate stylesheet that overrides [design tokens](/getting-started/customizing#design-tokens) and adds [component styles](/getting-started/customizing#component-parts) to your liking. You must import your theme _after_ the built-in theme.
+The easiest way to customize Nebula is to override one of the built-in themes. You can do this by importing the light or dark theme as-is, then creating a separate stylesheet that overrides [design tokens](/getting-started/customizing#design-tokens) and adds [component styles](/getting-started/customizing#component-parts) to your liking. You must import your theme _after_ the built-in theme.
 
 If you're customizing the light theme, you should scope your styles to the following selectors.
 
@@ -97,7 +97,7 @@ If you're customizing the dark theme, you should scope your styles to the follow
 }
 ```
 
-By customizing a built-in theme, you'll maintain a smaller stylesheet containing only the changes you've made. Contrast this to [creating a new theme](#creating-a-new-theme), where you need to explicitly define every design token required by the library. This approach is more "future-proof," as new design tokens that emerge in subsequent versions of Shoelace will be accounted for by the built-in theme.
+By customizing a built-in theme, you'll maintain a smaller stylesheet containing only the changes you've made. Contrast this to [creating a new theme](#creating-a-new-theme), where you need to explicitly define every design token required by the library. This approach is more "future-proof," as new design tokens that emerge in subsequent versions of Nebula will be accounted for by the built-in theme.
 
 While this approach is easier to maintain, the drawback is that your theme can't be activated independently — it's tied to the built-in theme you're extending.
 
@@ -116,7 +116,7 @@ Start by changing the selector to match your theme's name. Assuming your new the
 
 By creating a new theme, you won't be relying on a built-in theme as a foundation. Because the theme is decoupled from the built-ins, you can activate it independently as an alternative to the built-ins. This is the recommended approach if you're looking to open source your theme for others to use.
 
-You will, however, need to maintain your theme more carefully, as new versions of Shoelace may introduce new design tokens that your theme won't have accounted for. Because of this, it's recommended that you clearly specify which version(s) of Shoelace your theme is designed to work with and keep it up to date as new versions of Shoelace are released.
+You will, however, need to maintain your theme more carefully, as new versions of Nebula may introduce new design tokens that your theme won't have accounted for. Because of this, it's recommended that you clearly specify which version(s) of Nebula your theme is designed to work with and keep it up to date as new versions of Nebula are released.
 
 ## Dark Theme
 
@@ -129,7 +129,7 @@ To install the dark theme, add the following to the `<head>` section of your pag
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/themes/dark.css"
+  href="https://cdn.jsdelivr.net/npm/@onsonr/nebula@%VERSION%/%CDNDIR%/themes/dark.css"
 />
 ```
 
@@ -143,10 +143,10 @@ To activate the theme, apply the `sl-theme-dark` class to the `<html>` element.
 
 ### Detecting the User's Color Scheme Preference
 
-Shoelace doesn't try to auto-detect the user's light/dark mode preference. This should be done at the application level. As a best practice, to provide a dark theme in your app, you should:
+Nebula doesn't try to auto-detect the user's light/dark mode preference. This should be done at the application level. As a best practice, to provide a dark theme in your app, you should:
 
 - Check for [`prefers-color-scheme`](https://stackoverflow.com/a/57795495/567486) and use its value by default
 - Allow the user to override the setting in your app
 - Remember the user's preference and restore it on subsequent logins
 
-Shoelace avoids using the `prefers-color-scheme` media query because not all apps support dark mode, and it would break things for the ones that don't.
+Nebula avoids using the `prefers-color-scheme` media query because not all apps support dark mode, and it would break things for the ones that don't.

docs/pages/getting-started/usage.md

@@ -6,7 +6,7 @@ meta:
 
 # Usage
 
-Shoelace components are just regular HTML elements, or [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) to be precise. You can use them like any other element. Each component has detailed documentation that describes its full API, including properties, events, methods, and more.
+Nebula components are just regular HTML elements, or [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) to be precise. You can use them like any other element. Each component has detailed documentation that describes its full API, including properties, events, methods, and more.
 
 If you're new to custom elements, often referred to as "web components," this section will familiarize you with how to use them.
 
@@ -58,7 +58,7 @@ All custom events are prefixed with `sl-` to prevent collisions with standard ev
 
 ## Methods
 
-Some components have methods you can call to trigger various behaviors. For example, you can set focus on a Shoelace input using the `focus()` method.
+Some components have methods you can call to trigger various behaviors. For example, you can set focus on a Nebula input using the `focus()` method.
 
 ```html
 <sl-input></sl-input>
@@ -108,9 +108,9 @@ Custom elements cannot have self-closing tags. Similar to `<script>` and `<texta
 
 ## Differences from Native Elements
 
-You might expect similarly named elements to share the same API as native HTML elements, but this is not always the case. Shoelace components **are not** designed to be one-to-one replacements for their HTML counterparts. While they usually share the same API, there may be subtle differences.
+You might expect similarly named elements to share the same API as native HTML elements, but this is not always the case. Nebula components **are not** designed to be one-to-one replacements for their HTML counterparts. While they usually share the same API, there may be subtle differences.
 
-For example, `<button>` and `<sl-button>` both have a `type` attribute, but the native one defaults to `submit` while the Shoelace one defaults to `button` since this is a better default for most users.
+For example, `<button>` and `<sl-button>` both have a `type` attribute, but the native one defaults to `submit` while the Nebula one defaults to `button` since this is a better default for most users.
 
 :::tip
 **Don't make assumptions about a component's API!** To prevent unexpected behaviors, please take the time to review the documentation and make sure you understand what each attribute, property, method, and event is intended to do.
@@ -118,7 +118,7 @@ For example, `<button>` and `<sl-button>` both have a `type` attribute, but the
 
 ## Waiting for Components to Load
 
-Web components are registered with JavaScript, so depending on how and when you load Shoelace, you may notice a [Flash of Undefined Custom Elements (FOUCE)](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/) when the page loads. There are a couple ways to prevent this, both of which are described in the linked article.
+Web components are registered with JavaScript, so depending on how and when you load Nebula, you may notice a [Flash of Undefined Custom Elements (FOUCE)](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/) when the page loads. There are a couple ways to prevent this, both of which are described in the linked article.
 
 One option is to use the [`:defined`](https://developer.mozilla.org/en-US/docs/Web/CSS/:defined) CSS pseudo-class to "hide" custom elements that haven't been registered yet. You can scope it to specific tags or you can hide all undefined custom elements as shown below.
 
@@ -161,7 +161,7 @@ A clever way to use this method is to hide the `<body>` with `opacity: 0` and ad
 
 ## Component Rendering and Updating
 
-Shoelace components are built with [Lit](https://lit.dev/), a tiny library that makes authoring custom elements easier, more maintainable, and a lot of fun! As a Shoelace user, here is some helpful information about rendering and updating you should probably be aware of.
+Nebula components are built with [Lit](https://lit.dev/), a tiny library that makes authoring custom elements easier, more maintainable, and a lot of fun! As a Nebula user, here is some helpful information about rendering and updating you should probably be aware of.
 
 To optimize performance and reduce re-renders, Lit batches component updates. This means changing multiple attributes or properties at the same time will result in just a single re-render. In most cases, this isn't an issue, but there may be times you'll need to wait for the component to update before continuing.
 
@@ -195,16 +195,16 @@ Avoid using `setTimeout()` or `requestAnimationFrame()` in situations like this.
 
 ### VS Code
 
-Shoelace ships with a file called `vscode.html-custom-data.json` that can be used to describe it's custom elements to Visual Studio Code. This enables code completion for Shoelace components (also known as "code hinting" or "IntelliSense"). To enable it, you need to tell VS Code where the file is.
+Nebula ships with a file called `vscode.html-custom-data.json` that can be used to describe it's custom elements to Visual Studio Code. This enables code completion for Nebula components (also known as "code hinting" or "IntelliSense"). To enable it, you need to tell VS Code where the file is.
 
-1. [Install Shoelace locally](/getting-started/installation#local-installation)
+1. [Install Nebula locally](/getting-started/installation#local-installation)
 2. If it doesn't already exist, create a folder called `.vscode` at the root of your project
 3. If it doesn't already exist, create a file inside that folder called `settings.json`
 4. Add the following to the file
 
 ```js
 {
-  "html.customData": ["./node_modules/@shoelace-style/shoelace/dist/vscode.html-custom-data.json"]
+  "html.customData": ["./node_modules/@onsonr/nebula/dist/vscode.html-custom-data.json"]
 }
 ```
 
@@ -212,9 +212,9 @@ If `settings.json` already exists, simply add the above line to the root of the
 
 ### JetBrains IDEs
 
-If you are using a [JetBrains IDE](https://www.jetbrains.com/) and you are installing Shoelace from NPM, the editor will automatically detect the `web-types.json` file from the package and you should immediately see component information in your editor.
+If you are using a [JetBrains IDE](https://www.jetbrains.com/) and you are installing Nebula from NPM, the editor will automatically detect the `web-types.json` file from the package and you should immediately see component information in your editor.
 
-If you are installing from the CDN, you can [download a local copy](https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace/dist/web-types.json) and add it to the root of your project. Be sure to add a reference to the `web-types.json` file in your `package.json` in order for your editor to properly detect it.
+If you are installing from the CDN, you can [download a local copy](https://cdn.jsdelivr.net/npm/@onsonr/nebula/dist/web-types.json) and add it to the root of your project. Be sure to add a reference to the `web-types.json` file in your `package.json` in order for your editor to properly detect it.
 
 ```json
 {
@@ -239,4 +239,4 @@ If you are using types from multiple projects, you can add an array of reference
 
 ### Other Editors
 
-Most popular editors support custom code completion with a bit of configuration. Please [submit a feature request](https://github.com/shoelace-style/shoelace/issues/new/choose) for your editor of choice. PRs are also welcome!
+Most popular editors support custom code completion with a bit of configuration. Please [submit a feature request](https://github.com/onsonr/nebula/issues/new/choose) for your editor of choice. PRs are also welcome!

docs/pages/index.md

@@ -1,15 +1,15 @@
 ---
 meta:
-  title: 'Nebula: A specialized fork of Shoelace for Crypto and Blockchain interfaces.'
+  title: 'Nebula: A specialized fork of Nebula for Crypto and Blockchain interfaces.'
   description: Hand-crafted custom elements for any occasion.
 toc: false
 ---
 
 <div class="splash">
 <div class="splash-start">
-<img class="splash-logo" src="/assets/images/wordmark.svg" alt="Shoelace">
+<img class="splash-logo" src="/assets/images/wordmark.svg" alt="Nebula">
 
-# <sl-visually-hidden>Shoelace:</sl-visually-hidden> A forward-thinking library of web components.
+# <sl-visually-hidden>Nebula:</sl-visually-hidden> A forward-thinking library of web components.
 
 - Works with all frameworks 🧩
 - Works with CDNs 🚛
@@ -31,7 +31,7 @@ toc: false
 
 [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@onsonr/nebula/badge)](https://www.jsdelivr.com/package/npm/@onsonr/nebula)
 [![npm](https://img.shields.io/npm/dw/@onsonr/nebula?label=npm&style=flat-square)](https://www.npmjs.com/package/@onsonr/nebula)
-[![License](https://img.shields.io/badge/license-MIT-232323.svg?style=flat-square)](https://github.com/shoelace-style/shoelace/blob/next/LICENSE.md)<br>
+[![License](https://img.shields.io/badge/license-MIT-232323.svg?style=flat-square)](https://github.com/onsonr/nebula/blob/next/LICENSE.md)<br>
 [![Twitter](https://img.shields.io/badge/Twitter-Follow-00acee.svg?style=flat-square&logo=twitter&logoColor=white)](https://twitter.com/sonr_io)
 
 </div>
@@ -46,14 +46,14 @@ Add the following code to your page.
 <script type="module" src="https://cdn.jsdelivr.net/npm/@onsonr/nebula@%VERSION%/%CDNDIR%/shoelace-autoloader.js"></script>
 ```
 
-Now you have access to all of Shoelace's components! Try adding a button:
+Now you have access to all of Nebula's components! Try adding a button:
 
 ```html:preview:expanded:no-codepen
 <sl-button>Click me</sl-button>
 ```
 
 :::tip
-This will activate Shoelace's experimental autoloader, which registers components on the fly as you use them. To learn more about it, or for other ways to install Shoelace, refer to the [installation instructions](getting-started/installation).
+This will activate Nebula's experimental autoloader, which registers components on the fly as you use them. To learn more about it, or for other ways to install Nebula, refer to the [installation instructions](getting-started/installation).
 :::
 
 ## New to Web Components?
@@ -70,13 +70,13 @@ Unfortunately, _framework-specific_ components fail us in a number of ways:
 
 Web components solve these problems. They're [supported by all modern browsers](https://caniuse.com/#feat=custom-elementsv1), they're framework-agnostic, and they're [part of the standard](https://developer.mozilla.org/en-US/docs/Web/Web_Components), so we know they'll be supported for many years to come.
 
-This is the technology that Shoelace is built on.
+This is the technology that Nebula is built on.
 
 ## What Problem Does This Solve?
 
-Shoelace provides a collection of professionally designed, highly customizable UI components built on a framework agnostic technology. Why spend hundreds of hours (or more) building a design system from scratch? Why make a component library that only works with one framework?
+Nebula provides a collection of professionally designed, highly customizable UI components built on a framework agnostic technology. Why spend hundreds of hours (or more) building a design system from scratch? Why make a component library that only works with one framework?
 
-With Shoelace, you can:
+With Nebula, you can:
 
 - Start building things faster (no need to roll your own buttons)
 - Build multiple apps with different frameworks that all share the same UI components
@@ -84,13 +84,13 @@ With Shoelace, you can:
 - Incrementally adopt components as needed (no need to ditch your framework)
 - Upgrade or switch frameworks without rebuilding foundational components
 
-If your organization is looking to build a design system, [Shoelace will save you thousands of dollars](https://medium.com/eightshapes-llc/and-you-thought-buttons-were-easy-26eb5b5c1871). All the foundational components you need are right here, ready to be customized for your brand. And since it's built on web standards, browsers will continue to support it for many years to come.
+If your organization is looking to build a design system, [Nebula will save you thousands of dollars](https://medium.com/eightshapes-llc/and-you-thought-buttons-were-easy-26eb5b5c1871). All the foundational components you need are right here, ready to be customized for your brand. And since it's built on web standards, browsers will continue to support it for many years to come.
 
-Whether you use Shoelace as a starting point for your organization's design system or for a fun personal project, there's no limit to what you can do with it.
+Whether you use Nebula as a starting point for your organization's design system or for a fun personal project, there's no limit to what you can do with it.
 
 ## Browser Support
 
-Shoelace is tested in the latest two versions of the following browsers.
+Nebula is tested in the latest two versions of the following browsers.
 
 <img src="/assets/images/chrome.png" alt="Chrome" width="64" height="64">
 <img src="/assets/images/edge.png" alt="Edge" width="64" height="64">
@@ -100,15 +100,15 @@ Shoelace is tested in the latest two versions of the following browsers.
 
 Critical bug fixes in earlier versions will be addressed based on their severity and impact.
 
-If you need to support IE11 or pre-Chromium Edge, this library isn't for you. Although web components can (to some degree) be polyfilled for legacy browsers, supporting them is outside the scope of this project. If you're using Shoelace in such a browser, you're gonna have a bad time. ⛷
+If you need to support IE11 or pre-Chromium Edge, this library isn't for you. Although web components can (to some degree) be polyfilled for legacy browsers, supporting them is outside the scope of this project. If you're using Nebula in such a browser, you're gonna have a bad time. ⛷
 
 ## License
 
-Shoelace was created in New Hampshire by [Cory LaViska](https://twitter.com/claviska). It's available under the terms of the [MIT license](https://github.com/shoelace-style/shoelace/blob/next/LICENSE.md).
+Nebula was created in New Hampshire by [Cory LaViska](https://twitter.com/claviska). It's available under the terms of the [MIT license](https://github.com/onsonr/nebula/blob/next/LICENSE.md).
 
 ## Attribution
 
-Special thanks to the following projects and individuals that help make Shoelace possible.
+Special thanks to the following projects and individuals that help make Nebula possible.
 
 - Components are built with [Lit](https://lit.dev/)
 - Component metadata is generated by the [Custom Elements Manifest Analyzer](https://github.com/open-wc/custom-elements-manifest)
@@ -120,4 +120,4 @@ Special thanks to the following projects and individuals that help make Shoelace
 - Positioning of dropdowns, tooltips, et al is handled by [Floating UI](https://floating-ui.com/)
 - Animations are courtesy of [animate.css](https://animate.style/)
 - Search is powered by [Lunr](https://lunrjs.com/)
-- The Shoelace logo was designed with a single shoelace by [Adam K Olson](https://twitter.com/adamkolson)
+- The Nebula logo was designed with a single shoelace by [Adam K Olson](https://twitter.com/adamkolson)

docs/pages/resources/accessibility.md

@@ -1,24 +1,24 @@
 ---
 meta:
   title: Accessibility Commitment
-  description: Shoelace recognizes the need for all users to have undeterred access to the websites and applications that are created with it.
+  description: Nebula recognizes the need for all users to have undeterred access to the websites and applications that are created with it.
 ---
 
 # Accessibility Commitment
 
-Shoelace recognizes the need for all users, regardless of ability and device, to have undeterred access to the websites and applications that are created with it. This is an important goal of the project.
+Nebula recognizes the need for all users, regardless of ability and device, to have undeterred access to the websites and applications that are created with it. This is an important goal of the project.
 
-Oftentimes, people will ask “is Shoelace accessible?” I’m reluctant to answer because accessibility isn’t binary — there’s no simple “yes” or “no” response to provide. What seems accessible to a sighted user might be completely inaccessible to a non-sighted user. And even if you optimize for various screen readers, you still have to account for low-level vision, color blindness, hearing impairments, mobility impairments, and more.
+Oftentimes, people will ask “is Nebula accessible?” I’m reluctant to answer because accessibility isn’t binary — there’s no simple “yes” or “no” response to provide. What seems accessible to a sighted user might be completely inaccessible to a non-sighted user. And even if you optimize for various screen readers, you still have to account for low-level vision, color blindness, hearing impairments, mobility impairments, and more.
 
 Accessibility is something you have to continuously strive for. No individual contributor — or perhaps even an entire team — can claim their software is 100% accessible because of the sheer diversity of abilities, devices, assistive technologies, and individual use cases.
 
 Furthermore, accessibility doesn’t stop at the component level. Using accessible building blocks doesn’t magically make the rest of your webpage or application compliant. There is no library or overlay that will make your software “fully accessible” without putting in the effort. It’s also worth noting that web components are still somewhat bleeding edge, so browsers, assistive devices, and [even specifications](https://wicg.github.io/aom/spec/) are still evolving to help improve accessibility on the web platform.
 
-My commitment to Shoelace users is this: Everything I develop will be built with accessibility in mind. I will test and improve every component to the best of my ability and knowledge. I will work around upstream issues, such as browser bugs and limitations, to the best of my ability and within reason.
+My commitment to Nebula users is this: Everything I develop will be built with accessibility in mind. I will test and improve every component to the best of my ability and knowledge. I will work around upstream issues, such as browser bugs and limitations, to the best of my ability and within reason.
 
-I’m fully aware that I may not get it right every time for every user, so I invite the community to participate in this ongoing effort by submitting [issues](https://github.com/shoelace-style/shoelace/issues?q=is%3Aissue+is%3Aopen+label%3Aa11y), [pull requests](https://github.com/shoelace-style/shoelace/pulls?q=is%3Aopen+is%3Apr+label%3Aa11y), and [discussions](https://github.com/shoelace-style/shoelace/discussions). Many accessibility improvements have already been made thanks to contributors submitting code, feedback, and suggestions.
+I’m fully aware that I may not get it right every time for every user, so I invite the community to participate in this ongoing effort by submitting [issues](https://github.com/onsonr/nebula/issues?q=is%3Aissue+is%3Aopen+label%3Aa11y), [pull requests](https://github.com/onsonr/nebula/pulls?q=is%3Aopen+is%3Apr+label%3Aa11y), and [discussions](https://github.com/onsonr/nebula/discussions). Many accessibility improvements have already been made thanks to contributors submitting code, feedback, and suggestions.
 
-This is the path forward. Together, we will continue to make Shoelace accessible to as many users as possible.
+This is the path forward. Together, we will continue to make Nebula accessible to as many users as possible.
 
 — Cory LaViska<br>
-_Creator of Shoelace_
+_Creator of Nebula_

docs/pages/resources/changelog.md

@@ -6,11 +6,11 @@ meta:
 
 # Changelog
 
-Shoelace follows [Semantic Versioning](https://semver.org/). Breaking changes in components with the <sl-badge variant="primary" pill>Stable</sl-badge> badge will not be accepted until the next major version. As such, all contributions must consider the project's roadmap and take this into consideration. Features that are deemed no longer necessary will be deprecated but not removed.
+Nebula follows [Semantic Versioning](https://semver.org/). Breaking changes in components with the <sl-badge variant="primary" pill>Stable</sl-badge> badge will not be accepted until the next major version. As such, all contributions must consider the project's roadmap and take this into consideration. Features that are deemed no longer necessary will be deprecated but not removed.
 
 Components with the <sl-badge variant="warning" pill>Experimental</sl-badge> badge should not be used in production. They are made available as release candidates for development and testing purposes. As such, changes to experimental components will not be subject to semantic versioning.
 
-New versions of Shoelace are released as-needed and generally occur when a critical mass of changes have accumulated. At any time, you can see what's coming in the next release by visiting [next.shoelace.style](https://next.shoelace.style).
+New versions of Nebula are released as-needed and generally occur when a critical mass of changes have accumulated. At any time, you can see what's coming in the next release by visiting [next.shoelace.style](https://next.shoelace.style).
 
 ## Next
 
@@ -94,7 +94,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 ## 2.12.0
 
 - Added the Italian translation [#1727]
-- Added the ability to call `form.checkValidity()` and it will use Shoelace's custom `checkValidity()` handler. [#1708]
+- Added the ability to call `form.checkValidity()` and it will use Nebula's custom `checkValidity()` handler. [#1708]
 - Fixed a bug where nested dialogs were not properly trapping focus. [#1711]
 - Fixed a bug with form controls removing the custom validity handlers from the form. [#1708]
 - Fixed a bug in form control components that used a `form` property, but not an attribute. [#1707]
@@ -136,7 +136,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 ## 2.9.0
 
 - Added the `modal` property to `<sl-dialog>` and `<sl-drawer>` to support third-party modals [#1571]
-- Fixed a bug in the autoloader causing it to register non-Shoelace elements [#1563]
+- Fixed a bug in the autoloader causing it to register non-Nebula elements [#1563]
 - Fixed a bug in `<sl-switch>` that resulted in improper spacing between the label and the required asterisk [#1540]
 - Fixed a bug in `<sl-icon>` that caused icons to not load when the default library used a sprite sheet [#1572]
 - Removed error when a missing popup anchor is provided [#1548]
@@ -173,7 +173,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 - Added JSDoc comments to React Wrappers for better documentation when hovering a component. [#1450]
 - Added `displayName` to React Wrappers for better debugging. [#1450]
 - Added non-auto-registering routes for Components to fix a number of issues around auto-registration. [#1450]
-- Added a console warning if you attempt to register the same Shoelace component twice. [#1450]
+- Added a console warning if you attempt to register the same Nebula component twice. [#1450]
 - Added tests for `<sl-qr-code>` [#1416]
 - Added support for pressing [[Space]] to select/toggle selected `<sl-menu-item>` elements [#1429]
 - Added support for virtual elements in `<sl-popup>` [#1449]
@@ -206,7 +206,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 
 ## 2.5.0
 
-This release [unbundles Lit](https://github.com/shoelace-style/shoelace/issues/559) (and other dependencies) from Shoelace. There are now two distributions for the project:
+This release [unbundles Lit](https://github.com/onsonr/nebula/issues/559) (and other dependencies) from Nebula. There are now two distributions for the project:
 
 1. `cdn/` – a bundled, CDN-ready distribution
 2. `dist/` – an unbundled, npm-ready distribution
@@ -315,22 +315,22 @@ When using `<input type="password">` the default value for `autocapitalize`, `au
 
 ## 2.0.0
 
-This is the first stable release of Shoelace 2, meaning breaking changes to the API will no longer be accepted for this version. Development of Shoelace 2.0 started in January 2020. The first beta was released on [July 15, 2020](https://github.com/shoelace-style/shoelace/releases/tag/v2.0.0-beta.1). Since then, Shoelace has grown quite a bit! Here are some stats from the project as of January 24, 2023:
+This is the first stable release of Nebula 2, meaning breaking changes to the API will no longer be accepted for this version. Development of Nebula 2.0 started in January 2020. The first beta was released on [July 15, 2020](https://github.com/onsonr/nebula/releases/tag/v2.0.0-beta.1). Since then, Nebula has grown quite a bit! Here are some stats from the project as of January 24, 2023:
 
 - 55 components have been built
-- [Over 2,500 commits](https://github.com/shoelace-style/shoelace/commits/next) have been made to the project
+- [Over 2,500 commits](https://github.com/onsonr/nebula/commits/next) have been made to the project
-- [88 beta versions](https://github.com/shoelace-style/shoelace/tags) have been released
+- [88 beta versions](https://github.com/onsonr/nebula/tags) have been released
-- [85 people](https://github.com/shoelace-style/shoelace/graphs/contributors) have contributed to the project
+- [85 people](https://github.com/onsonr/nebula/graphs/contributors) have contributed to the project
-- [669 issues](https://github.com/shoelace-style/shoelace/issues?q=is%3Aissue+is%3Aclosed) have been filed on GitHub
+- [669 issues](https://github.com/onsonr/nebula/issues?q=is%3Aissue+is%3Aclosed) have been filed on GitHub
-- [274 pull requests](https://github.com/shoelace-style/shoelace/pulls) have been opened
+- [274 pull requests](https://github.com/onsonr/nebula/pulls) have been opened
-- [More than 150 discussions](https://github.com/shoelace-style/shoelace/discussions) have been started on GitHub
+- [More than 150 discussions](https://github.com/onsonr/nebula/discussions) have been started on GitHub
-- [Over 500 people](https://discord.com/invite/mg8f26C) have joined the Shoelace community on Discord
+- [Over 500 people](https://discord.com/invite/mg8f26C) have joined the Nebula community on Discord
-- [Over 300 million CDN hits](https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace) per month
+- [Over 300 million CDN hits](https://www.jsdelivr.com/package/npm/@onsonr/nebula) per month
-- [Over 13,000 npm downloads](https://www.npmjs.com/package/@shoelace-style/shoelace) per week
+- [Over 13,000 npm downloads](https://www.npmjs.com/package/@onsonr/nebula) per week
 - [73rd most popular project](https://www.jsdelivr.com/statistics) on jsDelivr
 - [#2
 
-I'd like to extend a very special thank you to every single contributor who worked to make this possible. Everyone who's filed a bug, submitted a PR, requested a feature, started a discussion, helped with testing, and advocated for the project. You are just as responsible for Shoelace's success as I am. I'd also like to thank the folks at [Font&nbsp;Awesome](https://fontawesome.com/) for recognizing Shoelace's potential and [believing in me](https://blog.fontawesome.com/shoelace-joins-font-awesome/) to make it happen.
+I'd like to extend a very special thank you to every single contributor who worked to make this possible. Everyone who's filed a bug, submitted a PR, requested a feature, started a discussion, helped with testing, and advocated for the project. You are just as responsible for Nebula's success as I am. I'd also like to thank the folks at [Font&nbsp;Awesome](https://fontawesome.com/) for recognizing Nebula's potential and [believing in me](https://blog.fontawesome.com/shoelace-joins-font-awesome/) to make it happen.
 
 Thank you! And keep building _awesome_ stuff!
 
@@ -360,7 +360,7 @@ Without further ado, here are the notes for this release.
 - Fixed a bug in `<sl-icon>` that caused icons to sometimes be clipped in Safari
 - Fixed a bug that prevented label colors from inheriting by default in `<sl-checkbox>`, `<sl-radio>`, and `<sl-switch>`
 - Fixed a bug in `<sl-radio-group>` that caused an extra margin between the host element and the internal fieldset [#1139]
-- Refactored the `ShoelaceFormControl` interface to remove the `invalid` property, allowing a more intuitive API for controlling validation internally
+- Refactored the `NebulaFormControl` interface to remove the `invalid` property, allowing a more intuitive API for controlling validation internally
 - Renamed the internal `FormSubmitController` to `FormControlController` to better reflect what it's used for
 - Updated Lit to 2.6.1
 - Updated Floating UI to 1.1.0
@@ -510,7 +510,7 @@ This release includes a complete rewrite of `<sl-select>` to improve accessibili
   - Improved `<sl-tab-group>` so tabs are cleaner and easier to understand in forced-colors mode
 - Improved positioning of the menu in `<sl-select>` so you can customize the menu width [#1018]
 - Moved all component descriptions to `@summary` to get them within documentation tools [#962]
-- Refactored form controls to use the `ShoelaceFormControl` interface to improve type safety and consistency
+- Refactored form controls to use the `NebulaFormControl` interface to improve type safety and consistency
 - Updated Lit to 2.4.1
 - Updated `@shoelace-style/localize` t0 3.0.3 to support for extended language codes
 - Updated Bootstrap Icons to 1.10.2
@@ -520,7 +520,7 @@ This release includes a complete rewrite of `<sl-select>` to improve accessibili
 
 ## 2.0.0-beta.83
 
-This release removes the `<sl-responsive-media>` component. When this component was introduced, support for [`aspect-ratio`](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio)) wasn't great. These days, [the property is supported](https://caniuse.com/mdn-css_properties_aspect-ratio) by all of Shoelace's target browsers, making a dedicated component redundant.
+This release removes the `<sl-responsive-media>` component. When this component was introduced, support for [`aspect-ratio`](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio)) wasn't great. These days, [the property is supported](https://caniuse.com/mdn-css_properties_aspect-ratio) by all of Nebula's target browsers, making a dedicated component redundant.
 
 - 🚨 BREAKING: Removed `<sl-responsive-media>` (use the well-supported `aspect-ratio` CSS property instead)
 - 🚨 BREAKING: Changed the `toggle-password` attribute of `<sl-input>` to `password-toggle` for consistency
@@ -539,7 +539,7 @@ This release removes the `<sl-responsive-media>` component. When this component
 - Fixed a handful of paths to prevent TypeScript from getting upset [#886]
 - Fixed a bug in `<sl-radio-group>` where the `button-group__base` part was documented but not exposed [#909]
 - Fixed a bug in `<sl-range>` that caused the active track color to render on the wrong side in RTL [#916]
-- Refactored the internal event emitter to be part of `ShoelaceElement` to reduce imports and improve DX
+- Refactored the internal event emitter to be part of `NebulaElement` to reduce imports and improve DX
 - Downgraded Floating UI from 1.0.1 to 1.0.0 due to new logic that makes positioning much slower for certain components [#915]
 - Upgraded the status of `<sl-animated-image>`, `<sl-popup>`, and `<sl-split-panel>` from experimental to stable
 
@@ -561,7 +561,7 @@ This release removes the `<sl-responsive-media>` component. When this component
 - Improved single selection in `<sl-tree>` so nodes expand and collapse and receive selection when clicking on the label
 - Renamed `expanded-icon` and `collapsed-icon` slots to `expand-icon` and `collapse-icon` in the experimental `<sl-tree>` and `<sl-tree-item>` components
 - Improved RTL support for `<sl-image-comparer>`
-- Refactored components to extend from `ShoelaceElement` to make `dir` and `lang` reactive properties in all components
+- Refactored components to extend from `NebulaElement` to make `dir` and `lang` reactive properties in all components
 
 ## 2.0.0-beta.81
 
@@ -675,7 +675,7 @@ To upgrade to this version, you will need to rework your radio controls by movin
 - Added `color-scheme` to light and dark themes to improve rendering of browser-provided UI [#776]
 - Added `--track-width` custom property to `<sl-tab-group>`
 - Fixed focus rings for `<sl-input>`, `<sl-select>`, and `<sl-textarea>` in Safari since they don't use `:focus-visible` [#767]
-- Fixed a bug where calling `HTMLFormElement.reportValidity()` would skip Shoelace form controls [#772]
+- Fixed a bug where calling `HTMLFormElement.reportValidity()` would skip Nebula form controls [#772]
 - Fixed a bug that prevented `<sl-tooltip>` from closing when disabled [#775]
 - Fixed a bug that allowed `<sl-icon-button>` to emit a `click` event when disabled [#781]
 - Improved the default icon for `<sl-image-comparer>` so it's more intuitive and removed `grip-vertical` from system icon library
@@ -914,7 +914,7 @@ If you're using color tokens in your own stylesheet, simply remove the `rgb()` t
 }
 ```
 
-Thank you for your help and patience with testing Shoelace. I promise, we're not far from a stable release!
+Thank you for your help and patience with testing Nebula. I promise, we're not far from a stable release!
 
 - 🚨 BREAKING: removed blue gray, cool gray, true gray, and warm gray color palettes
 - 🚨 BREAKING: removed `--sl-focus-ring-color`, and `--sl-focus-ring-alpha` (use `--sl-focus-ring` instead)
@@ -955,7 +955,7 @@ Thank you for your help and patience with testing Shoelace. I promise, we're not
 
 ## 2.0.0-beta.58
 
-This version once again restores the bundled distribution because the unbundled + CDN approach is currently confusing and [not working properly](https://github.com/shoelace-style/shoelace/issues/559#issuecomment-949662331). Unbundling the few dependencies Shoelace has is still a goal of the project, but [this jsDelivr bug](https://github.com/jsdelivr/jsdelivr/issues/18337) needs to be resolved before we can achieve it.
+This version once again restores the bundled distribution because the unbundled + CDN approach is currently confusing and [not working properly](https://github.com/onsonr/nebula/issues/559#issuecomment-949662331). Unbundling the few dependencies Nebula has is still a goal of the project, but [this jsDelivr bug](https://github.com/jsdelivr/jsdelivr/issues/18337) needs to be resolved before we can achieve it.
 
 I sincerely apologize for the instability of the last few beta releases as a result of this effort.
 
@@ -986,7 +986,7 @@ This release is the second attempt at unbundling dependencies. This will be a br
 
 ## 2.0.0-beta.54
 
-Shoelace doesn't have a lot of dependencies, but this release unbundles most of them so you can potentially save some extra kilobytes. This will be a breaking change only if your configuration _does not_ support bare module specifiers. CDN users and bundler users will be unaffected.
+Nebula doesn't have a lot of dependencies, but this release unbundles most of them so you can potentially save some extra kilobytes. This will be a breaking change only if your configuration _does not_ support bare module specifiers. CDN users and bundler users will be unaffected.
 
 - 🚨 BREAKING: renamed the `sl-clear` event to `sl-remove`, the `clear-button` part to `remove-button`, and the `clearable` property to `removable` in `<sl-tag>`
 - Added the `disabled` attribute to `<sl-resize-observer>`
@@ -1078,7 +1078,7 @@ This release also fixes a critical bug in the color scale where `--sl-color-neut
 
 This release improves theming by offering both light and dark themes that can be used autonomously. It also improves contrast in most components, adds a variety of new color primitives, and changes the way color tokens are consumed.
 
-Previously, color tokens were in hexadecimal format. Now, Shoelace now uses an `R G B` format that requires you to use the `rgb()` function in your CSS.
+Previously, color tokens were in hexadecimal format. Now, Nebula now uses an `R G B` format that requires you to use the `rgb()` function in your CSS.
 
 ```css
 .example {
@@ -1126,7 +1126,7 @@ This change applies to all design tokens that implement a color. Refer to the [c
 
 ## 2.0.0-beta.47
 
-This release improves how component dependencies are imported. If you've been cherry picking, you no longer need to import component dependencies manually. This significantly improves developer experience, making Shoelace even easier to use. For transparency, component dependencies will continue to be listed in the docs.
+This release improves how component dependencies are imported. If you've been cherry picking, you no longer need to import component dependencies manually. This significantly improves developer experience, making Nebula even easier to use. For transparency, component dependencies will continue to be listed in the docs.
 
 - Added "Reflects" column to the properties table
 - Dependencies are now automatically imported for all components
@@ -1143,7 +1143,7 @@ This release improves the developer experience of `<sl-animation>`. Previously,
 
 This is a lot more intuitive and makes it easier to activate animations imperatively. In addition, the `play` attribute is automatically removed automatically when the animation finishes or cancels, making it easier to restart finite animations. Lastly, the animation's timing is now accessible through the new `currentTime` property instead of `getCurrentTime()` and `setCurrentTime()`.
 
-In addition, Shoelace no longer uses Sass. Component styles now use Lit's template literal styles and theme files use pure CSS.
+In addition, Nebula no longer uses Sass. Component styles now use Lit's template literal styles and theme files use pure CSS.
 
 - 🚨 BREAKING: removed the `pause` attribute from `<sl-animation>` (use `play` to start and stop the animation instead)
 - 🚨 BREAKING: removed `getCurrentTime()` and `setCurrentTime()` from `<sl-animation>` (use the `currentTime` property instead)
@@ -1322,12 +1322,12 @@ The most elegant solution I found was to use the [Web Animations API](https://de
 
 ## 2.0.0-beta.34
 
-This release changes the way components are registered if you're [cherry picking](/getting-started/installation#cherry-picking) or [using a bundler](/getting-started/installation#bundling). This recommendation came from the LitElement team and simplifies Shoelace's dependency graph. It also eliminates the need to call a `register()` function before using each component.
+This release changes the way components are registered if you're [cherry picking](/getting-started/installation#cherry-picking) or [using a bundler](/getting-started/installation#bundling). This recommendation came from the LitElement team and simplifies Nebula's dependency graph. It also eliminates the need to call a `register()` function before using each component.
 
-From now on, importing a component will register it automatically. The caveat is that bundlers may not tree shake the library properly if you import from `@shoelace-style/shoelace`, so the recommendation is to import components and utilities from their corresponding files instead.
+From now on, importing a component will register it automatically. The caveat is that bundlers may not tree shake the library properly if you import from `@onsonr/nebula`, so the recommendation is to import components and utilities from their corresponding files instead.
 
 - 🚨 BREAKING: removed `all.shoelace.js` (use `shoelace.js` instead)
-- 🚨 BREAKING: component modules now have a side effect, so bundlers may not tree shake properly when importing from `@shoelace-style/shoelace` (see the [installation page](/getting-started/installation#bundling) for more details and how to update)
+- 🚨 BREAKING: component modules now have a side effect, so bundlers may not tree shake properly when importing from `@onsonr/nebula` (see the [installation page](/getting-started/installation#bundling) for more details and how to update)
 - Added `sl-clear` event to `<sl-select>`
 - Fixed a bug where dynamically changing menu items in `<sl-select>` would cause the display label to be blank [#374]
 - Fixed a bug where setting the `value` attribute or property on `<sl-input>` and `<sl-textarea>` would trigger validation too soon
@@ -1346,7 +1346,7 @@ From now on, importing a component will register it automatically. The caveat is
 
 ## 2.0.0-beta.32
 
-- Added tag name maps so TypeScript can identify Shoelace elements [#371]
+- Added tag name maps so TypeScript can identify Nebula elements [#371]
 - Fixed a bug where the active tab indicator wouldn't render properly on tabs styled with `flex-end` [#355]
 - Fixed a bug where `sl-change` wasn't emitted by `<sl-checkbox>` or `<sl-switch>` [#370]
 - Fixed a bug where some props weren't being watched correctly in `<sl-alert>` and `<sl-color-picker>`
@@ -1366,7 +1366,7 @@ From now on, importing a component will register it automatically. The caveat is
 
 ## 2.0.0-beta.29
 
-**This release migrates component implementations from Shoemaker to LitElement.** Due to feedback from the community, Shoelace will rely on a more heavily tested library for component implementations. This gives you a more solid foundation and reduces my maintenance burden. Thank you for all your comments, concerns, and encouragement! Aside from that, everything else from beta.28 still applies plus the following.
+**This release migrates component implementations from Shoemaker to LitElement.** Due to feedback from the community, Nebula will rely on a more heavily tested library for component implementations. This gives you a more solid foundation and reduces my maintenance burden. Thank you for all your comments, concerns, and encouragement! Aside from that, everything else from beta.28 still applies plus the following.
 
 - 🚨 BREAKING: removed the `symbol` property from `<sl-rating>` and reverted to `getSymbol` for optimal flexibility
 - Added `vscode.html-custom-data.json` to the build to support IntelliSense (see [the usage section](/getting-started/usage#code-completion) for details)
@@ -1379,15 +1379,15 @@ From now on, importing a component will register it automatically. The caveat is
 
 ## 2.0.0-beta.28
 
-**This release includes a major under the hood overhaul of the library and how it's distributed.** Until now, Shoelace was developed with Stencil. This release moves to a lightweight tool called Shoemaker, a homegrown utility that provides declarative templating and data binding while reducing the boilerplate required for said features.
+**This release includes a major under the hood overhaul of the library and how it's distributed.** Until now, Nebula was developed with Stencil. This release moves to a lightweight tool called Shoemaker, a homegrown utility that provides declarative templating and data binding while reducing the boilerplate required for said features.
 
-This change in tooling addresses a number of longstanding bugs and limitations. It also gives us more control over the library and build process while streamlining development and maintenance. Instead of two different distributions, Shoelace now offers a single, standards-compliant collection of ES modules. This may affect how you install and use the library, so please refer to the [installation page](/getting-started/installation) for details.
+This change in tooling addresses a number of longstanding bugs and limitations. It also gives us more control over the library and build process while streamlining development and maintenance. Instead of two different distributions, Nebula now offers a single, standards-compliant collection of ES modules. This may affect how you install and use the library, so please refer to the [installation page](/getting-started/installation) for details.
 
 :::warning
-Due to the large number of internal changes, I would consider this update to be less stable than previous ones. If you're using Shoelace in a production app, consider holding off until the next beta to allow for more exhaustive testing from the community. Please report any bugs you find on the [issue tracker](https://github.com/shoelace-style/shoelace/issues).
+Due to the large number of internal changes, I would consider this update to be less stable than previous ones. If you're using Nebula in a production app, consider holding off until the next beta to allow for more exhaustive testing from the community. Please report any bugs you find on the [issue tracker](https://github.com/onsonr/nebula/issues).
 :::
 
-The component API remains the same except for the changes noted below. Thanks for your patience as I work diligently to make Shoelace more stable and future-proof. 🙌
+The component API remains the same except for the changes noted below. Thanks for your patience as I work diligently to make Nebula more stable and future-proof. 🙌
 
 - 🚨 BREAKING: removed the custom elements bundle (you can import ES modules directly)
 - 🚨 BREAKING: removed `getAnimationNames()` and `getEasingNames()` methods from `<sl-animation>` (you can import them from `utilities/animation.js` instead)
@@ -1539,7 +1539,7 @@ The component API remains the same except for the changes noted below. Thanks fo
 
 ## 2.0.0-beta.20
 
-- 🚨 BREAKING: Transformed all Shoelace events to lowercase ([details](#why-did-event-names-change))
+- 🚨 BREAKING: Transformed all Nebula events to lowercase ([details](#why-did-event-names-change))
 - Added support for dropdowns and non-icon elements to `<sl-input>`
 - Added `spellcheck` attribute to `<sl-input>`
 - Added `<sl-icon-library>` to allow custom icon library registration
@@ -1549,11 +1549,11 @@ The component API remains the same except for the changes noted below. Thanks fo
 - Fixed a bug where tabbing into slotted elements closes `<sl-dropdown>` when used in a shadow root [#223]
 - Fixed a bug where scroll anchoring caused undesirable scrolling when `<sl-details>` are grouped
 
-Shoelace events were updated to use a lowercase, kebab-style naming convention. Instead of event names such as `slChange` and `slAfterShow`, you'll need to use `sl-change` and `sl-after-show` now.
+Nebula events were updated to use a lowercase, kebab-style naming convention. Instead of event names such as `slChange` and `slAfterShow`, you'll need to use `sl-change` and `sl-after-show` now.
 
 This change was necessary to address a critical issue in frameworks that use DOM templates with declarative event bindings such as `<sl-button @slChange="handler">`. Due to HTML's case-insensitivity, browsers translate attribute names to lowercase, turning `@slChange` into `@slchange`, making it impossible to listen to `slChange`.
 
-While declarative event binding is a non-standard feature, not supporting it would make Shoelace much harder to use in popular frameworks. To accommodate those users and provide a better developer experience, we decided to change the naming convention while Shoelace is still in beta.
+While declarative event binding is a non-standard feature, not supporting it would make Nebula much harder to use in popular frameworks. To accommodate those users and provide a better developer experience, we decided to change the naming convention while Nebula is still in beta.
 
 The following pages demonstrate why this change was necessary.
 
@@ -1667,7 +1667,7 @@ The following pages demonstrate why this change was necessary.
 
 - Added support for `href`, `target`, and `download` to buttons
 - Fixed a bug where buttons would have horizontal spacing in Safari
-- Fixed a bug that caused an import resolution error when using Shoelace in a Stencil app
+- Fixed a bug that caused an import resolution error when using Nebula in a Stencil app
 
 ## 2.0.0-beta.11
 

docs/pages/resources/community.md

@@ -1,25 +1,25 @@
 ---
 meta:
   title: Community
-  description: Shoelace has a growing community of designers and developers that are building amazing things with web components.
+  description: Nebula has a growing community of designers and developers that are building amazing things with web components.
 ---
 
 # Community
 
-Shoelace has a growing community of designers and developers that are building amazing things with web components. We'd love for you to become a part of it!
+Nebula has a growing community of designers and developers that are building amazing things with web components. We'd love for you to become a part of it!
 
-Please be respectful of other users and remember that Shoelace is an open source project. We'll try to help when we can, but there's no guarantee we'll be able solve your problem. Please manage your expectations and don't forget to contribute back to the conversation when you can!
+Please be respectful of other users and remember that Nebula is an open source project. We'll try to help when we can, but there's no guarantee we'll be able solve your problem. Please manage your expectations and don't forget to contribute back to the conversation when you can!
 
 ## Discussion Forum
 
-The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) is open to anyone with a GitHub account. This is the best place to:
+The [discussion forum](https://github.com/onsonr/nebula/discussions) is open to anyone with a GitHub account. This is the best place to:
 
 - Ask for help
 - Share ideas and get feedback
 - Show the community what you're working on
 - Learn more about the project, its values, and its roadmap
 
-<sl-button variant="primary" href="https://github.com/shoelace-style/shoelace/discussions" target="_blank">
+<sl-button variant="primary" href="https://github.com/onsonr/nebula/discussions" target="_blank">
   <sl-icon name="github" slot="prefix"></sl-icon>
   Join the Discussion
 </sl-button>
@@ -31,7 +31,7 @@ The [community chat](https://discord.gg/mg8f26C) is open to the public and power
 - Ask for help
 - Share ideas and get feedback
 - Show the community what you're working on
-- Chat live with other designers, developers, and Shoelace fans
+- Chat live with other designers, developers, and Nebula fans
 
 <sl-button variant="primary" href="https://discord.gg/mg8f26C" target="_blank">
   <sl-icon name="discord" slot="prefix"></sl-icon>
@@ -40,7 +40,7 @@ The [community chat](https://discord.gg/mg8f26C) is open to the public and power
 
 ## Stack Overflow
 
-You can post questions on Stack Overflow using [the "shoelace" tag](https://stackoverflow.com/questions/tagged/shoelace). This is a public forum where talented developers answer questions. It's a great way to get help, but it is not maintained by the Shoelace author.
+You can post questions on Stack Overflow using [the "shoelace" tag](https://stackoverflow.com/questions/tagged/shoelace). This is a public forum where talented developers answer questions. It's a great way to get help, but it is not maintained by the Nebula author.
 
 <sl-button variant="primary" href="https://stackoverflow.com/questions/ask?tags=shoelace" target="_blank">
   <sl-icon name="stack-overflow" slot="prefix"></sl-icon>
@@ -49,9 +49,9 @@ You can post questions on Stack Overflow using [the "shoelace" tag](https://stac
 
 ## Twitter
 
-Follow [@shoelace_style](https://twitter.com/shoelace_style) on Twitter for general updates and announcements about Shoelace. This is a great place to say "hi" or to share something you're working on. You're also welcome to follow [@claviska](https://twitter.com/claviska), the creator, for tweets about web components, web development, and life.
+Follow [@shoelace_style](https://twitter.com/shoelace_style) on Twitter for general updates and announcements about Nebula. This is a great place to say "hi" or to share something you're working on. You're also welcome to follow [@claviska](https://twitter.com/claviska), the creator, for tweets about web components, web development, and life.
 
-**Please avoid using Twitter for support questions.** The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) is a much better place to share code snippets, screenshots, and other troubleshooting info. You'll have much better luck there, as more users will have a chance to help you.
+**Please avoid using Twitter for support questions.** The [discussion forum](https://github.com/onsonr/nebula/discussions) is a much better place to share code snippets, screenshots, and other troubleshooting info. You'll have much better luck there, as more users will have a chance to help you.
 
 <sl-button variant="primary" href="https://twitter.com/shoelace_style" target="_blank">
   <sl-icon name="twitter" slot="prefix"></sl-icon>

docs/pages/resources/contributing.md

@@ -1,12 +1,12 @@
 ---
 meta:
   title: Contributing
-  description: Shoelace is an open source project, meaning everyone can use it and contribute to its development.
+  description: Nebula is an open source project, meaning everyone can use it and contribute to its development.
 ---
 
 # Contributing
 
-Shoelace is an open source project, meaning everyone can use it and contribute to its development. When you join our community, you'll find a friendly group of enthusiasts at all experience levels who are willing to chat about anything and everything related to Shoelace.
+Nebula is an open source project, meaning everyone can use it and contribute to its development. When you join our community, you'll find a friendly group of enthusiasts at all experience levels who are willing to chat about anything and everything related to Nebula.
 
 The easiest way to get started contributing is to join the [community chat](https://discord.gg/mg8f26C). This is where we hang out, discuss new ideas, ask for feedback, and more!
 
@@ -33,10 +33,10 @@ I realize that one cannot reasonably enforce this any more than one can enforce
 
 ## Using the Issue Tracker
 
-The [issue tracker](https://github.com/shoelace-style/shoelace/issues) is for bug reports, feature requests, and pull requests.
+The [issue tracker](https://github.com/onsonr/nebula/issues) is for bug reports, feature requests, and pull requests.
 
-- Please **do not** use the issue tracker for personal support requests. Use [the discussion forum](https://github.com/shoelace-style/shoelace/discussions/categories/help) instead.
+- Please **do not** use the issue tracker for personal support requests. Use [the discussion forum](https://github.com/onsonr/nebula/discussions/categories/help) instead.
-- Please **do not** use the issue tracker for feature requests. Use [the discussion forum](https://github.com/shoelace-style/shoelace/discussions/categories/ideas) instead.
+- Please **do not** use the issue tracker for feature requests. Use [the discussion forum](https://github.com/onsonr/nebula/discussions/categories/ideas) instead.
 - Please **do not** derail, hijack, or troll issues. Keep the discussion on topic and be respectful of others.
 - Please **do not** post comments with "+1" or "👍". Use [reactions](https://github.blog/2016-03-10-add-reactions-to-pull-requests-issues-and-comments/) instead.
 - Please **do** use the issue tracker for feature requests, bug reports, and pull requests.
@@ -45,7 +45,7 @@ Issues that do not follow these guidelines are subject to closure. There simply
 
 ### Feature Requests
 
-Feature requests can be added using [the discussion forum](https://github.com/shoelace-style/shoelace/discussions/categories/ideas).
+Feature requests can be added using [the discussion forum](https://github.com/onsonr/nebula/discussions/categories/ideas).
 
 - Please **do** search for an existing request before suggesting a new feature.
 - Please **do** use the voting buttons to vote for a feature.
@@ -83,7 +83,7 @@ The author reserves the right to reject any PR that's outside the scope of the p
 
 ## Developing
 
-To set up a local dev environment, [fork the repo](https://github.com/shoelace-style/shoelace/fork) on GitHub, clone it locally, and install its dependencies.
+To set up a local dev environment, [fork the repo](https://github.com/onsonr/nebula/fork) on GitHub, clone it locally, and install its dependencies.
 
 ```bash
 git clone https://github.com/YOUR_GITHUB_USERNAME/shoelace
@@ -103,7 +103,7 @@ After the initial build, a browser will open automatically to a local version of
 
 Alternatively, you can use [Gitpod](https://www.gitpod.io/) to setup a dev environment in the cloud using only your browser.
 
-[![Open in Gitpod](/assets/images/gitpod.svg)](https://gitpod.io/#https://github.com/shoelace-style/shoelace)
+[![Open in Gitpod](/assets/images/gitpod.svg)](https://gitpod.io/#https://github.com/onsonr/nebula)
 
 ### Creating New Components
 
@@ -125,7 +125,7 @@ For more information about running and building the project locally, refer to `R
 
 ### Testing
 
-Shoelace uses [Web Test Runner](https://modern-web.dev/guides/test-runner/getting-started/) for testing. To launch the test runner during development, open a terminal and launch the dev server.
+Nebula uses [Web Test Runner](https://modern-web.dev/guides/test-runner/getting-started/) for testing. To launch the test runner during development, open a terminal and launch the dev server.
 
 ```bash
 npm start
@@ -153,9 +153,9 @@ npm run test:component breadcrumb-item
 
 ## Documentation
 
-Maintaining good documentation can be a painstaking task, but poor documentation leads to frustration and makes the project less appealing to users. Fortunately, writing documentation for Shoelace is fast and easy!
+Maintaining good documentation can be a painstaking task, but poor documentation leads to frustration and makes the project less appealing to users. Fortunately, writing documentation for Nebula is fast and easy!
 
-Most of Shoelace's technical documentation is generated with JSDoc comments and TypeScript metadata from the source code. Every property, method, event, etc. is documented this way. In-code comments encourage contributors to keep the documentation up to date as changes occur so the docs are less likely to become stale. Refer to an existing component to see how JSDoc comments are used in Shoelace.
+Most of Nebula's technical documentation is generated with JSDoc comments and TypeScript metadata from the source code. Every property, method, event, etc. is documented this way. In-code comments encourage contributors to keep the documentation up to date as changes occur so the docs are less likely to become stale. Refer to an existing component to see how JSDoc comments are used in Nebula.
 
 Instructions, code examples, and interactive demos are hand-curated to give users the best possible experience. Typically, the most relevant information is shown first and less common examples are shown towards the bottom. Edge cases and gotchas should be called out in context with tips or warnings.
 
@@ -163,9 +163,9 @@ The docs are powered by [Eleventy](https://www.11ty.dev/). Check out `docs/compo
 
 If you need help with documentation, feel free to reach out on the [community chat](https://discord.gg/mg8f26C).
 
-### Shoelace-flavoured Markdown
+### Nebula-flavoured Markdown
 
-The Shoelace documentation uses an extended version of [markdown-it](https://github.com/markdown-it/markdown-it). Generally speaking, it follows the [Commonmark spec](https://spec.commonmark.org/) while sprinkling in some additional features.
+The Nebula documentation uses an extended version of [markdown-it](https://github.com/markdown-it/markdown-it). Generally speaking, it follows the [Commonmark spec](https://spec.commonmark.org/) while sprinkling in some additional features.
 
 #### Code Previews
 
@@ -249,9 +249,9 @@ This section can be a lot to digest in one sitting, so don't feel like you need
 
 ### Accessibility
 
-Shoelace is built with accessibility in mind. Creating generic components that are fully accessible to users with varying capabilities across a multitude of circumstances is a daunting challenge. Oftentimes, the solution to an a11y problem is not written in black and white and, therefore, we may not get it right the first time around. There are, however, guidelines we can follow in our effort to make Shoelace an accessible foundation from which applications and websites can be built.
+Nebula is built with accessibility in mind. Creating generic components that are fully accessible to users with varying capabilities across a multitude of circumstances is a daunting challenge. Oftentimes, the solution to an a11y problem is not written in black and white and, therefore, we may not get it right the first time around. There are, however, guidelines we can follow in our effort to make Nebula an accessible foundation from which applications and websites can be built.
 
-We take this commitment seriously, so please ensure your contributions have this goal in mind. If you need help with anything a11y-related, please [reach out to the community](/resources/community) for assistance. If you discover an accessibility concern within the library, please file a bug on the [issue tracker](https://github.com/shoelace-style/shoelace/issues).
+We take this commitment seriously, so please ensure your contributions have this goal in mind. If you need help with anything a11y-related, please [reach out to the community](/resources/community) for assistance. If you discover an accessibility concern within the library, please file a bug on the [issue tracker](https://github.com/onsonr/nebula/issues).
 
 It's important to remember that, although accessibility starts with foundational components, it doesn't end with them. It everyone's responsibility to encourage best practices and ensure we're providing an optimal experience for all of our users.
 
@@ -344,7 +344,7 @@ This convention avoids the problem of browsers lowercasing attributes, causing s
 
 ### Change Events
 
-When change events are emitted by Shoelace components, they should be named `sl-change` and they should only be emitted as a result of user input. Programmatic changes, such as setting `el.value = '…'` _should not_ result in a change event being emitted. This is consistent with how native form controls work.
+When change events are emitted by Nebula components, they should be named `sl-change` and they should only be emitted as a result of user input. Programmatic changes, such as setting `el.value = '…'` _should not_ result in a change event being emitted. This is consistent with how native form controls work.
 
 ### CSS Custom Properties
 
@@ -391,7 +391,7 @@ This convention can be relaxed when the developer experience is greatly improved
 
 ### Naming CSS Parts
 
-While CSS parts can be named [virtually anything](https://www.abeautifulsite.net/posts/valid-names-for-css-parts/), within Shoelace they must use the kebab-case convention and lowercase letters. Additionally, [a BEM-inspired naming convention](https://www.abeautifulsite.net/posts/css-parts-inspired-by-bem/) is used to distinguish parts, subparts, and states.
+While CSS parts can be named [virtually anything](https://www.abeautifulsite.net/posts/valid-names-for-css-parts/), within Nebula they must use the kebab-case convention and lowercase letters. Additionally, [a BEM-inspired naming convention](https://www.abeautifulsite.net/posts/css-parts-inspired-by-bem/) is used to distinguish parts, subparts, and states.
 
 When composing elements, use `part` to export the host element and `exportparts` to export its parts.
 
@@ -411,11 +411,11 @@ This results in a consistent, easy to understand structure for parts. In this ex
 
 TL;DR – a component is a dependency if and only if it's rendered inside another component's shadow root.
 
-Many Shoelace components use other Shoelace components internally. For example, `<sl-button>` uses both `<sl-icon>` and `<sl-spinner>` for its caret icon and loading state, respectively. Since these components appear in the button's shadow root, they are considered dependencies of Button. Since dependencies are automatically loaded, users only need to import the button and everything will work as expected.
+Many Nebula components use other Nebula components internally. For example, `<sl-button>` uses both `<sl-icon>` and `<sl-spinner>` for its caret icon and loading state, respectively. Since these components appear in the button's shadow root, they are considered dependencies of Button. Since dependencies are automatically loaded, users only need to import the button and everything will work as expected.
 
 Contrast this to `<sl-select>` and `<sl-option>`. At first, one might assume that Option is a dependency of Select. After all, you can't really use Select without slotting in at least one Option. However, Option _is not_ a dependency of Select! The reason is because no Option is rendered in the Select's shadow root. Since the options are provided by the user, it's up to them to import both components independently.
 
-People often suggest that Shoelace should auto-load Select + Option, Menu + Menu Item, Breadcrumb + Breadcrumb Item, etc. Although some components are designed to work together, they're technically not dependencies so eagerly loading them may not be desirable. What if someone wants to roll their own component with a superset of features? They wouldn't be able to if Shoelace automatically imported it!
+People often suggest that Nebula should auto-load Select + Option, Menu + Menu Item, Breadcrumb + Breadcrumb Item, etc. Although some components are designed to work together, they're technically not dependencies so eagerly loading them may not be desirable. What if someone wants to roll their own component with a superset of features? They wouldn't be able to if Nebula automatically imported it!
 
 Similarly, in the case of `<sl-radio-group>` there was originally only `<sl-radio>`, but now you can use either `<sl-radio>` or `<sl-radio-button>` as child elements. Which component(s) should be auto-loaded dependencies in this case? Had Radio been a dependency of Radio Group, users that only wanted Radio Buttons would be forced to register both with no way to opt out and no way to provide their own customized version.
 

docs/pages/tokens/color.md

@@ -6,7 +6,7 @@ meta:
 
 # Color Tokens
 
-Color tokens help maintain consistent use of color throughout your app. Shoelace provides palettes for theme colors and primitives that you can use as a foundation for your design system.
+Color tokens help maintain consistent use of color throughout your app. Nebula provides palettes for theme colors and primitives that you can use as a foundation for your design system.
 
 Color tokens are referenced using the `--sl-color-{name}-{n}` CSS custom property, where `{name}` is the name of the palette and `{n}` is the numeric value of the desired swatch.
 

docs/pages/tokens/more.md

@@ -11,7 +11,7 @@ All of the design tokens described herein are considered relatively stable. Howe
 Most design tokens are consistent across the light and dark theme. Those that vary will show both values.
 
 :::tip
-Currently, the source of design tokens is considered to be [`light.css`](https://github.com/shoelace-style/shoelace/blob/next/src/themes/light.css). The dark theme, [dark.css](https://github.com/shoelace-style/shoelace/blob/next/src/themes/dark.css), mirrors all of the same tokens with dark mode-specific values where appropriate. Work is planned to move all design tokens to a single file, perhaps JSON or YAML, in the near future.
+Currently, the source of design tokens is considered to be [`light.css`](https://github.com/onsonr/nebula/blob/next/src/themes/light.css). The dark theme, [dark.css](https://github.com/onsonr/nebula/blob/next/src/themes/dark.css), mirrors all of the same tokens with dark mode-specific values where appropriate. Work is planned to move all design tokens to a single file, perhaps JSON or YAML, in the near future.
 :::
 
 ## Focus Rings

docs/pages/tutorials/integrating-with-astro.md

@@ -1,43 +1,43 @@
 ---
 meta:
   title: Integrating with Astro
-  description: This page explains how to integrate Shoelace with an Astro app.
+  description: This page explains how to integrate Nebula with an Astro app.
 ---
 
 # Integrating with Astro
 
-This page explains how to integrate Shoelace with an Astro app.
+This page explains how to integrate Nebula with an Astro app.
 
 :::tip
-This is a community-maintained document. Please [ask the community](/resources/community) if you have questions about this integration. You can also [suggest improvements](https://github.com/shoelace-style/shoelace/blob/next/docs/tutorials/integrating-with-astro.md) to make it better.
+This is a community-maintained document. Please [ask the community](/resources/community) if you have questions about this integration. You can also [suggest improvements](https://github.com/onsonr/nebula/blob/next/docs/tutorials/integrating-with-astro.md) to make it better.
 :::
 
 ## SSR and client scripts
 
-In the following tutorial you will notice that Shoelace cannot be imported in the frontmatter of Astro files. This is because Shoelace relies on globals from the DOM to be present.
+In the following tutorial you will notice that Nebula cannot be imported in the frontmatter of Astro files. This is because Nebula relies on globals from the DOM to be present.
 
-There is a [Lit + Astro integration for SSR](https://docs.astro.build/en/guides/integrations-guide/lit/) , however it will not work with Shoelace in its current state due to some reliance on DOM APIs that aren't shimmed. We are working to resolve this.
+There is a [Lit + Astro integration for SSR](https://docs.astro.build/en/guides/integrations-guide/lit/) , however it will not work with Nebula in its current state due to some reliance on DOM APIs that aren't shimmed. We are working to resolve this.
 
 ## Instructions - Astro 4.11.3
 
 - Node: v18.17.1 or v20.3.0 or higher. ( v19 is not supported.)
 - Astro: 4.11.3
-- Shoelace: 2.15.1
+- Nebula: 2.15.1
 
-To get started using Shoelace with Astro, the following packages must be installed.
+To get started using Nebula with Astro, the following packages must be installed.
 
 ```bash
-npm install @shoelace-style/shoelace rollup-plugin-copy
+npm install @onsonr/nebula rollup-plugin-copy
 ```
 
 ### Importing components
 
-In `/src/pages/index.astro`, set the base path and import Shoelace.
+In `/src/pages/index.astro`, set the base path and import Nebula.
 
 ```html
 ---
 // import default stylesheet
-import "@shoelace-style/shoelace/dist/themes/light.css";
+import "@onsonr/nebula/dist/themes/light.css";
 ---
 
 <html>
@@ -47,28 +47,28 @@ import "@shoelace-style/shoelace/dist/themes/light.css";
 </html>
 
 <script>
-  // setBasePath to tell Shoelace where to load icons from.
+  // setBasePath to tell Nebula where to load icons from.
-  import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
+  import { setBasePath } from '@onsonr/nebula/dist/utilities/base-path.js';
   setBasePath('/shoelace-assets/');
 
   // Load all components.
-  import '@shoelace-style/shoelace';
+  import '@onsonr/nebula';
 </script>
 ```
 
 :::tip
-If you want to cherry pick components, replace the main Shoelace import with 'import "@shoelace-style/shoelace/dist/components/button/button.js";' for whichever component you would like.
+If you want to cherry pick components, replace the main Nebula import with 'import "@onsonr/nebula/dist/components/button/button.js";' for whichever component you would like.
 :::
 
 You only have to import in the main `index.astro` file. The components can be used anywhere throughout the project.
 
 ### Customizing animations
 
-In `/src/pages/index.astro`, set custom animations after the Shoelace import.
+In `/src/pages/index.astro`, set custom animations after the Nebula import.
 
 ```html
 ---
-import { setBasePath } from "@shoelace-style/shoelace/dist/utilities/base-path.js";
+import { setBasePath } from "@onsonr/nebula/dist/utilities/base-path.js";
 setBasePath("dist/assets");
 ---
 
@@ -81,15 +81,15 @@ setBasePath("dist/assets");
 </html>
 
 <script>
-  // setBasePath to tell Shoelace where to load icons from.
+  // setBasePath to tell Nebula where to load icons from.
-  import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
+  import { setBasePath } from '@onsonr/nebula/dist/utilities/base-path.js';
   setBasePath('/shoelace-assets/');
 
   // Load all components.
-  import '@shoelace-style/shoelace';
+  import '@onsonr/nebula';
 
   const duration = 3000;
-  import { setDefaultAnimation } from '@shoelace-style/shoelace/dist/utilities/animation-registry.js';
+  import { setDefaultAnimation } from '@onsonr/nebula/dist/utilities/animation-registry.js';
 
   setDefaultAnimation('tooltip.show', {
     keyframes: [
@@ -103,7 +103,7 @@ setBasePath("dist/assets");
 
 ## Modifying Astro Config
 
-You'll notice the above steps never added our icons into our `/public` directory. To solve this, we can install `rollup-plugin-copy` to copy Shoelace's assets into your public directory.
+You'll notice the above steps never added our icons into our `/public` directory. To solve this, we can install `rollup-plugin-copy` to copy Nebula's assets into your public directory.
 
 Here's what your Astro config should look like:
 
@@ -122,7 +122,7 @@ export default defineConfig({
         copyOnce: true,
         hook: 'buildStart',
         targets: [
-          { src: 'node_modules/@shoelace-style/shoelace/dist/assets/*', dest: 'public/shoelace-assets/assets/' }
+          { src: 'node_modules/@onsonr/nebula/dist/assets/*', dest: 'public/shoelace-assets/assets/' }
         ]
       })
     ]

docs/pages/tutorials/integrating-with-laravel.md

@@ -1,15 +1,15 @@
 ---
 meta:
   title: Integrating with Laravel
-  description: This page explains how to integrate Shoelace with a Laravel app.
+  description: This page explains how to integrate Nebula with a Laravel app.
 ---
 
 # Integrating with Laravel
 
-This page explains how to integrate Shoelace with a [Laravel 9](https://laravel.com) app using Vite. For additional details refer to the [Bundling Assets (Vite)](https://laravel.com/docs/9.x/vite) section in the official Laravel docs.
+This page explains how to integrate Nebula with a [Laravel 9](https://laravel.com) app using Vite. For additional details refer to the [Bundling Assets (Vite)](https://laravel.com/docs/9.x/vite) section in the official Laravel docs.
 
 :::tip
-This is a community-maintained document. Please [ask the community](/resources/community) if you have questions about this integration. You can also [suggest improvements](https://github.com/shoelace-style/shoelace/blob/next/docs/tutorials/integrating-with-laravel.md) to make it better.
+This is a community-maintained document. Please [ask the community](/resources/community) if you have questions about this integration. You can also [suggest improvements](https://github.com/onsonr/nebula/blob/next/docs/tutorials/integrating-with-laravel.md) to make it better.
 :::
 
 ## Requirements
@@ -22,58 +22,58 @@ This integration has been tested with the following:
 ## Instructions
 
 These instructions assume a default [Laravel 9 install](https://laravel.com/docs/9.x/installation) that uses [Vite](https://vitejs.dev/) to bundle assets.
-Be sure to run `npm install` to install the default Laravel front-end dependencies before installing Shoelace.
+Be sure to run `npm install` to install the default Laravel front-end dependencies before installing Nebula.
 
-### Install the Shoelace package
+### Install the Nebula package
 
 ```bash
-npm install @shoelace-style/shoelace
+npm install @onsonr/nebula
 ```
 
 ### Import the Default Theme
 
-Import the Shoelace default theme (stylesheet) in `/resources/css/app.css`:
+Import the Nebula default theme (stylesheet) in `/resources/css/app.css`:
 
 ```css
-@import '/node_modules/@shoelace-style/shoelace/dist/themes/light.css';
+@import '/node_modules/@onsonr/nebula/dist/themes/light.css';
 ```
 
-### Import Your Shoelace Components
+### Import Your Nebula Components
 
-Import each Shoelace component you plan to use in `/resources/js/bootstrap.js`. Use the full path to each component (as outlined in the [Cherry Picking instructions](https://shoelace.style/getting-started/installation#cherry-picking)). You can find the full import statement for a component in the _Importing_ section of the component's documentation (use the _Bundler_ import). Your imports should look similar to:
+Import each Nebula component you plan to use in `/resources/js/bootstrap.js`. Use the full path to each component (as outlined in the [Cherry Picking instructions](https://shoelace.style/getting-started/installation#cherry-picking)). You can find the full import statement for a component in the _Importing_ section of the component's documentation (use the _Bundler_ import). Your imports should look similar to:
 
 ```js
-import '@shoelace-style/shoelace/dist/components/button/button.js';
+import '@onsonr/nebula/dist/components/button/button.js';
-import '@shoelace-style/shoelace/dist/components/icon/icon.js';
+import '@onsonr/nebula/dist/components/icon/icon.js';
-import '@shoelace-style/shoelace/dist/components/dialog/dialog.js';
+import '@onsonr/nebula/dist/components/dialog/dialog.js';
 ```
 
-### Copy the Shoelace Static Assets (icons, images, etc.) to a Public Folder
+### Copy the Nebula Static Assets (icons, images, etc.) to a Public Folder
 
-Since Vite has no way to copy arbitrary assets into your build (like webpack), you need to manually copy the Shoelace static assets to your project's public folder. Run this command from your project's root directory to copy the Shoelace static assets to the `./public/assets` folder:
+Since Vite has no way to copy arbitrary assets into your build (like webpack), you need to manually copy the Nebula static assets to your project's public folder. Run this command from your project's root directory to copy the Nebula static assets to the `./public/assets` folder:
 
 ```sh
-cp -aR node_modules/@shoelace-style/shoelace/dist/assets/ ./public/assets
+cp -aR node_modules/@onsonr/nebula/dist/assets/ ./public/assets
 ```
 
 ### Set the Base Path
 
-Add the base path to your Shoelace assets (icons, images, etc.) in `/resources/js/bootstrap.js`. The path must point to the same folder where you copy assets to in the next step.
+Add the base path to your Nebula assets (icons, images, etc.) in `/resources/js/bootstrap.js`. The path must point to the same folder where you copy assets to in the next step.
 
 ```js
-import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
+import { setBasePath } from '@onsonr/nebula/dist/utilities/base-path.js';
 setBasePath('/');
 ```
 
 Example `/resources/js/bootstrap.js` file:
 
 ```js
-import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
+import { setBasePath } from '@onsonr/nebula/dist/utilities/base-path.js';
 setBasePath('/');
 
-import '@shoelace-style/shoelace/dist/components/button/button.js';
+import '@onsonr/nebula/dist/components/button/button.js';
-import '@shoelace-style/shoelace/dist/components/icon/icon.js';
+import '@onsonr/nebula/dist/components/icon/icon.js';
-import '@shoelace-style/shoelace/dist/components/dialog/dialog.js';
+import '@onsonr/nebula/dist/components/dialog/dialog.js';
 ```
 
 ### Verify Vite Entry Points
@@ -111,4 +111,4 @@ Add the `@vite()` Blade directive to the `<head>` of your application's root tem
 </head>
 ```
 
-Have fun using Shoelace components in your Laravel app!
+Have fun using Nebula components in your Laravel app!

docs/pages/tutorials/integrating-with-nextjs.md

@@ -1,15 +1,15 @@
 ---
 meta:
   title: Integrating with NextJS
-  description: This page explains how to integrate Shoelace with a NextJS app.
+  description: This page explains how to integrate Nebula with a NextJS app.
 ---
 
 # Integrating with NextJS
 
-This page explains how to integrate Shoelace with a NextJS app.
+This page explains how to integrate Nebula with a NextJS app.
 
 :::tip
-This is a community-maintained document. Please [ask the community](/resources/community) if you have questions about this integration. You can also [suggest improvements](https://github.com/shoelace-style/shoelace/blob/next/docs/tutorials/integrating-with-nextjs.md) to make it better.
+This is a community-maintained document. Please [ask the community](/resources/community) if you have questions about this integration. You can also [suggest improvements](https://github.com/onsonr/nebula/blob/next/docs/tutorials/integrating-with-nextjs.md) to make it better.
 :::
 
 There are 2 guides available:
@@ -21,13 +21,13 @@ There are 2 guides available:
 
 - Node: v20.11.1
 - NextJS: 14.2.4
-- Shoelace: 2.15.1
+- Nebula: 2.15.1
 
 ### Working with ESM
 
 If you haven't already, create your NextJS app. You can find the documentation for that here: <https://nextjs.org/docs/getting-started/installation>
 
-After you've created your app, the first step to using Shoelace is modifying your `package.json` to have `"type": "module"` in it since Shoelace ships ES Modules.
+After you've created your app, the first step to using Nebula is modifying your `package.json` to have `"type": "module"` in it since Nebula ships ES Modules.
 
 ```json
 // package.json
@@ -38,23 +38,23 @@ After you've created your app, the first step to using Shoelace is modifying you
 
 ### Installing packages
 
-To get started using Shoelace with NextJS, the following packages must be installed.
+To get started using Nebula with NextJS, the following packages must be installed.
 
 ```bash
-npm install @shoelace-style/shoelace copy-webpack-plugin
+npm install @onsonr/nebula copy-webpack-plugin
 ```
 
-Shoelace for obvious reasons, and the `copy-webpack-plugin` will be used later for adding our icons to our `public/` folder.
+Nebula for obvious reasons, and the `copy-webpack-plugin` will be used later for adding our icons to our `public/` folder.
 
 ### Modifying your Next Config
 
-We'll start with modifying our `next.config.js` to copy Shoelace's assets and to properly work with ESM.
+We'll start with modifying our `next.config.js` to copy Nebula's assets and to properly work with ESM.
 
 Here's what your `next.config.js` should look like:
 
 ### NextJS 14 Webpack Config
 
-In order to add Shoelace's assets to the final build output, we need to modify `next.config.js` to look like this.
+In order to add Nebula's assets to the final build output, we need to modify `next.config.js` to look like this.
 
 ```javascript
 // next.config.js
@@ -73,7 +73,7 @@ const nextConfig = {
       new CopyPlugin({
         patterns: [
           {
-            from: resolve(__dirname, 'node_modules/@shoelace-style/shoelace/dist/assets/'),
+            from: resolve(__dirname, 'node_modules/@onsonr/nebula/dist/assets/'),
             to: resolve(__dirname, 'public/shoelace-assets/assets/')
           }
         ]
@@ -87,24 +87,24 @@ export default nextConfig;
 ```
 
 :::tip
-This will copy the files from `node_modules/@shoelace-style/shoelace/dist/assets` into your `public/shoelace-assets` folder on every development serve or build. You may want to avoid committing these into your repo. To do so, simply add `public/shoelace-assets` into your `.gitignore` folder
+This will copy the files from `node_modules/@onsonr/nebula/dist/assets` into your `public/shoelace-assets` folder on every development serve or build. You may want to avoid committing these into your repo. To do so, simply add `public/shoelace-assets` into your `.gitignore` folder
 :::
 
-### Importing the Shoelace's CSS (default theme)
+### Importing the Nebula's CSS (default theme)
 
-Once we've got our webpack config / next config setup, lets modify our `app/layout.tsx` to include Shoelace's default theme.
+Once we've got our webpack config / next config setup, lets modify our `app/layout.tsx` to include Nebula's default theme.
 
 ```javascript
 // app/layout.tsx
 import './globals.css';
-import '@shoelace-style/shoelace/dist/themes/light.css';
+import '@onsonr/nebula/dist/themes/light.css';
 // We can also import the dark theme here as well.
-// import "@shoelace-style/shoelace/dist/themes/dark.css";
+// import "@onsonr/nebula/dist/themes/dark.css";
 ```
 
 ### Writing a "setup" component
 
-Now, we need to create a `ShoelaceSetup` component that will be a client component in charge of setting the `basePath` for our assets / icons.
+Now, we need to create a `NebulaSetup` component that will be a client component in charge of setting the `basePath` for our assets / icons.
 
 To do so, create a file called `app/shoelace-setup.tsx`
 
@@ -112,9 +112,9 @@ To do so, create a file called `app/shoelace-setup.tsx`
 'use client';
 // ^ Make sure to have 'use client'; because `setBasePath()` requires access to `document`.
 
-import { setBasePath } from "@shoelace-style/shoelace/dist/utilities/base-path.js"
+import { setBasePath } from "@onsonr/nebula/dist/utilities/base-path.js"
 
-export default function ShoelaceSetup({
+export default function NebulaSetup({
   children,
 }: {
   children: React.ReactNode
@@ -125,7 +125,7 @@ export default function ShoelaceSetup({
 ```
 
 :::warning
-Don't forget to mark your Shoelace components and Shoelace setup with 'use client'.
+Don't forget to mark your Nebula components and Nebula setup with 'use client'.
 :::
 
 Then we'll add this setup component into `app/layout.tsx`
@@ -136,9 +136,9 @@ Our `layout.tsx` Should now look something like this:
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
-+ import "@shoelace-style/shoelace/dist/themes/light.css";
++ import "@onsonr/nebula/dist/themes/light.css";
 
-+ import ShoelaceSetup from "./shoelace-setup";
++ import NebulaSetup from "./shoelace-setup";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -155,18 +155,18 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-+         <ShoelaceSetup>
++         <NebulaSetup>
             {children}
-+         </ShoelaceSetup>
++         </NebulaSetup>
       </body>
     </html>
   );
 }
 ```
 
-### Writing components that use Shoelace
+### Writing components that use Nebula
 
-Now that we have the setup in place, we can write an `app/page.tsx` to use Shoelace components in combination with the `dynamic()` component loader from NextJS.
+Now that we have the setup in place, we can write an `app/page.tsx` to use Nebula components in combination with the `dynamic()` component loader from NextJS.
 
 Here's what that would look like, do note the `"use client";` at the top of the component is required.
 
@@ -178,8 +178,8 @@ import React from "react";
 import dynamic from "next/dynamic";
 
 const SlButton = dynamic(
-  // Notice how we use the full path to the component. If you only do `import("@shoelace-style/shoelace/dist/react")` you will load the entire component library and not get tree shaking.
+  // Notice how we use the full path to the component. If you only do `import("@onsonr/nebula/dist/react")` you will load the entire component library and not get tree shaking.
-  () => import("@shoelace-style/shoelace/dist/react/button/index.js"),
+  () => import("@onsonr/nebula/dist/react/button/index.js"),
   {
     loading: () => <p>Loading...</p>,
     ssr: false,
@@ -187,7 +187,7 @@ const SlButton = dynamic(
 );
 
 const SlIcon = dynamic(
-  () => import("@shoelace-style/shoelace/dist/react/icon/index.js"),
+  () => import("@onsonr/nebula/dist/react/icon/index.js"),
   {
     loading: () => <p>Loading...</p>,
     ssr: false,
@@ -204,7 +204,7 @@ export default function Home() {
 }
 ```
 
-Now you should be up and running with NextJS + Shoelace!
+Now you should be up and running with NextJS + Nebula!
 
 If you're stuck, there's an [example repo here](https://github.com/konnorRogers/shoelace-nextjs-lazy) you can checkout.
 
@@ -212,17 +212,17 @@ If you're stuck, there's an [example repo here](https://github.com/konnorRogers/
 
 - Node: 16.13.1
 - NextJS: 12.1.6
-- Shoelace: 2.0.0-beta.74
+- Nebula: 2.0.0-beta.74
 
-To get started using Shoelace with NextJS, the following packages must be installed.
+To get started using Nebula with NextJS, the following packages must be installed.
 
 ```bash
-yarn add @shoelace-style/shoelace copy-webpack-plugin next-compose-plugins next-transpile-modules
+yarn add @onsonr/nebula copy-webpack-plugin next-compose-plugins next-transpile-modules
 ```
 
 ### Enabling ESM
 
-Because Shoelace utilizes ESM, we need to modify our `package.json` to support ESM packages. Simply add the following to
+Because Nebula utilizes ESM, we need to modify our `package.json` to support ESM packages. Simply add the following to
 your root of `package.json`:
 
 ```
@@ -233,15 +233,15 @@ There's one more step to enable ESM in NextJS, but we'll tackle that in our Next
 
 ### Importing the Default Theme
 
-The next step is to import Shoelace's default theme (stylesheet) in your `_app.js` file:
+The next step is to import Nebula's default theme (stylesheet) in your `_app.js` file:
 
 ```css
-import '@shoelace-style/shoelace/dist/themes/light.css';
+import '@onsonr/nebula/dist/themes/light.css';
 ```
 
 ### Defining Custom Elements
 
-After importing the theme, you'll need to import the JavaScript files for Shoelace. However, this is a bit tricky to do in NextJS thanks to the SSR environment not having any of the required browser APIs to define endpoints.
+After importing the theme, you'll need to import the JavaScript files for Nebula. However, this is a bit tricky to do in NextJS thanks to the SSR environment not having any of the required browser APIs to define endpoints.
 
 We'll want to create a component that uses [React's `useLayoutEffect`](https://reactjs.org/docs/hooks-reference.html#uselayouteffect) to add in the custom components before the first render:
 
@@ -255,14 +255,14 @@ function CustomEls({ URL }) {
       return;
     }
 
-    import('@shoelace-style/shoelace/dist/utilities/base-path').then(({ setBasePath }) => {
+    import('@onsonr/nebula/dist/utilities/base-path').then(({ setBasePath }) => {
       setBasePath(`${URL}/static/static`);
 
       // This imports all components
-      import('@shoelace-style/shoelace/dist/react');
+      import('@onsonr/nebula/dist/react');
       // If you're wanting to selectively import components, replace this line with your own definitions
 
-      // import("@shoelace-style/shoelace/dist/components/button/button");
+      // import("@onsonr/nebula/dist/components/button/button");
       customEls.current = true;
     });
   }, [URL, customEls]);
@@ -276,7 +276,7 @@ If we use `useEffect` instead of `useLayoutEffect`, the initial render will occu
 :::
 
 :::tip
-This will import all Shoelace components for convenience. To selectively import components, refer to the [Using webpack](/getting-started/installation#using-webpack) section of the docs.
+This will import all Nebula components for convenience. To selectively import components, refer to the [Using webpack](/getting-started/installation#using-webpack) section of the docs.
 :::
 
 You may be wondering where the `URL` property is coming from. We'll address that in the next few sections.

docs/pages/tutorials/integrating-with-rails.md

@@ -1,15 +1,15 @@
 ---
 meta:
   title: Integrating with Rails
-  description: This page explains how to integrate Shoelace with a Rails app.
+  description: This page explains how to integrate Nebula with a Rails app.
 ---
 
 # Integrating with Rails
 
-This page explains how to integrate Shoelace with a Rails app.
+This page explains how to integrate Nebula with a Rails app.
 
 :::tip
-This is a community-maintained document. Please [ask the community](/resources/community) if you have questions about this integration. You can also [suggest improvements](https://github.com/shoelace-style/shoelace/blob/next/docs/tutorials/integrating-with-rails.md) to make it better.
+This is a community-maintained document. Please [ask the community](/resources/community) if you have questions about this integration. You can also [suggest improvements](https://github.com/onsonr/nebula/blob/next/docs/tutorials/integrating-with-rails.md) to make it better.
 :::
 
 ## Requirements
@@ -22,30 +22,30 @@ This integration has been tested with the following:
 
 ## Instructions
 
-To get started using Shoelace with Rails, the following packages must be installed.
+To get started using Nebula with Rails, the following packages must be installed.
 
 ```bash
-yarn add @shoelace-style/shoelace copy-webpack-plugin
+yarn add @onsonr/nebula copy-webpack-plugin
 ```
 
 ### Importing the Default Theme
 
-The next step is to import Shoelace's default theme (stylesheet) in `app/javascript/stylesheets/application.scss`.
+The next step is to import Nebula's default theme (stylesheet) in `app/javascript/stylesheets/application.scss`.
 
 ```css
-@import '@shoelace-style/shoelace/dist/themes/light';
+@import '@onsonr/nebula/dist/themes/light';
-@import '@shoelace-style/shoelace/dist/themes/dark'; // Optional dark theme
+@import '@onsonr/nebula/dist/themes/dark'; // Optional dark theme
 ```
 
 Fore more details about themes, please refer to [Theme Basics](/getting-started/themes#theme-basics).
 
 ### Importing Required Scripts
 
-After importing the theme, you'll need to import the JavaScript files for Shoelace. Add the following code to `app/javascript/packs/application.js`.
+After importing the theme, you'll need to import the JavaScript files for Nebula. Add the following code to `app/javascript/packs/application.js`.
 
 ```js
 import '../stylesheets/application.scss'
-import { setBasePath, SlAlert, SlAnimation, SlButton, ... } from '@shoelace-style/shoelace'
+import { setBasePath, SlAlert, SlAnimation, SlButton, ... } from '@onsonr/nebula'
 
 // ...
 
@@ -58,12 +58,12 @@ setBasePath(rootUrl + '/packs/js/')
 
 ### webpack Config
 
-Next we need to add Shoelace's assets to the final build output. To do this, modify `config/webpack/environment.js` to look like this.
+Next we need to add Nebula's assets to the final build output. To do this, modify `config/webpack/environment.js` to look like this.
 
 ```js
 const { environment } = require('@rails/webpacker');
 
-// Shoelace config
+// Nebula config
 const path = require('path');
 const CopyPlugin = require('copy-webpack-plugin');
 
@@ -73,7 +73,7 @@ environment.plugins.append(
   new CopyPlugin({
     patterns: [
       {
-        from: path.resolve(__dirname, '../../node_modules/@shoelace-style/shoelace/dist/assets'),
+        from: path.resolve(__dirname, '../../node_modules/@onsonr/nebula/dist/assets'),
         to: path.resolve(__dirname, '../../public/packs/js/assets')
       }
     ]
@@ -102,9 +102,9 @@ The final step is to add the corresponding `pack_tags` to the page. You should h
 </html>
 ```
 
-Now you can start using Shoelace components with Rails!
+Now you can start using Nebula components with Rails!
 
 ## Additional Resources
 
 - There is a third-party [example repo](https://github.com/ParamagicDev/rails-shoelace-example), courtesy of [ParamagicDev](https://github.com/ParamagicDev) available to help you get started.
-- If you would like to avoid repeating this process, check out the associated [Railsbyte for Shoelace](https://railsbytes.com/templates/X8BsEb).
+- If you would like to avoid repeating this process, check out the associated [Railsbyte for Nebula](https://railsbytes.com/templates/X8BsEb).