shoelace-rails-ui 0.1.0

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

@@ -0,0 +1,184 @@
+# Textarea
+
+[component-header:sl-textarea]
+
+Textareas collect data from the user and allow multiple lines of text.
+
+```html preview
+<sl-textarea></sl-textarea>
+```
+
+```jsx react
+import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTextarea />
+);
+```
+
+?> 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
+
+### Rows
+
+Use the `rows` attribute to change the number of text rows that get shown.
+
+```html preview
+<sl-textarea rows="2"></sl-textarea>
+```
+
+```jsx react
+import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTextarea rows={2} />
+);
+```
+
+### Placeholders
+
+Use the `placeholder` attribute to add a placeholder.
+
+```html preview
+<sl-textarea placeholder="Type something"></sl-textarea>
+```
+
+```jsx react
+import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTextarea placeholder="Type something" />
+);
+```
+
+### Filled Textareas
+
+Add the `filled` attribute to draw a filled textarea.
+
+```html preview
+<sl-textarea placeholder="Type something" filled></sl-textarea>
+```
+
+```jsx react
+import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTextarea placeholder="Type something" filled />
+);
+```
+
+### Disabled
+
+Use the `disabled` attribute to disable a textarea.
+
+```html preview
+<sl-textarea placeholder="Textarea" disabled></sl-textarea>
+```
+
+```jsx react
+import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTextarea placeholder="Textarea" disabled />
+);
+```
+
+### Sizes
+
+Use the `size` attribute to change a textarea's size.
+
+```html preview
+<sl-textarea placeholder="Small" size="small"></sl-textarea>
+<br>
+<sl-textarea placeholder="Medium" size="medium"></sl-textarea>
+<br>
+<sl-textarea placeholder="Large" size="large"></sl-textarea>
+```
+
+```jsx react
+import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlTextarea placeholder="Small" size="small"></SlTextarea>
+    <br />
+    <SlTextarea placeholder="Medium" size="medium"></SlTextarea>
+    <br />
+    <SlTextarea placeholder="Large" size="large"></SlTextarea>
+  </>
+);
+```
+
+### Labels
+
+Use the `label` attribute to give the textarea an accessible label. For labels that contain HTML, use the `label` slot instead.
+
+```html preview
+<sl-textarea label="Comments"></sl-textarea>
+```
+
+```jsx react
+import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTextarea label="Comments" />
+);
+```
+
+### Help Text
+
+Add descriptive help text to a textarea with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
+
+```html preview
+<sl-textarea 
+  label="Feedback" 
+  help-text="Please tell us what you think."
+>
+</sl-textarea>
+```
+
+```jsx react
+import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTextarea
+    label="Feedback"
+    help-text="Please tell us what you think."
+  />
+);
+```
+
+### Prevent Resizing
+
+By default, textareas can be resized vertically by the user. To prevent resizing, set the `resize` attribute to `none`.
+
+```html preview
+<sl-textarea resize="none"></sl-textarea>
+```
+
+```jsx react
+import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTextarea resize="none" />
+);
+```
+
+### Expand with Content
+
+Textareas will automatically resize to expand to fit their content when `resize` is set to `auto`.
+
+```html preview
+<sl-textarea resize="auto"></sl-textarea>
+```
+
+```jsx react
+import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTextarea resize="auto" />
+);
+```
+
+[component-metadata:sl-textarea]

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

