shoelace-rails-ui 0.1.0

data/remote-src/2.0.0.beta64/shoelace-next/docs/getting-started/overview.md

@@ -0,0 +1,131 @@
+<div class="splash">
+<div class="splash-start">
+<img class="splash-logo" src="/assets/images/wordmark.svg" alt="Shoelace">
+
+# <span hidden>Shoelace:</span> A forward-thinking library of web components.
+
+- Works with all frameworks 🧩
+- Works with CDNs 🚛
+- Fully customizable with CSS 🎨
+- Includes a dark theme 🌛
+- Built with accessibility in mind ♿️
+- First-class [React support](/frameworks/react) ⚛️
+- Built-in localization 💬
+- Open source 😸
+
+Designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska).
+</div>
+<div class="splash-end">
+<img class="splash-image" src="/assets/images/undraw-content-team.svg" alt="Cartoon of people assembling components while standing on a giant laptop.">
+</div>
+</div>
+
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@shoelace-style/shoelace/badge)](https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace)
+[![npm](https://img.shields.io/npm/dw/@shoelace-style/shoelace?label=npm&style=flat-square)](https://www.npmjs.com/package/@shoelace-style/shoelace)
+[![License](https://img.shields.io/badge/license-MIT-232323.svg?style=flat-square)](https://github.com/shoelace-style/shoelace/blob/next/LICENSE.md)<br>
+[![Discord](https://img.shields.io/badge/Discord-Join%20the%20chat-5965f2.svg?style=flat-square&logo=discord&logoColor=white)](https://discord.gg/mg8f26C)
+[![Twitter](https://img.shields.io/badge/Twitter-Follow-00acee.svg?style=flat-square&logo=twitter&logoColor=white)](https://twitter.com/shoelace_style)
+[![Sponsor](https://img.shields.io/badge/GitHub-Code-232323.svg?style=flat-square&logo=github&logoColor=white)](https://github.com/shoelace-style/shoelace)
+
+## Quick Start
+
+Add the following code to your page.
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/light.css">
+<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js"></script>
+```
+
+Now you have access to all of Shoelace's components! Try adding a button:
+
+```html preview expanded
+<sl-button>Click me</sl-button>
+```
+
+?> This will load all of Shoelace's components, but you should probably only load the ones you're actually using. To learn how, or for other ways to install Shoelace, refer to the [installation instructions](getting-started/installation).
+
+
+## New to Web Components?
+
+**TL;DR** – we finally have a way to create [our own HTML elements](https://html.spec.whatwg.org/multipage/custom-elements.html) and use them in any framework we want!
+
+Thanks to the popularity of frameworks such as Angular, Vue, and React, component-driven development has become a part of our every day lives. Components help us encapsulate styles and behaviors into reusable building blocks. They make a lot of sense in terms of design, development, and testing.
+
+Unfortunately, _framework-specific_ components fail us in a number of ways:
+
+- You can only use them in the framework they're designed for 🔒
+- Their lifespan is limited to that of the framework's ⏳
+- New frameworks/versions can lead to breaking changes, requiring substantial effort to update components 😭
+
+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.
+
+## 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?
+
+With Shoelace, 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
+- Fully customize components to match your existing designs
+- 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.
+
+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.
+
+<small>*Please consider giving back some of what you save by [supporting this project with a sponsorship](https://github.com/sponsors/claviska).</small>
+
+## Browser Support
+
+Shoelace 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">
+<img src="/assets/images/firefox.png" alt="Firefox" width="64" height="64">
+<img src="/assets/images/opera.png" alt="Opera" width="64" height="64">
+<img src="/assets/images/safari.png" alt="Safari" width="64" height="64">
+
+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. ⛷
+
+## License
+
+Shoelace is designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska). It's available under the terms of the MIT license.
+
+Designing, developing, and supporting this library requires a lot of time, effort, and skill. If you're using this software to make a profit, I respectfully ask that you help [fund its development](https://github.com/sponsors/claviska) by becoming a sponsor.
+
+👇 Your support is very much appreciated! 👇
+
+<sl-button class="repo-button repo-button--sponsor" href="https://github.com/sponsors/claviska" target="_blank">
+  <sl-icon slot="prefix" name="heart"></sl-icon> Become a sponsor
+</sl-button>
+
+<sl-button class="repo-button repo-button--github" href="https://github.com/shoelace-style/shoelace/stargazers" target="_blank">
+  <sl-icon slot="prefix" name="github"></sl-icon> <span class="github-star-count">Star</span>
+</sl-button>
+
+<sl-button class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" target="_blank">
+  <sl-icon slot="prefix" name="twitter"></sl-icon> Follow
+</sl-button>
+
+## Attribution
+
+Special thanks to the following projects and individuals that help make Shoelace possible.
+
+- Components are built with [LitElement](https://lit-element.polymer-project.org/)
+- Component metadata is generated by the [Custom Elements Manifest Analyzer](https://github.com/open-wc/custom-elements-manifest)
+- Documentation is powered by [Docsify](https://docsify.js.org/)
+- CDN services are provided by [jsDelivr](https://www.jsdelivr.com/)
+- Color primitives are inspired by [Tailwind](https://tailwindcss.com/)
+- Icons are courtesy of [Bootstrap Icons](https://icons.getbootstrap.com/)
+- The homepage illustration is courtesy of [unDraw](https://undraw.co/)
+- Positioning of menus, tooltips, et al is handled by [Popper.js](https://popper.js.org/)
+- Animations are courtesy of [animate.css](https://animate.style/)
+- QR codes are generated with [qr-creator](https://github.com/nimiq/qr-creator)
+- 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)

data/remote-src/2.0.0.beta64/shoelace-next/docs/getting-started/themes.md

@@ -0,0 +1,139 @@
+# 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.
+
+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).
+
+?> 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 `dist/themes/*.styles.js`.
+
+## Theme Basics
+
+All themes are scoped to classes using the `sl-theme-{name}` convention, where `{name}` is a lowercase, hyphen-delimited value representing the name of the theme. The included light and dark themes use `sl-theme-light` and `sl-theme-dark`, respectively. A custom theme called "Purple Power", for example, would use a class called `sl-theme-purple-power` 
+
+All selectors must be scoped to the theme's class to ensure interoperability with other themes. You should also scope them to `:host` so they can be imported and applied to custom element shadow roots.
+
+```css
+:host,
+.sl-theme-purple-power {
+  /* ... */
+}
+```
+
+### Activating Themes
+
+To activate a theme, import it and apply the theme's class to the `<html>` element. This example imports and activates the built-in dark theme.
+
+```html
+<html class="sl-theme-dark">
+  <head>
+    <link rel="stylesheet" href="path/to/shoelace/dist/themes/dark.css">
+  </head>
+
+  <body>
+    ...
+  </body>
+</html>
+```
+
+?> There is one exception to this rule — the light theme _does not_ need to be activated. For convenience, the light theme is scoped to `:root` and will be activated by default when imported.
+
+### Using Multiple Themes
+
+You can activate themes on various containers throughout the page. This example uses the light theme with a dark-themed sidebar.
+
+```html
+<html>
+  <head>
+    <link rel="stylesheet" href="path/to/shoelace/dist/themes/light.css">
+    <link rel="stylesheet" href="path/to/shoelace/dist/themes/dark.css">
+  </head>
+
+  <body>
+    <nav class="sl-theme-dark">
+      <!-- dark-themed sidebar -->
+    </nav>
+    
+    <!-- light-themed content -->
+  </body>
+</html>
+```
+
+It's for this reason that themes must be scoped to specific classes.
+
+## Creating Themes
+
+There are two ways to create themes. The easiest way is to customize a built-in theme. The advanced way is to create a new theme from scratch. Which method you choose depends on your project's requirements and the amount of effort you're willing to commit to.
+
+### 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.
+
+If you're customizing the light theme, you should scope your styles to the following selectors.
+
+```css
+:root, 
+:host, 
+.sl-theme-light {
+  /* your custom styles here */
+}
+```
+
+If you're customizing the dark theme, you should scope your styles to the following selectors.
+
+```css
+:host,
+.sl-theme-dark {
+  /* your custom styles here */
+}
+```
+
+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.
+
+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.
+
+### Creating a New Theme
+
+Creating a new theme is more of an undertaking than [customizing an existing one](#customizing-a-built-in-theme). At a minimum, you must implement all of the required design tokens. The easiest way to do this is by "forking" one of the built-in themes and modifying it from there.
+
+Start by changing the selector to match your theme's name. Assuming your new theme is called "Purple Power", your theme should be scoped like this.
+
+```css
+:host,
+.sl-theme-purple-power {
+  /* your custom styles here */
+}
+```
+
+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.
+
+## Dark Theme
+
+The built-in dark theme uses an inverted color scale so, if you're using design tokens as intended, you'll get dark mode for free. While this isn't the same as a professionally curated dark theme, it provides an excellent baseline for one and you're encouraged to customize it depending on your needs.
+
+The dark theme works by taking the light theme's [color tokens](/tokens/color) and "flipping" the scale so 100 becomes 900, 200 becomes 800, 300 becomes 700, etc. Next, the luminance of each primitive was fine-tuned to avoid true black, which is often undesirable in dark themes, and provide a richer experience. The result is a custom dark palette that complements the light theme and makes it easy to offer light and dark modes with minimal effort.
+
+To install the dark theme, add the following to the `<head>` section of your page.
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/dark.css">
+```
+
+To activate the theme, apply the `sl-theme-dark` class to the `<html>` element.
+
+```html
+<html class="sl-theme-dark">
+  ...
+</html>
+```
+
+### 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:
+
+- 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.

data/remote-src/2.0.0.beta64/shoelace-next/docs/getting-started/usage.md

@@ -0,0 +1,173 @@
+# 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.
+
+If you're new to custom elements, often referred to as "web components," this section will familiarize you with how to use them. 
+
+## Properties
+
+Many components have properties that can be set using attributes. For example, buttons accept a `size` attribute that maps to the `size` property which dictates the button's size.
+
+```html
+<sl-button size="small">Click me</sl-button>
+```
+
+Some properties are boolean, so they only have true/false values. To activate a boolean property, add the corresponding attribute without a value.
+
+```html
+<sl-button disabled>Click me</sl-button>
+```
+
+In rare cases, a property may require an array, an object, or a function. For example, to customize the color picker's list of preset swatches, you set the `swatches` property to an array of colors. This can be done with JavaScript.
+
+```html
+<sl-color-picker></sl-color-picker>
+
+<script>
+  const colorPicker = document.querySelector('sl-color-picker');
+  colorPicker.swatches = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
+</script>
+```
+
+Refer to a component's documentation for a complete list of its properties.
+
+## Events
+
+You can listen for standard events such as `click`, `mouseover`, etc. as you normally would. In addition, some components emit custom events. These work the same way as standard events, but are prefixed with `sl-` to prevent collisions with standard events and other libraries.
+
+```html
+<sl-checkbox>Check me</sl-checkbox>
+
+<script>
+  const checkbox = document.querySelector('sl-checkbox');
+  checkbox.addEventListener('sl-change', event => {
+    console.log(event.target.checked ? 'checked' : 'not checked');
+  });
+</script>
+```
+
+Refer to a component's documentation for a complete list of its custom events.
+
+## 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.
+
+```html
+<sl-input></sl-input>
+
+<script>
+  const input = document.querySelector('sl-input');
+  input.focus();
+</script>
+```
+
+Refer to a component's documentation for a complete list of its methods and their arguments.
+
+## Slots
+
+Many components use slots to accept content inside of them. The most common slot is the _default_ slot, which includes any content inside the component that doesn't have a `slot` attribute.
+
+For example, a button's default slot is used to populate its label.
+
+```html
+<sl-button>Click me</sl-button>
+```
+
+Some components also have _named_ slots. A named slot can be populated by adding a child element with the appropriate `slot` attribute. Notice how the icon below has the `slot="prefix"` attribute? This tells the component to place the icon into its `prefix` slot.
+
+```html
+<sl-button>
+  <sl-icon slot="prefix" name="gear"></sl-icon>
+  Settings
+</sl-button>
+```
+
+The location of a named slot doesn't matter. You can put it anywhere inside the component and the browser will move it to the right place automatically!
+
+Refer to a component's documentation for a complete list of available slots.
+
+## Don't Use Self-closing Tags
+
+Custom elements cannot have self-closing tags. Similar to `<script>` and `<textarea>`, you must always include the full closing tag.
+
+```html
+<!-- Don't do this -->
+<sl-input />
+
+<!-- Always do this -->
+<sl-input></sl-input>
+```
+
+## Differences from Native Elements
+
+You might expect similarly named elements to share the same API as native HTML elements. This is not always the case. Shoelace components **are not** designed to be one-to-one replacements for their HTML counterparts.
+
+For example, `<button>` and `<sl-button>` both have a `type` attribute, but it does different things. The former controls whether the button submits a form and the latter controls the button's appearance.
+
+?> **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.
+
+## 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.
+
+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.
+
+```css
+:not(:defined) {
+  visibility: hidden;
+}
+```
+
+As soon as a custom element is registered, it will immediately appear with all of its styles, effectively eliminating FOUCE. Note the use of `visibility: hidden` instead of `display: none` to reduce shifting as elements are registered. The drawback to this approach is that custom elements can potentially appear one by one instead of all at the same time.
+
+Another option is to use [`customElements.whenDefined()`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/whenDefined), which returns a promise that resolves when the specified element gets registered. You'll probably want to use it with [`Promise.allSettled()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled) in case an element fails to load for some reason.
+
+A clever way to use this method is to hide the `<body>` with `opacity: 0` and add a class that fades it in as soon as all your custom elements are defined.
+
+```html
+<style>
+  body {
+    opacity: 0;
+  }
+
+  body.ready {
+    opacity: 1;
+    transition: .25s opacity;
+  }
+</style>
+
+<script type="module">
+  await Promise.allSettled([
+    customElements.whenDefined('sl-button'),
+    customElements.whenDefined('sl-card'),
+    customElements.whenDefined('sl-rating')
+  ]);
+
+  // Button, card, and rating are registered now! Add
+  // the `ready` class so the UI fades in.
+  document.body.classList.add('ready');
+</script>
+```
+
+## Code Completion
+
+### VS Code
+
+Shoelace ships with a file called `vscode.html-custom-data.json` that can be used to describe its components 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.
+
+1. [Install Shoelace locally](/getting-started/installation#local-installation)
+2. Create a folder called `.vscode` at the root of your project
+3. Create a file inside the 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"]
+}
+```
+
+If `settings.json` already exists, simply add the above line to the root of the object. Note that you may need to restart VS Code for the changes to take affect.
+
+### 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!

data/remote-src/2.0.0.beta64/shoelace-next/docs/index.html

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Shoelace: A forward-thinking library of web components.</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta
+      name="description"
+      content="Shoelace provides a collection of professionally designed, every day UI components built on a framework-agnostic technology."
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="custom-elements-manifest" content="dist/custom-elements.json" />
+    <meta property="og:title" content="Shoelace" />
+    <meta
+      property="og:description"
+      content="Shoelace provides a collection of professionally designed, every day UI components built on a framework-agnostic technology."
+    />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://shoelace.style/" />
+    <meta property="og:image" content="https://shoelace.style/assets/images/og-image.png" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@shoelace_style" />
+    <meta name="twitter:creator" content="@claviska" />
+    <meta name="twitter:title" content="Shoelace" />
+    <meta
+      name="twitter:description"
+      content="Shoelace provides a collection of professionally designed, every day UI components built on a framework-agnostic technology."
+    />
+    <meta name="twitter:image" content="https://shoelace.style/assets/images/twitter-card.png" />
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify@4/themes/pure.css" />
+    <link rel="stylesheet" href="/assets/styles/docs.css" />
+    <link rel="stylesheet" href="/assets/plugins/code-block/code-block.css" />
+    <link rel="stylesheet" href="/assets/plugins/search/search.css" />
+    <link rel="stylesheet" href="/assets/plugins/theme-picker/theme-picker.css" />
+    <link rel="icon" href="/assets/images/logo.svg" type="image/x-icon" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/touch-icon.png" />
+
+    <!-- Import Shoelace -->
+    <link rel="stylesheet" href="/dist/themes/light.css" />
+    <link rel="stylesheet" href="/dist/themes/dark.css" />
+    <script type="module" src="/dist/shoelace.js"></script>
+  </head>
+  <body data-shoelace="/dist">
+    <div id="app"></div>
+    <script>
+      // Set the initial theme to prevent flashing
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const theme = localStorage.getItem('theme') || 'auto';
+      document.documentElement.classList.toggle('sl-theme-dark', theme === 'dark' || (theme === 'auto' && prefersDark));
+    </script>
+    <script>
+      window.$docsify = {
+        alias: {
+          '/.*/_sidebar.md': '/_sidebar.md'
+        },
+        auto2top: true,
+        copyCode: {
+          buttonText: 'Copy',
+          errorText: 'Failed to copy',
+          successText: 'Copied'
+        },
+        coverpage: false,
+        executeScript: true,
+        ga: 'UA-6412891-16',
+        homepage: '/getting-started/overview.md',
+        loadSidebar: true,
+        logo: '/assets/images/wordmark.svg',
+        maxLevel: 3,
+        subMaxLevel: 2,
+        name: 'Shoelace',
+        nameLink: '/',
+        notFoundPage: '404.md',
+        pagination: {
+          previousText: 'Previous',
+          nextText: 'Next',
+          crossChapter: true,
+          crossChapterText: false
+        },
+        routerMode: 'history',
+        themeColor: 'var(--sl-color-primary-500)'
+      };
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/ga.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/docsify-copy-code@2"></script>
+    <script src="https://cdn.jsdelivr.net/npm/docsify-pagination@2/dist/docsify-pagination.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.25.0/components/prism-bash.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.25.0/components/prism-jsx.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.25.0/components/prism-tsx.min.js"></script>
+    <script src="/assets/plugins/code-block/code-block.js"></script>
+    <script src="/assets/plugins/metadata/metadata.js"></script>
+    <script src="/assets/plugins/scroll-position/scroll-position.js"></script>
+    <script src="/assets/plugins/search/lunr.min.js"></script>
+    <script src="/assets/plugins/search/search.js"></script>
+    <script src="/assets/plugins/theme-picker/theme-picker.js"></script>
+  </body>
+</html>

data/remote-src/2.0.0.beta64/shoelace-next/docs/resources/accessibility.md

@@ -0,0 +1,18 @@
+# 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.
+
+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.
+
+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.
+
+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.
+
+This is the path forward. Together, we will continue to make Shoelace accessible to as many users as possible.
+
+— Cory LaViska<br>
+_Creator of Shoelace_