shoelace-rails-ui 0.1.0

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

@@ -0,0 +1,311 @@
+# Card
+
+[component-header:sl-card]
+
+Cards can be used to group related subjects in a container.
+
+```html preview
+<sl-card class="card-overview">
+  <img 
+    slot="image" 
+    src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" 
+    alt="A kitten sits patiently between a terracotta pot and decorative grasses."
+  >
+
+  <strong>Mittens</strong><br>
+  This kitten is as cute as he is playful. Bring him home today!<br>
+  <small>6 weeks old</small>
+
+  <div slot="footer">
+    <sl-button variant="primary" pill>More Info</sl-button>
+    <sl-rating></sl-rating>
+  </div>
+</sl-card>
+
+<style>
+  .card-overview {
+    max-width: 300px;
+  }
+
+  .card-overview small {
+    color: var(--sl-color-neutral-500);
+  }
+
+  .card-overview [slot="footer"] {
+    display: flex; 
+    justify-content: space-between; 
+    align-items: center;
+  }
+</style>
+```
+
+```jsx react
+import { 
+  SlButton, 
+  SlCard, 
+  SlRating 
+} from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .card-overview {
+    max-width: 300px;
+  }
+
+  .card-overview small {
+    color: var(--sl-color-neutral-500);
+  }
+
+  .card-overview [slot="footer"] {
+    display: flex; 
+    justify-content: space-between; 
+    align-items: center;
+  }
+`;
+
+const App = () => (
+  <>
+    <SlCard className="card-overview">
+      <img 
+        slot="image" 
+        src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" 
+        alt="A kitten sits patiently between a terracotta pot and decorative grasses."
+      />
+
+      <strong>Mittens</strong><br />
+      This kitten is as cute as he is playful. Bring him home today!<br />
+      <small>6 weeks old</small>
+
+      <div slot="footer">
+        <SlButton variant="primary" pill>More Info</SlButton>
+        <SlRating></SlRating>
+      </div>
+    </SlCard>
+
+    <style>{css}</style>
+  </>
+);
+```
+
+## Examples
+
+## Basic Card
+
+Basic cards aren't very exciting, but they can display any content you want them to.
+
+```html preview
+<sl-card class="card-basic">
+  This is just a basic card. No image, no header, and no footer. Just your content.
+</sl-card>
+
+<style>
+  .card-basic {
+    max-width: 300px;
+  }
+</style>
+```
+
+```jsx react
+import { SlCard } from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .card-basic {
+    max-width: 300px;
+  }
+`;
+
+const App = () => (
+  <>
+    <SlCard className="card-basic">
+      This is just a basic card. No image, no header, and no footer. Just your content.
+    </SlCard>
+
+    <style>{css}</style>
+  </>
+);
+```
+
+## Card with Header
+
+Headers can be used to display titles and more.
+
+```html preview
+<sl-card class="card-header">
+  <div slot="header">
+    Header Title
+
+    <sl-icon-button name="gear"></sl-icon-button>
+  </div>
+
+  This card has a header. You can put all sorts of things in it!
+</sl-card>
+
+<style>
+  .card-header {
+    max-width: 300px;
+  }
+
+  .card-header [slot="header"] {
+    display: flex; 
+    align-items: center; 
+    justify-content: space-between;
+  }
+
+  .card-header h3 {
+    margin: 0;
+  }
+
+  .card-header sl-icon-button {
+    font-size: var(--sl-font-size-medium);
+  }
+</style>
+```
+
+```jsx react
+import { SlCard, SlIconButton } from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .card-header {
+    max-width: 300px;
+  }
+
+  .card-header [slot="header"] {
+    display: flex; 
+    align-items: center; 
+    justify-content: space-between;
+  }
+
+  .card-header h3 {
+    margin: 0;
+  }
+
+  .card-header sl-icon-button {
+    font-size: var(--sl-font-size-medium);
+  }
+`;
+
+const App = () => (
+  <>
+    <SlCard className="card-header">
+      <div slot="header">
+        Header Title
+
+        <SlIconButton name="gear"></SlIconButton>
+      </div>
+
+      This card has a header. You can put all sorts of things in it!
+    </SlCard>
+
+    <style>{css}</style>
+  </>
+);
+```
+
+## Card with Footer
+
+Footers can be used to display actions, summaries, or other relevant content.
+
+```html preview
+<sl-card class="card-footer">
+  This card has a footer. You can put all sorts of things in it!
+
+  <div slot="footer">
+    <sl-rating></sl-rating>
+    <sl-button slot="footer" variant="primary">Preview</sl-button>
+  </div>
+</sl-card>
+
+<style>
+  .card-footer {
+    max-width: 300px;
+  }
+
+  .card-footer [slot="footer"] {
+    display: flex; 
+    justify-content: space-between; 
+    align-items: center;
+  }
+</style>
+```
+
+```jsx react
+import { 
+  SlButton, 
+  SlCard, 
+  SlRating 
+} from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .card-footer {
+    max-width: 300px;
+  }
+
+  .card-footer [slot="footer"] {
+    display: flex; 
+    justify-content: space-between; 
+    align-items: center;
+  }
+`;
+
+const App = () => (
+  <>
+    <SlCard className="card-footer">
+      This card has a footer. You can put all sorts of things in it!
+
+      <div slot="footer">
+        <SlRating></SlRating>
+        <SlButton slot="footer" variant="primary">Preview</SlButton>
+      </div>
+    </SlCard>
+
+    <style>{css}</style>
+  </>
+);
+```
+
+## Images
+
+Cards accept an `image` slot. The image is displayed atop the card and stretches to fit.
+
+```html preview
+<sl-card class="card-image">
+  <img 
+    slot="image" 
+    src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80" 
+    alt="A kitten walks towards camera on top of pallet."
+  >
+  This is a kitten, but not just any kitten. This kitten likes walking along pallets.
+</sl-card>
+
+<style>
+  .card-image {
+    max-width: 300px;
+  }
+</style>
+```
+
+```jsx react
+import { SlCard } from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .card-image {
+    max-width: 300px;
+  }
+`;
+
+const App = () => (
+  <>
+    <SlCard className="card-image">
+      <img 
+        slot="image" 
+        src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80" 
+        alt="A kitten walks towards camera on top of pallet."
+      />
+      This is a kitten, but not just any kitten. This kitten likes walking along pallets.
+    </SlCard>
+
+    <style>{css}</style>
+  </>
+);
+```
+
+[component-metadata:sl-card]

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

@@ -0,0 +1,71 @@
+# Checkbox
+
+[component-header:sl-checkbox]
+
+Checkboxes allow the user to toggle an option on or off.
+
+```html preview
+<sl-checkbox>Checkbox</sl-checkbox>
+```
+
+```jsx react
+import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlCheckbox>Checkbox</SlCheckbox>
+);
+```
+
+?> This component works with standard `<form>` elements. Please refer to the section on [form controls](/getting-started/form-controls) to learn more about form submission and client-side validation.
+
+## Examples
+
+### Checked
+
+Use the `checked` attribute to activate the checkbox.
+
+```html preview
+<sl-checkbox checked>Checked</sl-checkbox>
+```
+
+```jsx react
+import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlCheckbox checked>Checked</SlCheckbox>
+);
+```
+
+### Indeterminate
+
+Use the `indeterminate` attribute to make the checkbox indeterminate.
+
+```html preview
+<sl-checkbox indeterminate>Indeterminate</sl-checkbox>
+```
+
+```jsx react
+import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlCheckbox indeterminate>Indeterminate</SlCheckbox>
+);
+```
+
+### Disabled
+
+Use the `disabled` attribute to disable the checkbox.
+
+```html preview
+<sl-checkbox disabled>Disabled</sl-checkbox>
+```
+
+```jsx react
+import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlCheckbox disabled>Disabled</SlCheckbox>
+);
+```
+
+[component-metadata:sl-checkbox]

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

@@ -0,0 +1,101 @@
+# Color Picker
+
+[component-header:sl-color-picker]
+
+Color pickers allow the user to select a color.
+
+```html preview
+<sl-color-picker></sl-color-picker>
+```
+
+```jsx react
+import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlColorPicker />
+);
+```
+
+?> This component works with standard `<form>` elements. Please refer to the section on [form controls](/getting-started/form-controls) to learn more about form submission and client-side validation.
+
+## Examples
+
+### Opacity
+
+Use the `opacity` attribute to enable the opacity slider. When this is enabled, the value will be displayed as HEXA, RGBA, or HSLA based on `format`.
+
+```html preview
+<sl-color-picker opacity></sl-color-picker>
+```
+
+```jsx react
+import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlColorPicker opacity />
+);
+```
+
+### Formats
+
+Set the color picker's format with the `format` attribute. Valid options include `hex`, `rgb`, and `hsl`. Note that the color picker's input will accept any parsable format (including CSS color names) regardless of this option.
+
+To prevent users from toggling the format themselves, add the `no-format-toggle` attribute.
+
+```html preview
+<sl-color-picker format="hex" value="#4a90e2"></sl-color-picker>
+<sl-color-picker format="rgb" value="rgb(80, 227, 194)"></sl-color-picker>
+<sl-color-picker format="hsl" value="hsl(290, 87%, 47%)"></sl-color-picker>
+```
+
+```jsx react
+import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlColorPicker format="hex" value="#4a90e2" />
+    <SlColorPicker format="rgb" value="rgb(80, 227, 194)" />
+    <SlColorPicker format="hsl" value="hsl(290, 87%, 47%)" />
+  </>
+);
+```
+
+### Sizes
+
+Use the `size` attribute to change the color picker's trigger size.
+
+```html preview
+<sl-color-picker size="small"></sl-color-picker>
+<sl-color-picker size="medium"></sl-color-picker>
+<sl-color-picker size="large"></sl-color-picker>
+```
+
+```jsx react
+import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlColorPicker size="small" />
+    <SlColorPicker size="medium" />
+    <SlColorPicker size="large" />
+  </>
+);
+```
+
+### Inline
+
+The color picker can be rendered inline instead of in a dropdown using the `inline` attribute.
+
+```html preview
+<sl-color-picker inline></sl-color-picker>
+```
+
+```jsx react
+import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlColorPicker inline />
+);
+```
+
+[component-metadata:sl-color-picker]

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

@@ -0,0 +1,89 @@
+<!-- cspell:dictionaries lorem-ipsum -->
+
+# Details
+
+[component-header:sl-details]
+
+Details show a brief summary and expand to show additional content.
+
+```html preview
+<sl-details summary="Toggle Me">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+</sl-details>
+```
+
+```jsx react
+import { SlDetails } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlDetails summary="Toggle Me">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </SlDetails>
+);
+```
+
+## Examples
+
+### Disabled
+
+Use the `disable` attribute to prevent the details from expanding.
+
+```html preview
+<sl-details summary="Disabled" disabled>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+</sl-details>
+```
+
+```jsx react
+import { SlDetails } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlDetails summary="Disabled" disabled>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </SlDetails>
+);
+```
+
+### Grouping Details
+
+Details are designed to function independently, but you can simulate a group or "accordion" where only one is shown at a time by listening for the `sl-show` event.
+
+```html preview
+<div class="details-group-example">
+  <sl-details summary="First" open>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </sl-details>
+
+  <sl-details summary="Second">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </sl-details>
+
+  <sl-details summary="Third">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </sl-details>
+</div>
+
+<script>
+  const container = document.querySelector('.details-group-example');
+
+  // Close all other details when one is shown
+  container.addEventListener('sl-show', event => {
+    [...container.querySelectorAll('sl-details')].map(details => (details.open = event.target === details));
+  });
+</script>
+
+<style>
+  .details-group-example sl-details:not(:last-of-type) {
+    margin-bottom: var(--sl-spacing-2x-small);
+  }
+</style>
+```
+
+[component-metadata:sl-details]