shoelace-rails-ui 0.1.0

data/remote-src/2.0.0.beta64/shoelace-next/docs/components/menu.md

@@ -0,0 +1,49 @@
+# Menu
+
+[component-header:sl-menu]
+
+Menus provide a list of options for the user to choose from.
+
+You can use [menu items](/components/menu-item), [menu labels](/components/menu-label), and [dividers](/components/divider) to compose a menu. Menus support keyboard interactions, including type-to-select an option.
+
+```html preview
+<sl-menu style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); background: var(--sl-panel-background-color); border-radius: var(--sl-border-radius-medium);">
+  <sl-menu-item value="undo">Undo</sl-menu-item>
+  <sl-menu-item value="redo">Redo</sl-menu-item>
+  <sl-divider></sl-divider>
+  <sl-menu-item value="cut">Cut</sl-menu-item>
+  <sl-menu-item value="copy">Copy</sl-menu-item>
+  <sl-menu-item value="paste">Paste</sl-menu-item>
+  <sl-menu-item value="delete">Delete</sl-menu-item>
+</sl-menu>
+```
+
+```jsx react
+import { 
+  SlDivider,
+  SlMenu,
+  SlMenuItem
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlMenu 
+    style={{
+      maxWidth: '200px',
+      border: 'solid 1px var(--sl-panel-border-color)',
+      borderRadius: 'var(--sl-border-radius-medium)'
+    }}
+  >
+    <SlMenuItem value="undo">Undo</SlMenuItem>
+    <SlMenuItem value="redo">Redo</SlMenuItem>
+    <SlDivider />
+    <SlMenuItem value="cut">Cut</SlMenuItem>
+    <SlMenuItem value="copy">Copy</SlMenuItem>
+    <SlMenuItem value="paste">Paste</SlMenuItem>
+    <SlMenuItem value="delete">Delete</SlMenuItem>
+  </SlMenu>  
+);
+```
+
+?> Menus are intended for system menus (dropdown menus, select menus, context menus, etc.). They should not be mistaken for navigation menus which serve a different purpose and have a different semantic meaning. If you're building navigation, use `<nav>` and `<a>` elements instead.
+
+[component-metadata:sl-menu]

data/remote-src/2.0.0.beta64/shoelace-next/docs/components/mutation-observer.md

@@ -0,0 +1,196 @@
+# Mutation Observer
+
+[component-header:sl-mutation-observer]
+
+The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
+
+The mutation observer will report changes to the content it wraps through the `sl-mutation` event. When emitted, a collection of [MutationRecord](https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord) objects will be attached to `event.detail` that contains information about how it changed.
+
+```html preview
+<div class="mutation-overview">
+  <sl-mutation-observer attr="variant">
+    <sl-button variant="primary">Click to mutate</sl-button>
+  </sl-mutation-observer>
+
+  <br>
+  👆 Click the button and watch the console
+
+  <script>
+    const container = document.querySelector('.mutation-overview');
+    const mutationObserver = container.querySelector('sl-mutation-observer');
+    const button = container.querySelector('sl-button');
+    const variants = ['primary', 'success', 'neutral', 'warning', 'danger']; 
+    let clicks = 0;
+
+    // Change the button's variant attribute
+    button.addEventListener('click', () => {
+      clicks++;
+      button.setAttribute('variant', variants[clicks % variants.length]);
+    });
+
+    // Log mutations
+    mutationObserver.addEventListener('sl-mutation', event => {
+      console.log(event.detail);
+    });
+  </script>
+
+  <style>
+    .mutation-overview sl-button {
+      margin-bottom: 1rem;
+    }
+  </style>
+</div>
+```
+
+```jsx react
+import { useState } from 'react';
+import { SlButton, SlMutationObserver } from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .resize-observer-overview div {
+    display: flex; 
+    border: solid 2px var(--sl-input-border-color); 
+    align-items: center; 
+    justify-content: center;
+    text-align: center;
+    padding: 4rem 2rem;
+  }
+`;
+
+const variants = ['primary', 'success', 'neutral', 'warning', 'danger']; 
+let clicks = 0;
+
+const App = () => {
+  const [variant, setVariant] = useState('primary');
+
+  function handleClick() {
+    clicks++;
+    setVariant(variants[clicks % variants.length]);
+  }
+
+  return (
+    <>
+      <SlMutationObserver 
+        attr="*"
+        onSlMutation={event => console.log(event.detail)}
+      >
+        <SlButton variant={variant} onClick={handleClick}>Click to mutate</SlButton>
+      </SlMutationObserver>
+
+      <style>{css}</style>
+    </>
+  );
+};
+```
+
+?> When you create a mutation observer, you must indicate what changes it should respond to by including at least one of `attr`, `child-list`, or `char-data`. If you don't specify at least one of these attributes, no mutation events will be emitted.
+
+## Examples
+
+### Child List
+
+Use the `child-list` attribute to watch for new child elements that are added or removed.
+
+```html preview
+<div class="mutation-child-list">
+  <sl-mutation-observer child-list>
+    <div class="buttons">
+      <sl-button variant="primary">Add button</sl-button>
+    </div>
+  </sl-mutation-observer>
+
+  👆 Add and remove buttons and watch the console
+
+  <script>
+    const container = document.querySelector('.mutation-child-list');
+    const mutationObserver = container.querySelector('sl-mutation-observer');
+    const buttons = container.querySelector('.buttons');
+    const button = container.querySelector('sl-button[variant="primary"]');
+    let i = 0;
+
+    // Add a button
+    button.addEventListener('click', () => {
+      const button = document.createElement('sl-button');
+      button.textContent = ++i;
+      buttons.append(button);
+    });
+
+    // Remove a button
+    buttons.addEventListener('click', event => {
+      const target = event.target.closest('sl-button:not([variant="primary"])');
+      event.stopPropagation();
+
+      if (target) {
+        target.remove();
+      }
+    });
+
+    // Log mutations
+    mutationObserver.addEventListener('sl-mutation', event => {
+      console.log(event.detail);
+    });
+  </script>
+
+  <style>
+    .mutation-child-list .buttons {
+      display: flex;
+      gap: .25rem;
+      flex-wrap: wrap;
+      margin-bottom: 1rem;
+    }
+  </style>
+</div>
+```
+
+```jsx react
+import { useState } from 'react';
+import { SlButton, SlMutationObserver } from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .mutation-child-list .buttons {
+    display: flex;
+    gap: .25rem;
+    flex-wrap: wrap;
+    margin-bottom: 1rem;
+  }
+`;
+
+let buttonCount = 0;
+
+const App = () => {
+  const [buttonIds, setButtonIds] = useState([]);
+
+  function addButton() {
+    setButtonIds([...buttonIds, ++buttonCount]);
+  }
+
+  function removeButton(id) {
+    setButtonIds(buttonIds.filter(i => i !== id));
+  }
+
+  return (
+    <>
+      <div className="mutation-child-list">
+        <SlMutationObserver 
+          child-list 
+          onSlMutation={event => console.log(event.detail)}
+        >
+          <div className="buttons">
+            <SlButton variant="primary" onClick={addButton}>Add button</SlButton>
+            {buttonIds.map(id => (
+              <SlButton key={id} variant="default" onClick={() => removeButton(id)}>
+                {id}
+              </SlButton>
+            ))}
+          </div>
+        </SlMutationObserver>
+      </div>
+
+      👆 Add and remove buttons and watch the console
+      <style>{css}</style>
+    </>
+  );
+};
+```
+
+[component-metadata:sl-mutation-observer]

