mirror
/
shoelace
kopia lustrzana https://github.com/shoelace-style/shoelace
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

add prettier and eslint to markdown

pull/667/head
Cory LaViska 2022-03-02 10:10:41 -05:00
rodzic 1db7aa3f26
commit 80a9d05ff3
65 zmienionych plików z 1740 dodań i 1321 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

2
.prettierignore
Wyświetl plik

@ -1,10 +1,8 @@
*.hbs *.hbs
*.md
.cache .cache
.github .github
cspell.json cspell.json
dist dist
docs/*.md
docs/search.json docs/search.json
src/components/icon/icons src/components/icon/icons
src/react/index.ts src/react/index.ts

9
docs/_sidebar.md
Wyświetl plik

@ -1,4 +1,5 @@
- Getting Started - Getting Started
- [Overview](/) - [Overview](/)
- [Installation](/getting-started/installation) - [Installation](/getting-started/installation)
- [Usage](/getting-started/usage) - [Usage](/getting-started/usage)
@ -8,17 +9,20 @@
- [Localization](/getting-started/localization) - [Localization](/getting-started/localization)
- Frameworks - Frameworks
- [React](/frameworks/react) - [React](/frameworks/react)
- [Vue](/frameworks/vue) - [Vue](/frameworks/vue)
- [Angular](/frameworks/angular) - [Angular](/frameworks/angular)
- Resources - Resources
- [Community](/resources/community) - [Community](/resources/community)
- [Accessibility](/resources/accessibility) - [Accessibility](/resources/accessibility)
- [Contributing](/resources/contributing) - [Contributing](/resources/contributing)
- [Changelog](/resources/changelog) - [Changelog](/resources/changelog)
- Components - Components
- [Alert](/components/alert) - [Alert](/components/alert)
- [Avatar](/components/avatar) - [Avatar](/components/avatar)
- [Badge](/components/badge) - [Badge](/components/badge)
@ -62,6 +66,7 @@
<!--plop:component--> <!--plop:component-->
- Utilities - Utilities
- [Animated Image](/components/animated-image) - [Animated Image](/components/animated-image)
- [Animation](/components/animation) - [Animation](/components/animation)
- [Format Bytes](/components/format-bytes) - [Format Bytes](/components/format-bytes)
@ -75,6 +80,7 @@
- [Visually Hidden](/components/visually-hidden) - [Visually Hidden](/components/visually-hidden)
- Design Tokens - Design Tokens
- [Typography](/tokens/typography) - [Typography](/tokens/typography)
- [Color](/tokens/color) - [Color](/tokens/color)
- [Spacing](/tokens/spacing) - [Spacing](/tokens/spacing)
@ -84,6 +90,7 @@
- [Z-index](/tokens/z-index) - [Z-index](/tokens/z-index)
- Tutorials - Tutorials
- [Integrating with Laravel](/tutorials/integrating-with-laravel) - [Integrating with Laravel](/tutorials/integrating-with-laravel)
- [Integrating with NextJS](/tutorials/integrating-with-nextjs) - [Integrating with NextJS](/tutorials/integrating-with-nextjs)
- [Integrating with Rails](/tutorials/integrating-with-rails) - [Integrating with Rails](/tutorials/integrating-with-rails)

102
docs/components/alert.md
Wyświetl plik

@ -33,40 +33,40 @@ Set the `variant` attribute to change the alert's variant.
```html preview ```html preview
<sl-alert variant="primary" open> <sl-alert variant="primary" open>
<sl-icon slot="icon" name="info-circle"></sl-icon> <sl-icon slot="icon" name="info-circle"></sl-icon>
<strong>This is super informative</strong><br> <strong>This is super informative</strong><br />
You can tell by how pretty the alert is. You can tell by how pretty the alert is.
</sl-alert> </sl-alert>
<br> <br />
<sl-alert variant="success" open> <sl-alert variant="success" open>
<sl-icon slot="icon" name="check2-circle"></sl-icon> <sl-icon slot="icon" name="check2-circle"></sl-icon>
<strong>Your changes have been saved</strong><br> <strong>Your changes have been saved</strong><br />
You can safely exit the app now. You can safely exit the app now.
</sl-alert> </sl-alert>
<br> <br />
<sl-alert variant="neutral" open> <sl-alert variant="neutral" open>
<sl-icon slot="icon" name="gear"></sl-icon> <sl-icon slot="icon" name="gear"></sl-icon>
<strong>Your settings have been updated</strong><br> <strong>Your settings have been updated</strong><br />
Settings will take affect on next login. Settings will take affect on next login.
</sl-alert> </sl-alert>
<br> <br />
<sl-alert variant="warning" open> <sl-alert variant="warning" open>
<sl-icon slot="icon" name="exclamation-triangle"></sl-icon> <sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
<strong>Your session has ended</strong><br> <strong>Your session has ended</strong><br />
Please login again to continue. Please login again to continue.
</sl-alert> </sl-alert>
<br> <br />
<sl-alert variant="danger" open> <sl-alert variant="danger" open>
<sl-icon slot="icon" name="exclamation-octagon"></sl-icon> <sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
<strong>Your account has been deleted</strong><br> <strong>Your account has been deleted</strong><br />
We're very sorry to see you go! We're very sorry to see you go!
</sl-alert> </sl-alert>
``` ```
@ -77,7 +77,8 @@ const App = () => (
<> <>
<SlAlert variant="primary" open> <SlAlert variant="primary" open>
<SlIcon slot="icon" name="info-circle" /> <SlIcon slot="icon" name="info-circle" />
<strong>This is super informative</strong><br /> <strong>This is super informative</strong>
<br />
You can tell by how pretty the alert is. You can tell by how pretty the alert is.
</SlAlert> </SlAlert>
@ -85,7 +86,8 @@ const App = () => (
<SlAlert variant="success" open> <SlAlert variant="success" open>
<SlIcon slot="icon" name="check2-circle" /> <SlIcon slot="icon" name="check2-circle" />
<strong>Your changes have been saved</strong><br /> <strong>Your changes have been saved</strong>
<br />
You can safely exit the app now. You can safely exit the app now.
</SlAlert> </SlAlert>
@ -93,7 +95,8 @@ const App = () => (
<SlAlert variant="neutral" open> <SlAlert variant="neutral" open>
<SlIcon slot="icon" name="gear" /> <SlIcon slot="icon" name="gear" />
<strong>Your settings have been updated</strong><br /> <strong>Your settings have been updated</strong>
<br />
Settings will take affect on next login. Settings will take affect on next login.
</SlAlert> </SlAlert>
@ -101,7 +104,8 @@ const App = () => (
<SlAlert variant="warning" open> <SlAlert variant="warning" open>
<SlIcon slot="icon" name="exclamation-triangle" /> <SlIcon slot="icon" name="exclamation-triangle" />
<strong>Your session has ended</strong><br /> <strong>Your session has ended</strong>
<br />
Please login again to continue. Please login again to continue.
</SlAlert> </SlAlert>
@ -109,8 +113,9 @@ const App = () => (
<SlAlert variant="danger" open> <SlAlert variant="danger" open>
<SlIcon slot="icon" name="exclamation-octagon" /> <SlIcon slot="icon" name="exclamation-octagon" />
<strong>Your account has been deleted</strong><br /> <strong>Your account has been deleted</strong>
We're very sorry to see you go! <br />
We're very sorry to see you go!
</SlAlert> </SlAlert>
</> </>
); );
@ -129,7 +134,7 @@ Add the `closable` attribute to show a close button that will hide the alert.
<script> <script>
const alert = document.querySelector('.alert-closable'); const alert = document.querySelector('.alert-closable');
alert.addEventListener('sl-after-hide', () => { alert.addEventListener('sl-after-hide', () => {
setTimeout(() => alert.open = true, 2000); setTimeout(() => (alert.open = true), 2000);
}); });
</script> </script>
``` ```
@ -147,11 +152,7 @@ const App = () => {
} }
return ( return (
<SlAlert <SlAlert open={open} closable onSlAfterHide={handleHide}>
open={open}
closable
onSlAfterHide={handleHide}
>
<SlIcon slot="icon" name="info-circle" /> <SlIcon slot="icon" name="info-circle" />
You can close this alert any time! You can close this alert any time!
</SlAlert> </SlAlert>
@ -164,9 +165,7 @@ const App = () => {
Icons are optional. Simply omit the `icon` slot if you don't want them. Icons are optional. Simply omit the `icon` slot if you don't want them.
```html preview ```html preview
<sl-alert variant="primary" open> <sl-alert variant="primary" open> Nothing fancy here, just a simple alert. </sl-alert>
Nothing fancy here, just a simple alert.
</sl-alert>
``` ```
```jsx react ```jsx react
@ -210,11 +209,7 @@ Set the `duration` attribute to automatically hide an alert after a period of ti
```jsx react ```jsx react
import { useState } from 'react'; import { useState } from 'react';
import { import { SlAlert, SlButton, SlIcon } from '@shoelace-style/shoelace/dist/react';
SlAlert,
SlButton,
SlIcon
} from '@shoelace-style/shoelace/dist/react';
const css = ` const css = `
.alert-duration sl-alert { .alert-duration sl-alert {
@ -228,15 +223,11 @@ const App = () => {
return ( return (
<> <>
<div className="alert-duration"> <div className="alert-duration">
<SlButton variant="primary" onClick={() => setOpen(true)}>Show Alert</SlButton> <SlButton variant="primary" onClick={() => setOpen(true)}>
Show Alert
</SlButton>
<SlAlert <SlAlert variant="primary" duration="3000" open={open} closable onSlAfterHide={() => setOpen(false)}>
variant="primary"
duration="3000"
open={open}
closable
onSlAfterHide={() => setOpen(false)}
>
<SlIcon slot="icon" name="info-circle" /> <SlIcon slot="icon" name="info-circle" />
This alert will automatically hide itself after three seconds, unless you interact with it. This alert will automatically hide itself after three seconds, unless you interact with it.
</SlAlert> </SlAlert>
@ -261,34 +252,34 @@ You should always use the `closable` attribute so users can dismiss the notifica
<sl-button variant="neutral">Neutral</sl-button> <sl-button variant="neutral">Neutral</sl-button>
<sl-button variant="warning">Warning</sl-button> <sl-button variant="warning">Warning</sl-button>
<sl-button variant="danger">Danger</sl-button> <sl-button variant="danger">Danger</sl-button>
<sl-alert variant="primary" duration="3000" closable> <sl-alert variant="primary" duration="3000" closable>
<sl-icon slot="icon" name="info-circle"></sl-icon> <sl-icon slot="icon" name="info-circle"></sl-icon>
<strong>This is super informative</strong><br> <strong>This is super informative</strong><br />
You can tell by how pretty the alert is. You can tell by how pretty the alert is.
</sl-alert> </sl-alert>
<sl-alert variant="success" duration="3000" closable> <sl-alert variant="success" duration="3000" closable>
<sl-icon slot="icon" name="check2-circle"></sl-icon> <sl-icon slot="icon" name="check2-circle"></sl-icon>
<strong>Your changes have been saved</strong><br> <strong>Your changes have been saved</strong><br />
You can safely exit the app now. You can safely exit the app now.
</sl-alert> </sl-alert>
<sl-alert variant="neutral" duration="3000" closable> <sl-alert variant="neutral" duration="3000" closable>
<sl-icon slot="icon" name="gear"></sl-icon> <sl-icon slot="icon" name="gear"></sl-icon>
<strong>Your settings have been updated</strong><br> <strong>Your settings have been updated</strong><br />
Settings will take affect on next login. Settings will take affect on next login.
</sl-alert> </sl-alert>
<sl-alert variant="warning" duration="3000" closable> <sl-alert variant="warning" duration="3000" closable>
<sl-icon slot="icon" name="exclamation-triangle"></sl-icon> <sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
<strong>Your session has ended</strong><br> <strong>Your session has ended</strong><br />
Please login again to continue. Please login again to continue.
</sl-alert> </sl-alert>
<sl-alert variant="danger" duration="3000" closable> <sl-alert variant="danger" duration="3000" closable>
<sl-icon slot="icon" name="exclamation-octagon"></sl-icon> <sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
<strong>Your account has been deleted</strong><br> <strong>Your account has been deleted</strong><br />
We're very sorry to see you go! We're very sorry to see you go!
</sl-alert> </sl-alert>
</div> </div>
@ -307,11 +298,7 @@ You should always use the `closable` attribute so users can dismiss the notifica
```jsx react ```jsx react
import { useRef } from 'react'; import { useRef } from 'react';
import { import { SlAlert, SlButton, SlIcon } from '@shoelace-style/shoelace/dist/react';
SlAlert,
SlButton,
SlIcon
} from '@shoelace-style/shoelace/dist/react';
function showToast(alert) { function showToast(alert) {
alert.toast(); alert.toast();
@ -348,31 +335,36 @@ const App = () => {
<SlAlert ref={primary} variant="primary" duration="3000" closable> <SlAlert ref={primary} variant="primary" duration="3000" closable>
<SlIcon slot="icon" name="info-circle" /> <SlIcon slot="icon" name="info-circle" />
<strong>This is super informative</strong><br /> <strong>This is super informative</strong>
<br />
You can tell by how pretty the alert is. You can tell by how pretty the alert is.
</SlAlert> </SlAlert>
<SlAlert ref={success} variant="success" duration="3000" closable> <SlAlert ref={success} variant="success" duration="3000" closable>
<SlIcon slot="icon" name="check2-circle" /> <SlIcon slot="icon" name="check2-circle" />
<strong>Your changes have been saved</strong><br /> <strong>Your changes have been saved</strong>
<br />
You can safely exit the app now. You can safely exit the app now.
</SlAlert> </SlAlert>
<SlAlert ref={neutral} variant="neutral" duration="3000" closable> <SlAlert ref={neutral} variant="neutral" duration="3000" closable>
<SlIcon slot="icon" name="gear" /> <SlIcon slot="icon" name="gear" />
<strong>Your settings have been updated</strong><br /> <strong>Your settings have been updated</strong>
<br />
Settings will take affect on next login. Settings will take affect on next login.
</SlAlert> </SlAlert>
<SlAlert ref={warning} variant="warning" duration="3000" closable> <SlAlert ref={warning} variant="warning" duration="3000" closable>
<SlIcon slot="icon" name="exclamation-triangle" /> <SlIcon slot="icon" name="exclamation-triangle" />
<strong>Your session has ended</strong><br /> <strong>Your session has ended</strong>
<br />
Please login again to continue. Please login again to continue.
</SlAlert> </SlAlert>
<SlAlert ref={danger} variant="danger" duration="3000" closable> <SlAlert ref={danger} variant="danger" duration="3000" closable>
<SlIcon slot="icon" name="exclamation-octagon" /> <SlIcon slot="icon" name="exclamation-octagon" />
<strong>Your account has been deleted</strong><br /> <strong>Your account has been deleted</strong>
<br />
We're very sorry to see you go! We're very sorry to see you go!
</SlAlert> </SlAlert>
</> </>
@ -399,7 +391,7 @@ For convenience, you can create a utility that emits toast notifications with a
const div = document.createElement('div'); const div = document.createElement('div');
div.textContent = html; div.textContent = html;
return div.innerHTML; return div.innerHTML;
} }
// Custom function to emit toast notifications // Custom function to emit toast notifications
function notify(message, variant = 'primary', icon = 'info-circle', duration = 3000) { function notify(message, variant = 'primary', icon = 'info-circle', duration = 3000) {

27
docs/components/animated-image.md
Wyświetl plik

@ -5,8 +5,8 @@
A component for displaying animated GIFs and WEBPs that play and pause on interaction. A component for displaying animated GIFs and WEBPs that play and pause on interaction.
```html preview ```html preview
<sl-animated-image <sl-animated-image
src="https://shoelace.style/assets/images/walk.gif" src="https://shoelace.style/assets/images/walk.gif"
alt="Animation of untied shoes walking on pavement" alt="Animation of untied shoes walking on pavement"
></sl-animated-image> ></sl-animated-image>
``` ```
@ -16,7 +16,7 @@ import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlAnimatedImage <SlAnimatedImage
src="https://shoelace.style/assets/images/walk.gif" src="https://shoelace.style/assets/images/walk.gif"
alt="Animation of untied shoes walking on pavement" alt="Animation of untied shoes walking on pavement"
/> />
); );
@ -31,8 +31,8 @@ const App = () => (
Both GIF and WEBP images are supported. Both GIF and WEBP images are supported.
```html preview ```html preview
<sl-animated-image <sl-animated-image
src="https://shoelace.style/assets/images/tie.webp" src="https://shoelace.style/assets/images/tie.webp"
alt="Animation of a shoe being tied" alt="Animation of a shoe being tied"
></sl-animated-image> ></sl-animated-image>
``` ```
@ -41,10 +41,7 @@ Both GIF and WEBP images are supported.
import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react'; import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlAnimatedImage <SlAnimatedImage src="https://shoelace.style/assets/images/tie.webp" alt="Animation of a shoe being tied" />
src="https://shoelace.style/assets/images/tie.webp"
alt="Animation of a shoe being tied"
/>
); );
``` ```
@ -53,8 +50,8 @@ const App = () => (
To set a custom size, apply a width and/or height to the host element. To set a custom size, apply a width and/or height to the host element.
```html preview ```html preview
<sl-animated-image <sl-animated-image
src="https://shoelace.style/assets/images/walk.gif" src="https://shoelace.style/assets/images/walk.gif"
alt="Animation of untied shoes walking on pavement" alt="Animation of untied shoes walking on pavement"
style="width: 150px; height: 200px;" style="width: 150px; height: 200px;"
> >
@ -66,7 +63,7 @@ import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlAnimatedImage <SlAnimatedImage
src="https://shoelace.style/assets/images/walk.gif" src="https://shoelace.style/assets/images/walk.gif"
alt="Animation of untied shoes walking on pavement" alt="Animation of untied shoes walking on pavement"
style={{ width: '150px', height: '200px' }} style={{ width: '150px', height: '200px' }}
/> />
@ -78,8 +75,8 @@ const App = () => (
You can change the appearance and location of the control box by targeting the `control-box` part in your styles. You can change the appearance and location of the control box by targeting the `control-box` part in your styles.
```html preview ```html preview
<sl-animated-image <sl-animated-image
src="https://shoelace.style/assets/images/walk.gif" src="https://shoelace.style/assets/images/walk.gif"
alt="Animation of untied shoes walking on pavement" alt="Animation of untied shoes walking on pavement"
class="animated-image-custom-control-box" class="animated-image-custom-control-box"
></sl-animated-image> ></sl-animated-image>
@ -116,7 +113,7 @@ const App = () => (
<> <>
<SlAnimatedImage <SlAnimatedImage
className="animated-image-custom-control-box" className="animated-image-custom-control-box"
src="https://shoelace.style/assets/images/walk.gif" src="https://shoelace.style/assets/images/walk.gif"
alt="Animation of untied shoes walking on pavement" alt="Animation of untied shoes walking on pavement"
/> />

69
docs/components/animation.md
Wyświetl plik

@ -41,13 +41,21 @@ const css = `
const App = () => ( const App = () => (
<> <>
<div class="animation-overview"> <div class="animation-overview">
<SlAnimation name="bounce" duration={2000} play><div class="box" /></SlAnimation> <SlAnimation name="bounce" duration={2000} play>
<SlAnimation name="jello" duration={2000} play><div class="box" /></SlAnimation> <div class="box" />
<SlAnimation name="heartBeat" duration={2000} play><div class="box" /></SlAnimation> </SlAnimation>
<SlAnimation name="flip" duration={2000} play><div class="box" /></SlAnimation> <SlAnimation name="jello" duration={2000} play>
<div class="box" />
</SlAnimation>
<SlAnimation name="heartBeat" duration={2000} play>
<div class="box" />
</SlAnimation>
<SlAnimation name="flip" duration={2000} play>
<div class="box" />
</SlAnimation>
</div> </div>
<style>{css}</style> <style>{css}</style>
</> </>
); );
``` ```
@ -91,7 +99,7 @@ This example demonstrates all of the baked-in animations and easings. Animations
}); });
animationName.appendChild(menuItem); animationName.appendChild(menuItem);
}); });
easings.map(name => { easings.map(name => {
const menuItem = Object.assign(document.createElement('sl-menu-item'), { const menuItem = Object.assign(document.createElement('sl-menu-item'), {
textContent: name, textContent: name,
@ -100,9 +108,9 @@ This example demonstrates all of the baked-in animations and easings. Animations
easingName.appendChild(menuItem); easingName.appendChild(menuItem);
}); });
animationName.addEventListener('sl-change', () => animation.name = animationName.value); animationName.addEventListener('sl-change', () => (animation.name = animationName.value));
easingName.addEventListener('sl-change', () => animation.easing = easingName.value); easingName.addEventListener('sl-change', () => (animation.easing = easingName.value));
playbackRate.addEventListener('sl-input', () => animation.playbackRate = playbackRate.value); playbackRate.addEventListener('sl-input', () => (animation.playbackRate = playbackRate.value));
</script> </script>
<style> <style>
@ -156,7 +164,7 @@ Use an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/
width: 100px; width: 100px;
height: 100px; height: 100px;
background-color: var(--sl-color-primary-600); background-color: var(--sl-color-primary-600);
} }
</style> </style>
``` ```
@ -182,16 +190,14 @@ const App = () => {
const box = useRef(null); const box = useRef(null);
useEffect(() => { useEffect(() => {
const observer = new IntersectionObserver( const observer = new IntersectionObserver(entries => {
(entries) => { if (entries[0].isIntersecting) {
if (entries[0].isIntersecting) { animation.current.play = true;
animation.current.play = true; } else {
} else { animation.current.play = false;
animation.current.play = false; animation.current.currentTime = 0;
animation.current.currentTime = 0;
}
} }
); });
if (box.current) { if (box.current) {
observer.observe(box.current); observer.observe(box.current);
@ -201,17 +207,12 @@ const App = () => {
return ( return (
<> <>
<div class="animation-scroll"> <div class="animation-scroll">
<SlAnimation <SlAnimation ref={animation} name="jackInTheBox" duration={2000} iterations={1}>
ref={animation}
name="jackInTheBox"
duration={2000}
iterations={1}
>
<div ref={box} class="box" /> <div ref={box} class="box" />
</SlAnimation> </SlAnimation>
</div> </div>
<style>{css}</style> <style>{css}</style>
</> </>
); );
}; };
@ -271,9 +272,9 @@ const css = `
const App = () => ( const App = () => (
<> <>
<div class="animation-keyframes"> <div class="animation-keyframes">
<SlAnimation <SlAnimation
easing="ease-in-out" easing="ease-in-out"
duration={2000} duration={2000}
play play
keyframes={[ keyframes={[
{ {
@ -296,7 +297,7 @@ const App = () => (
</SlAnimation> </SlAnimation>
</div> </div>
<style>{css}</style> <style>{css}</style>
</> </>
); );
``` ```
@ -332,13 +333,7 @@ const App = () => {
return ( return (
<div class="animation-form"> <div class="animation-form">
<SlAnimation <SlAnimation name="rubberBand" duration={1000} iterations={1} play={play} onSlFinish={() => setPlay(false)}>
name="rubberBand"
duration={1000}
iterations={1}
play={play}
onSlFinish={() => setPlay(false)}
>
<SlButton variant="primary" onClick={() => setPlay(true)}> <SlButton variant="primary" onClick={() => setPlay(true)}>
Click me Click me
</SlButton> </SlButton>

46
docs/components/avatar.md
Wyświetl plik

@ -13,9 +13,7 @@ Like [images](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img), yo
```jsx react ```jsx react
import { SlAvatar } from '@shoelace-style/shoelace/dist/react'; import { SlAvatar } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlAvatar label="User avatar" />;
<SlAvatar label="User avatar" />
);
``` ```
## Examples ## Examples
@ -53,9 +51,7 @@ When you don't have an image to use, you can set the `initials` attribute to sho
```jsx react ```jsx react
import { SlAvatar } from '@shoelace-style/shoelace/dist/react'; import { SlAvatar } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlAvatar initials="SL" label="Avatar with initials: SL" />;
<SlAvatar initials="SL" label="Avatar with initials: SL" />
);
``` ```
### Custom Icons ### Custom Icons
@ -124,22 +120,22 @@ You can group avatars with a few lines of CSS.
```html preview ```html preview
<div class="avatar-group"> <div class="avatar-group">
<sl-avatar <sl-avatar
image="https://images.unsplash.com/photo-1490150028299-bf57d78394e0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&q=80&crop=right" image="https://images.unsplash.com/photo-1490150028299-bf57d78394e0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&q=80&crop=right"
label="Avatar 1 of 4" label="Avatar 1 of 4"
></sl-avatar> ></sl-avatar>
<sl-avatar <sl-avatar
image="https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80" image="https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80"
label="Avatar 2 of 4" label="Avatar 2 of 4"
></sl-avatar> ></sl-avatar>
<sl-avatar <sl-avatar
image="https://images.unsplash.com/photo-1456439663599-95b042d50252?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80" image="https://images.unsplash.com/photo-1456439663599-95b042d50252?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80"
label="Avatar 3 of 4" label="Avatar 3 of 4"
></sl-avatar> ></sl-avatar>
<sl-avatar <sl-avatar
image="https://images.unsplash.com/flagged/photo-1554078875-e37cb8b0e27d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=top&q=80" image="https://images.unsplash.com/flagged/photo-1554078875-e37cb8b0e27d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=top&q=80"
label="Avatar 4 of 4" label="Avatar 4 of 4"
></sl-avatar> ></sl-avatar>
@ -172,28 +168,28 @@ const css = `
const App = () => ( const App = () => (
<> <>
<div className="avatar-group"> <div className="avatar-group">
<SlAvatar <SlAvatar
image="https://images.unsplash.com/photo-1490150028299-bf57d78394e0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&q=80&crop=right" image="https://images.unsplash.com/photo-1490150028299-bf57d78394e0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&q=80&crop=right"
label="Avatar 1 of 4" label="Avatar 1 of 4"
/> />
<SlAvatar <SlAvatar
image="https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80" image="https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80"
label="Avatar 2 of 4" label="Avatar 2 of 4"
/> />
<SlAvatar <SlAvatar
image="https://images.unsplash.com/photo-1456439663599-95b042d50252?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80" image="https://images.unsplash.com/photo-1456439663599-95b042d50252?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80"
label="Avatar 3 of 4" label="Avatar 3 of 4"
/> />
<SlAvatar <SlAvatar
image="https://images.unsplash.com/flagged/photo-1554078875-e37cb8b0e27d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=top&q=80" image="https://images.unsplash.com/flagged/photo-1554078875-e37cb8b0e27d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=top&q=80"
label="Avatar 4 of 4" label="Avatar 4 of 4"
/> />
</div> </div>
<style>{css}</style> <style>{css}</style>
</> </>
); );
``` ```

74
docs/components/badge.md
Wyświetl plik

@ -11,9 +11,7 @@ Badges are used to draw attention and display statuses or counts.
```jsx react ```jsx react
import { SlBadge } from '@shoelace-style/shoelace/dist/react'; import { SlBadge } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlBadge>Badge</SlBadge>;
<SlBadge>Badge</SlBadge>
);
``` ```
## Examples ## Examples
@ -39,7 +37,7 @@ const App = () => (
<SlBadge variant="success">Success</SlBadge> <SlBadge variant="success">Success</SlBadge>
<SlBadge variant="neutral">Neutral</SlBadge> <SlBadge variant="neutral">Neutral</SlBadge>
<SlBadge variant="warning">Warning</SlBadge> <SlBadge variant="warning">Warning</SlBadge>
<SlBadge variant="danger">Danger</SlBadge> <SlBadge variant="danger">Danger</SlBadge>
</> </>
); );
``` ```
@ -61,11 +59,21 @@ import { SlBadge } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
<SlBadge variant="primary" pill>Primary</SlBadge> <SlBadge variant="primary" pill>
<SlBadge variant="success" pill>Success</SlBadge> Primary
<SlBadge variant="neutral" pill>Neutral</SlBadge> </SlBadge>
<SlBadge variant="warning" pill>Warning</SlBadge> <SlBadge variant="success" pill>
<SlBadge variant="danger" pill>Danger</SlBadge> Success
</SlBadge>
<SlBadge variant="neutral" pill>
Neutral
</SlBadge>
<SlBadge variant="warning" pill>
Warning
</SlBadge>
<SlBadge variant="danger" pill>
Danger
</SlBadge>
</> </>
); );
``` ```
@ -102,11 +110,21 @@ const css = `
const App = () => ( const App = () => (
<> <>
<div className="badge-pulse"> <div className="badge-pulse">
<SlBadge variant="primary" pill pulse>1</SlBadge> <SlBadge variant="primary" pill pulse>
<SlBadge variant="success" pill pulse>1</SlBadge> 1
<SlBadge variant="neutral" pill pulse>1</SlBadge> </SlBadge>
<SlBadge variant="warning" pill pulse>1</SlBadge> <SlBadge variant="success" pill pulse>
<SlBadge variant="danger" pill pulse>1</SlBadge> 1
</SlBadge>
<SlBadge variant="neutral" pill pulse>
1
</SlBadge>
<SlBadge variant="warning" pill pulse>
1
</SlBadge>
<SlBadge variant="danger" pill pulse>
1
</SlBadge>
</div> </div>
<style>{css}</style> <style>{css}</style>
@ -147,12 +165,16 @@ const App = () => (
<SlButton style={{ marginLeft: '1rem' }}> <SlButton style={{ marginLeft: '1rem' }}>
Warnings Warnings
<SlBadge variant="warning" pill>8</SlBadge> <SlBadge variant="warning" pill>
8
</SlBadge>
</SlButton> </SlButton>
<SlButton style={{ marginLeft: '1rem' }}> <SlButton style={{ marginLeft: '1rem' }}>
Errors Errors
<SlBadge variant="danger" pill>6</SlBadge> <SlBadge variant="danger" pill>
6
</SlBadge>
</SlButton> </SlButton>
</> </>
); );
@ -163,7 +185,9 @@ const App = () => (
When including badges in menu items, use the `suffix` slot to make sure they're aligned correctly. When including badges in menu items, use the `suffix` slot to make sure they're aligned correctly.
```html preview ```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
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-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>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-item>Replies <sl-badge slot="suffix" variant="neutral" pill>12</sl-badge></sl-menu-item>
@ -174,7 +198,7 @@ When including badges in menu items, use the `suffix` slot to make sure they're
import { SlBadge, SlButton, SlMenu, SlMenuItem, SlMenuLabel } from '@shoelace-style/shoelace/dist/react'; import { SlBadge, SlButton, SlMenu, SlMenuItem, SlMenuLabel } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlMenu <SlMenu
style={{ style={{
maxWidth: '240px', maxWidth: '240px',
border: 'solid 1px var(--sl-panel-border-color)', border: 'solid 1px var(--sl-panel-border-color)',
@ -182,8 +206,18 @@ const App = () => (
}} }}
> >
<SlMenuLabel>Messages</SlMenuLabel> <SlMenuLabel>Messages</SlMenuLabel>
<SlMenuItem>Comments <SlBadge slot="suffix" variant="neutral" pill>4</SlBadge></SlMenuItem> <SlMenuItem>
<SlMenuItem>Replies <SlBadge slot="suffix" variant="neutral" pill>12</SlBadge></SlMenuItem> Comments
<SlBadge slot="suffix" variant="neutral" pill>
4
</SlBadge>
</SlMenuItem>
<SlMenuItem>
Replies
<SlBadge slot="suffix" variant="neutral" pill>
12
</SlBadge>
</SlMenuItem>
</SlMenu> </SlMenu>
); );
``` ```

58
docs/components/breadcrumb.md
Wyświetl plik

@ -38,21 +38,13 @@ For websites, you'll probably want to use links instead. You can make any breadc
```html preview ```html preview
<sl-breadcrumb> <sl-breadcrumb>
<sl-breadcrumb-item href="https://example.com/home"> <sl-breadcrumb-item href="https://example.com/home">Homepage</sl-breadcrumb-item>
Homepage
</sl-breadcrumb-item>
<sl-breadcrumb-item href="https://example.com/home/services"> <sl-breadcrumb-item href="https://example.com/home/services">Our Services</sl-breadcrumb-item>
Our Services
</sl-breadcrumb-item>
<sl-breadcrumb-item href="https://example.com/home/services/digital"> <sl-breadcrumb-item href="https://example.com/home/services/digital">Digital Media</sl-breadcrumb-item>
Digital Media
</sl-breadcrumb-item>
<sl-breadcrumb-item href="https://example.com/home/services/digital/web-design"> <sl-breadcrumb-item href="https://example.com/home/services/digital/web-design">Web Design</sl-breadcrumb-item>
Web Design
</sl-breadcrumb-item>
</sl-breadcrumb> </sl-breadcrumb>
``` ```
@ -61,21 +53,13 @@ import { SlBreadcrumb, SlBreadcrumbItem } from '@shoelace-style/shoelace/dist/re
const App = () => ( const App = () => (
<SlBreadcrumb> <SlBreadcrumb>
<SlBreadcrumbItem href="https://example.com/home"> <SlBreadcrumbItem href="https://example.com/home">Homepage</SlBreadcrumbItem>
Homepage
</SlBreadcrumbItem>
<SlBreadcrumbItem href="https://example.com/home/services"> <SlBreadcrumbItem href="https://example.com/home/services">Our Services</SlBreadcrumbItem>
Our Services
</SlBreadcrumbItem>
<SlBreadcrumbItem href="https://example.com/home/services/digital"> <SlBreadcrumbItem href="https://example.com/home/services/digital">Digital Media</SlBreadcrumbItem>
Digital Media
</SlBreadcrumbItem>
<SlBreadcrumbItem href="https://example.com/home/services/digital/web-design"> <SlBreadcrumbItem href="https://example.com/home/services/digital/web-design">Web Design</SlBreadcrumbItem>
Web Design
</SlBreadcrumbItem>
</SlBreadcrumb> </SlBreadcrumb>
); );
``` ```
@ -89,25 +73,25 @@ Use the `separator` slot to change the separator that goes between breadcrumb it
<sl-icon name="dot" slot="separator"></sl-icon> <sl-icon name="dot" slot="separator"></sl-icon>
<sl-breadcrumb-item>First</sl-breadcrumb-item> <sl-breadcrumb-item>First</sl-breadcrumb-item>
<sl-breadcrumb-item>Second</sl-breadcrumb-item> <sl-breadcrumb-item>Second</sl-breadcrumb-item>
<sl-breadcrumb-item>Third</sl-breadcrumb-item> <sl-breadcrumb-item>Third</sl-breadcrumb-item>
</sl-breadcrumb> </sl-breadcrumb>
<br> <br />
<sl-breadcrumb> <sl-breadcrumb>
<sl-icon name="arrow-right" slot="separator"></sl-icon> <sl-icon name="arrow-right" slot="separator"></sl-icon>
<sl-breadcrumb-item>First</sl-breadcrumb-item> <sl-breadcrumb-item>First</sl-breadcrumb-item>
<sl-breadcrumb-item>Second</sl-breadcrumb-item> <sl-breadcrumb-item>Second</sl-breadcrumb-item>
<sl-breadcrumb-item>Third</sl-breadcrumb-item> <sl-breadcrumb-item>Third</sl-breadcrumb-item>
</sl-breadcrumb> </sl-breadcrumb>
<br> <br />
<sl-breadcrumb> <sl-breadcrumb>
<span slot="separator">/</span> <span slot="separator">/</span>
<sl-breadcrumb-item>First</sl-breadcrumb-item> <sl-breadcrumb-item>First</sl-breadcrumb-item>
<sl-breadcrumb-item>Second</sl-breadcrumb-item> <sl-breadcrumb-item>Second</sl-breadcrumb-item>
<sl-breadcrumb-item>Third</sl-breadcrumb-item> <sl-breadcrumb-item>Third</sl-breadcrumb-item>
</sl-breadcrumb> </sl-breadcrumb>
``` ```
@ -121,7 +105,7 @@ const App = () => (
<sl-icon name="dot" slot="separator" /> <sl-icon name="dot" slot="separator" />
<SlBreadcrumbItem>First</SlBreadcrumbItem> <SlBreadcrumbItem>First</SlBreadcrumbItem>
<SlBreadcrumbItem>Second</SlBreadcrumbItem> <SlBreadcrumbItem>Second</SlBreadcrumbItem>
<SlBreadcrumbItem>Third</SlBreadcrumbItem> <SlBreadcrumbItem>Third</SlBreadcrumbItem>
</SlBreadcrumb> </SlBreadcrumb>
<br /> <br />
@ -130,7 +114,7 @@ const App = () => (
<sl-icon name="arrow-right" slot="separator" /> <sl-icon name="arrow-right" slot="separator" />
<SlBreadcrumbItem>First</SlBreadcrumbItem> <SlBreadcrumbItem>First</SlBreadcrumbItem>
<SlBreadcrumbItem>Second</SlBreadcrumbItem> <SlBreadcrumbItem>Second</SlBreadcrumbItem>
<SlBreadcrumbItem>Third</SlBreadcrumbItem> <SlBreadcrumbItem>Third</SlBreadcrumbItem>
</SlBreadcrumb> </SlBreadcrumb>
<br /> <br />
@ -139,7 +123,7 @@ const App = () => (
<span slot="separator">/</span> <span slot="separator">/</span>
<SlBreadcrumbItem>First</SlBreadcrumbItem> <SlBreadcrumbItem>First</SlBreadcrumbItem>
<SlBreadcrumbItem>Second</SlBreadcrumbItem> <SlBreadcrumbItem>Second</SlBreadcrumbItem>
<SlBreadcrumbItem>Third</SlBreadcrumbItem> <SlBreadcrumbItem>Third</SlBreadcrumbItem>
</SlBreadcrumb> </SlBreadcrumb>
</> </>
); );
@ -225,15 +209,15 @@ Dropdown menus can be placed in a prefix or suffix slot to provide additional op
<sl-menu-item>Web Development</sl-menu-item> <sl-menu-item>Web Development</sl-menu-item>
<sl-menu-item>Marketing</sl-menu-item> <sl-menu-item>Marketing</sl-menu-item>
</sl-menu> </sl-menu>
</sl-dropdown> </sl-dropdown>
</sl-breadcrumb-item> </sl-breadcrumb-item>
</sl-breadcrumb> </sl-breadcrumb>
``` ```
```jsx react ```jsx react
import { import {
SlBreadcrumb, SlBreadcrumb,
SlBreadcrumbItem, SlBreadcrumbItem,
SlButton, SlButton,
SlDropdown, SlDropdown,
SlIcon, SlIcon,
@ -257,7 +241,7 @@ const App = () => (
<SlMenuItem>Web Development</SlMenuItem> <SlMenuItem>Web Development</SlMenuItem>
<SlMenuItem>Marketing</SlMenuItem> <SlMenuItem>Marketing</SlMenuItem>
</SlMenu> </SlMenu>
</SlDropdown> </SlDropdown>
</SlBreadcrumbItem> </SlBreadcrumbItem>
</SlBreadcrumb> </SlBreadcrumb>
); );

149
docs/components/button-group.md
Wyświetl plik

@ -37,7 +37,7 @@ All button sizes are supported, but avoid mixing sizes within the same button gr
<sl-button size="small">Right</sl-button> <sl-button size="small">Right</sl-button>
</sl-button-group> </sl-button-group>
<br><br> <br /><br />
<sl-button-group> <sl-button-group>
<sl-button size="medium">Left</sl-button> <sl-button size="medium">Left</sl-button>
@ -45,7 +45,7 @@ All button sizes are supported, but avoid mixing sizes within the same button gr
<sl-button size="medium">Right</sl-button> <sl-button size="medium">Right</sl-button>
</sl-button-group> </sl-button-group>
<br><br> <br /><br />
<sl-button-group> <sl-button-group>
<sl-button size="large">Left</sl-button> <sl-button size="large">Left</sl-button>
@ -65,7 +65,8 @@ const App = () => (
<SlButton size="small">Right</SlButton> <SlButton size="small">Right</SlButton>
</SlButtonGroup> </SlButtonGroup>
<br /><br /> <br />
<br />
<SlButtonGroup> <SlButtonGroup>
<SlButton size="medium">Left</SlButton> <SlButton size="medium">Left</SlButton>
@ -73,7 +74,8 @@ const App = () => (
<SlButton size="medium">Right</SlButton> <SlButton size="medium">Right</SlButton>
</SlButtonGroup> </SlButtonGroup>
<br /><br /> <br />
<br />
<SlButtonGroup> <SlButtonGroup>
<SlButton size="large">Left</SlButton> <SlButton size="large">Left</SlButton>
@ -95,7 +97,7 @@ Theme buttons are supported through the button's `type` attribute.
<sl-button variant="primary">Right</sl-button> <sl-button variant="primary">Right</sl-button>
</sl-button-group> </sl-button-group>
<br><br> <br /><br />
<sl-button-group> <sl-button-group>
<sl-button variant="success">Left</sl-button> <sl-button variant="success">Left</sl-button>
@ -103,7 +105,7 @@ Theme buttons are supported through the button's `type` attribute.
<sl-button variant="success">Right</sl-button> <sl-button variant="success">Right</sl-button>
</sl-button-group> </sl-button-group>
<br><br> <br /><br />
<sl-button-group> <sl-button-group>
<sl-button variant="neutral">Left</sl-button> <sl-button variant="neutral">Left</sl-button>
@ -111,7 +113,7 @@ Theme buttons are supported through the button's `type` attribute.
<sl-button variant="neutral">Right</sl-button> <sl-button variant="neutral">Right</sl-button>
</sl-button-group> </sl-button-group>
<br><br> <br /><br />
<sl-button-group> <sl-button-group>
<sl-button variant="warning">Left</sl-button> <sl-button variant="warning">Left</sl-button>
@ -119,7 +121,7 @@ Theme buttons are supported through the button's `type` attribute.
<sl-button variant="warning">Right</sl-button> <sl-button variant="warning">Right</sl-button>
</sl-button-group> </sl-button-group>
<br><br> <br /><br />
<sl-button-group> <sl-button-group>
<sl-button variant="danger">Left</sl-button> <sl-button variant="danger">Left</sl-button>
@ -139,7 +141,8 @@ const App = () => (
<SlButton variant="primary">Right</SlButton> <SlButton variant="primary">Right</SlButton>
</SlButtonGroup> </SlButtonGroup>
<br /><br /> <br />
<br />
<SlButtonGroup> <SlButtonGroup>
<SlButton variant="success">Left</SlButton> <SlButton variant="success">Left</SlButton>
@ -147,7 +150,8 @@ const App = () => (
<SlButton variant="success">Right</SlButton> <SlButton variant="success">Right</SlButton>
</SlButtonGroup> </SlButtonGroup>
<br /><br /> <br />
<br />
<SlButtonGroup> <SlButtonGroup>
<SlButton variant="neutral">Left</SlButton> <SlButton variant="neutral">Left</SlButton>
@ -155,7 +159,8 @@ const App = () => (
<SlButton variant="neutral">Right</SlButton> <SlButton variant="neutral">Right</SlButton>
</SlButtonGroup> </SlButtonGroup>
<br /><br /> <br />
<br />
<SlButtonGroup> <SlButtonGroup>
<SlButton variant="warning">Left</SlButton> <SlButton variant="warning">Left</SlButton>
@ -163,7 +168,8 @@ const App = () => (
<SlButton variant="warning">Right</SlButton> <SlButton variant="warning">Right</SlButton>
</SlButtonGroup> </SlButtonGroup>
<br /><br /> <br />
<br />
<SlButtonGroup> <SlButtonGroup>
<SlButton variant="danger">Left</SlButton> <SlButton variant="danger">Left</SlButton>
@ -185,7 +191,7 @@ Pill buttons are supported through the button's `pill` attribute.
<sl-button size="small" pill>Right</sl-button> <sl-button size="small" pill>Right</sl-button>
</sl-button-group> </sl-button-group>
<br><br> <br /><br />
<sl-button-group> <sl-button-group>
<sl-button size="medium" pill>Left</sl-button> <sl-button size="medium" pill>Left</sl-button>
@ -193,7 +199,7 @@ Pill buttons are supported through the button's `pill` attribute.
<sl-button size="medium" pill>Right</sl-button> <sl-button size="medium" pill>Right</sl-button>
</sl-button-group> </sl-button-group>
<br><br> <br /><br />
<sl-button-group> <sl-button-group>
<sl-button size="large" pill>Left</sl-button> <sl-button size="large" pill>Left</sl-button>
@ -208,25 +214,45 @@ import { SlButton, SlButtonGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
<SlButtonGroup> <SlButtonGroup>
<SlButton size="small" pill>Left</SlButton> <SlButton size="small" pill>
<SlButton size="small" pill>Center</SlButton> Left
<SlButton size="small" pill>Right</SlButton> </SlButton>
<SlButton size="small" pill>
Center
</SlButton>
<SlButton size="small" pill>
Right
</SlButton>
</SlButtonGroup> </SlButtonGroup>
<br /><br /> <br />
<br />
<SlButtonGroup> <SlButtonGroup>
<SlButton size="medium" pill>Left</SlButton> <SlButton size="medium" pill>
<SlButton size="medium" pill>Center</SlButton> Left
<SlButton size="medium" pill>Right</SlButton> </SlButton>
<SlButton size="medium" pill>
Center
</SlButton>
<SlButton size="medium" pill>
Right
</SlButton>
</SlButtonGroup> </SlButtonGroup>
<br /><br /> <br />
<br />
<SlButtonGroup> <SlButtonGroup>
<SlButton size="large" pill>Left</SlButton> <SlButton size="large" pill>
<SlButton size="large" pill>Center</SlButton> Left
<SlButton size="large" pill>Right</SlButton> </SlButton>
<SlButton size="large" pill>
Center
</SlButton>
<SlButton size="large" pill>
Right
</SlButton>
</SlButtonGroup> </SlButtonGroup>
</> </>
); );
@ -237,7 +263,7 @@ const App = () => (
Dropdowns can be placed inside button groups as long as the trigger is an `<sl-button>` element. Dropdowns can be placed inside button groups as long as the trigger is an `<sl-button>` element.
```html preview ```html preview
<sl-button-group> <sl-button-group>
<sl-button>Button</sl-button> <sl-button>Button</sl-button>
<sl-button>Button</sl-button> <sl-button>Button</sl-button>
<sl-dropdown> <sl-dropdown>
@ -252,20 +278,16 @@ Dropdowns can be placed inside button groups as long as the trigger is an `<sl-b
``` ```
```jsx react ```jsx react
import { import { SlButton, SlButtonGroup, SlDropdown, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
SlButton,
SlButtonGroup,
SlDropdown,
SlMenu,
SlMenuItem,
} from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlButtonGroup> <SlButtonGroup>
<SlButton>Button</SlButton> <SlButton>Button</SlButton>
<SlButton>Button</SlButton> <SlButton>Button</SlButton>
<SlDropdown> <SlDropdown>
<SlButton slot="trigger" caret>Dropdown</SlButton> <SlButton slot="trigger" caret>
Dropdown
</SlButton>
<SlMenu> <SlMenu>
<SlMenuItem>Item 1</SlMenuItem> <SlMenuItem>Item 1</SlMenuItem>
<SlMenuItem>Item 2</SlMenuItem> <SlMenuItem>Item 2</SlMenuItem>
@ -281,7 +303,7 @@ const App = () => (
Create a split button using a button and a dropdown. Create a split button using a button and a dropdown.
```html preview ```html preview
<sl-button-group> <sl-button-group>
<sl-button variant="primary">Save</sl-button> <sl-button variant="primary">Save</sl-button>
<sl-dropdown placement="bottom-end"> <sl-dropdown placement="bottom-end">
<sl-button slot="trigger" variant="primary" caret></sl-button> <sl-button slot="trigger" variant="primary" caret></sl-button>
@ -295,16 +317,10 @@ Create a split button using a button and a dropdown.
``` ```
```jsx react ```jsx react
import { import { SlButton, SlButtonGroup, SlDropdown, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
SlButton,
SlButtonGroup,
SlDropdown,
SlMenu,
SlMenuItem,
} from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlButtonGroup> <SlButtonGroup>
<SlButton variant="primary">Save</SlButton> <SlButton variant="primary">Save</SlButton>
<SlDropdown placement="bottom-end"> <SlDropdown placement="bottom-end">
<SlButton slot="trigger" variant="primary" caret></SlButton> <SlButton slot="trigger" variant="primary" caret></SlButton>
@ -339,11 +355,7 @@ Buttons can be wrapped in tooltips to provide more detail when the user interact
``` ```
```jsx react ```jsx react
import { import { SlButton, SlButtonGroup, SlTooltip } from '@shoelace-style/shoelace/dist/react';
SlButton,
SlButtonGroup,
SlTooltip
} from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
@ -412,12 +424,7 @@ Create interactive toolbars with button groups.
``` ```
```jsx react ```jsx react
import { import { SlButton, SlButtonGroup, SlIcon, SlTooltip } from '@shoelace-style/shoelace/dist/react';
SlButton,
SlButtonGroup,
SlIcon,
SlTooltip
} from '@shoelace-style/shoelace/dist/react';
const css = ` const css = `
.button-group-toolbar sl-button-group:not(:last-of-type) { .button-group-toolbar sl-button-group:not(:last-of-type) {
@ -430,34 +437,50 @@ const App = () => (
<div className="button-group-toolbar"> <div className="button-group-toolbar">
<SlButtonGroup label="History"> <SlButtonGroup label="History">
<SlTooltip content="Undo"> <SlTooltip content="Undo">
<SlButton><SlIcon name="arrow-counterclockwise"></SlIcon></SlButton> <SlButton>
<SlIcon name="arrow-counterclockwise"></SlIcon>
</SlButton>
</SlTooltip> </SlTooltip>
<SlTooltip content="Redo"> <SlTooltip content="Redo">
<SlButton><SlIcon name="arrow-clockwise"></SlIcon></SlButton> <SlButton>
<SlIcon name="arrow-clockwise"></SlIcon>
</SlButton>
</SlTooltip> </SlTooltip>
</SlButtonGroup> </SlButtonGroup>
<SlButtonGroup label="Formatting"> <SlButtonGroup label="Formatting">
<SlTooltip content="Bold"> <SlTooltip content="Bold">
<SlButton><SlIcon name="type-bold"></SlIcon></SlButton> <SlButton>
<SlIcon name="type-bold"></SlIcon>
</SlButton>
</SlTooltip> </SlTooltip>
<SlTooltip content="Italic"> <SlTooltip content="Italic">
<SlButton><SlIcon name="type-italic"></SlIcon></SlButton> <SlButton>
<SlIcon name="type-italic"></SlIcon>
</SlButton>
</SlTooltip> </SlTooltip>
<SlTooltip content="Underline"> <SlTooltip content="Underline">
<SlButton><SlIcon name="type-underline"></SlIcon></SlButton> <SlButton>
<SlIcon name="type-underline"></SlIcon>
</SlButton>
</SlTooltip> </SlTooltip>
</SlButtonGroup> </SlButtonGroup>
<SlButtonGroup label="Alignment"> <SlButtonGroup label="Alignment">
<SlTooltip content="Align Left"> <SlTooltip content="Align Left">
<SlButton><SlIcon name="justify-left"></SlIcon></SlButton> <SlButton>
<SlIcon name="justify-left"></SlIcon>
</SlButton>
</SlTooltip> </SlTooltip>
<SlTooltip content="Align Center"> <SlTooltip content="Align Center">
<SlButton><SlIcon name="justify"></SlIcon></SlButton> <SlButton>
<SlIcon name="justify"></SlIcon>
</SlButton>
</SlTooltip> </SlTooltip>
<SlTooltip content="Align Right"> <SlTooltip content="Align Right">
<SlButton><SlIcon name="justify-right"></SlIcon></SlButton> <SlButton>
<SlIcon name="justify-right"></SlIcon>
</SlButton>
</SlTooltip> </SlTooltip>
</SlButtonGroup> </SlButtonGroup>
</div> </div>

167
docs/components/button.md
Wyświetl plik

@ -11,9 +11,7 @@ Buttons represent actions that are available to the user.
```jsx react ```jsx react
import { SlButton } from '@shoelace-style/shoelace/dist/react'; import { SlButton } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlButton>Button</SlButton>;
<SlButton>Button</SlButton>
);
``` ```
## Examples ## Examples
@ -41,7 +39,7 @@ const App = () => (
<SlButton variant="success">Success</SlButton> <SlButton variant="success">Success</SlButton>
<SlButton variant="neutral">Neutral</SlButton> <SlButton variant="neutral">Neutral</SlButton>
<SlButton variant="warning">Warning</SlButton> <SlButton variant="warning">Warning</SlButton>
<SlButton variant="danger">Danger</SlButton> <SlButton variant="danger">Danger</SlButton>
</> </>
); );
``` ```
@ -86,12 +84,24 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
<SlButton variant="default" outline>Default</SlButton> <SlButton variant="default" outline>
<SlButton variant="primary" outline>Primary</SlButton> Default
<SlButton variant="success" outline>Success</SlButton> </SlButton>
<SlButton variant="neutral" outline>Neutral</SlButton> <SlButton variant="primary" outline>
<SlButton variant="warning" outline>Warning</SlButton> Primary
<SlButton variant="danger" outline>Danger</SlButton> </SlButton>
<SlButton variant="success" outline>
Success
</SlButton>
<SlButton variant="neutral" outline>
Neutral
</SlButton>
<SlButton variant="warning" outline>
Warning
</SlButton>
<SlButton variant="danger" outline>
Danger
</SlButton>
</> </>
); );
``` ```
@ -111,9 +121,15 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
<SlButton size="small" pill>Small</SlButton> <SlButton size="small" pill>
<SlButton size="medium" pill>Medium</SlButton> Small
<SlButton size="large" pill>Large</SlButton> </SlButton>
<SlButton size="medium" pill>
Medium
</SlButton>
<SlButton size="large" pill>
Large
</SlButton>
</> </>
); );
``` ```
@ -133,9 +149,15 @@ import { SlButton, SlIcon } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
<SlButton variant="default" size="small" circle><SlIcon name="gear" /></SlButton> <SlButton variant="default" size="small" circle>
<SlButton variant="default" size="medium" circle><SlIcon name="gear" /></SlButton> <SlIcon name="gear" />
<SlButton variant="default" size="large" circle><SlIcon name="gear" /></SlButton> </SlButton>
<SlButton variant="default" size="medium" circle>
<SlIcon name="gear" />
</SlButton>
<SlButton variant="default" size="large" circle>
<SlIcon name="gear" />
</SlButton>
</> </>
); );
``` ```
@ -155,9 +177,15 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
<SlButton variant="text" size="small">Text</SlButton> <SlButton variant="text" size="small">
<SlButton variant="text" size="medium">Text</SlButton> Text
<SlButton variant="text" size="large">Text</SlButton> </SlButton>
<SlButton variant="text" size="medium">
Text
</SlButton>
<SlButton variant="text" size="large">
Text
</SlButton>
</> </>
); );
``` ```
@ -179,9 +207,15 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
<SlButton href="https://example.com/">Link</SlButton> <SlButton href="https://example.com/">Link</SlButton>
<SlButton href="https://example.com/" target="_blank">New Window</SlButton> <SlButton href="https://example.com/" target="_blank">
<SlButton href="/assets/images/wordmark.svg" download="shoelace.svg">Download</SlButton> New Window
<SlButton href="https://example.com/" disabled>Disabled</SlButton> </SlButton>
<SlButton href="/assets/images/wordmark.svg" download="shoelace.svg">
Download
</SlButton>
<SlButton href="https://example.com/" disabled>
Disabled
</SlButton>
</> </>
); );
``` ```
@ -203,9 +237,15 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
<SlButton variant="default" size="small" style={{ width: '100%', marginBottom: '1rem' }}>Small</SlButton> <SlButton variant="default" size="small" style={{ width: '100%', marginBottom: '1rem' }}>
<SlButton variant="default" size="medium" style={{ width: '100%', marginBottom: '1rem' }}>Medium</SlButton> Small
<SlButton variant="default" size="large" style={{ width: '100%' }}>Large</SlButton> </SlButton>
<SlButton variant="default" size="medium" style={{ width: '100%', marginBottom: '1rem' }}>
Medium
</SlButton>
<SlButton variant="default" size="large" style={{ width: '100%' }}>
Large
</SlButton>
</> </>
); );
``` ```
@ -231,7 +271,7 @@ Use the `prefix` and `suffix` slots to add icons.
Open Open
</sl-button> </sl-button>
<br><br> <br /><br />
<sl-button variant="default"> <sl-button variant="default">
<sl-icon slot="prefix" name="gear"></sl-icon> <sl-icon slot="prefix" name="gear"></sl-icon>
@ -249,7 +289,7 @@ Use the `prefix` and `suffix` slots to add icons.
Open Open
</sl-button> </sl-button>
<br><br> <br /><br />
<sl-button variant="default" size="large"> <sl-button variant="default" size="large">
<sl-icon slot="prefix" name="gear"></sl-icon> <sl-icon slot="prefix" name="gear"></sl-icon>
@ -289,7 +329,8 @@ const App = () => (
Open Open
</SlButton> </SlButton>
<br /><br/ > <br />
<br />
<SlButton variant="default"> <SlButton variant="default">
<SlIcon slot="prefix" name="gear"></SlIcon> <SlIcon slot="prefix" name="gear"></SlIcon>
@ -307,7 +348,8 @@ const App = () => (
Open Open
</SlButton> </SlButton>
<br /><br /> <br />
<br />
<SlButton variant="default" size="large"> <SlButton variant="default" size="large">
<SlIcon slot="prefix" name="gear"></SlIcon> <SlIcon slot="prefix" name="gear"></SlIcon>
@ -343,9 +385,15 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
<SlButton size="small" caret>Small</SlButton> <SlButton size="small" caret>
<SlButton size="medium" caret>Medium</SlButton> Small
<SlButton size="large" caret>Large</SlButton> </SlButton>
<SlButton size="medium" caret>
Medium
</SlButton>
<SlButton size="large" caret>
Large
</SlButton>
</> </>
); );
``` ```
@ -368,12 +416,24 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
<SlButton variant="default" loading>Default</SlButton> <SlButton variant="default" loading>
<SlButton variant="primary" loading>Primary</SlButton> Default
<SlButton variant="success" loading>Success</SlButton> </SlButton>
<SlButton variant="neutral" loading>Neutral</SlButton> <SlButton variant="primary" loading>
<SlButton variant="warning" loading>Warning</SlButton> Primary
<SlButton variant="danger" loading>Danger</SlButton> </SlButton>
<SlButton variant="success" loading>
Success
</SlButton>
<SlButton variant="neutral" loading>
Neutral
</SlButton>
<SlButton variant="warning" loading>
Warning
</SlButton>
<SlButton variant="danger" loading>
Danger
</SlButton>
</> </>
); );
``` ```
@ -396,12 +456,29 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
<SlButton variant="default" disabled>Default</SlButton> <SlButton variant="default" disabled>
<SlButton variant="primary" disabled>Primary</SlButton> Default
<SlButton variant="success" disabled>Success</SlButton> </SlButton>
<SlButton variant="neutral" disabled>Neutral</SlButton>
<SlButton variant="warning" disabled>Warning</SlButton> <SlButton variant="primary" disabled>
<SlButton variant="danger" disabled>Danger</SlButton> Primary
</SlButton>
<SlButton variant="success" disabled>
Success
</SlButton>
<SlButton variant="neutral" disabled>
Neutral
</SlButton>
<SlButton variant="warning" disabled>
Warning
</SlButton>
<SlButton variant="danger" disabled>
Danger
</SlButton>
</> </>
); );
``` ```
@ -418,7 +495,7 @@ This example demonstrates how to style buttons using a custom class. This is the
/* Set design tokens for height and border width */ /* Set design tokens for height and border width */
--sl-input-height-medium: 48px; --sl-input-height-medium: 48px;
--sl-input-border-width: 4px; --sl-input-border-width: 4px;
border-radius: 0; border-radius: 0;
background-color: #ff1493; background-color: #ff1493;
border-top-color: #ff7ac1; border-top-color: #ff7ac1;