@@ -0,0 +1,410 @@
+# Tooltip
+
+[component-header:sl-tooltip]
+
+Tooltips display additional information based on a specific action.
+
+A tooltip's target is its _first child element_, so you should only wrap one element inside of the tooltip. If you need the tooltip to show up for multiple elements, nest them inside a container first.
+
+Tooltips use `display: contents` so they won't interfere with how elements are positioned in a flex or grid layout.
+
+```html preview
+<sl-tooltip content="This is a tooltip">
+  <sl-button>Hover Me</sl-button>
+</sl-tooltip>
+```
+
+```jsx react
+import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTooltip content="This is a tooltip">
+    <SlButton>Hover Me</SlButton>
+  </SlTooltip>  
+);
+```
+
+## Examples
+
+### Placement
+
+Use the `placement` attribute to set the preferred placement of the tooltip.
+
+```html preview
+<div class="tooltip-placement-example">
+  <div class="tooltip-placement-example-row">
+    <sl-tooltip content="top-start" placement="top-start">
+      <sl-button></sl-button>
+    </sl-tooltip>
+
+    <sl-tooltip content="top" placement="top">
+      <sl-button></sl-button>
+    </sl-tooltip>
+
+    <sl-tooltip content="top-end" placement="top-end">
+      <sl-button></sl-button>
+    </sl-tooltip>
+  </div>
+
+  <div class="tooltip-placement-example-row">
+    <sl-tooltip content="left-start" placement="left-start">
+      <sl-button></sl-button>
+    </sl-tooltip>
+
+    <sl-tooltip content="right-start" placement="right-start">
+      <sl-button></sl-button>
+    </sl-tooltip>
+  </div>
+
+  <div class="tooltip-placement-example-row">
+    <sl-tooltip content="left" placement="left">
+      <sl-button></sl-button>
+    </sl-tooltip>
+
+    <sl-tooltip content="right" placement="right">
+      <sl-button></sl-button>
+    </sl-tooltip>
+  </div>
+
+  <div class="tooltip-placement-example-row">
+    <sl-tooltip content="left-end" placement="left-end">
+      <sl-button></sl-button>
+    </sl-tooltip>
+
+    <sl-tooltip content="right-end" placement="right-end">
+      <sl-button></sl-button>
+    </sl-tooltip>
+  </div>
+
+  <div class="tooltip-placement-example-row">
+    <sl-tooltip content="bottom-start" placement="bottom-start">
+      <sl-button></sl-button>
+    </sl-tooltip>
+
+    <sl-tooltip content="bottom" placement="bottom">
+      <sl-button></sl-button>
+    </sl-tooltip>
+
+    <sl-tooltip content="bottom-end" placement="bottom-end">
+      <sl-button></sl-button>
+    </sl-tooltip>
+  </div>
+</div>
+
+<style>
+  .tooltip-placement-example {
+    width: 250px;
+  }
+
+  .tooltip-placement-example-row:after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+
+  .tooltip-placement-example sl-button {
+    float: left;
+    width: 2.5rem;
+    margin-right: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .tooltip-placement-example-row:nth-child(1) sl-tooltip:first-child sl-button,
+  .tooltip-placement-example-row:nth-child(5) sl-tooltip:first-child sl-button {
+    margin-left: calc(40px + 0.25rem);
+  }
+
+  .tooltip-placement-example-row:nth-child(2) sl-tooltip:nth-child(2) sl-button,
+  .tooltip-placement-example-row:nth-child(3) sl-tooltip:nth-child(2) sl-button,
+  .tooltip-placement-example-row:nth-child(4) sl-tooltip:nth-child(2) sl-button {
+    margin-left: calc((40px * 3) + (0.25rem * 3));
+  }
+</style>
+```
+
+```jsx react
+import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .tooltip-placement-example {
+    width: 250px;
+  }
+
+  .tooltip-placement-example-row:after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+
+  .tooltip-placement-example sl-button {
+    float: left;
+    width: 2.5rem;
+    margin-right: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .tooltip-placement-example-row:nth-child(1) sl-tooltip:first-child sl-button,
+  .tooltip-placement-example-row:nth-child(5) sl-tooltip:first-child sl-button {
+    margin-left: calc(40px + 0.25rem);
+  }
+
+  .tooltip-placement-example-row:nth-child(2) sl-tooltip:nth-child(2) sl-button,
+  .tooltip-placement-example-row:nth-child(3) sl-tooltip:nth-child(2) sl-button,
+  .tooltip-placement-example-row:nth-child(4) sl-tooltip:nth-child(2) sl-button {
+    margin-left: calc((40px * 3) + (0.25rem * 3));
+  }
+`;
+
+const App = () => (
+  <>
+    <div className="tooltip-placement-example">
+      <div className="tooltip-placement-example-row">
+        <SlTooltip content="top-start" placement="top-start">
+          <SlButton />
+        </SlTooltip>
+
+        <SlTooltip content="top" placement="top">
+          <SlButton />
+        </SlTooltip>
+
+        <SlTooltip content="top-end" placement="top-end">
+          <SlButton />
+        </SlTooltip>
+      </div>
+
+      <div className="tooltip-placement-example-row">
+        <SlTooltip content="left-start" placement="left-start">
+          <SlButton />
+        </SlTooltip>
+
+        <SlTooltip content="right-start" placement="right-start">
+          <SlButton />
+        </SlTooltip>
+      </div>
+
+      <div className="tooltip-placement-example-row">
+        <SlTooltip content="left" placement="left">
+          <SlButton />
+        </SlTooltip>
+
+        <SlTooltip content="right" placement="right">
+          <SlButton />
+        </SlTooltip>
+      </div>
+
+      <div className="tooltip-placement-example-row">
+        <SlTooltip content="left-end" placement="left-end">
+          <SlButton />
+        </SlTooltip>
+
+        <SlTooltip content="right-end" placement="right-end">
+          <SlButton />
+        </SlTooltip>
+      </div>
+
+      <div className="tooltip-placement-example-row">
+        <SlTooltip content="bottom-start" placement="bottom-start">
+          <SlButton />
+        </SlTooltip>
+
+        <SlTooltip content="bottom" placement="bottom">
+          <SlButton />
+        </SlTooltip>
+
+        <SlTooltip content="bottom-end" placement="bottom-end">
+          <SlButton />
+        </SlTooltip>
+      </div>
+    </div>
+
+    <style>{css}</style>
+  </>
+);
+```
+
+### Click Trigger
+
+Set the `trigger` attribute to `click` to toggle the tooltip on click instead of hover.
+
+```html preview
+<sl-tooltip content="Click again to dismiss" trigger="click">
+  <sl-button>Click to Toggle</sl-button>
+</sl-tooltip>
+```
+
+```jsx react
+import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTooltip content="Click again to dismiss" trigger="click">
+    <SlButton>Click to Toggle</SlButton>
+  </SlTooltip>  
+);
+```
+
+### Manual Trigger
+
+Tooltips can be controller programmatically by setting the `trigger` attribute to `manual`. Use the `open` attribute to control when the tooltip is shown.
+
+```html preview
+<sl-button style="margin-right: 4rem;">Toggle Manually</sl-button>
+
+<sl-tooltip content="This is an avatar" trigger="manual" class="manual-tooltip">
+  <sl-avatar></sl-avatar>
+</sl-tooltip>
+
+<script>
+  const tooltip = document.querySelector('.manual-tooltip');
+  const toggle = tooltip.previousElementSibling;
+
+  toggle.addEventListener('click', () => (tooltip.open = !tooltip.open));
+</script>
+```
+
+```jsx react
+import { useState } from 'react';
+import { SlAvatar, SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <SlButton
+        style={{ marginRight: '4rem' }}
+        onClick={() => setOpen(!open)}
+      >
+        Toggle Manually
+      </SlButton>
+
+      <SlTooltip open={open} content="This is an avatar" trigger="manual">
+        <SlAvatar />
+      </SlTooltip>
+    </>
+  );
+};
+```
+
+### Remove Arrows
+
+You can control the size of tooltip arrows by overriding the `--sl-tooltip-arrow-size` design token.
+
+```html preview
+<div style="--sl-tooltip-arrow-size: 0;">
+  <sl-tooltip content="This is a tooltip">
+    <sl-button>Above</sl-button>
+  </sl-tooltip>
+
+  <sl-tooltip content="This is a tooltip" placement="bottom">
+    <sl-button>Below</sl-button>
+  </sl-tooltip>
+</div>
+```
+
+```jsx react
+import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <div style={{ '--sl-tooltip-arrow-size': '0' }}>
+    <SlTooltip content="This is a tooltip">
+      <SlButton>Above</SlButton>
+    </SlTooltip>
+
+    <SlTooltip content="This is a tooltip" placement="bottom">
+      <SlButton>Below</SlButton>
+    </SlTooltip>
+  </div>
+);
+```
+
+To override it globally, set it in a root block in your stylesheet after the Shoelace stylesheet is loaded.
+
+```css
+:root {
+  --sl-tooltip-arrow-size: 0;
+}
+```
+
+### HTML in Tooltips
+
+Use the `content` slot to create tooltips with HTML content. Tooltips are designed only for text and presentational elements. Avoid placing interactive content, such as buttons, links, and form controls, in a tooltip.
+
+```html preview
+<sl-tooltip>
+  <div slot="content">
+    I'm not <strong>just</strong> a tooltip, I'm a <em>tooltip</em> with HTML!
+  </div>
+  
+  <sl-button>Hover me</sl-button>
+</sl-tooltip>
+```
+
+```jsx react
+import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTooltip content="This is a tooltip">
+    <div slot="content">
+      I'm not <strong>just</strong> a tooltip, I'm a <em>tooltip</em> with HTML!
+    </div>
+
+    <SlButton>Hover Me</SlButton>
+  </SlTooltip>  
+);
+```
+
+### Hoisting
+
+Tooltips will be clipped if they're inside a container that has `overflow: auto|hidden|scroll`. The `hoist` attribute forces the tooltip to use a fixed positioning strategy, allowing it to break out of the container. In this case, the tooltip will be positioned relative to its containing block, which is usually the viewport unless an ancestor uses a `transform`, `perspective`, or `filter`. [Refer to this page](https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed) for more details.
+
+```html preview
+<div class="tooltip-hoist">
+  <sl-tooltip content="This is a tooltip">
+    <sl-button>No Hoist</sl-button>
+  </sl-tooltip>
+
+  <sl-tooltip content="This is a tooltip" hoist>
+    <sl-button>Hoist</sl-button>
+  </sl-tooltip>
+</div>
+
+<style>
+  .tooltip-hoist {
+    border: solid 2px var(--sl-panel-border-color);
+    overflow: hidden;
+    padding: var(--sl-spacing-medium);
+    position: relative;
+  }
+</style>
+```
+
+```jsx react
+import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .tooltip-hoist {
+    border: solid 2px var(--sl-panel-border-color);
+    overflow: hidden;
+    padding: var(--sl-spacing-medium);
+    position: relative;
+  }
+`;
+
+const App = () => (
+  <>
+    <div class="tooltip-hoist">
+      <SlTooltip content="This is a tooltip">
+        <SlButton>No Hoist</SlButton>
+      </SlTooltip>
+
+      <SlTooltip content="This is a tooltip" hoist>
+        <SlButton>Hoist</SlButton>
+      </SlTooltip>
+    </div>
+
+    <style>{css}</style>
+  </>
+);
+```
+
+[component-metadata:sl-tooltip]

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

