shoelace-rails-ui 0.1.0 → 0.1.1

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

@@ -1,49 +0,0 @@
-# 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

@@ -1,196 +0,0 @@
-# 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

@@ -1,144 +0,0 @@
-# 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

@@ -1,178 +0,0 @@
-# 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]