81
docs/components/card.md
Wyświetl plik

@ -6,14 +6,14 @@ Cards can be used to group related subjects in a container.
```html preview ```html preview
<sl-card class="card-overview"> <sl-card class="card-overview">
<img <img
slot="image" 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" 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." alt="A kitten sits patiently between a terracotta pot and decorative grasses."
> />
<strong>Mittens</strong><br> <strong>Mittens</strong><br />
This kitten is as cute as he is playful. Bring him home today!<br> This kitten is as cute as he is playful. Bring him home today!<br />
<small>6 weeks old</small> <small>6 weeks old</small>
<div slot="footer"> <div slot="footer">
@ -31,20 +31,16 @@ Cards can be used to group related subjects in a container.
color: var(--sl-color-neutral-500); color: var(--sl-color-neutral-500);
} }
.card-overview [slot="footer"] { .card-overview [slot='footer'] {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
</style> </style>
``` ```
```jsx react ```jsx react
import { import { SlButton, SlCard, SlRating } from '@shoelace-style/shoelace/dist/react';
SlButton,
SlCard,
SlRating
} from '@shoelace-style/shoelace/dist/react';
const css = ` const css = `
.card-overview { .card-overview {
@ -65,18 +61,20 @@ const css = `
const App = () => ( const App = () => (
<> <>
<SlCard className="card-overview"> <SlCard className="card-overview">
<img <img
slot="image" 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" 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." alt="A kitten sits patiently between a terracotta pot and decorative grasses."
/> />
<strong>Mittens</strong>
<strong>Mittens</strong><br /> <br />
This kitten is as cute as he is playful. Bring him home today!<br /> This kitten is as cute as he is playful. Bring him home today!
<br />
<small>6 weeks old</small> <small>6 weeks old</small>
<div slot="footer"> <div slot="footer">
<SlButton variant="primary" pill>More Info</SlButton> <SlButton variant="primary" pill>
More Info
</SlButton>
<SlRating></SlRating> <SlRating></SlRating>
</div> </div>
</SlCard> </SlCard>
@ -144,9 +142,9 @@ Headers can be used to display titles and more.
max-width: 300px; max-width: 300px;
} }
.card-header [slot="header"] { .card-header [slot='header'] {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
@ -188,10 +186,8 @@ const App = () => (
<SlCard className="card-header"> <SlCard className="card-header">
<div slot="header"> <div slot="header">
Header Title Header Title
<SlIconButton name="gear"></SlIconButton> <SlIconButton name="gear"></SlIconButton>
</div> </div>
This card has a header. You can put all sorts of things in it! This card has a header. You can put all sorts of things in it!
</SlCard> </SlCard>
@ -219,20 +215,16 @@ Footers can be used to display actions, summaries, or other relevant content.
max-width: 300px; max-width: 300px;
} }
.card-footer [slot="footer"] { .card-footer [slot='footer'] {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
</style> </style>
``` ```
```jsx react ```jsx react
import { import { SlButton, SlCard, SlRating } from '@shoelace-style/shoelace/dist/react';
SlButton,
SlCard,
SlRating
} from '@shoelace-style/shoelace/dist/react';
const css = ` const css = `
.card-footer { .card-footer {
@ -250,10 +242,11 @@ const App = () => (
<> <>
<SlCard className="card-footer"> <SlCard className="card-footer">
This card has a footer. You can put all sorts of things in it! This card has a footer. You can put all sorts of things in it!
<div slot="footer"> <div slot="footer">
<SlRating></SlRating> <SlRating></SlRating>
<SlButton slot="footer" variant="primary">Preview</SlButton> <SlButton slot="footer" variant="primary">
Preview
</SlButton>
</div> </div>
</SlCard> </SlCard>
@ -268,11 +261,11 @@ Cards accept an `image` slot. The image is displayed atop the card and stretches
```html preview ```html preview
<sl-card class="card-image"> <sl-card class="card-image">
<img <img
slot="image" 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" 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." 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. This is a kitten, but not just any kitten. This kitten likes walking along pallets.
</sl-card> </sl-card>
@ -295,9 +288,9 @@ const css = `
const App = () => ( const App = () => (
<> <>
<SlCard className="card-image"> <SlCard className="card-image">
<img <img
slot="image" 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" 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." 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. This is a kitten, but not just any kitten. This kitten likes walking along pallets.

16
docs/components/checkbox.md
Wyświetl plik

@ -11,9 +11,7 @@ Checkboxes allow the user to toggle an option on or off.
```jsx react ```jsx react
import { SlCheckbox } from '@shoelace-style/shoelace/dist/react'; import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlCheckbox>Checkbox</SlCheckbox>;
<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. ?> 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.
@ -31,9 +29,7 @@ Use the `checked` attribute to activate the checkbox.
```jsx react ```jsx react
import { SlCheckbox } from '@shoelace-style/shoelace/dist/react'; import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlCheckbox checked>Checked</SlCheckbox>;
<SlCheckbox checked>Checked</SlCheckbox>
);
``` ```
### Indeterminate ### Indeterminate
@ -47,9 +43,7 @@ Use the `indeterminate` attribute to make the checkbox indeterminate.
```jsx react ```jsx react
import { SlCheckbox } from '@shoelace-style/shoelace/dist/react'; import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlCheckbox indeterminate>Indeterminate</SlCheckbox>;
<SlCheckbox indeterminate>Indeterminate</SlCheckbox>
);
``` ```
### Disabled ### Disabled
@ -63,9 +57,7 @@ Use the `disabled` attribute to disable the checkbox.
```jsx react ```jsx react
import { SlCheckbox } from '@shoelace-style/shoelace/dist/react'; import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlCheckbox disabled>Disabled</SlCheckbox>;
<SlCheckbox disabled>Disabled</SlCheckbox>
);
``` ```
[component-metadata:sl-checkbox] [component-metadata:sl-checkbox]

12
docs/components/color-picker.md
Wyświetl plik

@ -11,9 +11,7 @@ Color pickers allow the user to select a color.
```jsx react ```jsx react
import { SlColorPicker } from '@shoelace-style/shoelace/dist/react'; import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlColorPicker />;
<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. ?> 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.
@ -31,9 +29,7 @@ Use the `opacity` attribute to enable the opacity slider. When this is enabled,
```jsx react ```jsx react
import { SlColorPicker } from '@shoelace-style/shoelace/dist/react'; import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlColorPicker opacity />;
<SlColorPicker opacity />
);
``` ```
### Formats ### Formats
@ -93,9 +89,7 @@ The color picker can be rendered inline instead of in a dropdown using the `inli
```jsx react ```jsx react
import { SlColorPicker } from '@shoelace-style/shoelace/dist/react'; import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlColorPicker inline />;
<SlColorPicker inline />
);
``` ```
[component-metadata:sl-color-picker] [component-metadata:sl-color-picker]

9
docs/components/dialog.md
Wyświetl plik

@ -202,12 +202,7 @@ const App = () => {
return ( return (
<> <>
<SlDialog <SlDialog label="Dialog" open={open} onSlRequestClose={handleRequestClose} onSlAfterHide={() => setOpen(false)}>
label="Dialog"
open={open}
onSlRequestClose={handleRequestClose}
onSlAfterHide={() => setOpen(false)}
>
This dialog will not close when you click on the overlay. This dialog will not close when you click on the overlay.
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}> <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
Close Close
@ -222,7 +217,7 @@ const App = () => {
### Customizing Initial Focus ### Customizing Initial Focus
By default, the dialog's panel will gain focus when opened. This allows a subsequent tab press to focus on the first tabbable element in the dialog. If you want a different element to have focus, add the `autofocus` attribute to it as shown below. By default, the dialog's panel will gain focus when opened. This allows a subsequent tab press to focus on the first tabbable element in the dialog. If you want a different element to have focus, add the `autofocus` attribute to it as shown below.
```html preview ```html preview
<sl-dialog label="Dialog" class="dialog-focus"> <sl-dialog label="Dialog" class="dialog-focus">

33
docs/components/divider.md
Wyświetl plik

@ -11,10 +11,9 @@ Dividers are used to visually separate or group elements.
```jsx react ```jsx react
import { SlDivider } from '@shoelace-style/shoelace/dist/react'; import { SlDivider } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlDivider />;
<SlDivider />
);
``` ```
## Examples ## Examples
### Width ### Width
@ -28,9 +27,7 @@ Use the `--width` custom property to change the width of the divider.
```jsx react ```jsx react
import { SlDivider } from '@shoelace-style/shoelace/dist/react'; import { SlDivider } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlDivider style={{ '--width': '4px' }} />;
<SlDivider style={{ '--width': '4px' }} />
);
``` ```
### Color ### Color
@ -44,9 +41,7 @@ Use the `--color` custom property to change the color of the divider.
```jsx react ```jsx react
import { SlDivider } from '@shoelace-style/shoelace/dist/react'; import { SlDivider } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlDivider style={{ '--color': 'tomato' }} />;
<SlDivider style={{ '--color': 'tomato' }} />
);
``` ```
### Spacing ### Spacing
@ -91,10 +86,10 @@ Add the `vertical` attribute to draw the divider in a vertical orientation. The
import { SlDivider } from '@shoelace-style/shoelace/dist/react'; import { SlDivider } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<div <div
style={{ style={{
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
height: '2rem' height: '2rem'
}} }}
> >
@ -112,7 +107,9 @@ const App = () => (
Use dividers in [menus](/components/menu) to visually group menu items. Use dividers in [menus](/components/menu) to visually group menu items.
```html preview ```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
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="1">Option 1</sl-menu-item> <sl-menu-item value="1">Option 1</sl-menu-item>
<sl-menu-item value="2">Option 2</sl-menu-item> <sl-menu-item value="2">Option 2</sl-menu-item>
<sl-menu-item value="3">Option 3</sl-menu-item> <sl-menu-item value="3">Option 3</sl-menu-item>
@ -124,14 +121,10 @@ Use dividers in [menus](/components/menu) to visually group menu items.
``` ```
```jsx react ```jsx react
import { import { SlDivider, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
SlDivider,
SlMenu,
SlMenuItem
} from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlMenu <SlMenu
style={{ style={{
maxWidth: '200px', maxWidth: '200px',
border: 'solid 1px var(--sl-panel-border-color)', border: 'solid 1px var(--sl-panel-border-color)',

10
docs/components/drawer.md
Wyświetl plik

@ -370,7 +370,6 @@ You can use `event.detail.source` to determine what triggered the request to clo
event.preventDefault(); event.preventDefault();
} }
}); });
</script> </script>
``` ```
@ -390,12 +389,7 @@ const App = () => {
return ( return (
<> <>
<SlDrawer <SlDrawer label="Drawer" open={open} onSlRequestClose={handleRequestClose} onSlAfterHide={() => setOpen(false)}>
label="Drawer"
open={open}
onSlRequestClose={handleRequestClose}
onSlAfterHide={() => setOpen(false)}
>
This drawer will not close when you click on the overlay. This drawer will not close when you click on the overlay.
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}> <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
Save &amp; Close Save &amp; Close
@ -410,7 +404,7 @@ const App = () => {
### Customizing Initial Focus ### Customizing Initial Focus
By default, the drawer's panel will gain focus when opened. This allows a subsequent tab press to focus on the first tabbable element in the drawer. If you want a different element to have focus, add the `autofocus` attribute to it as shown below. By default, the drawer's panel will gain focus when opened. This allows a subsequent tab press to focus on the first tabbable element in the drawer. If you want a different element to have focus, add the `autofocus` attribute to it as shown below.
```html preview ```html preview
<sl-drawer label="Drawer" class="drawer-focus"> <sl-drawer label="Drawer" class="drawer-focus">

100
docs/components/dropdown.md
Wyświetl plik

@ -32,18 +32,13 @@ Dropdowns are designed to work well with [menus](/components/menu) to provide a
``` ```
```jsx react ```jsx react
import { import { SlButton, SlDivider, SlDropdown, SlIcon, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
SlButton,
SlDivider,
SlDropdown,
SlIcon,
SlMenu,
SlMenuItem
} from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlDropdown> <SlDropdown>
<SlButton slot="trigger" caret>Dropdown</SlButton> <SlButton slot="trigger" caret>
Dropdown
</SlButton>
<SlMenu> <SlMenu>
<SlMenuItem>Dropdown Item 1</SlMenuItem> <SlMenuItem>Dropdown Item 1</SlMenuItem>
<SlMenuItem>Dropdown Item 2</SlMenuItem> <SlMenuItem>Dropdown Item 2</SlMenuItem>
@ -61,7 +56,7 @@ const App = () => (
<SlIcon slot="suffix" name="heart" /> <SlIcon slot="suffix" name="heart" />
</SlMenuItem> </SlMenuItem>
</SlMenu> </SlMenu>
</SlDropdown> </SlDropdown>
); );
``` ```
@ -95,12 +90,7 @@ When dropdowns are used with [menus](/components/menu), you can listen for the `
``` ```
```jsx react ```jsx react
import { import { SlButton, SlDropdown, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
SlButton,
SlDropdown,
SlMenu,
SlMenuItem
} from '@shoelace-style/shoelace/dist/react';
const App = () => { const App = () => {
function handleSelect(event) { function handleSelect(event) {
@ -110,13 +100,15 @@ const App = () => {
return ( return (
<SlDropdown> <SlDropdown>
<SlButton slot="trigger" caret>Edit</SlButton> <SlButton slot="trigger" caret>
Edit
</SlButton>
<SlMenu onSlSelect={handleSelect}> <SlMenu onSlSelect={handleSelect}>
<SlMenuItem value="cut">Cut</SlMenuItem> <SlMenuItem value="cut">Cut</SlMenuItem>
<SlMenuItem value="copy">Copy</SlMenuItem> <SlMenuItem value="copy">Copy</SlMenuItem>
<SlMenuItem value="paste">Paste</SlMenuItem> <SlMenuItem value="paste">Paste</SlMenuItem>
</SlMenu> </SlMenu>
</SlDropdown> </SlDropdown>
); );
}; };
``` ```
@ -148,12 +140,7 @@ Alternatively, you can listen for the `click` event on individual menu items. No
``` ```
```jsx react ```jsx react
import { import { SlButton, SlDropdown, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
SlButton,
SlDropdown,
SlMenu,
SlMenuItem
} from '@shoelace-style/shoelace/dist/react';
const App = () => { const App = () => {
function handleCut() { function handleCut() {
@ -170,13 +157,15 @@ const App = () => {
return ( return (
<SlDropdown> <SlDropdown>
<SlButton slot="trigger" caret>Edit</SlButton> <SlButton slot="trigger" caret>
Edit
</SlButton>
<SlMenu> <SlMenu>
<SlMenuItem onClick={handleCut}>Cut</SlMenuItem> <SlMenuItem onClick={handleCut}>Cut</SlMenuItem>
<SlMenuItem onClick={handleCopy}>Copy</SlMenuItem> <SlMenuItem onClick={handleCopy}>Copy</SlMenuItem>
<SlMenuItem onClick={handlePaste}>Paste</SlMenuItem> <SlMenuItem onClick={handlePaste}>Paste</SlMenuItem>
</SlMenu> </SlMenu>
</SlDropdown> </SlDropdown>
); );
}; };
``` ```
@ -200,17 +189,13 @@ The preferred placement of the dropdown can be set with the `placement` attribut
``` ```
```jsx react ```jsx react
import { import { SlButton, SlDivider, SlDropdown, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
SlButton,
SlDivider,
SlDropdown,
SlMenu,
SlMenuItem
} from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlDropdown placement="top-start"> <SlDropdown placement="top-start">
<SlButton slot="trigger" caret>Edit</SlButton> <SlButton slot="trigger" caret>
Edit
</SlButton>
<SlMenu> <SlMenu>
<SlMenuItem>Cut</SlMenuItem> <SlMenuItem>Cut</SlMenuItem>
<SlMenuItem>Copy</SlMenuItem> <SlMenuItem>Copy</SlMenuItem>
@ -219,7 +204,7 @@ const App = () => (
<SlMenuItem>Find</SlMenuItem> <SlMenuItem>Find</SlMenuItem>
<SlMenuItem>Replace</SlMenuItem> <SlMenuItem>Replace</SlMenuItem>
</SlMenu> </SlMenu>
</SlDropdown> </SlDropdown>
); );
``` ```
@ -242,17 +227,13 @@ The distance from the panel to the trigger can be customized using the `distance
``` ```
```jsx react ```jsx react
import { import { SlButton, SlDivider, SlDropdown, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
SlButton,
SlDivider,
SlDropdown,
SlMenu,
SlMenuItem
} from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlDropdown distance={30}> <SlDropdown distance={30}>
<SlButton slot="trigger" caret>Edit</SlButton> <SlButton slot="trigger" caret>
Edit
</SlButton>
<SlMenu> <SlMenu>
<SlMenuItem>Cut</SlMenuItem> <SlMenuItem>Cut</SlMenuItem>
<SlMenuItem>Copy</SlMenuItem> <SlMenuItem>Copy</SlMenuItem>
@ -261,7 +242,7 @@ const App = () => (
<SlMenuItem>Find</SlMenuItem> <SlMenuItem>Find</SlMenuItem>
<SlMenuItem>Replace</SlMenuItem> <SlMenuItem>Replace</SlMenuItem>
</SlMenu> </SlMenu>
</SlDropdown> </SlDropdown>
); );
``` ```
@ -284,17 +265,13 @@ The offset of the panel along the trigger can be customized using the `skidding`
``` ```
```jsx react ```jsx react
import { import { SlButton, SlDivider, SlDropdown, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
SlButton,
SlDivider,
SlDropdown,
SlMenu,
SlMenuItem
} from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlDropdown skidding={30}> <SlDropdown skidding={30}>
<SlButton slot="trigger" caret>Edit</SlButton> <SlButton slot="trigger" caret>
Edit
</SlButton>
<SlMenu> <SlMenu>
<SlMenuItem>Cut</SlMenuItem> <SlMenuItem>Cut</SlMenuItem>
<SlMenuItem>Copy</SlMenuItem> <SlMenuItem>Copy</SlMenuItem>
@ -303,7 +280,7 @@ const App = () => (
<SlMenuItem>Find</SlMenuItem> <SlMenuItem>Find</SlMenuItem>
<SlMenuItem>Replace</SlMenuItem> <SlMenuItem>Replace</SlMenuItem>
</SlMenu> </SlMenu>
</SlDropdown> </SlDropdown>
); );
``` ```
@ -342,14 +319,7 @@ Dropdown panels will be clipped if they're inside a container that has `overflow
``` ```
```jsx react ```jsx react
import { import { SlButton, SlDivider, SlDropdown, SlIcon, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
SlButton,
SlDivider,
SlDropdown,
SlIcon,
SlMenu,
SlMenuItem
} from '@shoelace-style/shoelace/dist/react';
const css = ` const css = `
.dropdown-hoist { .dropdown-hoist {
@ -363,7 +333,9 @@ const App = () => (
<> <>
<div className="dropdown-hoist"> <div className="dropdown-hoist">
<SlDropdown> <SlDropdown>
<SlButton slot="trigger" caret>No Hoist</SlButton> <SlButton slot="trigger" caret>
No Hoist
</SlButton>
<SlMenu> <SlMenu>
<SlMenuItem>Item 1</SlMenuItem> <SlMenuItem>Item 1</SlMenuItem>
<SlMenuItem>Item 2</SlMenuItem> <SlMenuItem>Item 2</SlMenuItem>
@ -372,7 +344,9 @@ const App = () => (
</SlDropdown> </SlDropdown>
<SlDropdown hoist> <SlDropdown hoist>
<SlButton slot="trigger" caret>Hoist</SlButton> <SlButton slot="trigger" caret>
Hoist
</SlButton>
<SlMenu> <SlMenu>
<SlMenuItem>Item 1</SlMenuItem> <SlMenuItem>Item 1</SlMenuItem>
<SlMenuItem>Item 2</SlMenuItem> <SlMenuItem>Item 2</SlMenuItem>

69
docs/components/format-bytes.md
Wyświetl plik

@ -6,9 +6,8 @@ Formats a number as a human readable bytes value.
```html preview ```html preview
<div class="format-bytes-overview"> <div class="format-bytes-overview">
The file is <sl-format-bytes value="1000"></sl-format-bytes> in size. The file is <sl-format-bytes value="1000"></sl-format-bytes> in size. <br /><br />
<br><br> <sl-input type="number" value="1000" label="Number to Format" style="max-width: 180px;"></sl-input>
<sl-input type="number" value="1000" label="Number to Format" style="max-width: 180px;"></sl-input>
</div> </div>
<script> <script>
@ -16,18 +15,13 @@ Formats a number as a human readable bytes value.
const formatter = container.querySelector('sl-format-bytes'); const formatter = container.querySelector('sl-format-bytes');
const input = container.querySelector('sl-input'); const input = container.querySelector('sl-input');
input.addEventListener('sl-input', () => formatter.value = input.value || 0); input.addEventListener('sl-input', () => (formatter.value = input.value || 0));
</script> </script>
``` ```
```jsx react ```jsx react
import { useState } from 'react'; import { useState } from 'react';
import { import { SlButton, SlFormatBytes, SlInput } from '@shoelace-style/shoelace/dist/react';
SlButton,
SlFormatBytes,
SlInput
} from '@shoelace-style/shoelace/dist/react';
const App = () => { const App = () => {
const [value, setValue] = useState(1000); const [value, setValue] = useState(1000);
@ -35,11 +29,12 @@ const App = () => {
return ( return (
<> <>
The file is <SlFormatBytes value={value} /> in size. The file is <SlFormatBytes value={value} /> in size.
<br /><br /> <br />
<SlInput <br />
type="number" <SlInput
type="number"
value={value} value={value}
label="Number to Format" label="Number to Format"
style={{ maxWidth: '180px' }} style={{ maxWidth: '180px' }}
onSlInput={event => setValue(event.target.value)} onSlInput={event => setValue(event.target.value)}
/> />
@ -55,21 +50,23 @@ const App = () => {
Set the `value` attribute to a number to get the value in bytes. Set the `value` attribute to a number to get the value in bytes.
```html preview ```html preview
<sl-format-bytes value="12"></sl-format-bytes><br> <sl-format-bytes value="12"></sl-format-bytes><br />
<sl-format-bytes value="1200"></sl-format-bytes><br> <sl-format-bytes value="1200"></sl-format-bytes><br />
<sl-format-bytes value="1200000"></sl-format-bytes><br> <sl-format-bytes value="1200000"></sl-format-bytes><br />
<sl-format-bytes value="1200000000"></sl-format-bytes> <sl-format-bytes value="1200000000"></sl-format-bytes>
``` ```
```jsx react ```jsx react
import { SlFormatBytes } from '@shoelace-style/shoelace/dist/react'; import { SlFormatBytes } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
<SlFormatBytes value="12" /><br /> <SlFormatBytes value="12" />
<SlFormatBytes value="1200" /><br /> <br />
<SlFormatBytes value="1200000" /><br /> <SlFormatBytes value="1200" />
<br />
<SlFormatBytes value="1200000" />
<br />
<SlFormatBytes value="1200000000" /> <SlFormatBytes value="1200000000" />
</> </>
); );
@ -80,9 +77,9 @@ const App = () => (
To get the value in bits, set the `unit` attribute to `bit`. To get the value in bits, set the `unit` attribute to `bit`.
```html preview ```html preview
<sl-format-bytes value="12" unit="bit"></sl-format-bytes><br> <sl-format-bytes value="12" unit="bit"></sl-format-bytes><br />
<sl-format-bytes value="1200" unit="bit"></sl-format-bytes><br> <sl-format-bytes value="1200" unit="bit"></sl-format-bytes><br />
<sl-format-bytes value="1200000" unit="bit"></sl-format-bytes><br> <sl-format-bytes value="1200000" unit="bit"></sl-format-bytes><br />
<sl-format-bytes value="1200000000" unit="bit"></sl-format-bytes> <sl-format-bytes value="1200000000" unit="bit"></sl-format-bytes>
``` ```
@ -91,9 +88,12 @@ import { SlFormatBytes } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
<SlFormatBytes value="12" unit="bit" /><br /> <SlFormatBytes value="12" unit="bit" />
<SlFormatBytes value="1200" unit="bit" /><br /> <br />
<SlFormatBytes value="1200000" unit="bit" /><br /> <SlFormatBytes value="1200" unit="bit" />
<br />
<SlFormatBytes value="1200000" unit="bit" />
<br />
<SlFormatBytes value="1200000000" unit="bit" /> <SlFormatBytes value="1200000000" unit="bit" />
</> </>
); );
@ -104,9 +104,9 @@ const App = () => (
Use the `lang` attribute to set the number formatting locale. Use the `lang` attribute to set the number formatting locale.
```html preview ```html preview
<sl-format-bytes value="12" lang="de"></sl-format-bytes><br> <sl-format-bytes value="12" lang="de"></sl-format-bytes><br />
<sl-format-bytes value="1200" lang="de"></sl-format-bytes><br> <sl-format-bytes value="1200" lang="de"></sl-format-bytes><br />
<sl-format-bytes value="1200000" lang="de"></sl-format-bytes><br> <sl-format-bytes value="1200000" lang="de"></sl-format-bytes><br />
<sl-format-bytes value="1200000000" lang="de"></sl-format-bytes> <sl-format-bytes value="1200000000" lang="de"></sl-format-bytes>
``` ```
@ -115,9 +115,12 @@ import { SlFormatBytes } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
<SlFormatBytes value="12" lang="de" /><br /> <SlFormatBytes value="12" lang="de" />
<SlFormatBytes value="1200" lang="de" /><br /> <br />
<SlFormatBytes value="1200000" lang="de" /><br /> <SlFormatBytes value="1200" lang="de" />
<br />
<SlFormatBytes value="1200000" lang="de" />
<br />
<SlFormatBytes value="1200000000" lang="de" /> <SlFormatBytes value="1200000000" lang="de" />
</> </>
); );

44
docs/components/format-date.md
Wyświetl plik

@ -14,9 +14,7 @@ Localization is handled by the browser's [`Intl.DateTimeFormat` API](https://dev
```jsx react ```jsx react
import { SlFormatDate } from '@shoelace-style/shoelace/dist/react'; import { SlFormatDate } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlFormatDate date="2020-07-15T09:17:00-04:00" />;
<SlFormatDate date="2020-07-15T09:17:00-04:00" />
);
``` ```
The `date` attribute determines the date/time to use when formatting. 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. If omitted, the current date/time will be assumed. The `date` attribute determines the date/time to use when formatting. 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. If omitted, the current date/time will be assumed.
@ -31,19 +29,19 @@ Formatting options are based on those found in the [`Intl.DateTimeFormat` API](h
```html preview ```html preview
<!-- Human-readable date --> <!-- Human-readable date -->
<sl-format-date month="long" day="numeric" year="numeric"></sl-format-date><br> <sl-format-date month="long" day="numeric" year="numeric"></sl-format-date><br />
<!-- Time --> <!-- Time -->
<sl-format-date hour="numeric" minute="numeric"></sl-format-date><br> <sl-format-date hour="numeric" minute="numeric"></sl-format-date><br />
<!-- Weekday --> <!-- Weekday -->
<sl-format-date weekday="long"></sl-format-date><br> <sl-format-date weekday="long"></sl-format-date><br />
<!-- Month --> <!-- Month -->
<sl-format-date month="long"></sl-format-date><br> <sl-format-date month="long"></sl-format-date><br />
<!-- Year --> <!-- Year -->
<sl-format-date year="numeric"></sl-format-date><br> <sl-format-date year="numeric"></sl-format-date><br />
<!-- No formatting options --> <!-- No formatting options -->
<sl-format-date></sl-format-date> <sl-format-date></sl-format-date>
@ -55,19 +53,24 @@ import { SlFormatDate } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
{/* Human-readable date */} {/* Human-readable date */}
<SlFormatDate month="long" day="numeric" year="numeric" /><br /> <SlFormatDate month="long" day="numeric" year="numeric" />
<br />
{/* Time */} {/* Time */}
<SlFormatDate hour="numeric" minute="numeric" /><br /> <SlFormatDate hour="numeric" minute="numeric" />
<br />
{/* Weekday */} {/* Weekday */}
<SlFormatDate weekday="long" /><br /> <SlFormatDate weekday="long" />
<br />
{/* Month */} {/* Month */}
<SlFormatDate month="long" /><br /> <SlFormatDate month="long" />
<br />
{/* Year */} {/* Year */}
<SlFormatDate year="numeric" /><br /> <SlFormatDate year="numeric" />
<br />
{/* No formatting options */} {/* No formatting options */}
<SlFormatDate /> <SlFormatDate />
@ -80,7 +83,7 @@ const App = () => (
By default, the browser will determine whether to use 12-hour or 24-hour time. To force one or the other, set the `hour-format` attribute to `12` or `24`. By default, the browser will determine whether to use 12-hour or 24-hour time. To force one or the other, set the `hour-format` attribute to `12` or `24`.
```html preview ```html preview
<sl-format-date hour="numeric" minute="numeric" hour-format="12"></sl-format-date><br> <sl-format-date hour="numeric" minute="numeric" hour-format="12"></sl-format-date><br />
<sl-format-date hour="numeric" minute="numeric" hour-format="24"></sl-format-date> <sl-format-date hour="numeric" minute="numeric" hour-format="24"></sl-format-date>
``` ```
@ -89,7 +92,8 @@ import { SlFormatDate } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
<SlFormatDate hour="numeric" minute="numeric" hour-format="12" /><br /> <SlFormatDate hour="numeric" minute="numeric" hour-format="12" />
<br />
<SlFormatDate hour="numeric" minute="numeric" hour-format="24" /> <SlFormatDate hour="numeric" minute="numeric" hour-format="24" />
</> </>
); );
@ -100,8 +104,8 @@ const App = () => (
Use the `lang` attribute to set the date/time formatting locale. Use the `lang` attribute to set the date/time formatting locale.
```html preview ```html preview
English: <sl-format-date lang="en"></sl-format-date><br> English: <sl-format-date lang="en"></sl-format-date><br />
French: <sl-format-date lang="fr"></sl-format-date><br> French: <sl-format-date lang="fr"></sl-format-date><br />
Russian: <sl-format-date lang="ru"></sl-format-date> Russian: <sl-format-date lang="ru"></sl-format-date>
``` ```
@ -110,8 +114,10 @@ import { SlFormatDate } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
English: <SlFormatDate lang="en" /><br /> English: <SlFormatDate lang="en" />
French: <SlFormatDate lang="fr" /><br /> <br />
French: <SlFormatDate lang="fr" />
<br />
Russian: <SlFormatDate lang="ru" /> Russian: <SlFormatDate lang="ru" />
</> </>
); );

71
docs/components/format-number.md
Wyświetl plik

@ -8,9 +8,9 @@ Localization is handled by the browser's [`Intl.NumberFormat` API](https://devel
```html preview ```html preview
<div class="format-number-overview"> <div class="format-number-overview">
<sl-format-number value="1000"></sl-format-number> <sl-format-number value="1000"></sl-format-number>
<br><br> <br /><br />
<sl-input type="number" value="1000" label="Number to Format" style="max-width: 180px;"></sl-input> <sl-input type="number" value="1000" label="Number to Format" style="max-width: 180px;"></sl-input>
</div> </div>
<script> <script>
@ -18,7 +18,7 @@ Localization is handled by the browser's [`Intl.NumberFormat` API](https://devel
const formatter = container.querySelector('sl-format-number'); const formatter = container.querySelector('sl-format-number');
const input = container.querySelector('sl-input'); const input = container.querySelector('sl-input');
input.addEventListener('sl-input', () => formatter.value = input.value || 0); input.addEventListener('sl-input', () => (formatter.value = input.value || 0));
</script> </script>
``` ```
@ -32,11 +32,12 @@ const App = () => {
return ( return (
<> <>
<SlFormatNumber value={value} /> <SlFormatNumber value={value} />
<br /><br /> <br />
<SlInput <br />
type="number" <SlInput
value={value} type="number"
label="Number to Format" value={value}
label="Number to Format"
style={{ maxWidth: '180px' }} style={{ maxWidth: '180px' }}
onSlInput={event => setValue(event.target.value)} onSlInput={event => setValue(event.target.value)}
/> />
@ -52,10 +53,10 @@ const App = () => {
To get the value as a percent, set the `type` attribute to `percent`. To get the value as a percent, set the `type` attribute to `percent`.
```html preview ```html preview
<sl-format-number type="percent" value="0"></sl-format-number><br> <sl-format-number type="percent" value="0"></sl-format-number><br />
<sl-format-number type="percent" value="0.25"></sl-format-number><br> <sl-format-number type="percent" value="0.25"></sl-format-number><br />
<sl-format-number type="percent" value="0.50"></sl-format-number><br> <sl-format-number type="percent" value="0.50"></sl-format-number><br />
<sl-format-number type="percent" value="0.75"></sl-format-number><br> <sl-format-number type="percent" value="0.75"></sl-format-number><br />
<sl-format-number type="percent" value="1"></sl-format-number> <sl-format-number type="percent" value="1"></sl-format-number>
``` ```
@ -64,11 +65,15 @@ import { SlFormatNumber } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
<SlFormatNumber type="percent" value={0} /><br /> <SlFormatNumber type="percent" value={0} />
<SlFormatNumber type="percent" value={0.25} /><br /> <br />
<SlFormatNumber type="percent" value={0.50} /><br /> <SlFormatNumber type="percent" value={0.25} />
<SlFormatNumber type="percent" value={0.75} /><br /> <br />
<SlFormatNumber type="percent" value={1} /> <SlFormatNumber type="percent" value={0.5} />
<br />
<SlFormatNumber type="percent" value={0.75} />
<br />
<SlFormatNumber type="percent" value={1} />
</> </>
); );
``` ```
@ -78,8 +83,8 @@ const App = () => (
Use the `lang` attribute to set the number formatting locale. Use the `lang` attribute to set the number formatting locale.
```html preview ```html preview
English: <sl-format-number value="2000" lang="en" minimum-fraction-digits="2"></sl-format-number><br> English: <sl-format-number value="2000" lang="en" minimum-fraction-digits="2"></sl-format-number><br />
German: <sl-format-number value="2000" lang="de" minimum-fraction-digits="2"></sl-format-number><br> German: <sl-format-number value="2000" lang="de" minimum-fraction-digits="2"></sl-format-number><br />
Russian: <sl-format-number value="2000" lang="ru" minimum-fraction-digits="2"></sl-format-number> Russian: <sl-format-number value="2000" lang="ru" minimum-fraction-digits="2"></sl-format-number>
``` ```
@ -88,8 +93,10 @@ import { SlFormatNumber } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
English: <SlFormatNumber value="2000" lang="en" minimum-fraction-digits="2" /><br /> English: <SlFormatNumber value="2000" lang="en" minimum-fraction-digits="2" />
German: <SlFormatNumber value="2000" lang="de" minimum-fraction-digits="2" /><br /> <br />
German: <SlFormatNumber value="2000" lang="de" minimum-fraction-digits="2" />
<br />
Russian: <SlFormatNumber value="2000" lang="ru" minimum-fraction-digits="2" /> Russian: <SlFormatNumber value="2000" lang="ru" minimum-fraction-digits="2" />
</> </>
); );
@ -100,10 +107,10 @@ const App = () => (
To format a number as a monetary value, set the `type` attribute to `currency` and set the `currency` attribute to the desired ISO 4217 currency code. You should also specify `lang` to ensure the the number is formatted correctly for the target locale. To format a number as a monetary value, set the `type` attribute to `currency` and set the `currency` attribute to the desired ISO 4217 currency code. You should also specify `lang` to ensure the the number is formatted correctly for the target locale.
```html preview ```html preview
<sl-format-number type="currency" currency="USD" value="2000" lang="en-US"></sl-format-number><br> <sl-format-number type="currency" currency="USD" value="2000" lang="en-US"></sl-format-number><br />
<sl-format-number type="currency" currency="GBP" value="2000" lang="en-GB"></sl-format-number><br> <sl-format-number type="currency" currency="GBP" value="2000" lang="en-GB"></sl-format-number><br />
<sl-format-number type="currency" currency="EUR" value="2000" lang="de"></sl-format-number><br> <sl-format-number type="currency" currency="EUR" value="2000" lang="de"></sl-format-number><br />
<sl-format-number type="currency" currency="RUB" value="2000" lang="ru"></sl-format-number><br> <sl-format-number type="currency" currency="RUB" value="2000" lang="ru"></sl-format-number><br />
<sl-format-number type="currency" currency="CNY" value="2000" lang="zh-cn"></sl-format-number> <sl-format-number type="currency" currency="CNY" value="2000" lang="zh-cn"></sl-format-number>
``` ```
@ -112,10 +119,14 @@ import { SlFormatNumber } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
<SlFormatNumber type="currency" currency="USD" value="2000" lang="en-US" /><br /> <SlFormatNumber type="currency" currency="USD" value="2000" lang="en-US" />
<SlFormatNumber type="currency" currency="GBP" value="2000" lang="en-GB" /><br /> <br />
<SlFormatNumber type="currency" currency="EUR" value="2000" lang="de" /><br /> <SlFormatNumber type="currency" currency="GBP" value="2000" lang="en-GB" />
<SlFormatNumber type="currency" currency="RUB" value="2000" lang="ru" /><br /> <br />
<SlFormatNumber type="currency" currency="EUR" value="2000" lang="de" />
<br />
<SlFormatNumber type="currency" currency="RUB" value="2000" lang="ru" />
<br />
<SlFormatNumber type="currency" currency="CNY" value="2000" lang="zh-cn" /> <SlFormatNumber type="currency" currency="CNY" value="2000" lang="zh-cn" />
</> </>
); );

17
docs/components/icon-button.md
Wyświetl plik

@ -13,9 +13,7 @@ For a full list of icons that come bundled with Shoelace, refer to the [icon com
```jsx react ```jsx react
import { SlIconButton } from '@shoelace-style/shoelace/dist/react'; import { SlIconButton } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlIconButton name="gear" label="Settings" />;
<SlIconButton name="gear" label="Settings" />
);
``` ```
## Examples ## Examples
@ -111,14 +109,7 @@ Use the `href` attribute to convert the button to a link.
```jsx react ```jsx react
import { SlIconButton } from '@shoelace-style/shoelace/dist/react'; import { SlIconButton } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlIconButton name="gear" label="Settings" href="https://example.com" target="_blank" />;
<SlIconButton
name="gear"
label="Settings"
href="https://example.com"
target="_blank"
/>
);
``` ```
### Icon Button with Tooltip ### Icon Button with Tooltip
@ -152,9 +143,7 @@ Use the `disabled` attribute to disable the icon button.
```jsx react ```jsx react
import { SlIconButton } from '@shoelace-style/shoelace/dist/react'; import { SlIconButton } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlIconButton name="gear" label="Settings" disabled />;
<SlIconButton name="gear" label="Settings" disabled />
);
``` ```
[component-metadata:sl-icon-button] [component-metadata:sl-icon-button]

45
docs/components/icon.md
Wyświetl plik

@ -75,7 +75,7 @@ const App = () => (
<SlIcon name="search" /> <SlIcon name="search" />
<SlIcon name="star" /> <SlIcon name="star" />
<SlIcon name="trash" /> <SlIcon name="trash" />
</div> </div>
); );
``` ```
@ -90,9 +90,7 @@ For non-decorative icons, use the `label` attribute to announce it to assistive
```jsx react ```jsx react
import { SlIcon } from '@shoelace-style/shoelace/dist/react'; import { SlIcon } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlIcon name="star-fill" label="Add to favorites" />;
<SlIcon name="star-fill" label="Add to favorites" />
);
``` ```
### Custom Icons ### Custom Icons
@ -103,13 +101,10 @@ Custom icons can be loaded individually with the `src` attribute. Only SVGs on a
<sl-icon src="https://shoelace.style/assets/images/shoe.svg" style="font-size: 8rem;"></sl-icon> <sl-icon src="https://shoelace.style/assets/images/shoe.svg" style="font-size: 8rem;"></sl-icon>
``` ```
```jsx react ```jsx react
import { SlIcon } from '@shoelace-style/shoelace/dist/react'; import { SlIcon } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlIcon src="https://shoelace.style/assets/images/shoe.svg" style={{ fontSize: '8rem' }}></SlIcon>;
<SlIcon src="https://shoelace.style/assets/images/shoe.svg" style={{ fontSize: '8rem' }}></SlIcon>
);
``` ```
## Icon Libraries ## Icon Libraries
@ -163,7 +158,7 @@ Icons in this library are licensed under the [Creative Commons 4.0 License](http
if (name.substring(0, 4) === 'bxl-') folder = 'logos'; if (name.substring(0, 4) === 'bxl-') folder = 'logos';
return `https://cdn.jsdelivr.net/npm/boxicons@2.0.5/svg/${folder}/${name}.svg`; return `https://cdn.jsdelivr.net/npm/boxicons@2.0.5/svg/${folder}/${name}.svg`;
}, },
mutator:svg => svg.setAttribute('fill', 'currentColor') mutator: svg => svg.setAttribute('fill', 'currentColor')
}); });
</script> </script>
@ -174,14 +169,14 @@ Icons in this library are licensed under the [Creative Commons 4.0 License](http
<sl-icon library="boxicons" name="bx-save"></sl-icon> <sl-icon library="boxicons" name="bx-save"></sl-icon>
<sl-icon library="boxicons" name="bx-server"></sl-icon> <sl-icon library="boxicons" name="bx-server"></sl-icon>
<sl-icon library="boxicons" name="bx-wine"></sl-icon> <sl-icon library="boxicons" name="bx-wine"></sl-icon>
<br> <br />
<sl-icon library="boxicons" name="bxs-bot"></sl-icon> <sl-icon library="boxicons" name="bxs-bot"></sl-icon>
<sl-icon library="boxicons" name="bxs-cookie"></sl-icon> <sl-icon library="boxicons" name="bxs-cookie"></sl-icon>
<sl-icon library="boxicons" name="bxs-joystick"></sl-icon> <sl-icon library="boxicons" name="bxs-joystick"></sl-icon>
<sl-icon library="boxicons" name="bxs-save"></sl-icon> <sl-icon library="boxicons" name="bxs-save"></sl-icon>
<sl-icon library="boxicons" name="bxs-server"></sl-icon> <sl-icon library="boxicons" name="bxs-server"></sl-icon>
<sl-icon library="boxicons" name="bxs-wine"></sl-icon> <sl-icon library="boxicons" name="bxs-wine"></sl-icon>
<br> <br />
<sl-icon library="boxicons" name="bxl-apple"></sl-icon> <sl-icon library="boxicons" name="bxl-apple"></sl-icon>
<sl-icon library="boxicons" name="bxl-chrome"></sl-icon> <sl-icon library="boxicons" name="bxl-chrome"></sl-icon>
<sl-icon library="boxicons" name="bxl-edge"></sl-icon> <sl-icon library="boxicons" name="bxl-edge"></sl-icon>
@ -245,20 +240,20 @@ Icons in this library are licensed under the [Font Awesome Free License](https:/
<sl-icon library="fa" name="far-hdd"></sl-icon> <sl-icon library="fa" name="far-hdd"></sl-icon>
<sl-icon library="fa" name="far-heart"></sl-icon> <sl-icon library="fa" name="far-heart"></sl-icon>
<sl-icon library="fa" name="far-star"></sl-icon> <sl-icon library="fa" name="far-star"></sl-icon>
<br> <br />
<sl-icon library="fa" name="fas-archive"></sl-icon> <sl-icon library="fa" name="fas-archive"></sl-icon>
<sl-icon library="fa" name="fas-book"></sl-icon> <sl-icon library="fa" name="fas-book"></sl-icon>
<sl-icon library="fa" name="fas-chess-knight"></sl-icon> <sl-icon library="fa" name="fas-chess-knight"></sl-icon>
<sl-icon library="fa" name="fas-dice"></sl-icon> <sl-icon library="fa" name="fas-dice"></sl-icon>
<sl-icon library="fa" name="fas-pizza-slice"></sl-icon> <sl-icon library="fa" name="fas-pizza-slice"></sl-icon>
<sl-icon library="fa" name="fas-scroll"></sl-icon> <sl-icon library="fa" name="fas-scroll"></sl-icon>
<br> <br />
<sl-icon library="fa" name="fab-apple"></sl-icon> <sl-icon library="fa" name="fab-apple"></sl-icon>
<sl-icon library="fa" name="fab-chrome"></sl-icon> <sl-icon library="fa" name="fab-chrome"></sl-icon>
<sl-icon library="fa" name="fab-edge"></sl-icon> <sl-icon library="fa" name="fab-edge"></sl-icon>
<sl-icon library="fa" name="fab-firefox"></sl-icon> <sl-icon library="fa" name="fab-firefox"></sl-icon>
<sl-icon library="fa" name="fab-opera"></sl-icon> <sl-icon library="fa" name="fab-opera"></sl-icon>
<sl-icon library="fa" name="fab-microsoft"></sl-icon> <sl-icon library="fa" name="fab-microsoft"></sl-icon>
</div> </div>
``` ```
@ -340,14 +335,14 @@ Icons in this library are licensed under the [MIT License](https://github.com/io
<sl-icon library="ionicons" name="chatbubble"></sl-icon> <sl-icon library="ionicons" name="chatbubble"></sl-icon>
<sl-icon library="ionicons" name="settings"></sl-icon> <sl-icon library="ionicons" name="settings"></sl-icon>
<sl-icon library="ionicons" name="warning"></sl-icon> <sl-icon library="ionicons" name="warning"></sl-icon>
<br> <br />
<sl-icon library="ionicons" name="alarm-outline"></sl-icon> <sl-icon library="ionicons" name="alarm-outline"></sl-icon>
<sl-icon library="ionicons" name="american-football-outline"></sl-icon> <sl-icon library="ionicons" name="american-football-outline"></sl-icon>
<sl-icon library="ionicons" name="bug-outline"></sl-icon> <sl-icon library="ionicons" name="bug-outline"></sl-icon>
<sl-icon library="ionicons" name="chatbubble-outline"></sl-icon> <sl-icon library="ionicons" name="chatbubble-outline"></sl-icon>
<sl-icon library="ionicons" name="settings-outline"></sl-icon> <sl-icon library="ionicons" name="settings-outline"></sl-icon>
<sl-icon library="ionicons" name="warning-outline"></sl-icon> <sl-icon library="ionicons" name="warning-outline"></sl-icon>
<br> <br />
<sl-icon library="ionicons" name="alarm-sharp"></sl-icon> <sl-icon library="ionicons" name="alarm-sharp"></sl-icon>
<sl-icon library="ionicons" name="american-football-sharp"></sl-icon> <sl-icon library="ionicons" name="american-football-sharp"></sl-icon>
<sl-icon library="ionicons" name="bug-sharp"></sl-icon> <sl-icon library="ionicons" name="bug-sharp"></sl-icon>
@ -380,7 +375,7 @@ Icons in this library are licensed under the [MIT License](https://github.com/mi
<sl-icon library="jam" name="leaf"></sl-icon> <sl-icon library="jam" name="leaf"></sl-icon>
<sl-icon library="jam" name="picture"></sl-icon> <sl-icon library="jam" name="picture"></sl-icon>
<sl-icon library="jam" name="set-square"></sl-icon> <sl-icon library="jam" name="set-square"></sl-icon>
<br> <br />
<sl-icon library="jam" name="calendar-f"></sl-icon> <sl-icon library="jam" name="calendar-f"></sl-icon>
<sl-icon library="jam" name="camera-f"></sl-icon> <sl-icon library="jam" name="camera-f"></sl-icon>
<sl-icon library="jam" name="filter-f"></sl-icon> <sl-icon library="jam" name="filter-f"></sl-icon>
@ -416,14 +411,14 @@ Icons in this library are licensed under the [Apache 2.0 License](https://github
<sl-icon library="material" name="volume_up"></sl-icon> <sl-icon library="material" name="volume_up"></sl-icon>
<sl-icon library="material" name="settings"></sl-icon> <sl-icon library="material" name="settings"></sl-icon>
<sl-icon library="material" name="shopping_basket"></sl-icon> <sl-icon library="material" name="shopping_basket"></sl-icon>
<br> <br />
<sl-icon library="material" name="notifications_round"></sl-icon> <sl-icon library="material" name="notifications_round"></sl-icon>
<sl-icon library="material" name="email_round"></sl-icon> <sl-icon library="material" name="email_round"></sl-icon>
<sl-icon library="material" name="delete_round"></sl-icon> <sl-icon library="material" name="delete_round"></sl-icon>
<sl-icon library="material" name="volume_up_round"></sl-icon> <sl-icon library="material" name="volume_up_round"></sl-icon>
<sl-icon library="material" name="settings_round"></sl-icon> <sl-icon library="material" name="settings_round"></sl-icon>
<sl-icon library="material" name="shopping_basket_round"></sl-icon> <sl-icon library="material" name="shopping_basket_round"></sl-icon>
<br> <br />
<sl-icon library="material" name="notifications_sharp"></sl-icon> <sl-icon library="material" name="notifications_sharp"></sl-icon>
<sl-icon library="material" name="email_sharp"></sl-icon> <sl-icon library="material" name="email_sharp"></sl-icon>
<sl-icon library="material" name="delete_sharp"></sl-icon> <sl-icon library="material" name="delete_sharp"></sl-icon>
@ -460,13 +455,13 @@ Icons in this library are licensed under the [Apache 2.0 License](https://github
<sl-icon library="remixicon" name="development/bug-line"></sl-icon> <sl-icon library="remixicon" name="development/bug-line"></sl-icon>
<sl-icon library="remixicon" name="media/image-line"></sl-icon> <sl-icon library="remixicon" name="media/image-line"></sl-icon>
<sl-icon library="remixicon" name="system/alert-line"></sl-icon> <sl-icon library="remixicon" name="system/alert-line"></sl-icon>
<br> <br />
<sl-icon library="remixicon" name="business/cloud-fill"></sl-icon> <sl-icon library="remixicon" name="business/cloud-fill"></sl-icon>
<sl-icon library="remixicon" name="design/brush-fill"></sl-icon> <sl-icon library="remixicon" name="design/brush-fill"></sl-icon>
<sl-icon library="remixicon" name="business/pie-chart-fill"></sl-icon> <sl-icon library="remixicon" name="business/pie-chart-fill"></sl-icon>
<sl-icon library="remixicon" name="development/bug-fill"></sl-icon> <sl-icon library="remixicon" name="development/bug-fill"></sl-icon>
<sl-icon library="remixicon" name="media/image-fill"></sl-icon> <sl-icon library="remixicon" name="media/image-fill"></sl-icon>
<sl-icon library="remixicon" name="system/alert-fill"></sl-icon> <sl-icon library="remixicon" name="system/alert-fill"></sl-icon>
</div> </div>
``` ```
@ -483,7 +478,9 @@ Icons in this library are licensed under the [Apache 2.0 License](https://github
registerIconLibrary('unicons', { registerIconLibrary('unicons', {
resolver: name => { resolver: name => {
const match = name.match(/^(.*?)(-s)?$/); const match = name.match(/^(.*?)(-s)?$/);
return `https://cdn.jsdelivr.net/npm/@iconscout/unicons@3.0.3/svg/${match[2] === '-s' ? 'solid' : 'line'}/${match[1]}.svg`; return `https://cdn.jsdelivr.net/npm/@iconscout/unicons@3.0.3/svg/${match[2] === '-s' ? 'solid' : 'line'}/${
match[1]
}.svg`;
}, },
mutator: svg => svg.setAttribute('fill', 'currentColor') mutator: svg => svg.setAttribute('fill', 'currentColor')
}); });
@ -496,12 +493,12 @@ Icons in this library are licensed under the [Apache 2.0 License](https://github
<sl-icon library="unicons" name="polygon"></sl-icon> <sl-icon library="unicons" name="polygon"></sl-icon>
<sl-icon library="unicons" name="rocket"></sl-icon> <sl-icon library="unicons" name="rocket"></sl-icon>
<sl-icon library="unicons" name="star"></sl-icon> <sl-icon library="unicons" name="star"></sl-icon>
<br> <br />
<sl-icon library="unicons" name="clock-s"></sl-icon> <sl-icon library="unicons" name="clock-s"></sl-icon>
<sl-icon library="unicons" name="graph-bar-s"></sl-icon> <sl-icon library="unicons" name="graph-bar-s"></sl-icon>
<sl-icon library="unicons" name="padlock-s"></sl-icon> <sl-icon library="unicons" name="padlock-s"></sl-icon>
<sl-icon library="unicons" name="polygon-s"></sl-icon> <sl-icon library="unicons" name="polygon-s"></sl-icon>
<sl-icon library="unicons" name="rocket-s"></sl-icon> <sl-icon library="unicons" name="rocket-s"></sl-icon>
<sl-icon library="unicons" name="star-s"></sl-icon> <sl-icon library="unicons" name="star-s"></sl-icon>
</div> </div>
``` ```

48
docs/components/image-comparer.md
Wyświetl plik

@ -8,8 +8,16 @@ For best results, use images that share the same dimensions. The slider can be c
```html preview ```html preview
<sl-image-comparer> <sl-image-comparer>
<img slot="before" src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80&sat=-100&bri=-5" alt="Grayscale version of kittens in a basket looking around."> <img
<img slot="after" src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="Color version of kittens in a basket looking around."> slot="before"
src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80&sat=-100&bri=-5"
alt="Grayscale version of kittens in a basket looking around."
/>
<img
slot="after"
src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
alt="Color version of kittens in a basket looking around."
/>
</sl-image-comparer> </sl-image-comparer>
``` ```
@ -18,8 +26,16 @@ import { SlImageComparer } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlImageComparer> <SlImageComparer>
<img slot="before" src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80&sat=-100&bri=-5" alt="Grayscale version of kittens in a basket looking around." /> <img
<img slot="after" src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="Color version of kittens in a basket looking around." /> slot="before"
src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80&sat=-100&bri=-5"
alt="Grayscale version of kittens in a basket looking around."
/>
<img
slot="after"
src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
alt="Color version of kittens in a basket looking around."
/>
</SlImageComparer> </SlImageComparer>
); );
``` ```
@ -32,8 +48,16 @@ Use the `position` attribute to set the initial position of the slider. This is
```html preview ```html preview
<sl-image-comparer position="25"> <sl-image-comparer position="25">
<img slot="before" src="https://images.unsplash.com/photo-1520903074185-8eca362b3dce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&q=80" alt="A person sitting on bricks wearing untied boots."> <img
<img slot="after" src="https://images.unsplash.com/photo-1520640023173-50a135e35804?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="A person sitting on a yellow curb tying shoelaces on a boot."> slot="before"
src="https://images.unsplash.com/photo-1520903074185-8eca362b3dce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&q=80"
alt="A person sitting on bricks wearing untied boots."
/>
<img
slot="after"
src="https://images.unsplash.com/photo-1520640023173-50a135e35804?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"
alt="A person sitting on a yellow curb tying shoelaces on a boot."
/>
</sl-image-comparer> </sl-image-comparer>
``` ```
@ -42,8 +66,16 @@ import { SlImageComparer } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlImageComparer position={25}> <SlImageComparer position={25}>
<img slot="before" src="https://images.unsplash.com/photo-1520903074185-8eca362b3dce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&q=80" alt="A person sitting on bricks wearing untied boots." /> <img
<img slot="after" src="https://images.unsplash.com/photo-1520640023173-50a135e35804?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="A person sitting on a yellow curb tying shoelaces on a boot." /> slot="before"
src="https://images.unsplash.com/photo-1520903074185-8eca362b3dce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&q=80"
alt="A person sitting on bricks wearing untied boots."
/>
<img
slot="after"
src="https://images.unsplash.com/photo-1520640023173-50a135e35804?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"
alt="A person sitting on a yellow curb tying shoelaces on a boot."
/>
</SlImageComparer> </SlImageComparer>
); );
``` ```

6
docs/components/include.md
Wyświetl plik

@ -15,9 +15,7 @@ The included content will be inserted into the `<sl-include>` element's default
```jsx react ```jsx react
import { SlInclude } from '@shoelace-style/shoelace/dist/react'; import { SlInclude } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlInclude src="https://shoelace.style/assets/examples/include.html" />;
<SlInclude src="https://shoelace.style/assets/examples/include.html" />
);
``` ```
## Examples ## Examples
@ -33,7 +31,7 @@ If the request fails, the `sl-error` event will be emitted. In this case, `event
<script> <script>
const include = document.querySelector('sl-include'); const include = document.querySelector('sl-include');
include.addEventListener('sl-load', () => { include.addEventListener('sl-load', () => {
console.log('Success'); console.log('Success');
}); });

58
docs/components/input.md
Wyświetl plik

@ -11,9 +11,7 @@ Inputs collect data from the user.
```jsx react ```jsx react
import { SlInput } from '@shoelace-style/shoelace/dist/react'; import { SlInput } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlInput />;
<SlInput />
);
``` ```
?> 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. ?> 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.
@ -31,9 +29,7 @@ Use the `placeholder` attribute to add a placeholder.
```jsx react ```jsx react
import { SlInput } from '@shoelace-style/shoelace/dist/react'; import { SlInput } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlInput placeholder="Type something" />;
<SlInput placeholder="Type something" />
);
``` ```
### Clearable ### Clearable
@ -47,9 +43,7 @@ Add the `clearable` attribute to add a clear button when the input has content.
```jsx react ```jsx react
import { SlInput } from '@shoelace-style/shoelace/dist/react'; import { SlInput } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlInput placeholder="Clearable" clearable />;
<SlInput placeholder="Clearable" clearable />
);
``` ```
### Toggle Password ### Toggle Password
@ -58,9 +52,9 @@ Add the `toggle-password` attribute to add a toggle button that will show the pa
```html preview ```html preview
<sl-input type="password" placeholder="Password Toggle" size="small" toggle-password></sl-input> <sl-input type="password" placeholder="Password Toggle" size="small" toggle-password></sl-input>
<br> <br />
<sl-input type="password" placeholder="Password Toggle" size="medium" toggle-password></sl-input> <sl-input type="password" placeholder="Password Toggle" size="medium" toggle-password></sl-input>
<br> <br />
<sl-input type="password" placeholder="Password Toggle" size="large" toggle-password></sl-input> <sl-input type="password" placeholder="Password Toggle" size="large" toggle-password></sl-input>
``` ```
@ -73,7 +67,7 @@ const App = () => (
<br /> <br />
<SlInput type="password" placeholder="Password Toggle" size="medium" toggle-password /> <SlInput type="password" placeholder="Password Toggle" size="medium" toggle-password />
<br /> <br />
<SlInput type="password" placeholder="Password Toggle" size="large" toggle-password /> <SlInput type="password" placeholder="Password Toggle" size="large" toggle-password />
</> </>
); );
``` ```
@ -89,9 +83,7 @@ Add the `filled` attribute to draw a filled input.
```jsx react ```jsx react
import { SlInput } from '@shoelace-style/shoelace/dist/react'; import { SlInput } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlInput placeholder="Type something" filled />;
<SlInput placeholder="Type something" filled />
);
``` ```
### Pill ### Pill
@ -100,9 +92,9 @@ Use the `pill` attribute to give inputs rounded edges.
```html preview ```html preview
<sl-input placeholder="Small" size="small" pill></sl-input> <sl-input placeholder="Small" size="small" pill></sl-input>
<br> <br />
<sl-input placeholder="Medium" size="medium" pill></sl-input> <sl-input placeholder="Medium" size="medium" pill></sl-input>
<br> <br />
<sl-input placeholder="Large" size="large" pill></sl-input> <sl-input placeholder="Large" size="large" pill></sl-input>
``` ```
@ -126,9 +118,9 @@ The `type` attribute controls the type of input the browser renders.
```html preview ```html preview
<sl-input type="email" Placeholder="Email"></sl-input> <sl-input type="email" Placeholder="Email"></sl-input>
<br> <br />
<sl-input type="number" Placeholder="Number"></sl-input> <sl-input type="number" Placeholder="Number"></sl-input>
<br> <br />
<sl-input type="date" Placeholder="Date"></sl-input> <sl-input type="date" Placeholder="Date"></sl-input>
``` ```
@ -152,9 +144,9 @@ Use the `disabled` attribute to disable an input.
```html preview ```html preview
<sl-input placeholder="Disabled" size="small" disabled></sl-input> <sl-input placeholder="Disabled" size="small" disabled></sl-input>
<br> <br />
<sl-input placeholder="Disabled" size="medium" disabled></sl-input> <sl-input placeholder="Disabled" size="medium" disabled></sl-input>
<br> <br />
<sl-input placeholder="Disabled" size="large" disabled></sl-input> <sl-input placeholder="Disabled" size="large" disabled></sl-input>
``` ```
@ -178,9 +170,9 @@ Use the `size` attribute to change an input's size.
```html preview ```html preview
<sl-input placeholder="Small" size="small"></sl-input> <sl-input placeholder="Small" size="small"></sl-input>
<br> <br />
<sl-input placeholder="Medium" size="medium"></sl-input> <sl-input placeholder="Medium" size="medium"></sl-input>
<br> <br />
<sl-input placeholder="Large" size="large"></sl-input> <sl-input placeholder="Large" size="large"></sl-input>
``` ```
@ -207,12 +199,12 @@ Use the `prefix` and `suffix` slots to add icons.
<sl-icon name="house" slot="prefix"></sl-icon> <sl-icon name="house" slot="prefix"></sl-icon>
<sl-icon name="chat" slot="suffix"></sl-icon> <sl-icon name="chat" slot="suffix"></sl-icon>
</sl-input> </sl-input>
<br> <br />
<sl-input placeholder="Medium" size="medium"> <sl-input placeholder="Medium" size="medium">
<sl-icon name="house" slot="prefix"></sl-icon> <sl-icon name="house" slot="prefix"></sl-icon>
<sl-icon name="chat" slot="suffix"></sl-icon> <sl-icon name="chat" slot="suffix"></sl-icon>
</sl-input> </sl-input>
<br> <br />
<sl-input placeholder="Large" size="large"> <sl-input placeholder="Large" size="large">
<sl-icon name="house" slot="prefix"></sl-icon> <sl-icon name="house" slot="prefix"></sl-icon>
<sl-icon name="chat" slot="suffix"></sl-icon> <sl-icon name="chat" slot="suffix"></sl-icon>
@ -253,9 +245,7 @@ Use the `label` attribute to give the input an accessible label. For labels that
```jsx react ```jsx react
import { SlIcon, SlInput } from '@shoelace-style/shoelace/dist/react'; import { SlIcon, SlInput } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlInput label="What is your name?" />;
<SlInput label="What is your name?" />
);
``` ```
### Help Text ### Help Text
@ -263,21 +253,13 @@ const App = () => (
Add descriptive help text to an input with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead. Add descriptive help text to an input with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
```html preview ```html preview
<sl-input <sl-input label="Nickname" help-text="What would you like people to call you?"></sl-input>
label="Nickname"
help-text="What would you like people to call you?"
></sl-input>
``` ```
```jsx react ```jsx react
import { SlIcon, SlInput } from '@shoelace-style/shoelace/dist/react'; import { SlIcon, SlInput } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlInput label="Nickname" help-text="What would you like people to call you?" />;
<SlInput
label="Nickname"
help-text="What would you like people to call you?"
/>
);
``` ```
[component-metadata:sl-input] [component-metadata:sl-input]

74
docs/components/menu-item.md
Wyświetl plik

@ -5,7 +5,9 @@
Menu items provide options for the user to pick from in a menu. Menu items provide options for the user to pick from in a menu.
```html preview ```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
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>Option 1</sl-menu-item> <sl-menu-item>Option 1</sl-menu-item>
<sl-menu-item>Option 2</sl-menu-item> <sl-menu-item>Option 2</sl-menu-item>
<sl-menu-item>Option 3</sl-menu-item> <sl-menu-item>Option 3</sl-menu-item>
@ -25,15 +27,10 @@ Menu items provide options for the user to pick from in a menu.
``` ```
```jsx react ```jsx react
import { import { SlDivider, SlIcon, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
SlDivider,
SlIcon,
SlMenu,
SlMenuItem
} from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlMenu <SlMenu
style={{ style={{
maxWidth: '200px', maxWidth: '200px',
border: 'solid 1px var(--sl-panel-border-color)', border: 'solid 1px var(--sl-panel-border-color)',
@ -55,7 +52,7 @@ const App = () => (
Suffix Icon Suffix Icon
<SlIcon slot="suffix" name="heart" /> <SlIcon slot="suffix" name="heart" />
</SlMenuItem> </SlMenuItem>
</SlMenu> </SlMenu>
); );
``` ```
@ -66,7 +63,9 @@ const App = () => (
Use the `checked` attribute to draw menu items in a checked state. Use the `checked` attribute to draw menu items in a checked state.
```html preview ```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
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>Option 1</sl-menu-item> <sl-menu-item>Option 1</sl-menu-item>
<sl-menu-item checked>Option 2</sl-menu-item> <sl-menu-item checked>Option 2</sl-menu-item>
<sl-menu-item>Option 3</sl-menu-item> <sl-menu-item>Option 3</sl-menu-item>
@ -74,13 +73,10 @@ Use the `checked` attribute to draw menu items in a checked state.
``` ```
```jsx react ```jsx react
import { import { SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
SlMenu,
SlMenuItem
} from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlMenu <SlMenu
style={{ style={{
maxWidth: '200px', maxWidth: '200px',
border: 'solid 1px var(--sl-panel-border-color)', border: 'solid 1px var(--sl-panel-border-color)',
@ -90,7 +86,7 @@ const App = () => (
<SlMenuItem>Option 1</SlMenuItem> <SlMenuItem>Option 1</SlMenuItem>
<SlMenuItem checked>Option 2</SlMenuItem> <SlMenuItem checked>Option 2</SlMenuItem>
<SlMenuItem>Option 3</SlMenuItem> <SlMenuItem>Option 3</SlMenuItem>
</SlMenu> </SlMenu>
); );
``` ```
@ -99,7 +95,9 @@ const App = () => (
Add the `disabled` attribute to disable the menu item so it cannot be selected. Add the `disabled` attribute to disable the menu item so it cannot be selected.
```html preview ```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
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>Option 1</sl-menu-item> <sl-menu-item>Option 1</sl-menu-item>
<sl-menu-item disabled>Option 2</sl-menu-item> <sl-menu-item disabled>Option 2</sl-menu-item>
<sl-menu-item>Option 3</sl-menu-item> <sl-menu-item>Option 3</sl-menu-item>
@ -107,13 +105,10 @@ Add the `disabled` attribute to disable the menu item so it cannot be selected.
``` ```
```jsx react ```jsx react
import { import { SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
SlMenu,
SlMenuItem
} from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlMenu <SlMenu
style={{ style={{
maxWidth: '200px', maxWidth: '200px',
border: 'solid 1px var(--sl-panel-border-color)', border: 'solid 1px var(--sl-panel-border-color)',
@ -123,7 +118,7 @@ const App = () => (
<SlMenuItem>Option 1</SlMenuItem> <SlMenuItem>Option 1</SlMenuItem>
<SlMenuItem disabled>Option 2</SlMenuItem> <SlMenuItem disabled>Option 2</SlMenuItem>
<SlMenuItem>Option 3</SlMenuItem> <SlMenuItem>Option 3</SlMenuItem>
</SlMenu> </SlMenu>
); );
``` ```
@ -132,7 +127,9 @@ const App = () => (
Add content to the start and end of menu items using the `prefix` and `suffix` slots. Add content to the start and end of menu items using the `prefix` and `suffix` slots.
```html preview ```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
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> <sl-menu-item>
<sl-icon slot="prefix" name="house"></sl-icon> <sl-icon slot="prefix" name="house"></sl-icon>
Home Home
@ -154,16 +151,10 @@ Add content to the start and end of menu items using the `prefix` and `suffix` s
``` ```
```jsx react ```jsx react
import { import { SlBadge, SlDivider, SlIcon, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
SlBadge,
SlDivider,
SlIcon,
SlMenu,
SlMenuItem
} from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlMenu <SlMenu
style={{ style={{
maxWidth: '200px', maxWidth: '200px',
border: 'solid 1px var(--sl-panel-border-color)', border: 'solid 1px var(--sl-panel-border-color)',
@ -178,7 +169,9 @@ const App = () => (
<SlMenuItem> <SlMenuItem>
<SlIcon slot="prefix" name="envelope" /> <SlIcon slot="prefix" name="envelope" />
Messages Messages
<SlBadge slot="suffix" variant="primary" pill>12</SlBadge> <SlBadge slot="suffix" variant="primary" pill>
12
</SlBadge>
</SlMenuItem> </SlMenuItem>
<SlDivider /> <SlDivider />
@ -187,7 +180,7 @@ const App = () => (
<SlIcon slot="prefix" name="gear" /> <SlIcon slot="prefix" name="gear" />
Settings Settings
</SlMenuItem> </SlMenuItem>
</SlMenu> </SlMenu>
); );
``` ```
@ -196,7 +189,10 @@ const App = () => (
The `value` attribute can be used to assign a hidden value, such as a unique identifier, to a menu item. When an item is selected, the `sl-select` event will be emitted and a reference to the item will be available at `event.detail.item`. You can use this reference to access the selected item's value, its checked state, and more. The `value` attribute can be used to assign a hidden value, such as a unique identifier, to a menu item. When an item is selected, the `sl-select` event will be emitted and a reference to the item will be available at `event.detail.item`. You can use this reference to access the selected item's value, its checked state, and more.
```html preview ```html preview
<sl-menu class="menu-value" 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
class="menu-value"
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="opt-1">Option 1</sl-menu-item> <sl-menu-item value="opt-1">Option 1</sl-menu-item>
<sl-menu-item value="opt-2">Option 2</sl-menu-item> <sl-menu-item value="opt-2">Option 2</sl-menu-item>
<sl-menu-item value="opt-3">Option 3</sl-menu-item> <sl-menu-item value="opt-3">Option 3</sl-menu-item>
@ -218,13 +214,9 @@ The `value` attribute can be used to assign a hidden value, such as a unique ide
``` ```
```jsx react ```jsx react
import { import { SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
SlMenu,
SlMenuItem
} from '@shoelace-style/shoelace/dist/react';
const App = () => { const App = () => {
function handleSelect(event) { function handleSelect(event) {
const item = event.detail.item; const item = event.detail.item;
@ -236,7 +228,7 @@ const App = () => {
} }
return ( return (
<SlMenu <SlMenu
style={{ style={{
maxWidth: '200px', maxWidth: '200px',
border: 'solid 1px var(--sl-panel-border-color)', border: 'solid 1px var(--sl-panel-border-color)',

11
docs/components/menu-label.md
Wyświetl plik

@ -21,15 +21,10 @@ Menu labels are used to describe a group of menu items.
``` ```
```jsx react ```jsx react
import { import { SlDivider, SlMenu, SlMenuLabel, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
SlDivider,
SlMenu,
SlMenuLabel,
SlMenuItem
} from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlMenu <SlMenu
style={{ style={{
maxWidth: '200px', maxWidth: '200px',
border: 'solid 1px var(--sl-panel-border-color)', border: 'solid 1px var(--sl-panel-border-color)',
@ -45,7 +40,7 @@ const App = () => (
<SlMenuItem value="broccoli">Broccoli</SlMenuItem> <SlMenuItem value="broccoli">Broccoli</SlMenuItem>
<SlMenuItem value="carrot">Carrot</SlMenuItem> <SlMenuItem value="carrot">Carrot</SlMenuItem>
<SlMenuItem value="zucchini">Zucchini</SlMenuItem> <SlMenuItem value="zucchini">Zucchini</SlMenuItem>
</SlMenu> </SlMenu>
); );
``` ```

14
docs/components/menu.md
Wyświetl plik

@ -7,7 +7,9 @@ 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. 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 ```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
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="undo">Undo</sl-menu-item>
<sl-menu-item value="redo">Redo</sl-menu-item> <sl-menu-item value="redo">Redo</sl-menu-item>
<sl-divider></sl-divider> <sl-divider></sl-divider>
@ -19,14 +21,10 @@ You can use [menu items](/components/menu-item), [menu labels](/components/menu-
``` ```
```jsx react ```jsx react
import { import { SlDivider, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
SlDivider,
SlMenu,
SlMenuItem
} from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlMenu <SlMenu
style={{ style={{
maxWidth: '200px', maxWidth: '200px',
border: 'solid 1px var(--sl-panel-border-color)', border: 'solid 1px var(--sl-panel-border-color)',
@ -40,7 +38,7 @@ const App = () => (
<SlMenuItem value="copy">Copy</SlMenuItem> <SlMenuItem value="copy">Copy</SlMenuItem>
<SlMenuItem value="paste">Paste</SlMenuItem> <SlMenuItem value="paste">Paste</SlMenuItem>
<SlMenuItem value="delete">Delete</SlMenuItem> <SlMenuItem value="delete">Delete</SlMenuItem>
</SlMenu> </SlMenu>
); );
``` ```

27
docs/components/mutation-observer.md
Wyświetl plik

@ -12,14 +12,14 @@ The mutation observer will report changes to the content it wraps through the `s
<sl-button variant="primary">Click to mutate</sl-button> <sl-button variant="primary">Click to mutate</sl-button>
</sl-mutation-observer> </sl-mutation-observer>
<br> <br />
👆 Click the button and watch the console 👆 Click the button and watch the console
<script> <script>
const container = document.querySelector('.mutation-overview'); const container = document.querySelector('.mutation-overview');
const mutationObserver = container.querySelector('sl-mutation-observer'); const mutationObserver = container.querySelector('sl-mutation-observer');
const button = container.querySelector('sl-button'); const button = container.querySelector('sl-button');
const variants = ['primary', 'success', 'neutral', 'warning', 'danger']; const variants = ['primary', 'success', 'neutral', 'warning', 'danger'];
let clicks = 0; let clicks = 0;
// Change the button's variant attribute // Change the button's variant attribute
@ -57,7 +57,7 @@ const css = `
} }
`; `;
const variants = ['primary', 'success', 'neutral', 'warning', 'danger']; const variants = ['primary', 'success', 'neutral', 'warning', 'danger'];
let clicks = 0; let clicks = 0;
const App = () => { const App = () => {
@ -70,11 +70,10 @@ const App = () => {
return ( return (
<> <>
<SlMutationObserver <SlMutationObserver attr="*" onSlMutation={event => console.log(event.detail)}>
attr="*" <SlButton variant={variant} onClick={handleClick}>
onSlMutation={event => console.log(event.detail)} Click to mutate
> </SlButton>
<SlButton variant={variant} onClick={handleClick}>Click to mutate</SlButton>
</SlMutationObserver> </SlMutationObserver>
<style>{css}</style> <style>{css}</style>
@ -134,7 +133,7 @@ Use the `child-list` attribute to watch for new child elements that are added or
<style> <style>
.mutation-child-list .buttons { .mutation-child-list .buttons {
display: flex; display: flex;
gap: .25rem; gap: 0.25rem;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -171,12 +170,11 @@ const App = () => {
return ( return (
<> <>
<div className="mutation-child-list"> <div className="mutation-child-list">
<SlMutationObserver <SlMutationObserver child-list onSlMutation={event => console.log(event.detail)}>
child-list
onSlMutation={event => console.log(event.detail)}
>
<div className="buttons"> <div className="buttons">
<SlButton variant="primary" onClick={addButton}>Add button</SlButton> <SlButton variant="primary" onClick={addButton}>
Add button
</SlButton>
{buttonIds.map(id => ( {buttonIds.map(id => (
<SlButton key={id} variant="default" onClick={() => removeButton(id)}> <SlButton key={id} variant="default" onClick={() => removeButton(id)}>
{id} {id}
@ -185,7 +183,6 @@ const App = () => {
</div> </div>
</SlMutationObserver> </SlMutationObserver>
</div> </div>
👆 Add and remove buttons and watch the console 👆 Add and remove buttons and watch the console
<style>{css}</style> <style>{css}</style>
</> </>

36
docs/components/progress-bar.md
Wyświetl plik

@ -11,9 +11,7 @@ Progress bars are used to show the status of an ongoing operation.
```jsx react ```jsx react
import { SlProgressBar } from '@shoelace-style/shoelace/dist/react'; import { SlProgressBar } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlProgressBar value={50} />;
<SlProgressBar value={50} />
);
``` ```
## Examples ## Examples
@ -29,12 +27,7 @@ Use the `--height` custom property to set the progress bar's height.
```jsx react ```jsx react
import { SlProgressBar } from '@shoelace-style/shoelace/dist/react'; import { SlProgressBar } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlProgressBar value={50} style={{ '--height': '6px' }} />;
<SlProgressBar
value={50}
style={{ '--height': '6px' }}
/>
);
``` ```
### Labels ### Labels
@ -48,12 +41,7 @@ Use the `label` attribute to label the progress bar and tell assistive devices h
```jsx react ```jsx react
import { SlProgressBar } from '@shoelace-style/shoelace/dist/react'; import { SlProgressBar } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlProgressBar value="50" label="Upload progress" />;
<SlProgressBar
value="50"
label="Upload progress"
/>
);
``` ```
### Showing Values ### Showing Values
@ -63,7 +51,7 @@ Use the default slot to show a value.
```html preview ```html preview
<sl-progress-bar value="50" class="progress-bar-values">50%</sl-progress-bar> <sl-progress-bar value="50" class="progress-bar-values">50%</sl-progress-bar>
<br> <br />
<sl-button circle><sl-icon name="dash"></sl-icon></sl-button> <sl-button circle><sl-icon name="dash"></sl-icon></sl-button>
<sl-button circle><sl-icon name="plus"></sl-icon></sl-button> <sl-button circle><sl-icon name="plus"></sl-icon></sl-button>
@ -80,7 +68,7 @@ Use the default slot to show a value.
}); });
subtractButton.addEventListener('click', () => { subtractButton.addEventListener('click', () => {
const value = Math.max(0, progressBar.value - 10) const value = Math.max(0, progressBar.value - 10);
progressBar.value = value; progressBar.value = value;
progressBar.textContent = `${value}%`; progressBar.textContent = `${value}%`;
}); });
@ -89,11 +77,7 @@ Use the default slot to show a value.
```jsx react ```jsx react
import { useState } from 'react'; import { useState } from 'react';
import { import { SlButton, SlIcon, SlProgressBar } from '@shoelace-style/shoelace/dist/react';
SlButton,
SlIcon,
SlProgressBar
} from '@shoelace-style/shoelace/dist/react';
const App = () => { const App = () => {
const [value, setValue] = useState(50); const [value, setValue] = useState(50);
@ -107,9 +91,7 @@ const App = () => {
return ( return (
<> <>
<SlProgressBar value={value}> <SlProgressBar value={value}>{value}%</SlProgressBar>
{value}%
</SlProgressBar>
<br /> <br />
@ -136,9 +118,7 @@ The `indeterminate` attribute can be used to inform the user that the operation
```jsx react ```jsx react
import { SlProgressBar } from '@shoelace-style/shoelace/dist/react'; import { SlProgressBar } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlProgressBar indeterminate />;
<SlProgressBar indeterminate />
);
``` ```
[component-metadata:sl-progress-bar] [component-metadata:sl-progress-bar]

50
docs/components/progress-ring.md
Wyświetl plik

@ -11,9 +11,7 @@ Progress rings are used to show the progress of a determinate operation in a cir
```jsx react ```jsx react
import { SlProgressRing } from '@shoelace-style/shoelace/dist/react'; import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlProgressRing value="25" />;
<SlProgressRing value="25" />
);
``` ```
## Examples ## Examples
@ -29,12 +27,7 @@ Use the `--size` custom property to set the diameter of the progress ring.
```jsx react ```jsx react
import { SlProgressRing } from '@shoelace-style/shoelace/dist/react'; import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlProgressRing value="50" style={{ '--size': '200px' }} />;
<SlProgressRing
value="50"
style={{ '--size': '200px' }}
/>
);
``` ```
### Track Width ### Track Width
@ -48,12 +41,7 @@ Use the `--track-width` custom property to set the width of the progress ring's
```jsx react ```jsx react
import { SlProgressRing } from '@shoelace-style/shoelace/dist/react'; import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlProgressRing value="50" style={{ '--track-width': '10px' }} />;
<SlProgressRing
value="50"
style={{ '--track-width': '10px' }}
/>
);
``` ```
### Colors ### Colors
@ -61,8 +49,8 @@ const App = () => (
To change the color, use the `--track-color` and `--indicator-color` custom properties. To change the color, use the `--track-color` and `--indicator-color` custom properties.
```html preview ```html preview
<sl-progress-ring <sl-progress-ring
value="50" value="50"
style=" style="
--track-color: pink; --track-color: pink;
--indicator-color: deeppink; --indicator-color: deeppink;
@ -74,9 +62,9 @@ To change the color, use the `--track-color` and `--indicator-color` custom prop
import { SlProgressRing } from '@shoelace-style/shoelace/dist/react'; import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlProgressRing <SlProgressRing
value="50" value="50"
style={{ style={{
'--track-color': 'pink', '--track-color': 'pink',
'--indicator-color': 'deeppink' '--indicator-color': 'deeppink'
}} }}
@ -95,12 +83,7 @@ Use the `label` attribute to label the progress ring and tell assistive devices
```jsx react ```jsx react
import { SlProgressRing } from '@shoelace-style/shoelace/dist/react'; import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlProgressRing value="50" label="Upload progress" />;
<SlProgressRing
value="50"
label="Upload progress"
/>
);
``` ```
### Showing Values ### Showing Values
@ -110,7 +93,7 @@ Use the default slot to show a label inside the progress ring.
```html preview ```html preview
<sl-progress-ring value="50" class="progress-ring-values" style="margin-bottom: .5rem;">50%</sl-progress-ring> <sl-progress-ring value="50" class="progress-ring-values" style="margin-bottom: .5rem;">50%</sl-progress-ring>
<br> <br />
<sl-button circle><sl-icon name="dash"></sl-icon></sl-button> <sl-button circle><sl-icon name="dash"></sl-icon></sl-button>
<sl-button circle><sl-icon name="plus"></sl-icon></sl-button> <sl-button circle><sl-icon name="plus"></sl-icon></sl-button>
@ -127,7 +110,7 @@ Use the default slot to show a label inside the progress ring.
}); });
subtractButton.addEventListener('click', () => { subtractButton.addEventListener('click', () => {
const value = Math.max(0, progressRing.value - 10) const value = Math.max(0, progressRing.value - 10);
progressRing.value = value; progressRing.value = value;
progressRing.textContent = `${value}%`; progressRing.textContent = `${value}%`;
}); });
@ -136,11 +119,7 @@ Use the default slot to show a label inside the progress ring.
```jsx react ```jsx react
import { useState } from 'react'; import { useState } from 'react';
import { import { SlButton, SlIcon, SlProgressRing } from '@shoelace-style/shoelace/dist/react';
SlButton,
SlIcon,
SlProgressRing
} from '@shoelace-style/shoelace/dist/react';
const App = () => { const App = () => {
const [value, setValue] = useState(50); const [value, setValue] = useState(50);
@ -154,10 +133,7 @@ const App = () => {
return ( return (
<> <>
<SlProgressRing <SlProgressRing value={value} style={{ marginBottom: '.5rem' }}>
value={value}
style={{ marginBottom: '.5rem' }}
>
{value}% {value}%
</SlProgressRing> </SlProgressRing>

16
docs/components/qr-code.md
Wyświetl plik

@ -9,7 +9,7 @@ QR codes are useful for providing small pieces of information to users who can q
```html preview ```html preview
<div class="qr-overview"> <div class="qr-overview">
<sl-qr-code value="https://shoelace.style/" label="Scan this code to visit Shoelace on the web!"></sl-qr-code> <sl-qr-code value="https://shoelace.style/" label="Scan this code to visit Shoelace on the web!"></sl-qr-code>
<br> <br />
<sl-input maxlength="255" clearable></sl-input> <sl-input maxlength="255" clearable></sl-input>
</div> </div>
@ -20,7 +20,7 @@ QR codes are useful for providing small pieces of information to users who can q
const input = container.querySelector('sl-input'); const input = container.querySelector('sl-input');
input.value = qrCode.value; input.value = qrCode.value;
input.addEventListener('sl-input', () => qrCode.value = input.value); input.addEventListener('sl-input', () => (qrCode.value = input.value));
</script> </script>
<style> <style>
@ -79,9 +79,7 @@ Use the `fill` and `background` attributes to modify the QR code's colors. You s
```jsx react ```jsx react
import { SlQrCode } from '@shoelace-style/shoelace/dist/react'; import { SlQrCode } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlQrCode value="https://shoelace.style/" fill="deeppink" background="white" />;
<SlQrCode value="https://shoelace.style/" fill="deeppink" background="white" />
);
``` ```
### Size ### Size
@ -95,9 +93,7 @@ Use the `size` attribute to change the size of the QR code.
```jsx react ```jsx react
import { SlQrCode } from '@shoelace-style/shoelace/dist/react'; import { SlQrCode } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlQrCode value="https://shoelace.style/" size="64" />;
<SlQrCode value="https://shoelace.style/" size="64" />
);
``` ```
### Radius ### Radius
@ -111,9 +107,7 @@ Create a rounded effect with the `radius` attribute.
```jsx react ```jsx react
import { SlQrCode } from '@shoelace-style/shoelace/dist/react'; import { SlQrCode } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlQrCode value="https://shoelace.style/" radius="0.5" />;
<SlQrCode value="https://shoelace.style/" radius="0.5" />
);
``` ```
### Error Correction ### Error Correction

9
docs/components/radio-group.md
Wyświetl plik

@ -17,7 +17,9 @@ import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlRadioGroup label="Select an option"> <SlRadioGroup label="Select an option">
<SlRadio value="1" checked>Option 1</SlRadio> <SlRadio value="1" checked>
Option 1
</SlRadio>
<SlRadio value="2">Option 2</SlRadio> <SlRadio value="2">Option 2</SlRadio>
<SlRadio value="3">Option 3</SlRadio> <SlRadio value="3">Option 3</SlRadio>
</SlRadioGroup> </SlRadioGroup>
@ -43,10 +45,13 @@ import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlRadioGroup label="Select an option" fieldset> <SlRadioGroup label="Select an option" fieldset>
<SlRadio value="1" checked>Option 1</SlRadio> <SlRadio value="1" checked>
Option 1
</SlRadio>
<SlRadio value="2">Option 2</SlRadio> <SlRadio value="2">Option 2</SlRadio>
<SlRadio value="3">Option 3</SlRadio> <SlRadio value="3">Option 3</SlRadio>
</SlRadioGroup> </SlRadioGroup>
); );
``` ```
[component-metadata:sl-radio-group] [component-metadata:sl-radio-group]

12
docs/components/radio.md
Wyświetl plik

@ -19,7 +19,9 @@ import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlRadioGroup label="Select an option"> <SlRadioGroup label="Select an option">
<SlRadio value="1" checked>Option 1</SlRadio> <SlRadio value="1" checked>
Option 1
</SlRadio>
<SlRadio value="2">Option 2</SlRadio> <SlRadio value="2">Option 2</SlRadio>
<SlRadio value="3">Option 3</SlRadio> <SlRadio value="3">Option 3</SlRadio>
</SlRadioGroup> </SlRadioGroup>
@ -48,10 +50,14 @@ import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlRadioGroup label="Select an option"> <SlRadioGroup label="Select an option">
<SlRadio value="1" checked>Option 1</SlRadio> <SlRadio value="1" checked>
Option 1
</SlRadio>
<SlRadio value="2">Option 2</SlRadio> <SlRadio value="2">Option 2</SlRadio>
<SlRadio value="3">Option 3</SlRadio> <SlRadio value="3">Option 3</SlRadio>
<SlRadio value="4" disabled>Disabled</SlRadio> <SlRadio value="4" disabled>
Disabled
</SlRadio>
</SlRadioGroup> </SlRadioGroup>
); );
``` ```

55
docs/components/range.md
Wyświetl plik

@ -11,9 +11,7 @@ Ranges allow the user to select a single value within a given range using a slid
```jsx react ```jsx react
import { SlRange } from '@shoelace-style/shoelace/dist/react'; import { SlRange } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlRange />;
<SlRange />
);
``` ```
?> 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. ?> 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.
@ -31,9 +29,7 @@ Use the `min` and `max` attributes to set the range's minimum and maximum values
```jsx react ```jsx react
import { SlRange } from '@shoelace-style/shoelace/dist/react'; import { SlRange } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlRange min={0} max={10} step={1} />;
<SlRange min={0} max={10} step={1} />
);
``` ```
### Disabled ### Disabled
@ -44,13 +40,10 @@ Use the `disabled` attribute to disable a slider.
<sl-range disabled></sl-range> <sl-range disabled></sl-range>
``` ```
```jsx react ```jsx react
import { SlRange } from '@shoelace-style/shoelace/dist/react'; import { SlRange } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlRange disabled />;
<SlRange disabled />
);
``` ```
### Tooltip Placement ### Tooltip Placement
@ -64,9 +57,7 @@ By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it be
```jsx react ```jsx react
import { SlRange } from '@shoelace-style/shoelace/dist/react'; import { SlRange } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlRange tooltip="bottom" />;
<SlRange tooltip="bottom" />
);
``` ```
### Disable the Tooltip ### Disable the Tooltip
@ -80,9 +71,7 @@ To disable the tooltip, set `tooltip` to `none`.
```jsx react ```jsx react
import { SlRange } from '@shoelace-style/shoelace/dist/react'; import { SlRange } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlRange tooltip="none" />;
<SlRange tooltip="none" />
);
``` ```
### Custom Track Colors ### Custom Track Colors
@ -90,17 +79,19 @@ const App = () => (
You can customize the active and inactive portions of the track using the `--track-color-active` and `--track-color-inactive` custom properties. You can customize the active and inactive portions of the track using the `--track-color-active` and `--track-color-inactive` custom properties.
```html preview ```html preview
<sl-range style=" <sl-range
style="
--track-color-active: var(--sl-color-primary-600); --track-color-active: var(--sl-color-primary-600);
--track-color-inactive: var(--sl-color-primary-100); --track-color-inactive: var(--sl-color-primary-100);
"></sl-range> "
></sl-range>
``` ```
```jsx react ```jsx react
import { SlRange } from '@shoelace-style/shoelace/dist/react'; import { SlRange } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlRange <SlRange
style={{ style={{
'--track-color-active': 'var(--sl-color-primary-600)', '--track-color-active': 'var(--sl-color-primary-600)',
'--track-color-inactive': 'var(--sl-color-primary-200)' '--track-color-inactive': 'var(--sl-color-primary-200)'
@ -125,14 +116,7 @@ You can change the tooltip's content by setting the `tooltipFormatter` property
```jsx react ```jsx react
import { SlRange } from '@shoelace-style/shoelace/dist/react'; import { SlRange } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlRange min={0} max={100} step={1} tooltipFormatter={value => `Total - ${value}%`} />;
<SlRange
min={0}
max={100}
step={1}
tooltipFormatter={value => `Total - ${value}%`}
/>
);
``` ```
### Labels ### Labels
@ -146,9 +130,7 @@ Use the `label` attribute to give the range an accessible label. For labels that
```jsx react ```jsx react
import { SlRange } from '@shoelace-style/shoelace/dist/react'; import { SlRange } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlRange label="Volume" min={0} max={100} />;
<SlRange label="Volume" min={0} max={100} />
);
``` ```
### Help Text ### Help Text
@ -156,8 +138,8 @@ const App = () => (
Add descriptive help text to a range with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead. Add descriptive help text to a range with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
```html preview ```html preview
<sl-range <sl-range
label="Volume" label="Volume"
help-text="Controls the volume of the current song." help-text="Controls the volume of the current song."
min="0" min="0"
max="100" max="100"
@ -167,14 +149,7 @@ Add descriptive help text to a range with the `help-text` attribute. For help te
```jsx react ```jsx react
import { SlRange } from '@shoelace-style/shoelace/dist/react'; import { SlRange } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlRange label="Volume" help-text="Controls the volume of the current song." min={0} max={100} />;
<SlRange
label="Volume"
help-text="Controls the volume of the current song."
min={0}
max={100}
/>
);
``` ```
[component-metadata:sl-range] [component-metadata:sl-range]

37
docs/components/rating.md
Wyświetl plik

@ -11,9 +11,7 @@ Ratings give users a way to quickly view and provide feedback.
```jsx react ```jsx react
import { SlRating } from '@shoelace-style/shoelace/dist/react'; import { SlRating } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlRating />;
<SlRating />
);
``` ```
## Examples ## Examples
@ -29,9 +27,7 @@ Ratings are 0-5 by default. To change the maximum possible value, use the `max`
```jsx react ```jsx react
import { SlRating } from '@shoelace-style/shoelace/dist/react'; import { SlRating } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlRating max={3} />;
<SlRating max={3} />
);
``` ```
### Precision ### Precision
@ -45,9 +41,7 @@ Use the `precision` attribute to let users select fractional ratings.
```jsx react ```jsx react
import { SlRating } from '@shoelace-style/shoelace/dist/react'; import { SlRating } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlRating precision={0.5} value={2.5} />;
<SlRating precision={0.5} value={2.5} />
);
``` ```
## Symbol Sizes ## Symbol Sizes
@ -61,9 +55,7 @@ Set the `--symbol-size` custom property to adjust the size.
```jsx react ```jsx react
import { SlRating } from '@shoelace-style/shoelace/dist/react'; import { SlRating } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlRating style={{ '--symbol-size': '2rem' }} />;
<SlRating style={{ '--symbol-size': '2rem' }} />
);
``` ```
### Readonly ### Readonly
@ -77,9 +69,7 @@ Use the `readonly` attribute to display a rating that users can't change.
```jsx react ```jsx react
import { SlRating } from '@shoelace-style/shoelace/dist/react'; import { SlRating } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlRating readonly value={3} />;
<SlRating readonly value={3} />
);
``` ```
### Disabled ### Disabled
@ -93,9 +83,7 @@ Use the `disable` attribute to disable the rating.
```jsx react ```jsx react
import { SlRating } from '@shoelace-style/shoelace/dist/react'; import { SlRating } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlRating disabled value={3} />;
<SlRating disabled value={3} />
);
``` ```
### Custom Icons ### Custom Icons
@ -107,7 +95,7 @@ You can provide custom icons by passing a function to the `getSymbol` property.
<script> <script>
const rating = document.querySelector('.rating-hearts'); const rating = document.querySelector('.rating-hearts');
rating.getSymbol = () => '<sl-icon name="heart-fill"></sl-icon>'; rating.getSymbol = () => '<sl-icon name="heart-fill"></sl-icon>';
</script> </script>
``` ```
@ -116,10 +104,7 @@ import '@shoelace-style/shoelace/dist/components/icon/icon';
import { SlRating } from '@shoelace-style/shoelace/dist/react'; import { SlRating } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlRating <SlRating getSymbol={() => '<sl-icon name="heart-fill"></sl-icon>'} style={{ '--symbol-color-active': '#ff4136' }} />
getSymbol={() => '<sl-icon name="heart-fill"></sl-icon>'}
style={{ '--symbol-color-active': '#ff4136' }}
/>
); );
``` ```
@ -133,7 +118,7 @@ You can also use the `getSymbol` property to render different icons based on val
<script> <script>
const rating = document.querySelector('.rating-emojis'); const rating = document.querySelector('.rating-emojis');
rating.getSymbol = (value) => { rating.getSymbol = value => {
const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing']; const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing'];
return `<sl-icon name="${icons[value - 1]}"></sl-icon>`; return `<sl-icon name="${icons[value - 1]}"></sl-icon>`;
}; };
@ -149,9 +134,7 @@ function getSymbol(value) {
return `<sl-icon name="${icons[value - 1]}"></sl-icon>`; return `<sl-icon name="${icons[value - 1]}"></sl-icon>`;
} }
const App = () => ( const App = () => <SlRating getSymbol={getSymbol} />;
<SlRating getSymbol={getSymbol} />
);
``` ```
[component-metadata:sl-rating] [component-metadata:sl-rating]

38
docs/components/relative-time.md
Wyświetl plik

@ -14,9 +14,7 @@ Localization is handled by the browser's [`Intl.RelativeTimeFormat` API](https:/
```jsx react ```jsx react
import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react'; import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlRelativeTime date="2020-07-15T09:17:00-04:00" />;
<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. 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.
@ -49,9 +47,7 @@ import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react';
const date = new Date(new Date().getTime() - 60000); const date = new Date(new Date().getTime() - 60000);
const App = () => ( const App = () => <SlRelativeTime date={date} sync />;
<SlRelativeTime date={date} sync />
);
``` ```
### Formatting Styles ### Formatting Styles
@ -59,8 +55,8 @@ const App = () => (
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. 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 ```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="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="short"></sl-relative-time><br />
<sl-relative-time date="2020-07-15T09:17:00-04:00" format="long"></sl-relative-time> <sl-relative-time date="2020-07-15T09:17:00-04:00" format="long"></sl-relative-time>
``` ```
@ -69,8 +65,10 @@ import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
<SlRelativeTime date="2020-07-15T09:17:00-04:00" format="narrow" /><br /> <SlRelativeTime date="2020-07-15T09:17:00-04:00" format="narrow" />
<SlRelativeTime date="2020-07-15T09:17:00-04:00" format="short" /><br /> <br />
<SlRelativeTime date="2020-07-15T09:17:00-04:00" format="short" />
<br />
<SlRelativeTime date="2020-07-15T09:17:00-04:00" format="long" /> <SlRelativeTime date="2020-07-15T09:17:00-04:00" format="long" />
</> </>
); );
@ -81,10 +79,10 @@ const App = () => (
Use the `lang` attribute to set the desired locale. Use the `lang` attribute to set the desired locale.
```html preview ```html preview
English: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="en-US"></sl-relative-time><br> 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> 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> 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> 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> Russian: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="ru"></sl-relative-time>
``` ```
@ -93,10 +91,14 @@ import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
English: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="en-US" /><br /> English: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="en-US" />
Chinese: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="zh-CN" /><br /> <br />
German: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="de" /><br /> Chinese: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="zh-CN" />
Greek: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="el" /><br /> <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" /> Russian: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="ru" />
</> </>
); );

14
docs/components/resize-observer.md
Wyświetl plik

@ -9,9 +9,7 @@ The resize observer will report changes to the dimensions of the elements it wra
```html preview ```html preview
<div class="resize-observer-overview"> <div class="resize-observer-overview">
<sl-resize-observer> <sl-resize-observer>
<div> <div>Resize this box and watch the console 👉</div>
Resize this box and watch the console 👉
</div>
</sl-resize-observer> </sl-resize-observer>
</div> </div>
@ -26,9 +24,9 @@ The resize observer will report changes to the dimensions of the elements it wra
<style> <style>
.resize-observer-overview div { .resize-observer-overview div {
display: flex; display: flex;
border: solid 2px var(--sl-input-border-color); border: solid 2px var(--sl-input-border-color);
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
padding: 4rem 2rem; padding: 4rem 2rem;
@ -54,9 +52,7 @@ const App = () => (
<> <>
<div className="resize-observer-overview"> <div className="resize-observer-overview">
<SlResizeObserver onSlResize={event => console.log(event.detail)}> <SlResizeObserver onSlResize={event => console.log(event.detail)}>
<div> <div>Resize this box and watch the console 👉</div>
Resize this box and watch the console 👉
</div>
</SlResizeObserver> </SlResizeObserver>
</div> </div>

30
docs/components/responsive-media.md
Wyświetl plik

@ -8,7 +8,10 @@ You can slot in any [replaced element](https://developer.mozilla.org/en-US/docs/
```html preview ```html preview
<sl-responsive-media> <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."> <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> </sl-responsive-media>
``` ```
@ -17,7 +20,7 @@ import { SlResponsiveMedia } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlResponsiveMedia> <SlResponsiveMedia>
<img <img
src="https://images.unsplash.com/photo-1541427468627-a89a96e5ca1d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1800&q=80" 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." alt="A train riding through autumn foliage with mountains in the distance."
/> />
@ -33,7 +36,10 @@ The following image maintains a `4:3` aspect ratio as its container is resized.
```html preview ```html preview
<sl-responsive-media aspect-ratio="4:3"> <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."> <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> </sl-responsive-media>
``` ```
@ -42,8 +48,8 @@ import { SlResponsiveMedia } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlResponsiveMedia aspect-ratio="4:3"> <SlResponsiveMedia aspect-ratio="4:3">
<img <img
src="https://images.unsplash.com/photo-1473186578172-c141e6798cf4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1800&q=80" 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." alt="Two blue chairs on a sandy beach."
/> />
</SlResponsiveMedia> </SlResponsiveMedia>
@ -56,7 +62,12 @@ The following video is embedded using an `iframe` and maintains a `16:9` aspect
```html preview ```html preview
<sl-responsive-media aspect-ratio="16:9"> <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> <iframe
src="https://player.vimeo.com/video/1053647?title=0&byline=0&portrait=0"
frameborder="0"
allow="autoplay; fullscreen"
allowfullscreen
></iframe>
</sl-responsive-media> </sl-responsive-media>
``` ```
@ -65,7 +76,12 @@ import { SlResponsiveMedia } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlResponsiveMedia aspect-ratio="16:9"> <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 /> <iframe
src="https://player.vimeo.com/video/1053647?title=0&byline=0&portrait=0"
frameborder="0"
allow="autoplay; fullscreen"
allowfullscreen
/>
</SlResponsiveMedia> </SlResponsiveMedia>
); );
``` ```

26
docs/components/select.md
Wyświetl plik

@ -192,7 +192,7 @@ To programmatically set the selection, update the `value` property as shown belo
<sl-menu-item value="option-3">Option 3</sl-menu-item> <sl-menu-item value="option-3">Option 3</sl-menu-item>
</sl-select> </sl-select>
<br> <br />
<sl-button data-option="option-1">Set 1</sl-button> <sl-button data-option="option-1">Set 1</sl-button>
<sl-button data-option="option-2">Set 2</sl-button> <sl-button data-option="option-2">Set 2</sl-button>
@ -205,7 +205,7 @@ To programmatically set the selection, update the `value` property as shown belo
[...container.querySelectorAll('sl-button')].map(button => { [...container.querySelectorAll('sl-button')].map(button => {
button.addEventListener('click', () => { button.addEventListener('click', () => {
select.value = button.dataset.option; select.value = button.dataset.option;
}); });
}); });
</script> </script>
@ -317,7 +317,7 @@ Use the `size` attribute to change a select's size.
<sl-menu-item value="option-3">Option 3</sl-menu-item> <sl-menu-item value="option-3">Option 3</sl-menu-item>
</sl-select> </sl-select>
<br> <br />
<sl-select placeholder="Medium" size="medium" multiple> <sl-select placeholder="Medium" size="medium" multiple>
<sl-menu-item value="option-1">Option 1</sl-menu-item> <sl-menu-item value="option-1">Option 1</sl-menu-item>
@ -325,7 +325,7 @@ Use the `size` attribute to change a select's size.
<sl-menu-item value="option-3">Option 3</sl-menu-item> <sl-menu-item value="option-3">Option 3</sl-menu-item>
</sl-select> </sl-select>
<br> <br />
<sl-select placeholder="Large" size="large" multiple> <sl-select placeholder="Large" size="large" multiple>
<sl-menu-item value="option-1">Option 1</sl-menu-item> <sl-menu-item value="option-1">Option 1</sl-menu-item>
@ -393,10 +393,7 @@ const App = () => (
Add descriptive help text to a select with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead. Add descriptive help text to a select with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
```html preview ```html preview
<sl-select <sl-select label="Experience" help-text="Please tell us your skill level.">
label="Experience"
help-text="Please tell us your skill level."
>
<sl-menu-item value="1">Novice</sl-menu-item> <sl-menu-item value="1">Novice</sl-menu-item>
<sl-menu-item value="2">Intermediate</sl-menu-item> <sl-menu-item value="2">Intermediate</sl-menu-item>
<sl-menu-item value="3">Advanced</sl-menu-item> <sl-menu-item value="3">Advanced</sl-menu-item>
@ -407,10 +404,7 @@ Add descriptive help text to a select with the `help-text` attribute. For help t
import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react'; import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlSelect <SlSelect label="Experience" help-text="Please tell us your skill level.">
label="Experience"
help-text="Please tell us your skill level."
>
<SlMenuItem value="1">Novice</SlMenuItem> <SlMenuItem value="1">Novice</SlMenuItem>
<SlMenuItem value="2">Intermediate</SlMenuItem> <SlMenuItem value="2">Intermediate</SlMenuItem>
<SlMenuItem value="3">Advanced</SlMenuItem> <SlMenuItem value="3">Advanced</SlMenuItem>
@ -431,7 +425,7 @@ The preferred placement of the select's menu can be set with the `placement` att
``` ```
```jsx react ```jsx react
import { import {
SlMenuItem, SlMenuItem,
SlSelect SlSelect
} from '@shoelace-style/shoelace/dist/react'; } from '@shoelace-style/shoelace/dist/react';
@ -441,7 +435,7 @@ const App = () => (
<SlMenuItem value="option-1">Option 1</SlMenuItem> <SlMenuItem value="option-1">Option 1</SlMenuItem>
<SlMenuItem value="option-2">Option 2</SlMenuItem> <SlMenuItem value="option-2">Option 2</SlMenuItem>
<SlMenuItem value="option-3">Option 3</SlMenuItem> <SlMenuItem value="option-3">Option 3</SlMenuItem>
</SlDropdown> </SlDropdown>
); );
``` ```
@ -457,7 +451,7 @@ Use the `prefix` and `suffix` slots to add icons.
<sl-menu-item value="option-3">Option 3</sl-menu-item> <sl-menu-item value="option-3">Option 3</sl-menu-item>
<sl-icon name="chat" slot="suffix"></sl-icon> <sl-icon name="chat" slot="suffix"></sl-icon>
</sl-select> </sl-select>
<br> <br />
<sl-select placeholder="Medium" size="medium"> <sl-select placeholder="Medium" size="medium">
<sl-icon name="house" slot="prefix"></sl-icon> <sl-icon name="house" slot="prefix"></sl-icon>
<sl-menu-item value="option-1">Option 1</sl-menu-item> <sl-menu-item value="option-1">Option 1</sl-menu-item>
@ -465,7 +459,7 @@ Use the `prefix` and `suffix` slots to add icons.
<sl-menu-item value="option-3">Option 3</sl-menu-item> <sl-menu-item value="option-3">Option 3</sl-menu-item>
<sl-icon name="chat" slot="suffix"></sl-icon> <sl-icon name="chat" slot="suffix"></sl-icon>
</sl-select> </sl-select>
<br> <br />
<sl-select placeholder="Large" size="large"> <sl-select placeholder="Large" size="large">
<sl-icon name="house" slot="prefix"></sl-icon> <sl-icon name="house" slot="prefix"></sl-icon>
<sl-menu-item value="option-1">Option 1</sl-menu-item> <sl-menu-item value="option-1">Option 1</sl-menu-item>

48
docs/components/skeleton.md
Wyświetl plik

@ -101,7 +101,7 @@ const App = () => (
<SlSkeleton /> <SlSkeleton />
<SlSkeleton /> <SlSkeleton />
<SlSkeleton /> <SlSkeleton />
</div> </div>
<style>{css}</style> <style>{css}</style>
</> </>
@ -112,7 +112,7 @@ const App = () => (
### Effects ### Effects
There are two built-in effects, `sheen` and `pulse`. Effects are intentionally subtle, as they can be distracting when used extensively. The default is `none`, which displays a static, non-animated skeleton. There are two built-in effects, `sheen` and `pulse`. Effects are intentionally subtle, as they can be distracting when used extensively. The default is `none`, which displays a static, non-animated skeleton.
```html preview ```html preview
<div class="skeleton-effects"> <div class="skeleton-effects">
@ -155,10 +155,8 @@ const App = () => (
<div className="skeleton-effects"> <div className="skeleton-effects">
<SlSkeleton effect="none" /> <SlSkeleton effect="none" />
None None
<SlSkeleton effect="sheen" /> <SlSkeleton effect="sheen" />
Sheen Sheen
<SlSkeleton effect="pulse" /> <SlSkeleton effect="pulse" />
Pulse Pulse
</div> </div>
@ -252,13 +250,13 @@ Set a matching width and height to make a circle, square, or rounded avatar skel
display: inline-block; display: inline-block;
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
margin-right: .5rem; margin-right: 0.5rem;
} }
.skeleton-avatars sl-skeleton:nth-child(1) { .skeleton-avatars sl-skeleton:nth-child(1) {
--border-radius: 0; --border-radius: 0;
} }
.skeleton-avatars sl-skeleton:nth-child(2) { .skeleton-avatars sl-skeleton:nth-child(2) {
--border-radius: var(--sl-border-radius-medium); --border-radius: var(--sl-border-radius-medium);
} }
@ -333,7 +331,20 @@ Use the `--border-radius` custom property to make circles, squares, and rectangl
.skeleton-shapes .cross::part(indicator) { .skeleton-shapes .cross::part(indicator) {
--border-radius: 0; --border-radius: 0;
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%); clip-path: polygon(
20% 0%,
0% 20%,
30% 50%,
0% 80%,
20% 100%,
50% 70%,
80% 100%,
100% 80%,
70% 50%,
100% 20%,
80% 0%,
50% 30%
);
} }
.skeleton-shapes .comment::part(indicator) { .skeleton-shapes .comment::part(indicator) {
@ -342,7 +353,7 @@ Use the `--border-radius` custom property to make circles, squares, and rectangl
} }
.skeleton-shapes sl-skeleton:not(:last-child) { .skeleton-shapes sl-skeleton:not(:last-child) {
margin-right: .5rem; margin-right: 0.5rem;
} }
</style> </style>
``` ```
@ -387,13 +398,13 @@ const css = `
const App = () => ( const App = () => (
<> <>
<div className="skeleton-shapes"> <div className="skeleton-shapes">
<SlSkeleton className="square" /> <SlSkeleton className="square" />
<SlSkeleton className="circle" /> <SlSkeleton className="circle" />
<SlSkeleton className="triangle" /> <SlSkeleton className="triangle" />
<SlSkeleton className="cross" /> <SlSkeleton className="cross" />
<SlSkeleton className="comment" /> <SlSkeleton className="comment" />
</div> </div>
<style>{css}</style> <style>{css}</style>
</> </>
@ -428,12 +439,7 @@ const css = `
} }
`; `;
const App = () => ( const App = () => <SlSkeleton effect="sheen" style={{ '--color': 'tomato', '--sheen-color': '#ffb094' }} />;
<SlSkeleton
effect="sheen"
style={{ '--color': 'tomato', '--sheen-color': '#ffb094' }}
/>
);
``` ```
[component-metadata:sl-skeleton] [component-metadata:sl-skeleton]

12
docs/components/spinner.md
Wyświetl plik

@ -11,9 +11,7 @@ Spinners are used to show the progress of an indeterminate operation.
```jsx react ```jsx react
import { SlSpinner } from '@shoelace-style/shoelace/dist/react'; import { SlSpinner } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlSpinner />;
<SlSpinner />
);
``` ```
## Examples ## Examples
@ -52,11 +50,11 @@ The width of the spinner's track can be changed by setting the `--track-width` c
import { SlSpinner } from '@shoelace-style/shoelace/dist/react'; import { SlSpinner } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlSpinner <SlSpinner
style={{ style={{
fontSize: '3rem', fontSize: '3rem',
'--track-width': '6px' '--track-width': '6px'
}} }}
/> />
); );
``` ```
@ -73,12 +71,12 @@ The spinner's colors can be changed by setting the `--indicator-color` and `--tr
import { SlSpinner } from '@shoelace-style/shoelace/dist/react'; import { SlSpinner } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlSpinner <SlSpinner
style={{ style={{
fontSize: '3rem', fontSize: '3rem',
'--indicator-color': 'deeppink', '--indicator-color': 'deeppink',
'--track-color': 'pink' '--track-color': 'pink'
}} }}
/> />
); );
``` ```

335
docs/components/split-panel.md
Wyświetl plik

@ -6,10 +6,16 @@ Split panels display two adjacent panels, allowing the user to reposition them.
```html preview ```html preview
<sl-split-panel> <sl-split-panel>
<div slot="start" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"> <div
slot="start"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"
>
Start Start
</div> </div>
<div slot="end" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"> <div
slot="end"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"
>
End End
</div> </div>
</sl-split-panel> </sl-split-panel>
@ -20,22 +26,28 @@ import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlSplitPanel> <SlSplitPanel>
<div slot="start" style={{ <div
height: '200px', slot="start"
background: 'var(--sl-color-neutral-50)', style={{
display: 'flex', height: '200px',
alignItems: 'center', background: 'var(--sl-color-neutral-50)',
justifyContent: 'center' display: 'flex',
}}> alignItems: 'center',
justifyContent: 'center'
}}
>
Start Start
</div> </div>
<div slot="end" style={{ <div
height: '200px', slot="end"
background: 'var(--sl-color-neutral-50)', style={{
display: 'flex', height: '200px',
alignItems: 'center', background: 'var(--sl-color-neutral-50)',
justifyContent: 'center' display: 'flex',
}}> alignItems: 'center',
justifyContent: 'center'
}}
>
End End
</div> </div>
</SlSplitPanel> </SlSplitPanel>
@ -50,10 +62,16 @@ To set the initial position, use the `position` attribute. If no position is pro
```html preview ```html preview
<sl-split-panel position="75"> <sl-split-panel position="75">
<div slot="start" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"> <div
slot="start"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"
>
Start Start
</div> </div>
<div slot="end" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"> <div
slot="end"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"
>
End End
</div> </div>
</sl-split-panel> </sl-split-panel>
@ -65,10 +83,16 @@ To set the initial position in pixels instead of a percentage, use the `position
```html preview ```html preview
<sl-split-panel position-in-pixels="150"> <sl-split-panel position-in-pixels="150">
<div slot="start" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"> <div
slot="start"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"
>
Start Start
</div> </div>
<div slot="end" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"> <div
slot="end"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"
>
End End
</div> </div>
</sl-split-panel> </sl-split-panel>
@ -79,8 +103,8 @@ import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlSplitPanel position="200"> <SlSplitPanel position="200">
<div <div
slot="start" slot="start"
style={{ style={{
height: '200px', height: '200px',
background: 'var(--sl-color-neutral-50)', background: 'var(--sl-color-neutral-50)',
@ -91,8 +115,8 @@ const App = () => (
> >
Start Start
</div> </div>
<div <div
slot="end" slot="end"
style={{ style={{
height: '200px', height: '200px',
background: 'var(--sl-color-neutral-50)', background: 'var(--sl-color-neutral-50)',
@ -113,10 +137,16 @@ Add the `vertical` attribute to render the split panel in a vertical orientation
```html preview ```html preview
<sl-split-panel vertical style="height: 400px;"> <sl-split-panel vertical style="height: 400px;">
<div slot="start" style="height: 100%; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"> <div
slot="start"
style="height: 100%; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"
>
Start Start
</div> </div>
<div slot="end" style="height: 100%; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"> <div
slot="end"
style="height: 100%; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"
>
End End
</div> </div>
</sl-split-panel> </sl-split-panel>
@ -127,26 +157,26 @@ import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlSplitPanel vertical style={{ height: '400px' }}> <SlSplitPanel vertical style={{ height: '400px' }}>
<div <div
slot="start" slot="start"
style={{ style={{
height: '100%', height: '100%',
background: 'var(--sl-color-neutral-50)', background: 'var(--sl-color-neutral-50)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center'
}} }}
> >
Start Start
</div> </div>
<div <div
slot="end" slot="end"
style={{ style={{
height: '100%', height: '100%',
background: 'var(--sl-color-neutral-50)', background: 'var(--sl-color-neutral-50)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center'
}} }}
> >
End End
@ -162,10 +192,16 @@ To snap panels at specific positions while dragging, add the `snap` attribute wi
```html preview ```html preview
<div class="split-panel-snapping"> <div class="split-panel-snapping">
<sl-split-panel snap="100px 50%"> <sl-split-panel snap="100px 50%">
<div slot="start" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"> <div
slot="start"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"
>
Start Start
</div> </div>
<div slot="end" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"> <div
slot="end"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"
>
End End
</div> </div>
</sl-split-panel> </sl-split-panel>
@ -233,8 +269,8 @@ const App = () => (
<> <>
<div className="split-panel-snapping"> <div className="split-panel-snapping">
<SlSplitPanel snap="100px 50%"> <SlSplitPanel snap="100px 50%">
<div <div
slot="start" slot="start"
style={{ style={{
height: '200px', height: '200px',
background: 'var(--sl-color-neutral-50)', background: 'var(--sl-color-neutral-50)',
@ -245,8 +281,8 @@ const App = () => (
> >
Start Start
</div> </div>
<div <div
slot="end" slot="end"
style={{ style={{
height: '200px', height: '200px',
background: 'var(--sl-color-neutral-50)', background: 'var(--sl-color-neutral-50)',
@ -273,10 +309,16 @@ Add the `disabled` attribute to prevent the divider from being repositioned.
```html preview ```html preview
<sl-split-panel disabled> <sl-split-panel disabled>
<div slot="start" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"> <div
slot="start"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"
>
Start Start
</div> </div>
<div slot="end" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"> <div
slot="end"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"
>
End End
</div> </div>
</sl-split-panel> </sl-split-panel>
@ -287,8 +329,8 @@ import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlSplitPanel disabled> <SlSplitPanel disabled>
<div <div
slot="start" slot="start"
style={{ style={{
height: '200px', height: '200px',
background: 'var(--sl-color-neutral-50)', background: 'var(--sl-color-neutral-50)',
@ -299,8 +341,8 @@ const App = () => (
> >
Start Start
</div> </div>
<div <div
slot="end" slot="end"
style={{ style={{
height: '200px', height: '200px',
background: 'var(--sl-color-neutral-50)', background: 'var(--sl-color-neutral-50)',
@ -324,10 +366,16 @@ Try resizing the example below with each option and notice how the panels respon
```html preview ```html preview
<div class="split-panel-primary"> <div class="split-panel-primary">
<sl-split-panel> <sl-split-panel>
<div slot="start" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"> <div
slot="start"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"
>
Start Start
</div> </div>
<div slot="end" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"> <div
slot="end"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"
>
End End
</div> </div>
</sl-split-panel> </sl-split-panel>
@ -344,7 +392,7 @@ Try resizing the example below with each option and notice how the panels respon
const splitPanel = container.querySelector('sl-split-panel'); const splitPanel = container.querySelector('sl-split-panel');
const select = container.querySelector('sl-select'); const select = container.querySelector('sl-select');
select.addEventListener('sl-change', () => splitPanel.primary = select.value); select.addEventListener('sl-change', () => (splitPanel.primary = select.value));
</script> </script>
``` ```
@ -358,8 +406,8 @@ const App = () => {
return ( return (
<> <>
<SlSplitPanel primary={primary}> <SlSplitPanel primary={primary}>
<div <div
slot="start" slot="start"
style={{ style={{
height: '200px', height: '200px',
background: 'var(--sl-color-neutral-50)', background: 'var(--sl-color-neutral-50)',
@ -370,8 +418,8 @@ const App = () => {
> >
Start Start
</div> </div>
<div <div
slot="end" slot="end"
style={{ style={{
height: '200px', height: '200px',
background: 'var(--sl-color-neutral-50)', background: 'var(--sl-color-neutral-50)',
@ -384,16 +432,16 @@ const App = () => {
</div> </div>
</SlSplitPanel> </SlSplitPanel>
<SlSelect <SlSelect
label="Primary Panel" label="Primary Panel"
value={primary} value={primary}
style={{ maxWidth: '200px', marginTop: '1rem' }} style={{ maxWidth: '200px', marginTop: '1rem' }}
onSlChange={event => setPrimary(event.target.value)} onSlChange={event => setPrimary(event.target.value)}
> >
<SlMenuItem value="">None</SlMenuItem> <SlMenuItem value="">None</SlMenuItem>
<SlMenuItem value="start">Start</SlMenuItem> <SlMenuItem value="start">Start</SlMenuItem>
<SlMenuItem value="end">End</SlMenuItem> <SlMenuItem value="end">End</SlMenuItem>
</SlSelect> </SlSelect>
</> </>
); );
}; };
@ -407,10 +455,16 @@ This examples demonstrates how you can ensure both panels are at least 150px usi
```html preview ```html preview
<sl-split-panel style="--min: 150px; --max: calc(100% - 150px);"> <sl-split-panel style="--min: 150px; --max: calc(100% - 150px);">
<div slot="start" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"> <div
slot="start"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"
>
Start Start
</div> </div>
<div slot="end" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"> <div
slot="end"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"
>
End End
</div> </div>
</sl-split-panel> </sl-split-panel>
@ -421,8 +475,8 @@ import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlSplitPanel style={{ '--min': '150px', '--max': 'calc(100% - 150px)' }}> <SlSplitPanel style={{ '--min': '150px', '--max': 'calc(100% - 150px)' }}>
<div <div
slot="start" slot="start"
style={{ style={{
height: '200px', height: '200px',
background: 'var(--sl-color-neutral-50)', background: 'var(--sl-color-neutral-50)',
@ -433,8 +487,8 @@ const App = () => (
> >
Start Start
</div> </div>
<div <div
slot="end" slot="end"
style={{ style={{
height: '200px', height: '200px',
background: 'var(--sl-color-neutral-50)', background: 'var(--sl-color-neutral-50)',
@ -455,18 +509,27 @@ Create complex layouts that can be repositioned independently by nesting split p
```html preview ```html preview
<sl-split-panel> <sl-split-panel>
<div slot="start" style="height: 400px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"> <div
slot="start"
style="height: 400px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"
>
Start Start
</div> </div>
<div slot="end"> <div slot="end">
<sl-split-panel vertical style="height: 400px;"> <sl-split-panel vertical style="height: 400px;">
<div slot="start" style="height: 100%; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"> <div
slot="start"
style="height: 100%; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"
>
Top Top
</div> </div>
<div slot="end" style="height: 100%; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"> <div
slot="end"
style="height: 100%; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"
>
Bottom Bottom
</div> </div>
</sl-split-panel> </sl-split-panel>
</div> </div>
</sl-split-panel> </sl-split-panel>
``` ```
@ -476,8 +539,8 @@ import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlSplitPanel> <SlSplitPanel>
<div <div
slot="start" slot="start"
style={{ style={{
height: '400px', height: '400px',
background: 'var(--sl-color-neutral-50)', background: 'var(--sl-color-neutral-50)',
@ -490,9 +553,9 @@ const App = () => (
</div> </div>
<div slot="end"> <div slot="end">
<SlSplitPanel vertical style={{ height: '400px' }}> <SlSplitPanel vertical style={{ height: '400px' }}>
<div <div
slot="start" slot="start"
style={{ style={{
height: '100%', height: '100%',
background: 'var(--sl-color-neutral-50)', background: 'var(--sl-color-neutral-50)',
display: 'flex', display: 'flex',
@ -502,15 +565,15 @@ const App = () => (
> >
Start Start
</div> </div>
<div <div
slot="end" slot="end"
style={{ style={{
height: '100%', height: '100%',
background: 'var(--sl-color-neutral-50)', background: 'var(--sl-color-neutral-50)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center'
}} }}
> >
End End
</div> </div>
@ -527,10 +590,16 @@ You can target the `divider` part to apply CSS properties to the divider. To add
```html preview ```html preview
<sl-split-panel style="--divider-width: 20px;"> <sl-split-panel style="--divider-width: 20px;">
<sl-icon slot="handle" name="grip-vertical"></sl-icon> <sl-icon slot="handle" name="grip-vertical"></sl-icon>
<div slot="start" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"> <div
slot="start"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"
>
Start Start
</div> </div>
<div slot="end" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"> <div
slot="end"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"
>
End End
</div> </div>
</sl-split-panel> </sl-split-panel>
@ -542,22 +611,28 @@ import { SlSplitPanel, SlIcon } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlSplitPanel style={{ '--divider-width': '20px' }}> <SlSplitPanel style={{ '--divider-width': '20px' }}>
<SlIcon slot="handle" name="grip-vertical" /> <SlIcon slot="handle" name="grip-vertical" />
<div slot="start" style={{ <div
height: '200px', slot="start"
background: 'var(--sl-color-neutral-50)', style={{
display: 'flex', height: '200px',
alignItems: 'center', background: 'var(--sl-color-neutral-50)',
justifyContent: 'center' display: 'flex',
}}> alignItems: 'center',
justifyContent: 'center'
}}
>
Start Start
</div> </div>
<div slot="end" style={{ <div
height: '200px', slot="end"
background: 'var(--sl-color-neutral-50)', style={{
display: 'flex', height: '200px',
alignItems: 'center', background: 'var(--sl-color-neutral-50)',
justifyContent: 'center' display: 'flex',
}}> alignItems: 'center',
justifyContent: 'center'
}}
>
End End
</div> </div>
</SlSplitPanel> </SlSplitPanel>
@ -570,10 +645,16 @@ Here's a more elaborate example that changes the divider's color and width and a
<div class="split-panel-handle"> <div class="split-panel-handle">
<sl-split-panel> <sl-split-panel>
<sl-icon slot="handle" name="grip-vertical"></sl-icon> <sl-icon slot="handle" name="grip-vertical"></sl-icon>
<div slot="start" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"> <div
slot="start"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"
>
Start Start
</div> </div>
<div slot="end" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"> <div
slot="end"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;"
>
End End
</div> </div>
</sl-split-panel> </sl-split-panel>
@ -593,7 +674,7 @@ Here's a more elaborate example that changes the divider's color and width and a
border-radius: var(--sl-border-radius-small); border-radius: var(--sl-border-radius-small);
background: var(--sl-color-pink-600); background: var(--sl-color-pink-600);
color: var(--sl-color-neutral-0); color: var(--sl-color-neutral-0);
padding: .5rem .125rem; padding: 0.5rem 0.125rem;
} }
.split-panel-handle sl-split-panel::part(divider):focus-visible { .split-panel-handle sl-split-panel::part(divider):focus-visible {
@ -639,29 +720,35 @@ const css = `
const App = () => ( const App = () => (
<> <>
<div className="split-panel-handle"> <div className="split-panel-handle">
<SlSplitPanel> <SlSplitPanel>
<SlIcon slot="handle" name="grip-vertical" /> <SlIcon slot="handle" name="grip-vertical" />
<div slot="start" style={{ <div
height: '200px', slot="start"
background: 'var(--sl-color-neutral-50)', style={{
display: 'flex', height: '200px',
alignItems: 'center', background: 'var(--sl-color-neutral-50)',
justifyContent: 'center' display: 'flex',
}}> alignItems: 'center',
Start justifyContent: 'center'
</div> }}
<div slot="end" style={{ >
height: '200px', Start
background: 'var(--sl-color-neutral-50)', </div>
display: 'flex', <div
alignItems: 'center', slot="end"
justifyContent: 'center' style={{
}}> height: '200px',
End background: 'var(--sl-color-neutral-50)',
</div> display: 'flex',
</SlSplitPanel> alignItems: 'center',
</div> justifyContent: 'center'
}}
>
End
</div>
</SlSplitPanel>
</div>
<style>{css}</style> <style>{css}</style>
</> </>

18
docs/components/switch.md
Wyświetl plik

@ -2,7 +2,7 @@
[component-header:sl-switch] [component-header:sl-switch]
Switches allow the user to toggle an option on or off. Switches allow the user to toggle an option on or off.
```html preview ```html preview
<sl-switch>Switch</sl-switch> <sl-switch>Switch</sl-switch>
@ -11,9 +11,7 @@ Switches allow the user to toggle an option on or off.
```jsx react ```jsx react
import { SlSwitch } from '@shoelace-style/shoelace/dist/react'; import { SlSwitch } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlSwitch>Switch</SlSwitch>;
<SlSwitch>Switch</SlSwitch>
);
``` ```
?> 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. ?> 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.
@ -31,9 +29,7 @@ Use the `checked` attribute to activate the switch.
```jsx react ```jsx react
import { SlSwitch } from '@shoelace-style/shoelace/dist/react'; import { SlSwitch } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlSwitch checked>Checked</SlSwitch>;
<SlSwitch checked>Checked</SlSwitch>
);
``` ```
### Disabled ### Disabled
@ -47,9 +43,7 @@ Use the `disabled` attribute to disable the switch.
```jsx react ```jsx react
import { SlSwitch } from '@shoelace-style/shoelace/dist/react'; import { SlSwitch } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => <SlSwitch disabled>Disabled</SlSwitch>;
<SlSwitch disabled>Disabled</SlSwitch>
);
``` ```
### Custom Size ### Custom Size
@ -64,12 +58,12 @@ Use the available custom properties to make the switch a different size.
import { SlSwitch } from '@shoelace-style/shoelace/dist/react'; import { SlSwitch } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlSwitch <SlSwitch
style={{ style={{
'--width': '80px', '--width': '80px',
'--height': '32px', '--height': '32px',
'--thumb-size': '26px' '--thumb-size': '26px'
}} }}
/> />
); );
``` ```

182
docs/components/tab-group.md
Wyświetl plik

@ -25,10 +25,18 @@ import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/rea
const App = () => ( const App = () => (
<SlTabGroup> <SlTabGroup>
<SlTab slot="nav" panel="general">General</SlTab> <SlTab slot="nav" panel="general">
<SlTab slot="nav" panel="custom">Custom</SlTab> General
<SlTab slot="nav" panel="advanced">Advanced</SlTab> </SlTab>
<SlTab slot="nav" panel="disabled" disabled>Disabled</SlTab> <SlTab slot="nav" panel="custom">
Custom
</SlTab>
<SlTab slot="nav" panel="advanced">
Advanced
</SlTab>
<SlTab slot="nav" panel="disabled" disabled>
Disabled
</SlTab>
<SlTabPanel name="general">This is the general tab panel.</SlTabPanel> <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
<SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel> <SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
@ -63,10 +71,18 @@ import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/rea
const App = () => ( const App = () => (
<SlTabGroup placement="bottom"> <SlTabGroup placement="bottom">
<SlTab slot="nav" panel="general">General</SlTab> <SlTab slot="nav" panel="general">
<SlTab slot="nav" panel="custom">Custom</SlTab> General
<SlTab slot="nav" panel="advanced">Advanced</SlTab> </SlTab>
<SlTab slot="nav" panel="disabled" disabled>Disabled</SlTab> <SlTab slot="nav" panel="custom">
Custom
</SlTab>
<SlTab slot="nav" panel="advanced">
Advanced
</SlTab>
<SlTab slot="nav" panel="disabled" disabled>
Disabled
</SlTab>
<SlTabPanel name="general">This is the general tab panel.</SlTabPanel> <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
<SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel> <SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
@ -94,16 +110,23 @@ Tabs can be shown on the starting side by setting `placement` to `start`.
</sl-tab-group> </sl-tab-group>
``` ```
```jsx react ```jsx react
import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react'; import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlTabGroup placement="start"> <SlTabGroup placement="start">
<SlTab slot="nav" panel="general">General</SlTab> <SlTab slot="nav" panel="general">
<SlTab slot="nav" panel="custom">Custom</SlTab> General
<SlTab slot="nav" panel="advanced">Advanced</SlTab> </SlTab>
<SlTab slot="nav" panel="disabled" disabled>Disabled</SlTab> <SlTab slot="nav" panel="custom">
Custom
</SlTab>
<SlTab slot="nav" panel="advanced">
Advanced
</SlTab>
<SlTab slot="nav" panel="disabled" disabled>
Disabled
</SlTab>
<SlTabPanel name="general">This is the general tab panel.</SlTabPanel> <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
<SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel> <SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
@ -131,16 +154,23 @@ Tabs can be shown on the ending side by setting `placement` to `end`.
</sl-tab-group> </sl-tab-group>
``` ```
```jsx react ```jsx react
import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react'; import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlTabGroup placement="end"> <SlTabGroup placement="end">
<SlTab slot="nav" panel="general">General</SlTab> <SlTab slot="nav" panel="general">
<SlTab slot="nav" panel="custom">Custom</SlTab> General
<SlTab slot="nav" panel="advanced">Advanced</SlTab> </SlTab>
<SlTab slot="nav" panel="disabled" disabled>Disabled</SlTab> <SlTab slot="nav" panel="custom">
Custom
</SlTab>
<SlTab slot="nav" panel="advanced">
Advanced
</SlTab>
<SlTab slot="nav" panel="disabled" disabled>
Disabled
</SlTab>
<SlTabPanel name="general">This is the general tab panel.</SlTabPanel> <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
<SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel> <SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
@ -192,24 +222,32 @@ import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/rea
const App = () => { const App = () => {
function handleClose(event) { function handleClose(event) {
// //
// This is a crude example that removes the tab and its panel from the DOM. // This is a crude example that removes the tab and its panel from the DOM.
// There are better ways to manage tab creation/removal in React, but that // There are better ways to manage tab creation/removal in React, but that
// would significantly complicate the example. // would significantly complicate the example.
// //
const tab = event.target; const tab = event.target;
const tabGroup = tab.closest('sl-tab-group'); const tabGroup = tab.closest('sl-tab-group');
const tabPanel = tabGroup.querySelector(`[aria-labelledby="${tab.id}"]`); const tabPanel = tabGroup.querySelector(`[aria-labelledby="${tab.id}"]`);
tab.remove(); tab.remove();
tabPanel.remove(); tabPanel.remove();
} }
return ( return (
<SlTabGroup className="tabs-closable" onSlClose={handleClose}> <SlTabGroup className="tabs-closable" onSlClose={handleClose}>
<SlTab slot="nav" panel="general">General</SlTab> <SlTab slot="nav" panel="general">
<SlTab slot="nav" panel="closable-1" closable onSlClose={handleClose}>Closable 1</SlTab> General
<SlTab slot="nav" panel="closable-2" closable onSlClose={handleClose}>Closable 2</SlTab> </SlTab>
<SlTab slot="nav" panel="closable-3" closable onSlClose={handleClose}>Closable 3</SlTab> <SlTab slot="nav" panel="closable-1" closable onSlClose={handleClose}>
Closable 1
</SlTab>
<SlTab slot="nav" panel="closable-2" closable onSlClose={handleClose}>
Closable 2
</SlTab>
<SlTab slot="nav" panel="closable-3" closable onSlClose={handleClose}>
Closable 3
</SlTab>
<SlTabPanel name="general">This is the general tab panel.</SlTabPanel> <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
<SlTabPanel name="closable-1">This is the first closable tab panel.</SlTabPanel> <SlTabPanel name="closable-1">This is the first closable tab panel.</SlTabPanel>
@ -275,26 +313,66 @@ import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/rea
const App = () => ( const App = () => (
<SlTabGroup> <SlTabGroup>
<SlTab slot="nav" panel="tab-1">Tab 1</SlTab> <SlTab slot="nav" panel="tab-1">
<SlTab slot="nav" panel="tab-2">Tab 2</SlTab> Tab 1
<SlTab slot="nav" panel="tab-3">Tab 3</SlTab> </SlTab>
<SlTab slot="nav" panel="tab-4">Tab 4</SlTab> <SlTab slot="nav" panel="tab-2">
<SlTab slot="nav" panel="tab-5">Tab 5</SlTab> Tab 2
<SlTab slot="nav" panel="tab-6">Tab 6</SlTab> </SlTab>
<SlTab slot="nav" panel="tab-7">Tab 7</SlTab> <SlTab slot="nav" panel="tab-3">
<SlTab slot="nav" panel="tab-8">Tab 8</SlTab> Tab 3
<SlTab slot="nav" panel="tab-9">Tab 9</SlTab> </SlTab>
<SlTab slot="nav" panel="tab-10">Tab 10</SlTab> <SlTab slot="nav" panel="tab-4">
<SlTab slot="nav" panel="tab-11">Tab 11</SlTab> Tab 4
<SlTab slot="nav" panel="tab-12">Tab 12</SlTab> </SlTab>
<SlTab slot="nav" panel="tab-13">Tab 13</SlTab> <SlTab slot="nav" panel="tab-5">
<SlTab slot="nav" panel="tab-14">Tab 14</SlTab> Tab 5
<SlTab slot="nav" panel="tab-15">Tab 15</SlTab> </SlTab>
<SlTab slot="nav" panel="tab-16">Tab 16</SlTab> <SlTab slot="nav" panel="tab-6">
<SlTab slot="nav" panel="tab-17">Tab 17</SlTab> Tab 6
<SlTab slot="nav" panel="tab-18">Tab 18</SlTab> </SlTab>
<SlTab slot="nav" panel="tab-19">Tab 19</SlTab> <SlTab slot="nav" panel="tab-7">
<SlTab slot="nav" panel="tab-20">Tab 20</SlTab> Tab 7
</SlTab>
<SlTab slot="nav" panel="tab-8">
Tab 8
</SlTab>
<SlTab slot="nav" panel="tab-9">
Tab 9
</SlTab>
<SlTab slot="nav" panel="tab-10">
Tab 10
</SlTab>
<SlTab slot="nav" panel="tab-11">
Tab 11
</SlTab>
<SlTab slot="nav" panel="tab-12">
Tab 12
</SlTab>
<SlTab slot="nav" panel="tab-13">
Tab 13
</SlTab>
<SlTab slot="nav" panel="tab-14">
Tab 14
</SlTab>
<SlTab slot="nav" panel="tab-15">
Tab 15
</SlTab>
<SlTab slot="nav" panel="tab-16">
Tab 16
</SlTab>
<SlTab slot="nav" panel="tab-17">
Tab 17
</SlTab>
<SlTab slot="nav" panel="tab-18">
Tab 18
</SlTab>
<SlTab slot="nav" panel="tab-19">
Tab 19
</SlTab>
<SlTab slot="nav" panel="tab-20">
Tab 20
</SlTab>
<SlTabPanel name="tab-1">Tab panel 1</SlTabPanel> <SlTabPanel name="tab-1">Tab panel 1</SlTabPanel>
<SlTabPanel name="tab-2">Tab panel 2</SlTabPanel> <SlTabPanel name="tab-2">Tab panel 2</SlTabPanel>
@ -343,10 +421,18 @@ import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/rea
const App = () => ( const App = () => (
<SlTabGroup activation="manual"> <SlTabGroup activation="manual">
<SlTab slot="nav" panel="general">General</SlTab> <SlTab slot="nav" panel="general">
<SlTab slot="nav" panel="custom">Custom</SlTab> General
<SlTab slot="nav" panel="advanced">Advanced</SlTab> </SlTab>
<SlTab slot="nav" panel="disabled" disabled>Disabled</SlTab> <SlTab slot="nav" panel="custom">
Custom
</SlTab>
<SlTab slot="nav" panel="advanced">
Advanced
</SlTab>
<SlTab slot="nav" panel="disabled" disabled>
Disabled
</SlTab>
<SlTabPanel name="general">This is the general tab panel.</SlTabPanel> <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
<SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel> <SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>

16
docs/components/tab-panel.md
Wyświetl plik

@ -23,10 +23,18 @@ import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/rea
const App = () => ( const App = () => (
<SlTabGroup> <SlTabGroup>
<SlTab slot="nav" panel="general">General</SlTab> <SlTab slot="nav" panel="general">
<SlTab slot="nav" panel="custom">Custom</SlTab> General
<SlTab slot="nav" panel="advanced">Advanced</SlTab> </SlTab>
<SlTab slot="nav" panel="disabled" disabled>Disabled</SlTab> <SlTab slot="nav" panel="custom">
Custom
</SlTab>
<SlTab slot="nav" panel="advanced">
Advanced
</SlTab>
<SlTab slot="nav" panel="disabled" disabled>
Disabled
</SlTab>
<SlTabPanel name="general">This is the general tab panel.</SlTabPanel> <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
<SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel> <SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>

21
docs/components/tag.md
Wyświetl plik

@ -12,7 +12,6 @@ Tags are used as labels to organize things or to indicate a selection.
<sl-tag variant="danger">Danger</sl-tag> <sl-tag variant="danger">Danger</sl-tag>
``` ```
```jsx react ```jsx react
import { SlTag } from '@shoelace-style/shoelace/dist/react'; import { SlTag } from '@shoelace-style/shoelace/dist/react';
@ -22,7 +21,7 @@ const App = () => (
<SlTag variant="success">Success</SlTag> <SlTag variant="success">Success</SlTag>
<SlTag variant="neutral">Neutral</SlTag> <SlTag variant="neutral">Neutral</SlTag>
<SlTag variant="warning">Warning</SlTag> <SlTag variant="warning">Warning</SlTag>
<SlTag variant="danger">Danger</SlTag> <SlTag variant="danger">Danger</SlTag>
</> </>
); );
``` ```
@ -66,9 +65,15 @@ import { SlTag } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<> <>
<SlTag size="small" pill>Small</SlTag> <SlTag size="small" pill>
<SlTag size="medium" pill>Medium</SlTag> Small
<SlTag size="large" pill>Large</SlTag> </SlTag>
<SlTag size="medium" pill>
Medium
</SlTag>
<SlTag size="large" pill>
Large
</SlTag>
</> </>
); );
``` ```
@ -90,7 +95,7 @@ Use the `removable` attribute to add a remove button to the tag.
div.addEventListener('sl-remove', event => { div.addEventListener('sl-remove', event => {
const tag = event.target; const tag = event.target;
tag.style.opacity = '0'; tag.style.opacity = '0';
setTimeout(() => tag.style.opacity = '1', 2000); setTimeout(() => (tag.style.opacity = '1'), 2000);
}); });
</script> </script>
@ -114,7 +119,7 @@ const App = () => {
function handleRemove(event) { function handleRemove(event) {
const tag = event.target; const tag = event.target;
tag.style.opacity = '0'; tag.style.opacity = '0';
setTimeout(() => tag.style.opacity = '1', 2000); setTimeout(() => (tag.style.opacity = '1'), 2000);
} }
return ( return (
@ -135,7 +140,7 @@ const App = () => {
<style>{css}</style> <style>{css}</style>
</> </>
) );
}; };
``` ```

49
docs/components/textarea.md
Wyświetl plik

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

17
docs/components/tooltip.md
Wyświetl plik

@ -20,7 +20,7 @@ import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlTooltip content="This is a tooltip"> <SlTooltip content="This is a tooltip">
<SlButton>Hover Me</SlButton> <SlButton>Hover Me</SlButton>
</SlTooltip> </SlTooltip>
); );
``` ```
@ -238,7 +238,7 @@ import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlTooltip content="Click again to dismiss" trigger="click"> <SlTooltip content="Click again to dismiss" trigger="click">
<SlButton>Click to Toggle</SlButton> <SlButton>Click to Toggle</SlButton>
</SlTooltip> </SlTooltip>
); );
``` ```
@ -270,10 +270,7 @@ const App = () => {
return ( return (
<> <>
<SlButton <SlButton style={{ marginRight: '4rem' }} onClick={() => setOpen(!open)}>
style={{ marginRight: '4rem' }}
onClick={() => setOpen(!open)}
>
Toggle Manually Toggle Manually
</SlButton> </SlButton>
@ -331,10 +328,8 @@ Use the `content` slot to create tooltips with HTML content. Tooltips are design
```html preview ```html preview
<sl-tooltip> <sl-tooltip>
<div slot="content"> <div slot="content">I'm not <strong>just</strong> a tooltip, I'm a <em>tooltip</em> with HTML!</div>
I'm not <strong>just</strong> a tooltip, I'm a <em>tooltip</em> with HTML!
</div>
<sl-button>Hover me</sl-button> <sl-button>Hover me</sl-button>
</sl-tooltip> </sl-tooltip>
``` ```
@ -349,7 +344,7 @@ const App = () => (
</div> </div>
<SlButton>Hover Me</SlButton> <SlButton>Hover Me</SlButton>
</SlTooltip> </SlTooltip>
); );
``` ```

28
docs/frameworks/react.md
Wyświetl plik

@ -33,11 +33,7 @@ Every Shoelace component is available to import as a React component. Note that
```jsx ```jsx
import { SlButton } from '@shoelace-style/shoelace/dist/react'; import { SlButton } from '@shoelace-style/shoelace/dist/react';
const MyComponent = () => ( const MyComponent = () => <SlButton variant="primary">Click me</SlButton>;
<SlButton variant="primary">
Click me
</SlButton>
);
export default MyComponent; export default MyComponent;
``` ```
@ -57,13 +53,8 @@ import { SlInput } from '@shoelace-style/shoelace/dist/react';
function MyComponent() { function MyComponent() {
const [value, setValue] = useState(''); const [value, setValue] = useState('');
return ( return <SlInput value={value} onSlInput={event => setValue(event.target.value)} />;
<SlInput }
value={value}
onSlInput={event => setValue(event.target.value)}
/>
)
};
export default MyComponent; export default MyComponent;
``` ```
@ -78,13 +69,8 @@ import type SlInputElement from '@shoelace-style/shoelace/dist/components/input/
function MyComponent() { function MyComponent() {
const [value, setValue] = useState(''); const [value, setValue] = useState('');
return ( return <SlInput value={value} onSlInput={event => setValue((event.target as SlInputElement).value)} />;
<SlInput }
value={value}
onSlInput={event => setValue((event.target as SlInputElement).value)}
/>
)
};
export default MyComponent; export default MyComponent;
``` ```
@ -124,8 +110,8 @@ Object.defineProperty(window, 'matchMedia', {
removeListener: jest.fn(), // deprecated removeListener: jest.fn(), // deprecated
addEventListener: jest.fn(), addEventListener: jest.fn(),
removeEventListener: jest.fn(), removeEventListener: jest.fn(),
dispatchEvent: jest.fn(), dispatchEvent: jest.fn()
})), }))
}); });
``` ```

8
docs/frameworks/vue.md
Wyświetl plik

@ -57,9 +57,9 @@ One caveat is there's currently [no support for v-model on custom elements](http
```html ```html
<!-- This doesn't work --> <!-- This doesn't work -->
<sl-input v-model="name"> <sl-input v-model="name">
<!-- This works, but it's a bit longer -->
<!-- This works, but it's a bit longer --> <sl-input :value="name" @input="name = $event.target.value"></sl-input
<sl-input :value="name" @input="name = $event.target.value"> ></sl-input>
``` ```
If that's too verbose for your liking, you can use a custom directive instead. [This utility](https://www.npmjs.com/package/@shoelace-style/vue-sl-model) adds a custom directive that will work just like `v-model` but for Shoelace components. To install it, use this command. If that's too verbose for your liking, you can use a custom directive instead. [This utility](https://www.npmjs.com/package/@shoelace-style/vue-sl-model) adds a custom directive that will work just like `v-model` but for Shoelace components. To install it, use this command.
@ -86,7 +86,7 @@ app.mount('#app');
Now you can use the `v-sl-model` directive to keep your data in sync! Now you can use the `v-sl-model` directive to keep your data in sync!
```html ```html
<sl-input v-sl-model="name"> <sl-input v-sl-model="name"></sl-input>
``` ```
?> Are you using Shoelace with Vue? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/vue.md) ?> Are you using Shoelace with Vue? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/vue.md)

72
docs/getting-started/form-controls.md
Wyświetl plik

@ -49,18 +49,18 @@ To make a field required, use the `required` prop. The form will not be submitte
```html preview ```html preview
<form class="input-validation-required"> <form class="input-validation-required">
<sl-input name="name" label="Name" required></sl-input> <sl-input name="name" label="Name" required></sl-input>
<br> <br />
<sl-select label="Favorite Animal" clearable required> <sl-select label="Favorite Animal" clearable required>
<sl-menu-item value="birds">Birds</sl-menu-item> <sl-menu-item value="birds">Birds</sl-menu-item>
<sl-menu-item value="cats">Cats</sl-menu-item> <sl-menu-item value="cats">Cats</sl-menu-item>
<sl-menu-item value="dogs">Dogs</sl-menu-item> <sl-menu-item value="dogs">Dogs</sl-menu-item>
<sl-menu-item value="other">Other</sl-menu-item> <sl-menu-item value="other">Other</sl-menu-item>
</sl-select> </sl-select>
<br> <br />
<sl-textarea name="comment" label="Comment" required></sl-textarea> <sl-textarea name="comment" label="Comment" required></sl-textarea>
<br> <br />
<sl-checkbox required>Check me before submitting</sl-checkbox> <sl-checkbox required>Check me before submitting</sl-checkbox>
<br><br> <br /><br />
<sl-button type="submit" variant="primary">Submit</sl-button> <sl-button type="submit" variant="primary">Submit</sl-button>
</form> </form>
@ -68,20 +68,13 @@ To make a field required, use the `required` prop. The form will not be submitte
const form = document.querySelector('.input-validation-required'); const form = document.querySelector('.input-validation-required');
form.addEventListener('submit', event => { form.addEventListener('submit', event => {
event.preventDefault(); event.preventDefault();
alert('All fields are valid!') alert('All fields are valid!');
}); });
</script> </script>
``` ```
```jsx react ```jsx react
import { import { SlButton, SlCheckbox, SlInput, SlMenuItem, SlSelect, SlTextarea } from '@shoelace-style/shoelace/dist/react';
SlButton,
SlCheckbox,
SlInput,
SlMenuItem,
SlSelect,
SlTextarea
} from '@shoelace-style/shoelace/dist/react';
const App = () => { const App = () => {
function handleSubmit(event) { function handleSubmit(event) {
@ -103,8 +96,11 @@ const App = () => {
<SlTextarea name="comment" label="Comment" required></SlTextarea> <SlTextarea name="comment" label="Comment" required></SlTextarea>
<br /> <br />
<SlCheckbox required>Check me before submitting</SlCheckbox> <SlCheckbox required>Check me before submitting</SlCheckbox>
<br /><br /> <br />
<SlButton type="submit" variant="primary">Submit</SlButton> <br />
<SlButton type="submit" variant="primary">
Submit
</SlButton>
</form> </form>
); );
}; };
@ -117,7 +113,7 @@ To restrict a value to a specific [pattern](https://developer.mozilla.org/en-US/
```html preview ```html preview
<form class="input-validation-pattern"> <form class="input-validation-pattern">
<sl-input name="letters" required label="Letters" pattern="[A-Za-z]+"></sl-input> <sl-input name="letters" required label="Letters" pattern="[A-Za-z]+"></sl-input>
<br> <br />
<sl-button type="submit" variant="primary">Submit</sl-button> <sl-button type="submit" variant="primary">Submit</sl-button>
</form> </form>
@ -125,7 +121,7 @@ To restrict a value to a specific [pattern](https://developer.mozilla.org/en-US/
const form = document.querySelector('.input-validation-pattern'); const form = document.querySelector('.input-validation-pattern');
form.addEventListener('submit', event => { form.addEventListener('submit', event => {
event.preventDefault(); event.preventDefault();
alert('All fields are valid!') alert('All fields are valid!');
}); });
</script> </script>
``` ```
@ -143,7 +139,9 @@ const App = () => {
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<SlInput name="letters" required label="Letters" pattern="[A-Za-z]+" /> <SlInput name="letters" required label="Letters" pattern="[A-Za-z]+" />
<br /> <br />
<SlButton type="submit" variant="primary">Submit</SlButton> <SlButton type="submit" variant="primary">
Submit
</SlButton>
</form> </form>
); );
}; };
@ -156,9 +154,9 @@ Some input types will automatically trigger constraints, such as `email` and `ur
```html preview ```html preview
<form class="input-validation-type"> <form class="input-validation-type">
<sl-input variant="email" label="Email" placeholder="you@example.com" required></sl-input> <sl-input variant="email" label="Email" placeholder="you@example.com" required></sl-input>
<br> <br />
<sl-input variant="url" label="URL" placeholder="https://example.com/" required></sl-input> <sl-input variant="url" label="URL" placeholder="https://example.com/" required></sl-input>
<br> <br />
<sl-button type="submit" variant="primary">Submit</sl-button> <sl-button type="submit" variant="primary">Submit</sl-button>
</form> </form>
@ -166,7 +164,7 @@ Some input types will automatically trigger constraints, such as `email` and `ur
const form = document.querySelector('.input-validation-type'); const form = document.querySelector('.input-validation-type');
form.addEventListener('submit', event => { form.addEventListener('submit', event => {
event.preventDefault(); event.preventDefault();
alert('All fields are valid!') alert('All fields are valid!');
}); });
</script> </script>
``` ```
@ -186,7 +184,9 @@ const App = () => {
<br /> <br />
<SlInput variant="url" label="URL" placeholder="https://example.com/" required /> <SlInput variant="url" label="URL" placeholder="https://example.com/" required />
<br /> <br />
<SlButton type="submit" variant="primary">Submit</SlButton> <SlButton type="submit" variant="primary">
Submit
</SlButton>
</form> </form>
); );
}; };
@ -199,7 +199,7 @@ To create a custom validation error, use the `setCustomValidity` method. The for
```html preview ```html preview
<form class="input-validation-custom"> <form class="input-validation-custom">
<sl-input label="Type 'shoelace'" required></sl-input> <sl-input label="Type 'shoelace'" required></sl-input>
<br> <br />
<sl-button type="submit" variant="primary">Submit</sl-button> <sl-button type="submit" variant="primary">Submit</sl-button>
</form> </form>
@ -209,14 +209,14 @@ To create a custom validation error, use the `setCustomValidity` method. The for
form.addEventListener('submit', event => { form.addEventListener('submit', event => {
event.preventDefault(); event.preventDefault();
alert('All fields are valid!') alert('All fields are valid!');
}); });
input.addEventListener('sl-input', () => { input.addEventListener('sl-input', () => {
if (input.value === 'shoelace') { if (input.value === 'shoelace') {
input.setCustomValidity(''); input.setCustomValidity('');
} else { } else {
input.setCustomValidity('Hey, you\'re supposed to type \'shoelace\' before submitting this!'); input.setCustomValidity("Hey, you're supposed to type 'shoelace' before submitting this!");
} }
}); });
</script> </script>
@ -236,7 +236,7 @@ const App = () => {
if (event.target.value === 'shoelace') { if (event.target.value === 'shoelace') {
input.current.setCustomValidity(''); input.current.setCustomValidity('');
} else { } else {
input.current.setCustomValidity('Hey, you\'re supposed to type \'shoelace\' before submitting this!'); input.current.setCustomValidity("Hey, you're supposed to type 'shoelace' before submitting this!");
} }
} }
@ -247,15 +247,11 @@ const App = () => {
return ( return (
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<SlInput <SlInput ref={input} label="Type 'shoelace'" required value={value} onSlInput={handleInput} />
ref={input}
label="Type 'shoelace'"
required
value={value}
onSlInput={handleInput}
/>
<br /> <br />
<SlButton type="submit" variant="primary">Submit</SlButton> <SlButton type="submit" variant="primary">
Submit
</SlButton>
</form> </form>
); );
}; };
@ -276,9 +272,9 @@ The `invalid` attribute reflects the form control's validity, so you can style i
color: var(--sl-color-danger-600); color: var(--sl-color-danger-600);
} }
.custom-input[invalid]:not([disabled])::part(base) { .custom-input[invalid]:not([disabled])::part(base) {
border-color: var(--sl-color-danger-500); border-color: var(--sl-color-danger-500);
} }
.custom-input[invalid]:focus-within::part(base) { .custom-input[invalid]:focus-within::part(base) {
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-danger-500); box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-danger-500);
@ -330,7 +326,7 @@ Instead, toggle a class and target it in your stylesheet as shown below.
<style> <style>
sl-input.invalid { sl-input.invalid {
... ...;
} }
</style> </style>
``` ```