@@ -0,0 +1,47 @@
+# Visually Hidden
+
+[component-header:sl-visually-hidden]
+
+The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
+
+According to [The A11Y Project](https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/), "there are real world situations where visually hiding content may be appropriate, while the content should remain available to assistive technologies, such as screen readers. For instance, hiding a search field's label as a common magnifying glass icon is used in its stead."
+
+Since visually hidden content can receive focus when tabbing, the element will become visible when something inside receives focus. This behavior is intentional, as sighted keyboards user won't be able to determine where the focus indicator is without it.
+
+```html preview
+<div style="min-height: 100px;">
+  <sl-visually-hidden>
+    <a href="#">Skip to main content</a>
+  </sl-visually-hidden>
+</div>
+```
+
+## Examples
+
+### Links That Open in New Windows
+
+In this example, the link will open a new window. Screen readers will announce "opens in a new window" even though the text content isn't visible to sighted users.
+
+```html preview
+<a href="https://example.com/" target="_blank">
+  Visit External Page
+  <sl-icon name="box-arrow-up-right"></sl-icon>
+  <sl-visually-hidden>opens in a new window</sl-visually-hidden>
+</a>
+```
+
+### Content Conveyed By Context
+
+Adding a title or label may seem redundant at times, but they're very helpful for unsighted users. Rather than omit them, you can provide context to unsighted users with visually hidden content.
+
+```html preview
+<sl-card style="width: 100%; max-width: 360px;">
+  <header>
+    <sl-visually-hidden>Personal Info</sl-visually-hidden>
+  </header>
+  <sl-input label="Name" style="margin-bottom: .5rem;"></sl-input>
+  <sl-input label="Email" type="email"></sl-input>
+</sl-card>
+```
+
+[component-metadata:sl-visually-hidden]

data/remote-src/2.0.0.beta64/shoelace-next/docs/frameworks/angular.md

@@ -0,0 +1,46 @@
+# Angular
+
+Angular [plays nice](https://custom-elements-everywhere.com/#angular) with custom elements, so you can use Shoelace in your Angular apps with ease.
+
+## Installation
+
+To add Shoelace to your Angular app, install the package from npm.
+
+```bash
+npm install @shoelace-style/shoelace
+```
+
+Next, [include a theme](/getting-started/themes) and set the [base path](/getting-started/installation#setting-the-base-path) for icons and other assets. In this example, we'll import the light theme and use the CDN as a base path.
+
+```jsx
+import '@shoelace-style/shoelace/dist/themes/light.css';
+import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path';
+
+setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/');
+```
+
+?> If you'd rather not use the CDN for assets, you can create a build task that copies `node_modules/@shoelace-style/shoelace/dist/assets` into a public folder in your app. Then you can point the base path to that folder instead.
+
+## Configuration
+
+Then make sure to apply the custom elements schema as shown below.
+
+```js
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule],
+  providers: [],
+  bootstrap: [AppComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class AppModule {}
+```
+
+Now you can start using Shoelace components in your app!
+
+?> Are you using Shoelace with Angular? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/angular.md)