data/remote-src/2.0.0.beta64/shoelace-next/docs/components/progress-bar.md

@@ -0,0 +1,144 @@
+# Progress Bar
+
+[component-header:sl-progress-bar]
+
+Progress bars are used to show the status of an ongoing operation.
+
+```html preview
+<sl-progress-bar value="50"></sl-progress-bar>
+```
+
+```jsx react
+import { SlProgressBar } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlProgressBar value={50} />
+);
+```
+
+## Examples
+
+### Custom Height
+
+Use the `--height` custom property to set the progress bar's height.
+
+```html preview
+<sl-progress-bar value="50" style="--height: 6px;"></sl-progress-bar>
+```
+
+```jsx react
+import { SlProgressBar } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlProgressBar 
+    value={50}
+    style={{ '--height': '6px' }}
+  />
+);
+```
+
+### Labels
+
+Use the `label` attribute to label the progress bar and tell assistive devices how to announce it.
+
+```html preview
+<sl-progress-bar value="50" label="Upload progress"></sl-progress-bar>
+```
+
+```jsx react
+import { SlProgressBar } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlProgressBar
+    value="50" 
+    label="Upload progress"
+  />
+);
+```
+
+### Showing Values
+
+Use the default slot to show a value.
+
+```html preview
+<sl-progress-bar value="50" class="progress-bar-values">50%</sl-progress-bar>
+
+<br>
+
+<sl-button circle><sl-icon name="dash"></sl-icon></sl-button>
+<sl-button circle><sl-icon name="plus"></sl-icon></sl-button>
+
+<script>
+  const progressBar = document.querySelector('.progress-bar-values');
+  const subtractButton = progressBar.nextElementSibling.nextElementSibling;
+  const addButton = subtractButton.nextElementSibling;
+
+  addButton.addEventListener('click', () => {
+    const value = Math.min(100, progressBar.value + 10);
+    progressBar.value = value;
+    progressBar.textContent = `${value}%`;
+  });
+
+  subtractButton.addEventListener('click', () => {
+    const value = Math.max(0, progressBar.value - 10)
+    progressBar.value = value;
+    progressBar.textContent = `${value}%`;
+  });
+</script>
+```
+
+```jsx react
+import { useState } from 'react';
+import { 
+  SlButton,
+  SlIcon,
+  SlProgressBar
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => {
+  const [value, setValue] = useState(50);
+
+  function adjustValue(amount) {
+    let newValue = value + amount;
+    if (newValue < 0) newValue = 0;
+    if (newValue > 100) newValue = 100;
+    setValue(newValue);
+  }
+
+  return (
+    <>
+      <SlProgressBar value={value}>
+        {value}%
+      </SlProgressBar>
+
+      <br />
+
+      <SlButton circle onClick={() => adjustValue(-10)}>
+        <SlIcon name="dash" />
+      </SlButton>
+
+      <SlButton circle onClick={() => adjustValue(10)}>
+        <SlIcon name="plus" />
+      </SlButton>
+    </>
+  );
+};
+```
+
+### Indeterminate
+
+The `indeterminate` attribute can be used to inform the user that the operation is pending, but its status cannot currently be determined. In this state, `value` is ignored and the label, if present, will not be shown.
+
+```html preview
+<sl-progress-bar indeterminate></sl-progress-bar>
+```
+
+```jsx react
+import { SlProgressBar } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlProgressBar indeterminate />
+);
+```
+
+[component-metadata:sl-progress-bar]