23
docs/getting-started/installation.md
Wyświetl plik

@ -9,7 +9,7 @@ If you're using a framework, make sure to check out the pages for [React](/frame
The easiest way to install Shoelace is with the CDN. Just add the following tags to your page to get all components and the default light theme. The easiest way to install Shoelace is with the CDN. Just add the following tags to your page to get all components and the default light theme.
```html ```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/light.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/light.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js"></script> <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js"></script>
``` ```
@ -20,7 +20,7 @@ The easiest way to install Shoelace is with the CDN. Just add the following tags
If you prefer to use the [dark theme](/getting-started/themes#dark-theme) instead, use this code and add `<html class="sl-theme-dark">` to the page. If you prefer to use the [dark theme](/getting-started/themes#dark-theme) instead, use this code and add `<html class="sl-theme-dark">` to the page.
```html ```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/dark.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/dark.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js"></script> <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js"></script>
``` ```
@ -29,10 +29,17 @@ If you prefer to use the [dark theme](/getting-started/themes#dark-theme) instea
If you want to load the light or dark theme based on the user's `prefers-color-scheme` setting, use this. The `media` attributes ensure that only the user's preferred theme stylesheet loads and the `onload` attribute sets the appropriate [theme class](/getting-started/themes) on the `<html>` element. If you want to load the light or dark theme based on the user's `prefers-color-scheme` setting, use this. The `media` attributes ensure that only the user's preferred theme stylesheet loads and the `onload` attribute sets the appropriate [theme class](/getting-started/themes) on the `<html>` element.
```html ```html
<link rel="stylesheet" media="(prefers-color-scheme:light)" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/light.css"> <link
<link rel="stylesheet" media="(prefers-color-scheme:dark)" rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/dark.css" media="(prefers-color-scheme:light)"
onload="document.documentElement.classList.add('sl-theme-dark');"> href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/light.css"
/>
<link
rel="stylesheet"
media="(prefers-color-scheme:dark)"
href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/dark.css"
onload="document.documentElement.classList.add('sl-theme-dark');"
/>
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js"></script> <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js"></script>
``` ```
@ -51,7 +58,7 @@ It's up to you to make the source files available to your app. One way to do thi
Once you've done that, add the following tags to your page. Make sure to update `href` and `src` so they point to the route you created. Once you've done that, add the following tags to your page. Make sure to update `href` and `src` so they point to the route you created.
```html ```html
<link rel="stylesheet" href="/shoelace/dist/themes/light.css"> <link rel="stylesheet" href="/shoelace/dist/themes/light.css" />
<script type="module" src="/shoelace/dist/shoelace.js"></script> <script type="module" src="/shoelace/dist/shoelace.js"></script>
``` ```
@ -88,7 +95,7 @@ Cherry picking can be done from your local install or [directly from the CDN](ht
Here's an example that loads only the button component. Again, if you're not using a module resolver, you'll need to adjust the path to point to the folder Shoelace is in. Here's an example that loads only the button component. Again, if you're not using a module resolver, you'll need to adjust the path to point to the folder Shoelace is in.
```html ```html
<link rel="stylesheet" href="/path/to/shoelace/dist/themes/light.css"> <link rel="stylesheet" href="/path/to/shoelace/dist/themes/light.css" />
<script type="module" data-shoelace="/path/to/shoelace/dist"> <script type="module" data-shoelace="/path/to/shoelace/dist">
import '@shoelace-style/shoelace/dist/components/button/button.js'; import '@shoelace-style/shoelace/dist/components/button/button.js';

8
docs/getting-started/overview.md
Wyświetl plik

@ -14,6 +14,7 @@
- Open source 😸 - Open source 😸
Designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska). Designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska).
</div> </div>
<div class="splash-end"> <div class="splash-end">
<img class="splash-image" src="/assets/images/undraw-content-team.svg" alt="Cartoon of people assembling components while standing on a giant laptop."> <img class="splash-image" src="/assets/images/undraw-content-team.svg" alt="Cartoon of people assembling components while standing on a giant laptop.">
@ -32,7 +33,7 @@ Designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska).
Add the following code to your page. Add the following code to your page.
```html ```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/light.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/light.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js"></script> <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js"></script>
``` ```
@ -44,7 +45,6 @@ Now you have access to all of Shoelace's components! Try adding a button:
?> This will load all of Shoelace's components, but you should probably only load the ones you're actually using. To learn how, or for other ways to install Shoelace, refer to the [installation instructions](getting-started/installation). ?> This will load all of Shoelace's components, but you should probably only load the ones you're actually using. To learn how, or for other ways to install Shoelace, refer to the [installation instructions](getting-started/installation).
## New to Web Components? ## New to Web Components?
**TL;DR** – we finally have a way to create [our own HTML elements](https://html.spec.whatwg.org/multipage/custom-elements.html) and use them in any framework we want! **TL;DR** – we finally have a way to create [our own HTML elements](https://html.spec.whatwg.org/multipage/custom-elements.html) and use them in any framework we want!
@ -73,11 +73,11 @@ With Shoelace, you can:
- Incrementally adopt components as needed (no need to ditch your framework) - Incrementally adopt components as needed (no need to ditch your framework)
- Upgrade or switch frameworks without rebuilding foundational components - Upgrade or switch frameworks without rebuilding foundational components
If your organization is looking to build a design system, [Shoelace will save you thousands of dollars](https://medium.com/eightshapes-llc/and-you-thought-buttons-were-easy-26eb5b5c1871).* All the foundational components you need are right here, ready to be customized for your brand. And since it's built on web standards, browsers will continue to support it for many years to come. If your organization is looking to build a design system, [Shoelace will save you thousands of dollars](https://medium.com/eightshapes-llc/and-you-thought-buttons-were-easy-26eb5b5c1871).\* All the foundational components you need are right here, ready to be customized for your brand. And since it's built on web standards, browsers will continue to support it for many years to come.
Whether you use Shoelace as a starting point for your organization's design system or for a fun personal project, there's no limit to what you can do with it. Whether you use Shoelace as a starting point for your organization's design system or for a fun personal project, there's no limit to what you can do with it.
<small>*Please consider giving back some of what you save by [supporting this project with a sponsorship](https://github.com/sponsors/claviska).</small> <small>\*Please consider giving back some of what you save by [supporting this project with a sponsorship](https://github.com/sponsors/claviska).</small>
## Browser Support ## Browser Support

16
docs/getting-started/themes.md
Wyświetl plik

@ -8,7 +8,7 @@ A theme is nothing more than a stylesheet that uses the Shoelace API to define d
## Theme Basics ## Theme Basics
All themes are scoped to classes using the `sl-theme-{name}` convention, where `{name}` is a lowercase, hyphen-delimited value representing the name of the theme. The included light and dark themes use `sl-theme-light` and `sl-theme-dark`, respectively. A custom theme called "Purple Power", for example, would use a class called `sl-theme-purple-power` All themes are scoped to classes using the `sl-theme-{name}` convention, where `{name}` is a lowercase, hyphen-delimited value representing the name of the theme. The included light and dark themes use `sl-theme-light` and `sl-theme-dark`, respectively. A custom theme called "Purple Power", for example, would use a class called `sl-theme-purple-power`
All selectors must be scoped to the theme's class to ensure interoperability with other themes. You should also scope them to `:host` so they can be imported and applied to custom element shadow roots. All selectors must be scoped to the theme's class to ensure interoperability with other themes. You should also scope them to `:host` so they can be imported and applied to custom element shadow roots.
@ -26,7 +26,7 @@ To activate a theme, import it and apply the theme's class to the `<html>` eleme
```html ```html
<html class="sl-theme-dark"> <html class="sl-theme-dark">
<head> <head>
<link rel="stylesheet" href="path/to/shoelace/dist/themes/dark.css"> <link rel="stylesheet" href="path/to/shoelace/dist/themes/dark.css" />
</head> </head>
<body> <body>
@ -44,15 +44,15 @@ You can activate themes on various containers throughout the page. This example
```html ```html
<html> <html>
<head> <head>
<link rel="stylesheet" href="path/to/shoelace/dist/themes/light.css"> <link rel="stylesheet" href="path/to/shoelace/dist/themes/light.css" />
<link rel="stylesheet" href="path/to/shoelace/dist/themes/dark.css"> <link rel="stylesheet" href="path/to/shoelace/dist/themes/dark.css" />
</head> </head>
<body> <body>
<nav class="sl-theme-dark"> <nav class="sl-theme-dark">
<!-- dark-themed sidebar --> <!-- dark-themed sidebar -->
</nav> </nav>
<!-- light-themed content --> <!-- light-themed content -->
</body> </body>
</html> </html>
@ -71,8 +71,8 @@ The easiest way to customize Shoelace is to override one of the built-in themes.
If you're customizing the light theme, you should scope your styles to the following selectors. If you're customizing the light theme, you should scope your styles to the following selectors.
```css ```css
:root, :root,
:host, :host,
.sl-theme-light { .sl-theme-light {
/* your custom styles here */ /* your custom styles here */
} }
@ -117,7 +117,7 @@ The dark theme works by taking the light theme's [color tokens](/tokens/color) a
To install the dark theme, add the following to the `<head>` section of your page. To install the dark theme, add the following to the `<head>` section of your page.
```html ```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/dark.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/dark.css" />
``` ```
To activate the theme, apply the `sl-theme-dark` class to the `<html>` element. To activate the theme, apply the `sl-theme-dark` class to the `<html>` element.

4
docs/getting-started/usage.md
Wyświetl plik

@ -2,7 +2,7 @@
Shoelace components are just regular HTML elements, or [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) to be precise. You can use them like any other element. Each component has detailed documentation that describes its full API, including properties, events, methods, and more. Shoelace components are just regular HTML elements, or [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) to be precise. You can use them like any other element. Each component has detailed documentation that describes its full API, including properties, events, methods, and more.
If you're new to custom elements, often referred to as "web components," this section will familiarize you with how to use them. If you're new to custom elements, often referred to as "web components," this section will familiarize you with how to use them.
## Properties ## Properties
@ -132,7 +132,7 @@ A clever way to use this method is to hide the `<body>` with `opacity: 0` and ad
body.ready { body.ready {
opacity: 1; opacity: 1;
transition: .25s opacity; transition: 0.25s opacity;
} }
</style> </style>

2
docs/resources/accessibility.md
Wyświetl plik

@ -15,4 +15,4 @@ I’m fully aware that I may not get it right every time for every user, so I in
This is the path forward. Together, we will continue to make Shoelace accessible to as many users as possible. This is the path forward. Together, we will continue to make Shoelace accessible to as many users as possible.
— Cory LaViska<br> — Cory LaViska<br>
_Creator of Shoelace_ _Creator of Shoelace_

5
docs/resources/changelog.md
Wyświetl plik

@ -9,6 +9,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
## Next ## Next
- Added `form`, `formaction`, `formmethod`, `formnovalidate`, and `formtarget` attributes to `<sl-button>` [#699](https://github.com/shoelace-style/shoelace/issues/699) - Added `form`, `formaction`, `formmethod`, `formnovalidate`, and `formtarget` attributes to `<sl-button>` [#699](https://github.com/shoelace-style/shoelace/issues/699)
- Added Prettier and ESLint to markdown files
- Fixed a bug that prevented forms from submitting when pressing <kbd>Enter</kbd> inside of an `<sl-input>` [#700](https://github.com/shoelace-style/shoelace/issues/700) - Fixed a bug that prevented forms from submitting when pressing <kbd>Enter</kbd> inside of an `<sl-input>` [#700](https://github.com/shoelace-style/shoelace/issues/700)
- Improved `autofocus` behavior in Safari for `<sl-dialog>` and `<sl-drawer>` [#693](https://github.com/shoelace-style/shoelace/issues/693) - Improved `autofocus` behavior in Safari for `<sl-dialog>` and `<sl-drawer>` [#693](https://github.com/shoelace-style/shoelace/issues/693)
- Removed feature detection for `focus({ preventScroll })` since it no longer works in Safari - Removed feature detection for `focus({ preventScroll })` since it no longer works in Safari
@ -16,7 +17,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
## 2.0.0-beta.70 ## 2.0.0-beta.70
- Added `tag-base`, `tag-content`, and `tag-remove-button` parts to `<sl-select>` [#682](https://github.com/shoelace-style/shoelace/discussions/682) - Added `tag-base`, `tag-content`, and `tag-remove-button` parts to `<sl-select>` [#682](https://github.com/shoelace-style/shoelace/discussions/682)
- Added support for focusing elements with `autofocus` when `<sl-dialog>` and `<sl-drawer>` open [#688](https://github.com/shoelace-style/shoelace/issues/688) - Added support for focusing elements with `autofocus` when `<sl-dialog>` and `<sl-drawer>` open [#688](https://github.com/shoelace-style/shoelace/issues/688)
- Added the `placement` attribute to `<sl-select>` [#687](https://github.com/shoelace-style/shoelace/pull/687) - Added the `placement` attribute to `<sl-select>` [#687](https://github.com/shoelace-style/shoelace/pull/687)
- Added Danish translation [#690](https://github.com/shoelace-style/shoelace/pull/690) - Added Danish translation [#690](https://github.com/shoelace-style/shoelace/pull/690)
- Fixed a bug that allowed `<sl-dropdown>` to go into an incorrect state when activating the trigger while disabled [#684](https://github.com/shoelace-style/shoelace/pull/684) - Fixed a bug that allowed `<sl-dropdown>` to go into an incorrect state when activating the trigger while disabled [#684](https://github.com/shoelace-style/shoelace/pull/684)
@ -63,7 +64,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
- Refactored `<sl-format-byte>` to use `Intl.NumberFormat` so it supports localization - Refactored `<sl-format-byte>` to use `Intl.NumberFormat` so it supports localization
- Refactored themes so utility styles are no longer injected as `<style>` elements to support stricter CSP rules [#571](https://github.com/shoelace-style/shoelace/issues/571) - Refactored themes so utility styles are no longer injected as `<style>` elements to support stricter CSP rules [#571](https://github.com/shoelace-style/shoelace/issues/571)
- Restored the nicer animation on `<sl-spinner>` and verified it works in Safari - Restored the nicer animation on `<sl-spinner>` and verified it works in Safari
- Updated Feather icon example to use Lucide [#657](https://github.com/shoelace-style/shoelace/issues/657) - Updated Feather icon example to use Lucide [#657](https://github.com/shoelace-style/shoelace/issues/657)
- Updated minimum Node version to 14.17 - Updated minimum Node version to 14.17
- Updated Lit to 2.1.2 - Updated Lit to 2.1.2
- Updated to Bootstrap Icons to 1.8.1 - Updated to Bootstrap Icons to 1.8.1

1
docs/tokens/color.md
Wyświetl plik

@ -109,7 +109,6 @@ Theme tokens give you a semantic way to reference colors in your app. The primar
?> Looking for an easy way to customize your theme? [Try the color token generator!](https://codepen.io/claviska/full/QWveRgL) ?> Looking for an easy way to customize your theme? [Try the color token generator!](https://codepen.io/claviska/full/QWveRgL)
## Primitives ## Primitives
Additional palettes are provided in the form of color primitives. Use these when you need arbitrary colors that don't have semantic meaning. Color primitives are derived from the fantastic [Tailwind color palette](https://tailwindcss.com/docs/customizing-colors). Additional palettes are provided in the form of color primitives. Use these when you need arbitrary colors that don't have semantic meaning. Color primitives are derived from the fantastic [Tailwind color palette](https://tailwindcss.com/docs/customizing-colors).

24
docs/tokens/spacing.md
Wyświetl plik

@ -2,15 +2,15 @@
Spacing tokens are used to provide consistent spacing between components and content throughout your app. Spacing tokens are used to provide consistent spacing between components and content throughout your app.
| Token | Value | Example | | Token | Value | Example |
| ------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------- | | ----------------------- | -------------- | --------------------------------------------------------------------------------------------------------------- |
| `--sl-spacing-3x-small` | 0.125rem (2px) | <div class="spacing-demo" style="width: var(--sl-spacing-3x-small); height: var(--sl-spacing-3x-small);"></div> | | `--sl-spacing-3x-small` | 0.125rem (2px) | <div class="spacing-demo" style="width: var(--sl-spacing-3x-small); height: var(--sl-spacing-3x-small);"></div> |
| `--sl-spacing-2x-small` | 0.25rem (4px) | <div class="spacing-demo" style="width: var(--sl-spacing-2x-small); height: var(--sl-spacing-2x-small);"></div> | | `--sl-spacing-2x-small` | 0.25rem (4px) | <div class="spacing-demo" style="width: var(--sl-spacing-2x-small); height: var(--sl-spacing-2x-small);"></div> |
| `--sl-spacing-x-small` | 0.5rem (8px) | <div class="spacing-demo" style="width: var(--sl-spacing-x-small); height: var(--sl-spacing-x-small);"></div> | | `--sl-spacing-x-small` | 0.5rem (8px) | <div class="spacing-demo" style="width: var(--sl-spacing-x-small); height: var(--sl-spacing-x-small);"></div> |
| `--sl-spacing-small` | 0.75rem (12px) | <div class="spacing-demo" style="width: var(--sl-spacing-small); height: var(--sl-spacing-small);"></div> | | `--sl-spacing-small` | 0.75rem (12px) | <div class="spacing-demo" style="width: var(--sl-spacing-small); height: var(--sl-spacing-small);"></div> |
| `--sl-spacing-medium` | 1rem (16px) | <div class="spacing-demo" style="width: var(--sl-spacing-medium); height: var(--sl-spacing-medium);"></div> | | `--sl-spacing-medium` | 1rem (16px) | <div class="spacing-demo" style="width: var(--sl-spacing-medium); height: var(--sl-spacing-medium);"></div> |
| `--sl-spacing-large` | 1.25rem (20px) | <div class="spacing-demo" style="width: var(--sl-spacing-large); height: var(--sl-spacing-large);"></div> | | `--sl-spacing-large` | 1.25rem (20px) | <div class="spacing-demo" style="width: var(--sl-spacing-large); height: var(--sl-spacing-large);"></div> |
| `--sl-spacing-x-large` | 1.75rem (28px) | <div class="spacing-demo" style="width: var(--sl-spacing-x-large); height: var(--sl-spacing-x-large);"></div> | | `--sl-spacing-x-large` | 1.75rem (28px) | <div class="spacing-demo" style="width: var(--sl-spacing-x-large); height: var(--sl-spacing-x-large);"></div> |
| `--sl-spacing-2x-large` | 2.25rem (36px) | <div class="spacing-demo" style="width: var(--sl-spacing-2x-large); height: var(--sl-spacing-2x-large);"></div> | | `--sl-spacing-2x-large` | 2.25rem (36px) | <div class="spacing-demo" style="width: var(--sl-spacing-2x-large); height: var(--sl-spacing-2x-large);"></div> |
| `--sl-spacing-3x-large` | 3rem (48px) | <div class="spacing-demo" style="width: var(--sl-spacing-3x-large); height: var(--sl-spacing-3x-large);"></div> | | `--sl-spacing-3x-large` | 3rem (48px) | <div class="spacing-demo" style="width: var(--sl-spacing-3x-large); height: var(--sl-spacing-3x-large);"></div> |
| `--sl-spacing-4x-large` | 4.5rem (72px) | <div class="spacing-demo" style="width: var(--sl-spacing-4x-large); height: var(--sl-spacing-4x-large);"></div> | | `--sl-spacing-4x-large` | 4.5rem (72px) | <div class="spacing-demo" style="width: var(--sl-spacing-4x-large); height: var(--sl-spacing-4x-large);"></div> |

50
docs/tokens/typography.md
Wyświetl plik

@ -16,17 +16,17 @@ The default font stack is designed to be simple and highly available on as many
Font sizes use `rem` units so they scale with the base font size. The pixel values displayed are based on a 16px font size. Font sizes use `rem` units so they scale with the base font size. The pixel values displayed are based on a 16px font size.
| Token | Value | Example | | Token | Value | Example |
| --------------------------- | --------------- | ----------------------------------------------------------------- | | ------------------------- | --------------- | --------------------------------------------------------------- |
| `--sl-font-size-2x-small` | 0.625rem (10px) | <span style="font-size: var(--sl-font-size-2x-small)">Aa</span> | | `--sl-font-size-2x-small` | 0.625rem (10px) | <span style="font-size: var(--sl-font-size-2x-small)">Aa</span> |
| `--sl-font-size-x-small` | 0.75rem (12px) | <span style="font-size: var(--sl-font-size-x-small)">Aa</span> | | `--sl-font-size-x-small` | 0.75rem (12px) | <span style="font-size: var(--sl-font-size-x-small)">Aa</span> |
| `--sl-font-size-small` | 0.875rem (14px) | <span style="font-size: var(--sl-font-size-small)">Aa</span> | | `--sl-font-size-small` | 0.875rem (14px) | <span style="font-size: var(--sl-font-size-small)">Aa</span> |
| `--sl-font-size-medium` | 1rem (16px) | <span style="font-size: var(--sl-font-size-medium)">Aa</span> | | `--sl-font-size-medium` | 1rem (16px) | <span style="font-size: var(--sl-font-size-medium)">Aa</span> |
| `--sl-font-size-large` | 1.25rem (20px) | <span style="font-size: var(--sl-font-size-large)">Aa</span> | | `--sl-font-size-large` | 1.25rem (20px) | <span style="font-size: var(--sl-font-size-large)">Aa</span> |
| `--sl-font-size-x-large` | 1.5rem (24px) | <span style="font-size: var(--sl-font-size-x-large)">Aa</span> | | `--sl-font-size-x-large` | 1.5rem (24px) | <span style="font-size: var(--sl-font-size-x-large)">Aa</span> |
| `--sl-font-size-2x-large` | 2.25rem (36px) | <span style="font-size: var(--sl-font-size-2x-large)">Aa</span> | | `--sl-font-size-2x-large` | 2.25rem (36px) | <span style="font-size: var(--sl-font-size-2x-large)">Aa</span> |
| `--sl-font-size-3x-large` | 3rem (48px) | <span style="font-size: var(--sl-font-size-3x-large)">Aa</span> | | `--sl-font-size-3x-large` | 3rem (48px) | <span style="font-size: var(--sl-font-size-3x-large)">Aa</span> |
| `--sl-font-size-4x-large` | 4.5rem (72px) | <span style="font-size: var(--sl-font-size-4x-large)">Aa</span> | | `--sl-font-size-4x-large` | 4.5rem (72px) | <span style="font-size: var(--sl-font-size-4x-large)">Aa</span> |
## Font Weight ## Font Weight
@ -39,20 +39,20 @@ Font sizes use `rem` units so they scale with the base font size. The pixel valu
## Letter Spacing ## Letter Spacing
| Token | Value | Example | | Token | Value | Example |
| ---------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------- | | ---------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------- |
| `--sl-letter-spacing-denser` | ? | <span style="letter-spacing: var(--sl-letter-spacing-denser);">The quick brown fox jumped over the lazy dog.</span> | | `--sl-letter-spacing-denser` | ? | <span style="letter-spacing: var(--sl-letter-spacing-denser);">The quick brown fox jumped over the lazy dog.</span> |
| `--sl-letter-spacing-dense` | -0.015em | <span style="letter-spacing: var(--sl-letter-spacing-dense);">The quick brown fox jumped over the lazy dog.</span> | | `--sl-letter-spacing-dense` | -0.015em | <span style="letter-spacing: var(--sl-letter-spacing-dense);">The quick brown fox jumped over the lazy dog.</span> |
| `--sl-letter-spacing-normal` | normal | <span style="letter-spacing: var(--sl-letter-spacing-normal);">The quick brown fox jumped over the lazy dog.</span> | | `--sl-letter-spacing-normal` | normal | <span style="letter-spacing: var(--sl-letter-spacing-normal);">The quick brown fox jumped over the lazy dog.</span> |
| `--sl-letter-spacing-loose` | 0.075em | <span style="letter-spacing: var(--sl-letter-spacing-loose);">The quick brown fox jumped over the lazy dog.</span> | | `--sl-letter-spacing-loose` | 0.075em | <span style="letter-spacing: var(--sl-letter-spacing-loose);">The quick brown fox jumped over the lazy dog.</span> |
| `--sl-letter-spacing-looser` | ? | <span style="letter-spacing: var(--sl-letter-spacing-looser);">The quick brown fox jumped over the lazy dog.</span> | | `--sl-letter-spacing-looser` | ? | <span style="letter-spacing: var(--sl-letter-spacing-looser);">The quick brown fox jumped over the lazy dog.</span> |
## Line Height ## Line Height
| Token | Value | Example | | Token | Value | Example |
| ------------------------- | ----- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ------------------------- | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--sl-line-height-denser` | ? | <div style="line-height: var(--sl-line-height-denser);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> | | `--sl-line-height-denser` | ? | <div style="line-height: var(--sl-line-height-denser);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> |
| `--sl-line-height-dense` | 1.4 | <div style="line-height: var(--sl-line-height-dense);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> | | `--sl-line-height-dense` | 1.4 | <div style="line-height: var(--sl-line-height-dense);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> |
| `--sl-line-height-normal` | 1.8 | <div style="line-height: var(--sl-line-height-normal);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> | | `--sl-line-height-normal` | 1.8 | <div style="line-height: var(--sl-line-height-normal);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> |
| `--sl-line-height-loose` | 2.2 | <div style="line-height: var(--sl-line-height-loose);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> | | `--sl-line-height-loose` | 2.2 | <div style="line-height: var(--sl-line-height-loose);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> |
| `--sl-line-height-looser` | ? | <div style="line-height: var(--sl-line-height-looser);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> | | `--sl-line-height-looser` | ? | <div style="line-height: var(--sl-line-height-looser);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> |

14
docs/tokens/z-index.md
Wyświetl plik

@ -2,10 +2,10 @@
Z-indexes are used to stack components in a logical manner. Z-indexes are used to stack components in a logical manner.
| Token | Value | | Token | Value |
| ---------------------------- | ----- | | -------------------------- | ----- |
| `--sl-z-index-drawer` | 700 | | `--sl-z-index-drawer` | 700 |
| `--sl-z-index-dialog` | 800 | | `--sl-z-index-dialog` | 800 |
| `--sl-z-index-dropdown` | 900 | | `--sl-z-index-dropdown` | 900 |
| `--sl-z-index-alert-group` | 950 | | `--sl-z-index-alert-group` | 950 |
| `--sl-z-index-tooltip` | 1000 | | `--sl-z-index-tooltip` | 1000 |

23
docs/tutorials/integrating-with-rails.md
Wyświetl plik

@ -53,11 +53,11 @@ setBasePath(rootUrl + '/packs/js/')
Next we need to add Shoelace's assets to the final build output. To do this, modify `config/webpack/environment.js` to look like this. Next we need to add Shoelace's assets to the final build output. To do this, modify `config/webpack/environment.js` to look like this.
```js ```js
const { environment } = require('@rails/webpacker') const { environment } = require('@rails/webpacker');
// Shoelace config // Shoelace config
const path = require('path') const path = require('path');
const CopyPlugin = require('copy-webpack-plugin') const CopyPlugin = require('copy-webpack-plugin');
// Add shoelace assets to webpack's build process // Add shoelace assets to webpack's build process
environment.plugins.append( environment.plugins.append(
@ -65,17 +65,14 @@ environment.plugins.append(
new CopyPlugin({ new CopyPlugin({
patterns: [ patterns: [
{ {
from: path.resolve( from: path.resolve(__dirname, '../../node_modules/@shoelace-style/shoelace/dist/assets'),
__dirname,
'../../node_modules/@shoelace-style/shoelace/dist/assets'
),
to: path.resolve(__dirname, '../../public/packs/js/assets') to: path.resolve(__dirname, '../../public/packs/js/assets')
} }
] ]
}) })
) );
module.exports = environment module.exports = environment;
``` ```
### Adding Pack Tags ### Adding Pack Tags
@ -88,10 +85,12 @@ The final step is to add the corresponding `pack_tags` to the page. You should h
<head> <head>
<!-- ... --> <!-- ... -->
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 'application', 'data-turbolinks-track': 'reload' %>
</head> </head>
<body><%= yield %></body> <body>
<%= yield %>
</body>
</html> </html>
``` ```

305
package-lock.json wygenerowano
Wyświetl plik

@ -43,6 +43,7 @@
"eslint-plugin-import": "^2.25.4", "eslint-plugin-import": "^2.25.4",
"eslint-plugin-lit": "^1.6.1", "eslint-plugin-lit": "^1.6.1",
"eslint-plugin-lit-a11y": "^2.2.0", "eslint-plugin-lit-a11y": "^2.2.0",
"eslint-plugin-markdown": "^2.2.1",
"eslint-plugin-wc": "^1.3.2", "eslint-plugin-wc": "^1.3.2",
"front-matter": "^4.0.2", "front-matter": "^4.0.2",
"get-port": "^6.1.0", "get-port": "^6.1.0",
@ -1306,6 +1307,15 @@
"@types/node": "*" "@types/node": "*"
} }
}, },
"node_modules/@types/mdast": {
"version": "3.0.10",
"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz",
"integrity": "sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==",
"dev": true,
"dependencies": {
"@types/unist": "*"
}
},
"node_modules/@types/mime": { "node_modules/@types/mime": {
"version": "1.3.2", "version": "1.3.2",
"resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@ -1429,6 +1439,12 @@
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz", "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
"integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==" "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
}, },
"node_modules/@types/unist": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
"integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==",
"dev": true
},
"node_modules/@types/ws": { "node_modules/@types/ws": {
"version": "7.4.7", "version": "7.4.7",
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-7.4.7.tgz", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-7.4.7.tgz",
@ -3043,6 +3059,36 @@
"tslib": "^2.0.3" "tslib": "^2.0.3"
} }
}, },
"node_modules/character-entities": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
"integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==",
"dev": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/character-entities-legacy": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
"integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==",
"dev": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/character-reference-invalid": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
"integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==",
"dev": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/chardet": { "node_modules/chardet": {
"version": "0.7.0", "version": "0.7.0",
"resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz", "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
@ -5561,6 +5607,21 @@
"integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==", "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
"dev": true "dev": true
}, },
"node_modules/eslint-plugin-markdown": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/eslint-plugin-markdown/-/eslint-plugin-markdown-2.2.1.tgz",
"integrity": "sha512-FgWp4iyYvTFxPwfbxofTvXxgzPsDuSKHQy2S+a8Ve6savbujey+lgrFFbXQA0HPygISpRYWYBjooPzhYSF81iA==",
"dev": true,
"dependencies": {
"mdast-util-from-markdown": "^0.8.5"
},
"engines": {
"node": "^8.10.0 || ^10.12.0 || >= 12.0.0"
},
"peerDependencies": {
"eslint": ">=6.0.0"
}
},
"node_modules/eslint-plugin-wc": { "node_modules/eslint-plugin-wc": {
"version": "1.3.2", "version": "1.3.2",
"resolved": "https://registry.npmjs.org/eslint-plugin-wc/-/eslint-plugin-wc-1.3.2.tgz", "resolved": "https://registry.npmjs.org/eslint-plugin-wc/-/eslint-plugin-wc-1.3.2.tgz",
@ -7453,6 +7514,30 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/is-alphabetical": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
"integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==",
"dev": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/is-alphanumerical": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
"integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
"dev": true,
"dependencies": {
"is-alphabetical": "^1.0.0",
"is-decimal": "^1.0.0"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/is-arrayish": { "node_modules/is-arrayish": {
"version": "0.2.1", "version": "0.2.1",
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@ -7550,6 +7635,16 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/is-decimal": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
"integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==",
"dev": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/is-docker": { "node_modules/is-docker": {
"version": "2.2.1", "version": "2.2.1",
"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz", "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
@ -7613,6 +7708,16 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/is-hexadecimal": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
"integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==",
"dev": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/is-installed-globally": { "node_modules/is-installed-globally": {
"version": "0.4.0", "version": "0.4.0",
"resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz", "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz",
@ -9131,6 +9236,33 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/mdast-util-from-markdown": {
"version": "0.8.5",
"resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz",
"integrity": "sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==",
"dev": true,
"dependencies": {
"@types/mdast": "^3.0.0",
"mdast-util-to-string": "^2.0.0",
"micromark": "~2.11.0",
"parse-entities": "^2.0.0",
"unist-util-stringify-position": "^2.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/mdast-util-to-string": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz",
"integrity": "sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==",
"dev": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/media-typer": { "node_modules/media-typer": {
"version": "0.3.0", "version": "0.3.0",
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@ -9155,6 +9287,26 @@
"node": ">= 8" "node": ">= 8"
} }
}, },
"node_modules/micromark": {
"version": "2.11.4",
"resolved": "https://registry.npmjs.org/micromark/-/micromark-2.11.4.tgz",
"integrity": "sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==",
"dev": true,
"funding": [
{
"type": "GitHub Sponsors",
"url": "https://github.com/sponsors/unifiedjs"
},
{
"type": "OpenCollective",
"url": "https://opencollective.com/unified"
}
],
"dependencies": {
"debug": "^4.0.0",
"parse-entities": "^2.0.0"
}
},
"node_modules/micromatch": { "node_modules/micromatch": {
"version": "4.0.4", "version": "4.0.4",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
@ -10519,6 +10671,24 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/parse-entities": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
"integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
"dev": true,
"dependencies": {
"character-entities": "^1.0.0",
"character-entities-legacy": "^1.0.0",
"character-reference-invalid": "^1.0.0",
"is-alphanumerical": "^1.0.0",
"is-decimal": "^1.0.0",
"is-hexadecimal": "^1.0.0"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/parse-filepath": { "node_modules/parse-filepath": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/parse-filepath/-/parse-filepath-1.0.2.tgz", "resolved": "https://registry.npmjs.org/parse-filepath/-/parse-filepath-1.0.2.tgz",
@ -13399,6 +13569,19 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/unist-util-stringify-position": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
"integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
"dev": true,
"dependencies": {
"@types/unist": "^2.0.2"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/universalify": { "node_modules/universalify": {
"version": "0.1.2", "version": "0.1.2",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
@ -15236,6 +15419,15 @@
"@types/node": "*" "@types/node": "*"
} }
}, },
"@types/mdast": {
"version": "3.0.10",
"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz",
"integrity": "sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==",
"dev": true,
"requires": {
"@types/unist": "*"
}
},
"@types/mime": { "@types/mime": {
"version": "1.3.2", "version": "1.3.2",
"resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@ -15359,6 +15551,12 @@
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz", "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
"integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==" "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
}, },
"@types/unist": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
"integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==",
"dev": true
},
"@types/ws": { "@types/ws": {
"version": "7.4.7", "version": "7.4.7",
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-7.4.7.tgz", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-7.4.7.tgz",
@ -16588,6 +16786,24 @@
"tslib": "^2.0.3" "tslib": "^2.0.3"
} }
}, },
"character-entities": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
"integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==",
"dev": true
},
"character-entities-legacy": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
"integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==",
"dev": true
},
"character-reference-invalid": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
"integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==",
"dev": true
},
"chardet": { "chardet": {
"version": "0.7.0", "version": "0.7.0",
"resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz", "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
@ -18517,6 +18733,15 @@
} }
} }
}, },
"eslint-plugin-markdown": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/eslint-plugin-markdown/-/eslint-plugin-markdown-2.2.1.tgz",
"integrity": "sha512-FgWp4iyYvTFxPwfbxofTvXxgzPsDuSKHQy2S+a8Ve6savbujey+lgrFFbXQA0HPygISpRYWYBjooPzhYSF81iA==",
"dev": true,
"requires": {
"mdast-util-from-markdown": "^0.8.5"
}
},
"eslint-plugin-wc": { "eslint-plugin-wc": {
"version": "1.3.2", "version": "1.3.2",
"resolved": "https://registry.npmjs.org/eslint-plugin-wc/-/eslint-plugin-wc-1.3.2.tgz", "resolved": "https://registry.npmjs.org/eslint-plugin-wc/-/eslint-plugin-wc-1.3.2.tgz",
@ -19896,6 +20121,22 @@
"is-windows": "^1.0.1" "is-windows": "^1.0.1"
} }
}, },
"is-alphabetical": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
"integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==",
"dev": true
},
"is-alphanumerical": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
"integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
"dev": true,
"requires": {
"is-alphabetical": "^1.0.0",
"is-decimal": "^1.0.0"
}
},
"is-arrayish": { "is-arrayish": {
"version": "0.2.1", "version": "0.2.1",
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@ -19963,6 +20204,12 @@
"has-tostringtag": "^1.0.0" "has-tostringtag": "^1.0.0"
} }
}, },
"is-decimal": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
"integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==",
"dev": true
},
"is-docker": { "is-docker": {
"version": "2.2.1", "version": "2.2.1",
"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz", "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
@ -19999,6 +20246,12 @@
"is-extglob": "^2.1.1" "is-extglob": "^2.1.1"
} }
}, },
"is-hexadecimal": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
"integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==",
"dev": true
},
"is-installed-globally": { "is-installed-globally": {
"version": "0.4.0", "version": "0.4.0",
"resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz", "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz",
@ -21178,6 +21431,25 @@
"minimatch": "^3.0.0" "minimatch": "^3.0.0"
} }
}, },
"mdast-util-from-markdown": {
"version": "0.8.5",
"resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz",
"integrity": "sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==",
"dev": true,
"requires": {
"@types/mdast": "^3.0.0",
"mdast-util-to-string": "^2.0.0",
"micromark": "~2.11.0",
"parse-entities": "^2.0.0",
"unist-util-stringify-position": "^2.0.0"
}
},
"mdast-util-to-string": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz",
"integrity": "sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==",
"dev": true
},
"media-typer": { "media-typer": {
"version": "0.3.0", "version": "0.3.0",
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@ -21196,6 +21468,16 @@
"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
"dev": true "dev": true
}, },
"micromark": {
"version": "2.11.4",
"resolved": "https://registry.npmjs.org/micromark/-/micromark-2.11.4.tgz",
"integrity": "sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==",
"dev": true,
"requires": {
"debug": "^4.0.0",
"parse-entities": "^2.0.0"
}
},
"micromatch": { "micromatch": {
"version": "4.0.4", "version": "4.0.4",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
@ -22223,6 +22505,20 @@
"callsites": "^3.1.0" "callsites": "^3.1.0"
} }
}, },
"parse-entities": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
"integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
"dev": true,
"requires": {
"character-entities": "^1.0.0",
"character-entities-legacy": "^1.0.0",
"character-reference-invalid": "^1.0.0",
"is-alphanumerical": "^1.0.0",
"is-decimal": "^1.0.0",
"is-hexadecimal": "^1.0.0"
}
},
"parse-filepath": { "parse-filepath": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/parse-filepath/-/parse-filepath-1.0.2.tgz", "resolved": "https://registry.npmjs.org/parse-filepath/-/parse-filepath-1.0.2.tgz",
@ -24465,6 +24761,15 @@
"crypto-random-string": "^2.0.0" "crypto-random-string": "^2.0.0"
} }
}, },
"unist-util-stringify-position": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
"integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
"dev": true,
"requires": {
"@types/unist": "^2.0.2"
}
},
"universalify": { "universalify": {
"version": "0.1.2", "version": "0.1.2",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",

9
package.json
Wyświetl plik

@ -38,7 +38,7 @@
"prettier": "prettier --write --loglevel warn .", "prettier": "prettier --write --loglevel warn .",
"prettier:check": "prettier --check --loglevel warn .", "prettier:check": "prettier --check --loglevel warn .",
"lint": "eslint src --max-warnings 0", "lint": "eslint src --max-warnings 0",
"lint:fix": "npm run lint -- --fix", "lint:fix": "eslint src --max-warnings 0 --fix",
"ts-check": "tsc --noEmit --project ./tsconfig.json", "ts-check": "tsc --noEmit --project ./tsconfig.json",
"create": "plop --plopfile scripts/plop/plopfile.js", "create": "plop --plopfile scripts/plop/plopfile.js",
"test": "web-test-runner", "test": "web-test-runner",
@ -86,6 +86,7 @@
"eslint-plugin-import": "^2.25.4", "eslint-plugin-import": "^2.25.4",
"eslint-plugin-lit": "^1.6.1", "eslint-plugin-lit": "^1.6.1",
"eslint-plugin-lit-a11y": "^2.2.0", "eslint-plugin-lit-a11y": "^2.2.0",
"eslint-plugin-markdown": "^2.2.1",
"eslint-plugin-wc": "^1.3.2", "eslint-plugin-wc": "^1.3.2",
"front-matter": "^4.0.2", "front-matter": "^4.0.2",
"get-port": "^6.1.0", "get-port": "^6.1.0",
@ -107,5 +108,11 @@
"ttypescript": "^1.5.13", "ttypescript": "^1.5.13",
"typescript": "^4.5.5", "typescript": "^4.5.5",
"typescript-transform-paths": "^3.3.1" "typescript-transform-paths": "^3.3.1"
},
"lint-staged": {
"*.{ts,js}": [
"eslint --max-warnings 0 --cache --fix",
"prettier --write"
]
} }
} }