shoelace-rails-ui 0.1.0 → 0.1.1

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

@@ -1,105 +0,0 @@
-# Relative Time
-
-[component-header:sl-relative-time]
-
-Outputs a localized time phrase relative to the current date and time.
-
-Localization is handled by the browser's [`Intl.RelativeTimeFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat). No language packs are required.
-
-```html preview
-<!-- Shoelace 2 release date 🎉 -->
-<sl-relative-time date="2020-07-15T09:17:00-04:00"></sl-relative-time>
-```
-
-```jsx react
-import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlRelativeTime date="2020-07-15T09:17:00-04:00" />
-);
-```
-
-The `date` attribute determines when the date/time is calculated from. It must be a string that [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) can interpret or a [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object set via JavaScript.
-
-?> When using strings, avoid ambiguous dates such as `03/04/2020` which can be interpreted as March 4 or April 3 depending on the user's browser and locale. Instead, always use a valid [ISO 8601 date time string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#Date_Time_String_Format) to ensure the date will be parsed properly by all clients.
-
-!> The `Intl.RelativeTimeFormat` API is available [in all major browsers](https://caniuse.com/mdn-javascript_builtins_intl_relativetimeformat), but it only became available to Safari in version 14. If you need to support Safari 13, you'll need to [use a polyfill](https://github.com/catamphetamine/relative-time-format).
-
-## Examples
-
-### Keeping Time in Sync
-
-Use the `sync` attribute to update the displayed value automatically as time passes.
-
-```html preview
-<div class="relative-time-sync">
-  <sl-relative-time sync></sl-relative-time>
-</div>
-
-<script>
-  const container = document.querySelector('.relative-time-sync');
-  const relativeTime = container.querySelector('sl-relative-time');
-
-  relativeTime.date = new Date(new Date().getTime() - 60000);
-</script>
-```
-
-```jsx react
-import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react';
-
-const date = new Date(new Date().getTime() - 60000);
-
-const App = () => (
-  <SlRelativeTime date={date} sync />
-);
-```
-
-### Formatting Styles
-
-You can change how the time is displayed using the `format` attribute. Note that some locales may display the same values for `narrow` and `short` formats.
-
-```html preview
-<sl-relative-time date="2020-07-15T09:17:00-04:00" format="narrow"></sl-relative-time><br>
-<sl-relative-time date="2020-07-15T09:17:00-04:00" format="short"></sl-relative-time><br>
-<sl-relative-time date="2020-07-15T09:17:00-04:00" format="long"></sl-relative-time>
-```
-
-```jsx react
-import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlRelativeTime date="2020-07-15T09:17:00-04:00" format="narrow" /><br />
-    <SlRelativeTime date="2020-07-15T09:17:00-04:00" format="short" /><br />
-    <SlRelativeTime date="2020-07-15T09:17:00-04:00" format="long" />
-  </>
-);
-```
-
-### Localization
-
-Use the `lang` attribute to set the desired locale.
-
-```html preview
-English: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="en-US"></sl-relative-time><br>
-Chinese: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="zh-CN"></sl-relative-time><br>
-German: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="de"></sl-relative-time><br>
-Greek: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="el"></sl-relative-time><br>
-Russian: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="ru"></sl-relative-time>
-```
-
-```jsx react
-import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    English: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="en-US" /><br />
-    Chinese: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="zh-CN" /><br />
-    German: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="de" /><br />
-    Greek: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="el" /><br />
-    Russian: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="ru" />
-  </>
-);
-```
-
-[component-metadata:sl-relative-time]

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

@@ -1,68 +0,0 @@
-# Resize Observer
-
-[component-header:sl-resize-observer]
-
-The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
-
-The resize observer will report changes to the dimensions of the elements it wraps through the `sl-resize` event. When emitted, a collection of [`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry) objects will be attached to `event.detail` that contains the target element and information about its dimensions.
-
-```html preview
-<div class="resize-observer-overview">
-  <sl-resize-observer>
-    <div>
-      Resize this box and watch the console 👉
-    </div>
-  </sl-resize-observer>
-</div>
-
-<script>
-  const container = document.querySelector('.resize-observer-overview');
-  const resizeObserver = container.querySelector('sl-resize-observer');
-
-  resizeObserver.addEventListener('sl-resize', event => {
-    console.log(event.detail);
-  });
-</script>
-
-<style>
-  .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;
-  }
-</style>
-```
-
-```jsx react
-import { SlResizeObserver } 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 App = () => (
-  <>
-    <div className="resize-observer-overview">
-      <SlResizeObserver onSlResize={event => console.log(event.detail)}>
-        <div>
-          Resize this box and watch the console 👉
-        </div>
-      </SlResizeObserver>
-    </div>
-
-    <style>{css}</style>
-  </>
-);
-```
-
-[component-metadata:sl-resize-observer]

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

@@ -1,73 +0,0 @@
-# Responsive Media
-
-[component-header:sl-responsive-media]
-
-Displays media in the desired aspect ratio.
-
-You can slot in any [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element), including `<iframe>`, `<img>`, and `<video>`. As the element's width changes, its height will resize proportionally. Only one element should be slotted into the container. The default aspect ratio is `16:9`.
-
-```html preview
-<sl-responsive-media>
-  <img src="https://images.unsplash.com/photo-1541427468627-a89a96e5ca1d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1800&q=80" alt="A train riding through autumn foliage with mountains in the distance.">
-</sl-responsive-media>
-```
-
-```jsx react
-import { SlResponsiveMedia } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlResponsiveMedia>
-    <img 
-      src="https://images.unsplash.com/photo-1541427468627-a89a96e5ca1d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1800&q=80"
-      alt="A train riding through autumn foliage with mountains in the distance."
-    />
-  </SlResponsiveMedia>
-);
-```
-
-## Examples
-
-### Responsive Images
-
-The following image maintains a `4:3` aspect ratio as its container is resized.
-
-```html preview
-<sl-responsive-media aspect-ratio="4:3">
-  <img src="https://images.unsplash.com/photo-1473186578172-c141e6798cf4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1800&q=80" alt="Two blue chairs on a sandy beach.">
-</sl-responsive-media>
-```
-
-```jsx react
-import { SlResponsiveMedia } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlResponsiveMedia aspect-ratio="4:3">
-    <img 
-      src="https://images.unsplash.com/photo-1473186578172-c141e6798cf4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1800&q=80" 
-      alt="Two blue chairs on a sandy beach."
-    />
-  </SlResponsiveMedia>
-);
-```
-
-### Responsive Videos
-
-The following video is embedded using an `iframe` and maintains a `16:9` aspect ratio as its container is resized.
-
-```html preview
-<sl-responsive-media aspect-ratio="16:9">
-  <iframe src="https://player.vimeo.com/video/1053647?title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
-</sl-responsive-media>
-```
-
-```jsx react
-import { SlResponsiveMedia } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlResponsiveMedia aspect-ratio="16:9">
-    <iframe src="https://player.vimeo.com/video/1053647?title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen />
-  </SlResponsiveMedia>
-);
-```
-
-[component-metadata:sl-responsive-media]