shoelace-rails-ui 0.1.0 → 0.1.1

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

@@ -1,191 +0,0 @@
-# Badge
-
-[component-header:sl-badge]
-
-Badges are used to draw attention and display statuses or counts.
-
-```html preview
-<sl-badge>Badge</sl-badge>
-```
-
-```jsx react
-import { SlBadge } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlBadge>Badge</SlBadge>
-);
-```
-
-## Examples
-
-### Variants
-
-Set the `variant` attribute to change the badge's variant.
-
-```html preview
-<sl-badge variant="primary">Primary</sl-badge>
-<sl-badge variant="success">Success</sl-badge>
-<sl-badge variant="neutral">Neutral</sl-badge>
-<sl-badge variant="warning">Warning</sl-badge>
-<sl-badge variant="danger">Danger</sl-badge>
-```
-
-```jsx react
-import { SlBadge } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlBadge variant="primary">Primary</SlBadge>
-    <SlBadge variant="success">Success</SlBadge>
-    <SlBadge variant="neutral">Neutral</SlBadge>
-    <SlBadge variant="warning">Warning</SlBadge>
-    <SlBadge variant="danger">Danger</SlBadge>  
-  </>
-);
-```
-
-### Pill Badges
-
-Use the `pill` attribute to give badges rounded edges.
-
-```html preview
-<sl-badge variant="primary" pill>Primary</sl-badge>
-<sl-badge variant="success" pill>Success</sl-badge>
-<sl-badge variant="neutral" pill>Neutral</sl-badge>
-<sl-badge variant="warning" pill>Warning</sl-badge>
-<sl-badge variant="danger" pill>Danger</sl-badge>
-```
-
-```jsx react
-import { SlBadge } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlBadge variant="primary" pill>Primary</SlBadge>
-    <SlBadge variant="success" pill>Success</SlBadge>
-    <SlBadge variant="neutral" pill>Neutral</SlBadge>
-    <SlBadge variant="warning" pill>Warning</SlBadge>
-    <SlBadge variant="danger" pill>Danger</SlBadge>  
-  </>
-);
-```
-
-### Pulsating Badges
-
-Use the `pulse` attribute to draw attention to the badge with a subtle animation.
-
-```html preview
-<div class="badge-pulse">
-  <sl-badge variant="primary" pill pulse>1</sl-badge>
-  <sl-badge variant="success" pill pulse>1</sl-badge>
-  <sl-badge variant="neutral" pill pulse>1</sl-badge>
-  <sl-badge variant="warning" pill pulse>1</sl-badge>
-  <sl-badge variant="danger" pill pulse>1</sl-badge>
-</div>
-
-<style>
-  .badge-pulse sl-badge:not(:last-of-type) {
-    margin-right: 1rem;
-  }
-</style>
-```
-
-```jsx react
-import { SlBadge } from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .badge-pulse sl-badge:not(:last-of-type) {
-    margin-right: 1rem;
-  }
-`;
-
-const App = () => (
-  <>
-    <div className="badge-pulse">
-      <SlBadge variant="primary" pill pulse>1</SlBadge>
-      <SlBadge variant="success" pill pulse>1</SlBadge>
-      <SlBadge variant="neutral" pill pulse>1</SlBadge>
-      <SlBadge variant="warning" pill pulse>1</SlBadge>
-      <SlBadge variant="danger" pill pulse>1</SlBadge>
-    </div>
-
-    <style>{css}</style>
-  </>
-);
-```
-
-### With Buttons
-
-One of the most common use cases for badges is attaching them to buttons. To make this easier, badges will be automatically positioned at the top-right when they're a child of a button.
-
-```html preview
-<sl-button>
-  Requests
-  <sl-badge pill>30</sl-badge>
-</sl-button>
-
-<sl-button style="margin-left: 1rem;">
-  Warnings
-  <sl-badge variant="warning" pill>8</sl-badge>
-</sl-button>
-
-<sl-button style="margin-left: 1rem;">
-  Errors
-  <sl-badge variant="danger" pill>6</sl-badge>
-</sl-button>
-```
-
-```jsx react
-import { SlBadge, SlButton } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlButton>
-      Requests
-      <SlBadge pill>30</SlBadge>
-    </SlButton>
-
-    <SlButton style={{ marginLeft: '1rem' }}>
-      Warnings
-      <SlBadge variant="warning" pill>8</SlBadge>
-    </SlButton>
-
-    <SlButton style={{ marginLeft: '1rem' }}>
-      Errors
-      <SlBadge variant="danger" pill>6</SlBadge>
-    </SlButton>
-  </>
-);
-```
-
-### With Menu Items
-
-When including badges in menu items, use the `suffix` slot to make sure they're aligned correctly.
-
-```html preview
-<sl-menu style="max-width: 240px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);">
-  <sl-menu-label>Messages</sl-menu-label>
-  <sl-menu-item>Comments <sl-badge slot="suffix" variant="neutral" pill>4</sl-badge></sl-menu-item>
-  <sl-menu-item>Replies <sl-badge slot="suffix" variant="neutral" pill>12</sl-badge></sl-menu-item>
-</sl-menu>
-```
-
-```jsx react
-import { SlBadge, SlButton, SlMenu, SlMenuItem, SlMenuLabel } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlMenu 
-    style={{
-      maxWidth: '240px',
-      border: 'solid 1px var(--sl-panel-border-color)',
-      borderRadius: 'var(--sl-border-radius-medium)'
-    }}
-  >
-    <SlMenuLabel>Messages</SlMenuLabel>
-    <SlMenuItem>Comments <SlBadge slot="suffix" variant="neutral" pill>4</SlBadge></SlMenuItem>
-    <SlMenuItem>Replies <SlBadge slot="suffix" variant="neutral" pill>12</SlBadge></SlMenuItem>
-  </SlMenu>
-);
-```
-
-[component-metadata:sl-badge]

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

@@ -1,35 +0,0 @@
-# Breadcrumb Item
-
-[component-header:sl-breadcrumb-item]
-
-Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
-
-```html preview
-<sl-breadcrumb>
-  <sl-breadcrumb-item>
-    <sl-icon slot="prefix" name="house"></sl-icon>
-    Home
-  </sl-breadcrumb-item>
-  <sl-breadcrumb-item>Clothing</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Shirts</sl-breadcrumb-item>
-</sl-breadcrumb>
-```
-
-```jsx react
-import { SlBreadcrumb, SlBreadcrumbItem, SlIcon } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlBreadcrumb>
-    <SlBreadcrumbItem>
-      <SlIcon slot="prefix" name="house"></SlIcon>
-      Home
-    </SlBreadcrumbItem>
-    <SlBreadcrumbItem>Clothing</SlBreadcrumbItem>
-    <SlBreadcrumbItem>Shirts</SlBreadcrumbItem>
-  </SlBreadcrumb>
-);
-```
-
-?> Additional demonstrations can be found in the [breadcrumb examples](/components/breadcrumb).
-
-[component-metadata:sl-breadcrumb-item]

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

@@ -1,266 +0,0 @@
-# Breadcrumb
-
-[component-header:sl-breadcrumb]
-
-Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
-
-Breadcrumbs are usually placed before a page's main content with the current page shown last to indicate the user's position in the navigation.
-
-```html preview
-<sl-breadcrumb>
-  <sl-breadcrumb-item>Catalog</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Clothing</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Women's</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Shirts &amp; Tops</sl-breadcrumb-item>
-</sl-breadcrumb>
-```
-
-```jsx react
-import { SlBreadcrumb, SlBreadcrumbItem } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlBreadcrumb>
-    <SlBreadcrumbItem>Catalog</SlBreadcrumbItem>
-    <SlBreadcrumbItem>Clothing</SlBreadcrumbItem>
-    <SlBreadcrumbItem>Women's</SlBreadcrumbItem>
-    <SlBreadcrumbItem>Shirts &amp; Tops</SlBreadcrumbItem>
-  </SlBreadcrumb>
-);
-```
-
-## Examples
-
-### Breadcrumb Links
-
-By default, breadcrumb items are rendered as buttons so you can use them to navigate single-page applications. In this case, you'll need to add event listeners to handle clicks.
-
-For websites, you'll probably want to use links instead. You can make any breadcrumb item a link by applying an `href` attribute to it. Now, when the user activates it, they'll be taken to the corresponding page — no event listeners required.
-
-```html preview
-<sl-breadcrumb>
-  <sl-breadcrumb-item href="https://example.com/home">
-    Homepage
-  </sl-breadcrumb-item>
-
-  <sl-breadcrumb-item href="https://example.com/home/services">
-    Our Services
-  </sl-breadcrumb-item>
-
-  <sl-breadcrumb-item href="https://example.com/home/services/digital">
-    Digital Media
-  </sl-breadcrumb-item>
-
-  <sl-breadcrumb-item href="https://example.com/home/services/digital/web-design">
-    Web Design
-  </sl-breadcrumb-item>
-</sl-breadcrumb>
-```
-
-```jsx react
-import { SlBreadcrumb, SlBreadcrumbItem } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlBreadcrumb>
-    <SlBreadcrumbItem href="https://example.com/home">
-      Homepage
-    </SlBreadcrumbItem>
-
-    <SlBreadcrumbItem href="https://example.com/home/services">
-      Our Services
-    </SlBreadcrumbItem>
-
-    <SlBreadcrumbItem href="https://example.com/home/services/digital">
-      Digital Media
-    </SlBreadcrumbItem>
-
-    <SlBreadcrumbItem href="https://example.com/home/services/digital/web-design">
-      Web Design
-    </SlBreadcrumbItem>
-  </SlBreadcrumb>
-);
-```
-
-### Custom Separators
-
-Use the `separator` slot to change the separator that goes between breadcrumb items. Icons work well, but you can also use text or an image.
-
-```html preview
-<sl-breadcrumb>
-  <sl-icon name="dot" slot="separator"></sl-icon>
-  <sl-breadcrumb-item>First</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Second</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Third</sl-breadcrumb-item> 
-</sl-breadcrumb>
-
-<br>
-
-<sl-breadcrumb>
-  <sl-icon name="arrow-right" slot="separator"></sl-icon>
-  <sl-breadcrumb-item>First</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Second</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Third</sl-breadcrumb-item> 
-</sl-breadcrumb>
-
-<br>
-
-<sl-breadcrumb>
-  <span slot="separator">/</span>
-  <sl-breadcrumb-item>First</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Second</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Third</sl-breadcrumb-item> 
-</sl-breadcrumb>
-```
-
-```jsx react
-import '@shoelace-style/shoelace/dist/components/icon/icon.js';
-import { SlBreadcrumb, SlBreadcrumbItem } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlBreadcrumb>
-      <sl-icon name="dot" slot="separator" />
-      <SlBreadcrumbItem>First</SlBreadcrumbItem>
-      <SlBreadcrumbItem>Second</SlBreadcrumbItem>
-      <SlBreadcrumbItem>Third</SlBreadcrumbItem> 
-    </SlBreadcrumb>
-
-    <br />
-
-    <SlBreadcrumb>
-      <sl-icon name="arrow-right" slot="separator" />
-      <SlBreadcrumbItem>First</SlBreadcrumbItem>
-      <SlBreadcrumbItem>Second</SlBreadcrumbItem>
-      <SlBreadcrumbItem>Third</SlBreadcrumbItem> 
-    </SlBreadcrumb>
-
-    <br />
-
-    <SlBreadcrumb>
-      <span slot="separator">/</span>
-      <SlBreadcrumbItem>First</SlBreadcrumbItem>
-      <SlBreadcrumbItem>Second</SlBreadcrumbItem>
-      <SlBreadcrumbItem>Third</SlBreadcrumbItem> 
-    </SlBreadcrumb>
-  </>
-);
-```
-
-### Prefixes
-
-Use the `prefix` slot to add content before any breadcrumb item.
-
-```html preview
-<sl-breadcrumb>
-  <sl-breadcrumb-item>
-    <sl-icon slot="prefix" name="house"></sl-icon>
-    Home
-  </sl-breadcrumb-item>
-  <sl-breadcrumb-item>Articles</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Traveling</sl-breadcrumb-item>
-</sl-breadcrumb>
-```
-
-```jsx react
-import { SlBreadcrumb, SlBreadcrumbItem, SlIcon } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlBreadcrumb>
-    <SlBreadcrumbItem>
-      <SlIcon slot="prefix" name="house" />
-      Home
-    </SlBreadcrumbItem>
-    <SlBreadcrumbItem>Articles</SlBreadcrumbItem>
-    <SlBreadcrumbItem>Traveling</SlBreadcrumbItem>
-  </SlBreadcrumb>
-);
-```
-
-### Suffixes
-
-Use the `suffix` slot to add content after any breadcrumb item.
-
-```html preview
-<sl-breadcrumb>
-  <sl-breadcrumb-item>Documents</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Policies</sl-breadcrumb-item>
-  <sl-breadcrumb-item>
-    Security
-    <sl-icon slot="suffix" name="shield-lock"></sl-icon>
-  </sl-breadcrumb-item>
-</sl-breadcrumb>
-```
-
-```jsx react
-import { SlBreadcrumb, SlBreadcrumbItem, SlIcon } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlBreadcrumb>
-    <SlBreadcrumbItem>Documents</SlBreadcrumbItem>
-    <SlBreadcrumbItem>Policies</SlBreadcrumbItem>
-    <SlBreadcrumbItem>
-      Security
-      <SlIcon slot="suffix" name="shield-lock"></SlIcon>
-    </SlBreadcrumbItem>
-  </SlBreadcrumb>
-);
-```
-
-### With Dropdowns
-
-Dropdown menus can be placed in a prefix or suffix slot to provide additional options.
-
-```html preview
-<sl-breadcrumb>
-  <sl-breadcrumb-item>Homepage</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Our Services</sl-breadcrumb-item>
-  <sl-breadcrumb-item>Digital Media</sl-breadcrumb-item>
-  <sl-breadcrumb-item>
-    Web Design
-    <sl-dropdown slot="suffix">
-      <sl-button slot="trigger" size="small" circle>
-        <sl-icon label="More options" name="three-dots"></sl-icon>
-      </sl-button>
-      <sl-menu>
-        <sl-menu-item checked>Web Design</sl-menu-item>
-        <sl-menu-item>Web Development</sl-menu-item>
-        <sl-menu-item>Marketing</sl-menu-item>
-      </sl-menu>
-    </sl-dropdown>    
-  </sl-breadcrumb-item>
-</sl-breadcrumb>
-```
-
-```jsx react
-import { 
-  SlBreadcrumb, 
-  SlBreadcrumbItem, 
-  SlButton,
-  SlDropdown,
-  SlIcon,
-  SlMenu,
-  SlMenuItem
-} from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlBreadcrumb>
-    <SlBreadcrumbItem>Homepage</SlBreadcrumbItem>
-    <SlBreadcrumbItem>Our Services</SlBreadcrumbItem>
-    <SlBreadcrumbItem>Digital Media</SlBreadcrumbItem>
-    <SlBreadcrumbItem>
-      Web Design
-      <SlDropdown slot="suffix">
-        <SlButton slot="trigger" size="small" circle>
-          <SlIcon label="More options" name="three-dots"></SlIcon>
-        </SlButton>
-        <SlMenu>
-          <SlMenuItem checked>Web Design</SlMenuItem>
-          <SlMenuItem>Web Development</SlMenuItem>
-          <SlMenuItem>Marketing</SlMenuItem>
-        </SlMenu>
-      </SlDropdown>    
-    </SlBreadcrumbItem>
-  </SlBreadcrumb>
-);
-```
-
-[component-metadata:sl-breadcrumb]