data/remote-src/2.0.0.beta64/shoelace-next/docs/components/progress-ring.md

@@ -0,0 +1,178 @@
+# Progress Ring
+
+[component-header:sl-progress-ring]
+
+Progress rings are used to show the progress of a determinate operation in a circular fashion.
+
+```html preview
+<sl-progress-ring value="25"></sl-progress-ring>
+```
+
+```jsx react
+import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlProgressRing value="25" />
+);
+```
+
+## Examples
+
+### Size
+
+Use the `--size` custom property to set the diameter of the progress ring.
+
+```html preview
+<sl-progress-ring value="50" style="--size: 200px;"></sl-progress-ring>
+```
+
+```jsx react
+import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlProgressRing 
+    value="50" 
+    style={{ '--size': '200px' }}
+  />
+);
+```
+
+### Track Width
+
+Use the `--track-width` custom property to set the width of the progress ring's track.
+
+```html preview
+<sl-progress-ring value="50" style="--track-width: 10px;"></sl-progress-ring>
+```
+
+```jsx react
+import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlProgressRing 
+    value="50" 
+    style={{ '--track-width': '10px' }}
+  />
+);
+```
+
+### Colors
+
+To change the color, use the `--track-color` and `--indicator-color` custom properties.
+
+```html preview
+<sl-progress-ring 
+  value="50" 
+  style="
+    --track-color: pink; 
+    --indicator-color: deeppink;
+  "
+></sl-progress-ring>
+```
+
+```jsx react
+import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlProgressRing 
+    value="50" 
+    style={{ 
+      '--track-color': 'pink',
+      '--indicator-color': 'deeppink'
+    }}
+  />
+);
+```
+
+### Labels
+
+Use the `label` attribute to label the progress ring and tell assistive devices how to announce it.
+
+```html preview
+<sl-progress-ring value="50" label="Upload progress"></sl-progress-ring>
+```
+
+```jsx react
+import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlProgressRing 
+    value="50" 
+    label="Upload progress"
+  />
+);
+```
+
+### Showing Values
+
+Use the default slot to show a label inside the progress ring.
+
+```html preview
+<sl-progress-ring value="50" class="progress-ring-values" style="margin-bottom: .5rem;">50%</sl-progress-ring>
+
+<br>
+
+<sl-button circle><sl-icon name="dash"></sl-icon></sl-button>
+<sl-button circle><sl-icon name="plus"></sl-icon></sl-button>
+
+<script>
+  const progressRing = document.querySelector('.progress-ring-values');
+  const subtractButton = progressRing.nextElementSibling.nextElementSibling;
+  const addButton = subtractButton.nextElementSibling;
+
+  addButton.addEventListener('click', () => {
+    const value = Math.min(100, progressRing.value + 10);
+    progressRing.value = value;
+    progressRing.textContent = `${value}%`;
+  });
+
+  subtractButton.addEventListener('click', () => {
+    const value = Math.max(0, progressRing.value - 10)
+    progressRing.value = value;
+    progressRing.textContent = `${value}%`;
+  });
+</script>
+```
+
+```jsx react
+import { useState } from 'react';
+import { 
+  SlButton,
+  SlIcon,
+  SlProgressRing
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => {
+  const [value, setValue] = useState(50);
+
+  function adjustValue(amount) {
+    let newValue = value + amount;
+    if (newValue < 0) newValue = 0;
+    if (newValue > 100) newValue = 100;
+    setValue(newValue);
+  }
+
+  return (
+    <>
+      <SlProgressRing 
+        value={value} 
+        style={{ marginBottom: '.5rem' }}
+      >
+        {value}%
+      </SlProgressRing>
+
+      <br />
+
+      <SlButton circle onClick={() => adjustValue(-10)}>
+        <SlIcon name="dash" />
+      </SlButton>
+
+      <SlButton circle onClick={() => adjustValue(10)}>
+        <SlIcon name="plus" />
+      </SlButton>
+    </>
+  );
+};
+```
+
+[component-metadata:sl-progress-ring]