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
*.md
.cache
.github
cspell.json
dist
docs/*.md
docs/search.json
src/components/icon/icons
src/react/index.ts

7
docs/_sidebar.md
Wyświetl plik

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

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

@ -33,39 +33,39 @@ Set the `variant` attribute to change the alert's variant.
```html preview
<sl-alert variant="primary" open>
<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.
</sl-alert>
<br>
<br />
<sl-alert variant="success" open>
<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.
</sl-alert>
<br>
<br />
<sl-alert variant="neutral" open>
<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.
</sl-alert>
<br>
<br />
<sl-alert variant="warning" open>
<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.
</sl-alert>
<br>
<br />
<sl-alert variant="danger" open>
<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!
</sl-alert>
```
@ -77,7 +77,8 @@ const App = () => (
<>
<SlAlert variant="primary" open>
<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.
</SlAlert>
@ -85,7 +86,8 @@ const App = () => (
<SlAlert variant="success" open>
<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.
</SlAlert>
@ -93,7 +95,8 @@ const App = () => (
<SlAlert variant="neutral" open>
<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.
</SlAlert>
@ -101,7 +104,8 @@ const App = () => (
<SlAlert variant="warning" open>
<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.
</SlAlert>
@ -109,7 +113,8 @@ const App = () => (
<SlAlert variant="danger" open>
<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!
</SlAlert>
</>
@ -129,7 +134,7 @@ Add the `closable` attribute to show a close button that will hide the alert.
<script>
const alert = document.querySelector('.alert-closable');
alert.addEventListener('sl-after-hide', () => {
setTimeout(() => alert.open = true, 2000);
setTimeout(() => (alert.open = true), 2000);
});
</script>
```
@ -147,11 +152,7 @@ const App = () => {
}
return (
<SlAlert
open={open}
closable
onSlAfterHide={handleHide}
>
<SlAlert open={open} closable onSlAfterHide={handleHide}>
<SlIcon slot="icon" name="info-circle" />
You can close this alert any time!
</SlAlert>
@ -164,9 +165,7 @@ const App = () => {
Icons are optional. Simply omit the `icon` slot if you don't want them.
```html preview
<sl-alert variant="primary" open>
Nothing fancy here, just a simple alert.
</sl-alert>
<sl-alert variant="primary" open> Nothing fancy here, just a simple alert. </sl-alert>
```
```jsx react
@ -210,11 +209,7 @@ Set the `duration` attribute to automatically hide an alert after a period of ti
```jsx react
import { useState } from 'react';
import {
SlAlert,
SlButton,
SlIcon
} from '@shoelace-style/shoelace/dist/react';
import { SlAlert, SlButton, SlIcon } from '@shoelace-style/shoelace/dist/react';
const css = `
.alert-duration sl-alert {
@ -228,15 +223,11 @@ const App = () => {
return (
<>
<div className="alert-duration">
<SlButton variant="primary" onClick={() => setOpen(true)}>Show Alert</SlButton>
<SlButton variant="primary" onClick={() => setOpen(true)}>
Show Alert
</SlButton>
<SlAlert
variant="primary"
duration="3000"
open={open}
closable
onSlAfterHide={() => setOpen(false)}
>
<SlAlert variant="primary" duration="3000" open={open} closable onSlAfterHide={() => setOpen(false)}>
<SlIcon slot="icon" name="info-circle" />
This alert will automatically hide itself after three seconds, unless you interact with it.
</SlAlert>
@ -264,31 +255,31 @@ You should always use the `closable` attribute so users can dismiss the notifica
<sl-alert variant="primary" duration="3000" closable>
<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.
</sl-alert>
<sl-alert variant="success" duration="3000" closable>
<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.
</sl-alert>
<sl-alert variant="neutral" duration="3000" closable>
<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.
</sl-alert>
<sl-alert variant="warning" duration="3000" closable>
<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.
</sl-alert>
<sl-alert variant="danger" duration="3000" closable>
<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!
</sl-alert>
</div>
@ -307,11 +298,7 @@ You should always use the `closable` attribute so users can dismiss the notifica
```jsx react
import { useRef } from 'react';
import {
SlAlert,
SlButton,
SlIcon
} from '@shoelace-style/shoelace/dist/react';
import { SlAlert, SlButton, SlIcon } from '@shoelace-style/shoelace/dist/react';
function showToast(alert) {
alert.toast();
@ -348,31 +335,36 @@ const App = () => {
<SlAlert ref={primary} variant="primary" duration="3000" closable>
<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.
</SlAlert>
<SlAlert ref={success} variant="success" duration="3000" closable>
<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.
</SlAlert>
<SlAlert ref={neutral} variant="neutral" duration="3000" closable>
<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.
</SlAlert>
<SlAlert ref={warning} variant="warning" duration="3000" closable>
<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.
</SlAlert>
<SlAlert ref={danger} variant="danger" duration="3000" closable>
<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!
</SlAlert>
</>

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

@ -41,10 +41,7 @@ Both GIF and WEBP images are supported.
import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlAnimatedImage
src="https://shoelace.style/assets/images/tie.webp"
alt="Animation of a shoe being tied"
/>
<SlAnimatedImage src="https://shoelace.style/assets/images/tie.webp" alt="Animation of a shoe being tied" />
);
```

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

@ -41,10 +41,18 @@ const css = `
const App = () => (
<>
<div class="animation-overview">
<SlAnimation name="bounce" 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>
<SlAnimation name="bounce" 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>
<style>{css}</style>
@ -100,9 +108,9 @@ This example demonstrates all of the baked-in animations and easings. Animations
easingName.appendChild(menuItem);
});
animationName.addEventListener('sl-change', () => animation.name = animationName.value);
easingName.addEventListener('sl-change', () => animation.easing = easingName.value);
playbackRate.addEventListener('sl-input', () => animation.playbackRate = playbackRate.value);
animationName.addEventListener('sl-change', () => (animation.name = animationName.value));
easingName.addEventListener('sl-change', () => (animation.easing = easingName.value));
playbackRate.addEventListener('sl-input', () => (animation.playbackRate = playbackRate.value));
</script>
<style>
@ -182,16 +190,14 @@ const App = () => {
const box = useRef(null);
useEffect(() => {
const observer = new IntersectionObserver(
(entries) => {
const observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
animation.current.play = true;
} else {
animation.current.play = false;
animation.current.currentTime = 0;
}
}
);
});
if (box.current) {
observer.observe(box.current);
@ -201,12 +207,7 @@ const App = () => {
return (
<>
<div class="animation-scroll">
<SlAnimation
ref={animation}
name="jackInTheBox"
duration={2000}
iterations={1}
>
<SlAnimation ref={animation} name="jackInTheBox" duration={2000} iterations={1}>
<div ref={box} class="box" />
</SlAnimation>
</div>
@ -332,13 +333,7 @@ const App = () => {
return (
<div class="animation-form">
<SlAnimation
name="rubberBand"
duration={1000}
iterations={1}
play={play}
onSlFinish={() => setPlay(false)}
>
<SlAnimation name="rubberBand" duration={1000} iterations={1} play={play} onSlFinish={() => setPlay(false)}>
<SlButton variant="primary" onClick={() => setPlay(true)}>
Click me
</SlButton>

8
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
import { SlAvatar } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlAvatar label="User avatar" />
);
const App = () => <SlAvatar label="User avatar" />;
```
## Examples
@ -53,9 +51,7 @@ When you don't have an image to use, you can set the `initials` attribute to sho
```jsx react
import { SlAvatar } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlAvatar initials="SL" label="Avatar with initials: SL" />
);
const App = () => <SlAvatar initials="SL" label="Avatar with initials: SL" />;
```
### Custom Icons

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

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

36
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
<sl-breadcrumb>
<sl-breadcrumb-item href="https://example.com/home">
Homepage
</sl-breadcrumb-item>
<sl-breadcrumb-item href="https://example.com/home">Homepage</sl-breadcrumb-item>
<sl-breadcrumb-item href="https://example.com/home/services">
Our Services
</sl-breadcrumb-item>
<sl-breadcrumb-item href="https://example.com/home/services">Our Services</sl-breadcrumb-item>
<sl-breadcrumb-item href="https://example.com/home/services/digital">
Digital Media
</sl-breadcrumb-item>
<sl-breadcrumb-item href="https://example.com/home/services/digital">Digital Media</sl-breadcrumb-item>
<sl-breadcrumb-item href="https://example.com/home/services/digital/web-design">
Web Design
</sl-breadcrumb-item>
<sl-breadcrumb-item href="https://example.com/home/services/digital/web-design">Web Design</sl-breadcrumb-item>
</sl-breadcrumb>
```
@ -61,21 +53,13 @@ import { SlBreadcrumb, SlBreadcrumbItem } from '@shoelace-style/shoelace/dist/re
const App = () => (
<SlBreadcrumb>
<SlBreadcrumbItem href="https://example.com/home">
Homepage
</SlBreadcrumbItem>
<SlBreadcrumbItem href="https://example.com/home">Homepage</SlBreadcrumbItem>
<SlBreadcrumbItem href="https://example.com/home/services">
Our Services
</SlBreadcrumbItem>
<SlBreadcrumbItem href="https://example.com/home/services">Our Services</SlBreadcrumbItem>
<SlBreadcrumbItem href="https://example.com/home/services/digital">
Digital Media
</SlBreadcrumbItem>
<SlBreadcrumbItem href="https://example.com/home/services/digital">Digital Media</SlBreadcrumbItem>
<SlBreadcrumbItem href="https://example.com/home/services/digital/web-design">
Web Design
</SlBreadcrumbItem>
<SlBreadcrumbItem href="https://example.com/home/services/digital/web-design">Web Design</SlBreadcrumbItem>
</SlBreadcrumb>
);
```
@ -92,7 +76,7 @@ Use the `separator` slot to change the separator that goes between breadcrumb it
<sl-breadcrumb-item>Third</sl-breadcrumb-item>
</sl-breadcrumb>
<br>
<br />
<sl-breadcrumb>
<sl-icon name="arrow-right" slot="separator"></sl-icon>
@ -101,7 +85,7 @@ Use the `separator` slot to change the separator that goes between breadcrumb it
<sl-breadcrumb-item>Third</sl-breadcrumb-item>
</sl-breadcrumb>
<br>
<br />
<sl-breadcrumb>
<span slot="separator">/</span>

141
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-group>
<br><br>
<br /><br />
<sl-button-group>
<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-group>
<br><br>
<br /><br />
<sl-button-group>
<sl-button size="large">Left</sl-button>
@ -65,7 +65,8 @@ const App = () => (
<SlButton size="small">Right</SlButton>
</SlButtonGroup>
<br /><br />
<br />
<br />
<SlButtonGroup>
<SlButton size="medium">Left</SlButton>
@ -73,7 +74,8 @@ const App = () => (
<SlButton size="medium">Right</SlButton>
</SlButtonGroup>
<br /><br />
<br />
<br />
<SlButtonGroup>
<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-group>
<br><br>
<br /><br />
<sl-button-group>
<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-group>
<br><br>
<br /><br />
<sl-button-group>
<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-group>
<br><br>
<br /><br />
<sl-button-group>
<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-group>
<br><br>
<br /><br />
<sl-button-group>
<sl-button variant="danger">Left</sl-button>
@ -139,7 +141,8 @@ const App = () => (
<SlButton variant="primary">Right</SlButton>
</SlButtonGroup>
<br /><br />
<br />
<br />
<SlButtonGroup>
<SlButton variant="success">Left</SlButton>
@ -147,7 +150,8 @@ const App = () => (
<SlButton variant="success">Right</SlButton>
</SlButtonGroup>
<br /><br />
<br />
<br />
<SlButtonGroup>
<SlButton variant="neutral">Left</SlButton>
@ -155,7 +159,8 @@ const App = () => (
<SlButton variant="neutral">Right</SlButton>
</SlButtonGroup>
<br /><br />
<br />
<br />
<SlButtonGroup>
<SlButton variant="warning">Left</SlButton>
@ -163,7 +168,8 @@ const App = () => (
<SlButton variant="warning">Right</SlButton>
</SlButtonGroup>
<br /><br />
<br />
<br />
<SlButtonGroup>
<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-group>
<br><br>
<br /><br />
<sl-button-group>
<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-group>
<br><br>
<br /><br />
<sl-button-group>
<sl-button size="large" pill>Left</sl-button>
@ -208,25 +214,45 @@ import { SlButton, SlButtonGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlButtonGroup>
<SlButton size="small" pill>Left</SlButton>
<SlButton size="small" pill>Center</SlButton>
<SlButton size="small" pill>Right</SlButton>
<SlButton size="small" pill>
Left
</SlButton>
<SlButton size="small" pill>
Center
</SlButton>
<SlButton size="small" pill>
Right
</SlButton>
</SlButtonGroup>
<br /><br />
<br />
<br />
<SlButtonGroup>
<SlButton size="medium" pill>Left</SlButton>
<SlButton size="medium" pill>Center</SlButton>
<SlButton size="medium" pill>Right</SlButton>
<SlButton size="medium" pill>
Left
</SlButton>
<SlButton size="medium" pill>
Center
</SlButton>
<SlButton size="medium" pill>
Right
</SlButton>
</SlButtonGroup>
<br /><br />
<br />
<br />
<SlButtonGroup>
<SlButton size="large" pill>Left</SlButton>
<SlButton size="large" pill>Center</SlButton>
<SlButton size="large" pill>Right</SlButton>
<SlButton size="large" pill>
Left
</SlButton>
<SlButton size="large" pill>
Center
</SlButton>
<SlButton size="large" pill>
Right
</SlButton>
</SlButtonGroup>
</>
);
@ -252,20 +278,16 @@ Dropdowns can be placed inside button groups as long as the trigger is an `<sl-b
```
```jsx react
import {
SlButton,
SlButtonGroup,
SlDropdown,
SlMenu,
SlMenuItem,
} from '@shoelace-style/shoelace/dist/react';
import { SlButton, SlButtonGroup, SlDropdown, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlButtonGroup>
<SlButton>Button</SlButton>
<SlButton>Button</SlButton>
<SlDropdown>
<SlButton slot="trigger" caret>Dropdown</SlButton>
<SlButton slot="trigger" caret>
Dropdown
</SlButton>
<SlMenu>
<SlMenuItem>Item 1</SlMenuItem>
<SlMenuItem>Item 2</SlMenuItem>
@ -295,13 +317,7 @@ Create a split button using a button and a dropdown.
```
```jsx react
import {
SlButton,
SlButtonGroup,
SlDropdown,
SlMenu,
SlMenuItem,
} from '@shoelace-style/shoelace/dist/react';
import { SlButton, SlButtonGroup, SlDropdown, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlButtonGroup>
@ -339,11 +355,7 @@ Buttons can be wrapped in tooltips to provide more detail when the user interact
```
```jsx react
import {
SlButton,
SlButtonGroup,
SlTooltip
} from '@shoelace-style/shoelace/dist/react';
import { SlButton, SlButtonGroup, SlTooltip } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
@ -412,12 +424,7 @@ Create interactive toolbars with button groups.
```
```jsx react
import {
SlButton,
SlButtonGroup,
SlIcon,
SlTooltip
} from '@shoelace-style/shoelace/dist/react';
import { SlButton, SlButtonGroup, SlIcon, SlTooltip } from '@shoelace-style/shoelace/dist/react';
const css = `
.button-group-toolbar sl-button-group:not(:last-of-type) {
@ -430,34 +437,50 @@ const App = () => (
<div className="button-group-toolbar">
<SlButtonGroup label="History">
<SlTooltip content="Undo">
<SlButton><SlIcon name="arrow-counterclockwise"></SlIcon></SlButton>
<SlButton>
<SlIcon name="arrow-counterclockwise"></SlIcon>
</SlButton>
</SlTooltip>
<SlTooltip content="Redo">
<SlButton><SlIcon name="arrow-clockwise"></SlIcon></SlButton>
<SlButton>
<SlIcon name="arrow-clockwise"></SlIcon>
</SlButton>
</SlTooltip>
</SlButtonGroup>
<SlButtonGroup label="Formatting">
<SlTooltip content="Bold">
<SlButton><SlIcon name="type-bold"></SlIcon></SlButton>
<SlButton>
<SlIcon name="type-bold"></SlIcon>
</SlButton>
</SlTooltip>
<SlTooltip content="Italic">
<SlButton><SlIcon name="type-italic"></SlIcon></SlButton>
<SlButton>
<SlIcon name="type-italic"></SlIcon>
</SlButton>
</SlTooltip>
<SlTooltip content="Underline">
<SlButton><SlIcon name="type-underline"></SlIcon></SlButton>
<SlButton>
<SlIcon name="type-underline"></SlIcon>
</SlButton>
</SlTooltip>
</SlButtonGroup>
<SlButtonGroup label="Alignment">
<SlTooltip content="Align Left">
<SlButton><SlIcon name="justify-left"></SlIcon></SlButton>
<SlButton>
<SlIcon name="justify-left"></SlIcon>
</SlButton>
</SlTooltip>
<SlTooltip content="Align Center">
<SlButton><SlIcon name="justify"></SlIcon></SlButton>
<SlButton>
<SlIcon name="justify"></SlIcon>
</SlButton>
</SlTooltip>
<SlTooltip content="Align Right">
<SlButton><SlIcon name="justify-right"></SlIcon></SlButton>
<SlButton>
<SlIcon name="justify-right"></SlIcon>
</SlButton>
</SlTooltip>
</SlButtonGroup>
</div>

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

@ -11,9 +11,7 @@ Buttons represent actions that are available to the user.
```jsx react
import { SlButton } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlButton>Button</SlButton>
);
const App = () => <SlButton>Button</SlButton>;
```
## Examples
@ -86,12 +84,24 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlButton variant="default" outline>Default</SlButton>
<SlButton variant="primary" outline>Primary</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>
<SlButton variant="default" outline>
Default
</SlButton>
<SlButton variant="primary" outline>
Primary
</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 = () => (
<>
<SlButton size="small" pill>Small</SlButton>
<SlButton size="medium" pill>Medium</SlButton>
<SlButton size="large" pill>Large</SlButton>
<SlButton size="small" pill>
Small
</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 = () => (
<>
<SlButton variant="default" size="small" circle><SlIcon name="gear" /></SlButton>
<SlButton variant="default" size="medium" circle><SlIcon name="gear" /></SlButton>
<SlButton variant="default" size="large" circle><SlIcon name="gear" /></SlButton>
<SlButton variant="default" size="small" circle>
<SlIcon name="gear" />
</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 = () => (
<>
<SlButton variant="text" size="small">Text</SlButton>
<SlButton variant="text" size="medium">Text</SlButton>
<SlButton variant="text" size="large">Text</SlButton>
<SlButton variant="text" size="small">
Text
</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 = () => (
<>
<SlButton href="https://example.com/">Link</SlButton>
<SlButton href="https://example.com/" target="_blank">New Window</SlButton>
<SlButton href="/assets/images/wordmark.svg" download="shoelace.svg">Download</SlButton>
<SlButton href="https://example.com/" disabled>Disabled</SlButton>
<SlButton href="https://example.com/" target="_blank">
New Window
</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 = () => (
<>
<SlButton variant="default" size="small" style={{ width: '100%', marginBottom: '1rem' }}>Small</SlButton>
<SlButton variant="default" size="medium" style={{ width: '100%', marginBottom: '1rem' }}>Medium</SlButton>
<SlButton variant="default" size="large" style={{ width: '100%' }}>Large</SlButton>
<SlButton variant="default" size="small" style={{ width: '100%', marginBottom: '1rem' }}>
Small
</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
</sl-button>
<br><br>
<br /><br />
<sl-button variant="default">
<sl-icon slot="prefix" name="gear"></sl-icon>
@ -249,7 +289,7 @@ Use the `prefix` and `suffix` slots to add icons.
Open
</sl-button>
<br><br>
<br /><br />
<sl-button variant="default" size="large">
<sl-icon slot="prefix" name="gear"></sl-icon>
@ -289,7 +329,8 @@ const App = () => (
Open
</SlButton>
<br /><br/ >
<br />
<br />
<SlButton variant="default">
<SlIcon slot="prefix" name="gear"></SlIcon>
@ -307,7 +348,8 @@ const App = () => (
Open
</SlButton>
<br /><br />
<br />
<br />
<SlButton variant="default" size="large">
<SlIcon slot="prefix" name="gear"></SlIcon>
@ -343,9 +385,15 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlButton size="small" caret>Small</SlButton>
<SlButton size="medium" caret>Medium</SlButton>
<SlButton size="large" caret>Large</SlButton>
<SlButton size="small" caret>
Small
</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 = () => (
<>
<SlButton variant="default" loading>Default</SlButton>
<SlButton variant="primary" loading>Primary</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>
<SlButton variant="default" loading>
Default
</SlButton>
<SlButton variant="primary" loading>
Primary
</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 = () => (
<>
<SlButton variant="default" disabled>Default</SlButton>
<SlButton variant="primary" disabled>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>
<SlButton variant="default" disabled>
Default
</SlButton>
<SlButton variant="primary" disabled>
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>
</>
);
```

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

@ -10,10 +10,10 @@ Cards can be used to group related subjects in a container.
slot="image"
src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
alt="A kitten sits patiently between a terracotta pot and decorative grasses."
>
/>
<strong>Mittens</strong><br>
This kitten is as cute as he is playful. Bring him home today!<br>
<strong>Mittens</strong><br />
This kitten is as cute as he is playful. Bring him home today!<br />
<small>6 weeks old</small>
<div slot="footer">
@ -31,7 +31,7 @@ Cards can be used to group related subjects in a container.
color: var(--sl-color-neutral-500);
}
.card-overview [slot="footer"] {
.card-overview [slot='footer'] {
display: flex;
justify-content: space-between;
align-items: center;
@ -40,11 +40,7 @@ Cards can be used to group related subjects in a container.
```
```jsx react
import {
SlButton,
SlCard,
SlRating
} from '@shoelace-style/shoelace/dist/react';
import { SlButton, SlCard, SlRating } from '@shoelace-style/shoelace/dist/react';
const css = `
.card-overview {
@ -70,13 +66,15 @@ const App = () => (
src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
alt="A kitten sits patiently between a terracotta pot and decorative grasses."
/>
<strong>Mittens</strong><br />
This kitten is as cute as he is playful. Bring him home today!<br />
<strong>Mittens</strong>
<br />
This kitten is as cute as he is playful. Bring him home today!
<br />
<small>6 weeks old</small>
<div slot="footer">
<SlButton variant="primary" pill>More Info</SlButton>
<SlButton variant="primary" pill>
More Info
</SlButton>
<SlRating></SlRating>
</div>
</SlCard>
@ -144,7 +142,7 @@ Headers can be used to display titles and more.
max-width: 300px;
}
.card-header [slot="header"] {
.card-header [slot='header'] {
display: flex;
align-items: center;
justify-content: space-between;
@ -188,10 +186,8 @@ const App = () => (
<SlCard className="card-header">
<div slot="header">
Header Title
<SlIconButton name="gear"></SlIconButton>
</div>
This card has a header. You can put all sorts of things in it!
</SlCard>
@ -219,7 +215,7 @@ Footers can be used to display actions, summaries, or other relevant content.
max-width: 300px;
}
.card-footer [slot="footer"] {
.card-footer [slot='footer'] {
display: flex;
justify-content: space-between;
align-items: center;
@ -228,11 +224,7 @@ Footers can be used to display actions, summaries, or other relevant content.
```
```jsx react
import {
SlButton,
SlCard,
SlRating
} from '@shoelace-style/shoelace/dist/react';
import { SlButton, SlCard, SlRating } from '@shoelace-style/shoelace/dist/react';
const css = `
.card-footer {
@ -250,10 +242,11 @@ const App = () => (
<>
<SlCard className="card-footer">
This card has a footer. You can put all sorts of things in it!
<div slot="footer">
<SlRating></SlRating>
<SlButton slot="footer" variant="primary">Preview</SlButton>
<SlButton slot="footer" variant="primary">
Preview
</SlButton>
</div>
</SlCard>
@ -272,7 +265,7 @@ Cards accept an `image` slot. The image is displayed atop the card and stretches
slot="image"
src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80"
alt="A kitten walks towards camera on top of pallet."
>
/>
This is a kitten, but not just any kitten. This kitten likes walking along pallets.
</sl-card>

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
import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlCheckbox>Checkbox</SlCheckbox>
);
const App = () => <SlCheckbox>Checkbox</SlCheckbox>;
```
?> This component works with standard `<form>` elements. Please refer to the section on [form controls](/getting-started/form-controls) to learn more about form submission and client-side validation.
@ -31,9 +29,7 @@ Use the `checked` attribute to activate the checkbox.
```jsx react
import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlCheckbox checked>Checked</SlCheckbox>
);
const App = () => <SlCheckbox checked>Checked</SlCheckbox>;
```
### Indeterminate
@ -47,9 +43,7 @@ Use the `indeterminate` attribute to make the checkbox indeterminate.
```jsx react
import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlCheckbox indeterminate>Indeterminate</SlCheckbox>
);
const App = () => <SlCheckbox indeterminate>Indeterminate</SlCheckbox>;
```
### Disabled
@ -63,9 +57,7 @@ Use the `disabled` attribute to disable the checkbox.
```jsx react
import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlCheckbox disabled>Disabled</SlCheckbox>
);
const App = () => <SlCheckbox disabled>Disabled</SlCheckbox>;
```
[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
import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlColorPicker />
);
const App = () => <SlColorPicker />;
```
?> This component works with standard `<form>` elements. Please refer to the section on [form controls](/getting-started/form-controls) to learn more about form submission and client-side validation.
@ -31,9 +29,7 @@ Use the `opacity` attribute to enable the opacity slider. When this is enabled,
```jsx react
import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlColorPicker opacity />
);
const App = () => <SlColorPicker opacity />;
```
### Formats
@ -93,9 +89,7 @@ The color picker can be rendered inline instead of in a dropdown using the `inli
```jsx react
import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlColorPicker inline />
);
const App = () => <SlColorPicker inline />;
```
[component-metadata:sl-color-picker]

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

@ -202,12 +202,7 @@ const App = () => {
return (
<>
<SlDialog
label="Dialog"
open={open}
onSlRequestClose={handleRequestClose}
onSlAfterHide={() => setOpen(false)}
>
<SlDialog label="Dialog" open={open} onSlRequestClose={handleRequestClose} onSlAfterHide={() => setOpen(false)}>
This dialog will not close when you click on the overlay.
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
Close

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

@ -11,10 +11,9 @@ Dividers are used to visually separate or group elements.
```jsx react
import { SlDivider } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlDivider />
);
const App = () => <SlDivider />;
```
## Examples
### Width
@ -28,9 +27,7 @@ Use the `--width` custom property to change the width of the divider.
```jsx react
import { SlDivider } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlDivider style={{ '--width': '4px' }} />
);
const App = () => <SlDivider style={{ '--width': '4px' }} />;
```
### Color
@ -44,9 +41,7 @@ Use the `--color` custom property to change the color of the divider.
```jsx react
import { SlDivider } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlDivider style={{ '--color': 'tomato' }} />
);
const App = () => <SlDivider style={{ '--color': 'tomato' }} />;
```
### Spacing
@ -112,7 +107,9 @@ const App = () => (
Use dividers in [menus](/components/menu) to visually group menu items.
```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="2">Option 2</sl-menu-item>
<sl-menu-item value="3">Option 3</sl-menu-item>
@ -124,11 +121,7 @@ Use dividers in [menus](/components/menu) to visually group menu items.
```
```jsx react
import {
SlDivider,
SlMenu,
SlMenuItem
} from '@shoelace-style/shoelace/dist/react';
import { SlDivider, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlMenu

8
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();
}
});
</script>
```
@ -390,12 +389,7 @@ const App = () => {
return (
<>
<SlDrawer
label="Drawer"
open={open}
onSlRequestClose={handleRequestClose}
onSlAfterHide={() => setOpen(false)}
>
<SlDrawer label="Drawer" open={open} onSlRequestClose={handleRequestClose} onSlAfterHide={() => setOpen(false)}>
This drawer will not close when you click on the overlay.
<SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
Save &amp; Close

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

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

@ -6,8 +6,7 @@ Formats a number as a human readable bytes value.
```html preview
<div class="format-bytes-overview">
The file is <sl-format-bytes value="1000"></sl-format-bytes> in size.
<br><br>
The file is <sl-format-bytes value="1000"></sl-format-bytes> in size. <br /><br />
<sl-input type="number" value="1000" label="Number to Format" style="max-width: 180px;"></sl-input>
</div>
@ -16,18 +15,13 @@ Formats a number as a human readable bytes value.
const formatter = container.querySelector('sl-format-bytes');
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>
```
```jsx react
import { useState } from 'react';
import {
SlButton,
SlFormatBytes,
SlInput
} from '@shoelace-style/shoelace/dist/react';
import { SlButton, SlFormatBytes, SlInput } from '@shoelace-style/shoelace/dist/react';
const App = () => {
const [value, setValue] = useState(1000);
@ -35,7 +29,8 @@ const App = () => {
return (
<>
The file is <SlFormatBytes value={value} /> in size.
<br /><br />
<br />
<br />
<SlInput
type="number"
value={value}
@ -55,21 +50,23 @@ const App = () => {
Set the `value` attribute to a number to get the value in bytes.
```html preview
<sl-format-bytes value="12"></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="12"></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="1200000000"></sl-format-bytes>
```
```jsx react
import { SlFormatBytes } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlFormatBytes value="12" /><br />
<SlFormatBytes value="1200" /><br />
<SlFormatBytes value="1200000" /><br />
<SlFormatBytes value="12" />
<br />
<SlFormatBytes value="1200" />
<br />
<SlFormatBytes value="1200000" />
<br />
<SlFormatBytes value="1200000000" />
</>
);
@ -80,9 +77,9 @@ const App = () => (
To get the value in bits, set the `unit` attribute to `bit`.
```html preview
<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="1200000" 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="1200000" unit="bit"></sl-format-bytes><br />
<sl-format-bytes value="1200000000" unit="bit"></sl-format-bytes>
```
@ -91,9 +88,12 @@ import { SlFormatBytes } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlFormatBytes value="12" unit="bit" /><br />
<SlFormatBytes value="1200" unit="bit" /><br />
<SlFormatBytes value="1200000" unit="bit" /><br />
<SlFormatBytes value="12" unit="bit" />
<br />
<SlFormatBytes value="1200" unit="bit" />
<br />
<SlFormatBytes value="1200000" unit="bit" />
<br />
<SlFormatBytes value="1200000000" unit="bit" />
</>
);
@ -104,9 +104,9 @@ const App = () => (
Use the `lang` attribute to set the number formatting locale.
```html preview
<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="1200000" 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="1200000" lang="de"></sl-format-bytes><br />
<sl-format-bytes value="1200000000" lang="de"></sl-format-bytes>
```
@ -115,9 +115,12 @@ import { SlFormatBytes } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlFormatBytes value="12" lang="de" /><br />
<SlFormatBytes value="1200" lang="de" /><br />
<SlFormatBytes value="1200000" lang="de" /><br />
<SlFormatBytes value="12" lang="de" />
<br />
<SlFormatBytes value="1200" lang="de" />
<br />
<SlFormatBytes value="1200000" lang="de" />
<br />
<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
import { SlFormatDate } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlFormatDate date="2020-07-15T09:17:00-04:00" />
);
const App = () => <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.
@ -31,19 +29,19 @@ Formatting options are based on those found in the [`Intl.DateTimeFormat` API](h
```html preview
<!-- 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 -->
<sl-format-date hour="numeric" minute="numeric"></sl-format-date><br>
<sl-format-date hour="numeric" minute="numeric"></sl-format-date><br />
<!-- Weekday -->
<sl-format-date weekday="long"></sl-format-date><br>
<sl-format-date weekday="long"></sl-format-date><br />
<!-- Month -->
<sl-format-date month="long"></sl-format-date><br>
<sl-format-date month="long"></sl-format-date><br />
<!-- Year -->
<sl-format-date year="numeric"></sl-format-date><br>
<sl-format-date year="numeric"></sl-format-date><br />
<!-- No formatting options -->
<sl-format-date></sl-format-date>
@ -55,19 +53,24 @@ import { SlFormatDate } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
{/* Human-readable date */}
<SlFormatDate month="long" day="numeric" year="numeric" /><br />
<SlFormatDate month="long" day="numeric" year="numeric" />
<br />
{/* Time */}
<SlFormatDate hour="numeric" minute="numeric" /><br />
<SlFormatDate hour="numeric" minute="numeric" />
<br />
{/* Weekday */}
<SlFormatDate weekday="long" /><br />
<SlFormatDate weekday="long" />
<br />
{/* Month */}
<SlFormatDate month="long" /><br />
<SlFormatDate month="long" />
<br />
{/* Year */}
<SlFormatDate year="numeric" /><br />
<SlFormatDate year="numeric" />
<br />
{/* No formatting options */}
<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`.
```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>
```
@ -89,7 +92,8 @@ import { SlFormatDate } from '@shoelace-style/shoelace/dist/react';
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" />
</>
);
@ -100,8 +104,8 @@ const App = () => (
Use the `lang` attribute to set the date/time formatting locale.
```html preview
English: <sl-format-date lang="en"></sl-format-date><br>
French: <sl-format-date lang="fr"></sl-format-date><br>
English: <sl-format-date lang="en"></sl-format-date><br />
French: <sl-format-date lang="fr"></sl-format-date><br />
Russian: <sl-format-date lang="ru"></sl-format-date>
```
@ -110,8 +114,10 @@ import { SlFormatDate } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
English: <SlFormatDate lang="en" /><br />
French: <SlFormatDate lang="fr" /><br />
English: <SlFormatDate lang="en" />
<br />
French: <SlFormatDate lang="fr" />
<br />
Russian: <SlFormatDate lang="ru" />
</>
);

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

@ -9,7 +9,7 @@ Localization is handled by the browser's [`Intl.NumberFormat` API](https://devel
```html preview
<div class="format-number-overview">
<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>
</div>
@ -18,7 +18,7 @@ Localization is handled by the browser's [`Intl.NumberFormat` API](https://devel
const formatter = container.querySelector('sl-format-number');
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>
```
@ -32,7 +32,8 @@ const App = () => {
return (
<>
<SlFormatNumber value={value} />
<br /><br />
<br />
<br />
<SlInput
type="number"
value={value}
@ -52,10 +53,10 @@ const App = () => {
To get the value as a percent, set the `type` attribute to `percent`.
```html preview
<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.50"></sl-format-number><br>
<sl-format-number type="percent" value="0.75"></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.50"></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>
```
@ -64,10 +65,14 @@ import { SlFormatNumber } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlFormatNumber type="percent" value={0} /><br />
<SlFormatNumber type="percent" value={0.25} /><br />
<SlFormatNumber type="percent" value={0.50} /><br />
<SlFormatNumber type="percent" value={0.75} /><br />
<SlFormatNumber type="percent" value={0} />
<br />
<SlFormatNumber type="percent" value={0.25} />
<br />
<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.
```html preview
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>
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 />
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 = () => (
<>
English: <SlFormatNumber value="2000" lang="en" minimum-fraction-digits="2" /><br />
German: <SlFormatNumber value="2000" lang="de" minimum-fraction-digits="2" /><br />
English: <SlFormatNumber value="2000" lang="en" minimum-fraction-digits="2" />
<br />
German: <SlFormatNumber value="2000" lang="de" minimum-fraction-digits="2" />
<br />
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.
```html preview
<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="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="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="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="CNY" value="2000" lang="zh-cn"></sl-format-number>
```
@ -112,10 +119,14 @@ import { SlFormatNumber } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlFormatNumber type="currency" currency="USD" value="2000" lang="en-US" /><br />
<SlFormatNumber type="currency" currency="GBP" value="2000" lang="en-GB" /><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="USD" value="2000" lang="en-US" />
<br />
<SlFormatNumber type="currency" currency="GBP" value="2000" lang="en-GB" />
<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" />
</>
);

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

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

@ -90,9 +90,7 @@ For non-decorative icons, use the `label` attribute to announce it to assistive
```jsx react
import { SlIcon } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlIcon name="star-fill" label="Add to favorites" />
);
const App = () => <SlIcon name="star-fill" label="Add to favorites" />;
```
### 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>
```
```jsx react
import { SlIcon } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlIcon src="https://shoelace.style/assets/images/shoe.svg" style={{ fontSize: '8rem' }}></SlIcon>
);
const App = () => <SlIcon src="https://shoelace.style/assets/images/shoe.svg" style={{ fontSize: '8rem' }}></SlIcon>;
```
## Icon Libraries
@ -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-server"></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-cookie"></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-server"></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-chrome"></sl-icon>
<sl-icon library="boxicons" name="bxl-edge"></sl-icon>
@ -245,14 +240,14 @@ 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-heart"></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-book"></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-pizza-slice"></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-chrome"></sl-icon>
<sl-icon library="fa" name="fab-edge"></sl-icon>
@ -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="settings"></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="american-football-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="settings-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="american-football-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="picture"></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="camera-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="settings"></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="email_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="settings_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="email_sharp"></sl-icon>
<sl-icon library="material" name="delete_sharp"></sl-icon>
@ -460,7 +455,7 @@ 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="media/image-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="design/brush-fill"></sl-icon>
<sl-icon library="remixicon" name="business/pie-chart-fill"></sl-icon>
@ -483,7 +478,9 @@ Icons in this library are licensed under the [Apache 2.0 License](https://github
registerIconLibrary('unicons', {
resolver: name => {
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')
});
@ -496,7 +493,7 @@ 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="rocket"></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="graph-bar-s"></sl-icon>
<sl-icon library="unicons" name="padlock-s"></sl-icon>

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
<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 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.">
<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
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>
```
@ -18,8 +26,16 @@ import { SlImageComparer } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<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 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." />
<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
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>
);
```
@ -32,8 +48,16 @@ Use the `position` attribute to set the initial position of the slider. This is
```html preview
<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 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.">
<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
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>
```
@ -42,8 +66,16 @@ import { SlImageComparer } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<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 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." />
<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
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>
);
```

4
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
import { SlInclude } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlInclude src="https://shoelace.style/assets/examples/include.html" />
);
const App = () => <SlInclude src="https://shoelace.style/assets/examples/include.html" />;
```
## Examples

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

@ -11,9 +11,7 @@ Inputs collect data from the user.
```jsx react
import { SlInput } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlInput />
);
const App = () => <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.
@ -31,9 +29,7 @@ Use the `placeholder` attribute to add a placeholder.
```jsx react
import { SlInput } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlInput placeholder="Type something" />
);
const App = () => <SlInput placeholder="Type something" />;
```
### Clearable
@ -47,9 +43,7 @@ Add the `clearable` attribute to add a clear button when the input has content.
```jsx react
import { SlInput } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlInput placeholder="Clearable" clearable />
);
const App = () => <SlInput placeholder="Clearable" clearable />;
```
### Toggle Password
@ -58,9 +52,9 @@ Add the `toggle-password` attribute to add a toggle button that will show the pa
```html preview
<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>
<br>
<br />
<sl-input type="password" placeholder="Password Toggle" size="large" toggle-password></sl-input>
```
@ -89,9 +83,7 @@ Add the `filled` attribute to draw a filled input.
```jsx react
import { SlInput } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlInput placeholder="Type something" filled />
);
const App = () => <SlInput placeholder="Type something" filled />;
```
### Pill
@ -100,9 +92,9 @@ Use the `pill` attribute to give inputs rounded edges.
```html preview
<sl-input placeholder="Small" size="small" pill></sl-input>
<br>
<br />
<sl-input placeholder="Medium" size="medium" pill></sl-input>
<br>
<br />
<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
<sl-input type="email" Placeholder="Email"></sl-input>
<br>
<br />
<sl-input type="number" Placeholder="Number"></sl-input>
<br>
<br />
<sl-input type="date" Placeholder="Date"></sl-input>
```
@ -152,9 +144,9 @@ Use the `disabled` attribute to disable an input.
```html preview
<sl-input placeholder="Disabled" size="small" disabled></sl-input>
<br>
<br />
<sl-input placeholder="Disabled" size="medium" disabled></sl-input>
<br>
<br />
<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
<sl-input placeholder="Small" size="small"></sl-input>
<br>
<br />
<sl-input placeholder="Medium" size="medium"></sl-input>
<br>
<br />
<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="chat" slot="suffix"></sl-icon>
</sl-input>
<br>
<br />
<sl-input placeholder="Medium" size="medium">
<sl-icon name="house" slot="prefix"></sl-icon>
<sl-icon name="chat" slot="suffix"></sl-icon>
</sl-input>
<br>
<br />
<sl-input placeholder="Large" size="large">
<sl-icon name="house" slot="prefix"></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
import { SlIcon, SlInput } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlInput label="What is your name?" />
);
const App = () => <SlInput label="What is your name?" />;
```
### 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.
```html preview
<sl-input
label="Nickname"
help-text="What would you like people to call you?"
></sl-input>
<sl-input label="Nickname" help-text="What would you like people to call you?"></sl-input>
```
```jsx react
import { SlIcon, SlInput } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlInput
label="Nickname"
help-text="What would you like people to call you?"
/>
);
const App = () => <SlInput label="Nickname" help-text="What would you like people to call you?" />;
```
[component-metadata:sl-input]

56
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.
```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 2</sl-menu-item>
<sl-menu-item>Option 3</sl-menu-item>
@ -25,12 +27,7 @@ Menu items provide options for the user to pick from in a menu.
```
```jsx react
import {
SlDivider,
SlIcon,
SlMenu,
SlMenuItem
} from '@shoelace-style/shoelace/dist/react';
import { SlDivider, SlIcon, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlMenu
@ -66,7 +63,9 @@ const App = () => (
Use the `checked` attribute to draw menu items in a checked state.
```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 checked>Option 2</sl-menu-item>
<sl-menu-item>Option 3</sl-menu-item>
@ -74,10 +73,7 @@ Use the `checked` attribute to draw menu items in a checked state.
```
```jsx react
import {
SlMenu,
SlMenuItem
} from '@shoelace-style/shoelace/dist/react';
import { SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlMenu
@ -99,7 +95,9 @@ const App = () => (
Add the `disabled` attribute to disable the menu item so it cannot be selected.
```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 disabled>Option 2</sl-menu-item>
<sl-menu-item>Option 3</sl-menu-item>
@ -107,10 +105,7 @@ Add the `disabled` attribute to disable the menu item so it cannot be selected.
```
```jsx react
import {
SlMenu,
SlMenuItem
} from '@shoelace-style/shoelace/dist/react';
import { SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlMenu
@ -132,7 +127,9 @@ const App = () => (
Add content to the start and end of menu items using the `prefix` and `suffix` slots.
```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-icon slot="prefix" name="house"></sl-icon>
Home
@ -154,13 +151,7 @@ Add content to the start and end of menu items using the `prefix` and `suffix` s
```
```jsx react
import {
SlBadge,
SlDivider,
SlIcon,
SlMenu,
SlMenuItem
} from '@shoelace-style/shoelace/dist/react';
import { SlBadge, SlDivider, SlIcon, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlMenu
@ -178,7 +169,9 @@ const App = () => (
<SlMenuItem>
<SlIcon slot="prefix" name="envelope" />
Messages
<SlBadge slot="suffix" variant="primary" pill>12</SlBadge>
<SlBadge slot="suffix" variant="primary" pill>
12
</SlBadge>
</SlMenuItem>
<SlDivider />
@ -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.
```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-2">Option 2</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
import {
SlMenu,
SlMenuItem
} from '@shoelace-style/shoelace/dist/react';
import { SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
const App = () => {
function handleSelect(event) {
const item = event.detail.item;

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

@ -21,12 +21,7 @@ Menu labels are used to describe a group of menu items.
```
```jsx react
import {
SlDivider,
SlMenu,
SlMenuLabel,
SlMenuItem
} from '@shoelace-style/shoelace/dist/react';
import { SlDivider, SlMenu, SlMenuLabel, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlMenu

10
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.
```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="redo">Redo</sl-menu-item>
<sl-divider></sl-divider>
@ -19,11 +21,7 @@ You can use [menu items](/components/menu-item), [menu labels](/components/menu-
```
```jsx react
import {
SlDivider,
SlMenu,
SlMenuItem
} from '@shoelace-style/shoelace/dist/react';
import { SlDivider, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlMenu

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

@ -12,7 +12,7 @@ The mutation observer will report changes to the content it wraps through the `s
<sl-button variant="primary">Click to mutate</sl-button>
</sl-mutation-observer>
<br>
<br />
👆 Click the button and watch the console
<script>
@ -70,11 +70,10 @@ const App = () => {
return (
<>
<SlMutationObserver
attr="*"
onSlMutation={event => console.log(event.detail)}
>
<SlButton variant={variant} onClick={handleClick}>Click to mutate</SlButton>
<SlMutationObserver attr="*" onSlMutation={event => console.log(event.detail)}>
<SlButton variant={variant} onClick={handleClick}>
Click to mutate
</SlButton>
</SlMutationObserver>
<style>{css}</style>
@ -134,7 +133,7 @@ Use the `child-list` attribute to watch for new child elements that are added or
<style>
.mutation-child-list .buttons {
display: flex;
gap: .25rem;
gap: 0.25rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
@ -171,12 +170,11 @@ const App = () => {
return (
<>
<div className="mutation-child-list">
<SlMutationObserver
child-list
onSlMutation={event => console.log(event.detail)}
>
<SlMutationObserver child-list onSlMutation={event => console.log(event.detail)}>
<div className="buttons">
<SlButton variant="primary" onClick={addButton}>Add button</SlButton>
<SlButton variant="primary" onClick={addButton}>
Add button
</SlButton>
{buttonIds.map(id => (
<SlButton key={id} variant="default" onClick={() => removeButton(id)}>
{id}
@ -185,7 +183,6 @@ const App = () => {
</div>
</SlMutationObserver>
</div>
👆 Add and remove buttons and watch the console
<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
import { SlProgressBar } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlProgressBar value={50} />
);
const App = () => <SlProgressBar value={50} />;
```
## Examples
@ -29,12 +27,7 @@ Use the `--height` custom property to set the progress bar's height.
```jsx react
import { SlProgressBar } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlProgressBar
value={50}
style={{ '--height': '6px' }}
/>
);
const App = () => <SlProgressBar value={50} style={{ '--height': '6px' }} />;
```
### Labels
@ -48,12 +41,7 @@ Use the `label` attribute to label the progress bar and tell assistive devices h
```jsx react
import { SlProgressBar } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlProgressBar
value="50"
label="Upload progress"
/>
);
const App = () => <SlProgressBar value="50" label="Upload progress" />;
```
### Showing Values
@ -63,7 +51,7 @@ Use the default slot to show a value.
```html preview
<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="plus"></sl-icon></sl-button>
@ -80,7 +68,7 @@ Use the default slot to show a value.
});
subtractButton.addEventListener('click', () => {
const value = Math.max(0, progressBar.value - 10)
const value = Math.max(0, progressBar.value - 10);
progressBar.value = value;
progressBar.textContent = `${value}%`;
});
@ -89,11 +77,7 @@ Use the default slot to show a value.
```jsx react
import { useState } from 'react';
import {
SlButton,
SlIcon,
SlProgressBar
} from '@shoelace-style/shoelace/dist/react';
import { SlButton, SlIcon, SlProgressBar } from '@shoelace-style/shoelace/dist/react';
const App = () => {
const [value, setValue] = useState(50);
@ -107,9 +91,7 @@ const App = () => {
return (
<>
<SlProgressBar value={value}>
{value}%
</SlProgressBar>
<SlProgressBar value={value}>{value}%</SlProgressBar>
<br />
@ -136,9 +118,7 @@ The `indeterminate` attribute can be used to inform the user that the operation
```jsx react
import { SlProgressBar } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlProgressBar indeterminate />
);
const App = () => <SlProgressBar indeterminate />;
```
[component-metadata:sl-progress-bar]

40
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
import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlProgressRing value="25" />
);
const App = () => <SlProgressRing value="25" />;
```
## Examples
@ -29,12 +27,7 @@ Use the `--size` custom property to set the diameter of the progress ring.
```jsx react
import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlProgressRing
value="50"
style={{ '--size': '200px' }}
/>
);
const App = () => <SlProgressRing value="50" style={{ '--size': '200px' }} />;
```
### Track Width
@ -48,12 +41,7 @@ Use the `--track-width` custom property to set the width of the progress ring's
```jsx react
import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlProgressRing
value="50"
style={{ '--track-width': '10px' }}
/>
);
const App = () => <SlProgressRing value="50" style={{ '--track-width': '10px' }} />;
```
### Colors
@ -95,12 +83,7 @@ Use the `label` attribute to label the progress ring and tell assistive devices
```jsx react
import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlProgressRing
value="50"
label="Upload progress"
/>
);
const App = () => <SlProgressRing value="50" label="Upload progress" />;
```
### Showing Values
@ -110,7 +93,7 @@ Use the default slot to show a label inside the progress ring.
```html preview
<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="plus"></sl-icon></sl-button>
@ -127,7 +110,7 @@ Use the default slot to show a label inside the progress ring.
});
subtractButton.addEventListener('click', () => {
const value = Math.max(0, progressRing.value - 10)
const value = Math.max(0, progressRing.value - 10);
progressRing.value = value;
progressRing.textContent = `${value}%`;
});
@ -136,11 +119,7 @@ Use the default slot to show a label inside the progress ring.
```jsx react
import { useState } from 'react';
import {
SlButton,
SlIcon,
SlProgressRing
} from '@shoelace-style/shoelace/dist/react';
import { SlButton, SlIcon, SlProgressRing } from '@shoelace-style/shoelace/dist/react';
const App = () => {
const [value, setValue] = useState(50);
@ -154,10 +133,7 @@ const App = () => {
return (
<>
<SlProgressRing
value={value}
style={{ marginBottom: '.5rem' }}
>
<SlProgressRing value={value} style={{ marginBottom: '.5rem' }}>
{value}%
</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
<div class="qr-overview">
<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>
</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');
input.value = qrCode.value;
input.addEventListener('sl-input', () => qrCode.value = input.value);
input.addEventListener('sl-input', () => (qrCode.value = input.value));
</script>
<style>
@ -79,9 +79,7 @@ Use the `fill` and `background` attributes to modify the QR code's colors. You s
```jsx react
import { SlQrCode } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlQrCode value="https://shoelace.style/" fill="deeppink" background="white" />
);
const App = () => <SlQrCode value="https://shoelace.style/" fill="deeppink" background="white" />;
```
### Size
@ -95,9 +93,7 @@ Use the `size` attribute to change the size of the QR code.
```jsx react
import { SlQrCode } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlQrCode value="https://shoelace.style/" size="64" />
);
const App = () => <SlQrCode value="https://shoelace.style/" size="64" />;
```
### Radius
@ -111,9 +107,7 @@ Create a rounded effect with the `radius` attribute.
```jsx react
import { SlQrCode } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlQrCode value="https://shoelace.style/" radius="0.5" />
);
const App = () => <SlQrCode value="https://shoelace.style/" radius="0.5" />;
```
### 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 = () => (
<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="3">Option 3</SlRadio>
</SlRadioGroup>
@ -43,10 +45,13 @@ import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<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="3">Option 3</SlRadio>
</SlRadioGroup>
);
```
[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 = () => (
<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="3">Option 3</SlRadio>
</SlRadioGroup>
@ -48,10 +50,14 @@ import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<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="3">Option 3</SlRadio>
<SlRadio value="4" disabled>Disabled</SlRadio>
<SlRadio value="4" disabled>
Disabled
</SlRadio>
</SlRadioGroup>
);
```

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

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

@ -11,9 +11,7 @@ Ratings give users a way to quickly view and provide feedback.
```jsx react
import { SlRating } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlRating />
);
const App = () => <SlRating />;
```
## Examples
@ -29,9 +27,7 @@ Ratings are 0-5 by default. To change the maximum possible value, use the `max`
```jsx react
import { SlRating } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlRating max={3} />
);
const App = () => <SlRating max={3} />;
```
### Precision
@ -45,9 +41,7 @@ Use the `precision` attribute to let users select fractional ratings.
```jsx react
import { SlRating } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlRating precision={0.5} value={2.5} />
);
const App = () => <SlRating precision={0.5} value={2.5} />;
```
## Symbol Sizes
@ -61,9 +55,7 @@ Set the `--symbol-size` custom property to adjust the size.
```jsx react
import { SlRating } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlRating style={{ '--symbol-size': '2rem' }} />
);
const App = () => <SlRating style={{ '--symbol-size': '2rem' }} />;
```
### Readonly
@ -77,9 +69,7 @@ Use the `readonly` attribute to display a rating that users can't change.
```jsx react
import { SlRating } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlRating readonly value={3} />
);
const App = () => <SlRating readonly value={3} />;
```
### Disabled
@ -93,9 +83,7 @@ Use the `disable` attribute to disable the rating.
```jsx react
import { SlRating } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlRating disabled value={3} />
);
const App = () => <SlRating disabled value={3} />;
```
### Custom Icons
@ -116,10 +104,7 @@ import '@shoelace-style/shoelace/dist/components/icon/icon';
import { SlRating } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlRating
getSymbol={() => '<sl-icon name="heart-fill"></sl-icon>'}
style={{ '--symbol-color-active': '#ff4136' }}
/>
<SlRating 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>
const rating = document.querySelector('.rating-emojis');
rating.getSymbol = (value) => {
rating.getSymbol = value => {
const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing'];
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>`;
}
const App = () => (
<SlRating getSymbol={getSymbol} />
);
const App = () => <SlRating getSymbol={getSymbol} />;
```
[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
import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlRelativeTime date="2020-07-15T09:17:00-04:00" />
);
const App = () => <SlRelativeTime date="2020-07-15T09:17:00-04:00" />;
```
The `date` attribute determines when the date/time is calculated from. It must be a string that [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) can interpret or a [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object set via JavaScript.
@ -49,9 +47,7 @@ import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react';
const date = new Date(new Date().getTime() - 60000);
const App = () => (
<SlRelativeTime date={date} sync />
);
const App = () => <SlRelativeTime date={date} sync />;
```
### 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.
```html preview
<sl-relative-time date="2020-07-15T09:17:00-04:00" format="narrow"></sl-relative-time><br>
<sl-relative-time date="2020-07-15T09:17:00-04:00" format="short"></sl-relative-time><br>
<sl-relative-time date="2020-07-15T09:17:00-04:00" format="narrow"></sl-relative-time><br />
<sl-relative-time date="2020-07-15T09:17:00-04:00" format="short"></sl-relative-time><br />
<sl-relative-time date="2020-07-15T09:17:00-04:00" format="long"></sl-relative-time>
```
@ -69,8 +65,10 @@ import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlRelativeTime date="2020-07-15T09:17:00-04:00" format="narrow" /><br />
<SlRelativeTime date="2020-07-15T09:17:00-04:00" format="short" /><br />
<SlRelativeTime date="2020-07-15T09:17:00-04:00" format="narrow" />
<br />
<SlRelativeTime date="2020-07-15T09:17:00-04:00" format="short" />
<br />
<SlRelativeTime date="2020-07-15T09:17:00-04:00" format="long" />
</>
);
@ -81,10 +79,10 @@ const App = () => (
Use the `lang` attribute to set the desired locale.
```html preview
English: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="en-US"></sl-relative-time><br>
Chinese: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="zh-CN"></sl-relative-time><br>
German: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="de"></sl-relative-time><br>
Greek: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="el"></sl-relative-time><br>
English: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="en-US"></sl-relative-time><br />
Chinese: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="zh-CN"></sl-relative-time><br />
German: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="de"></sl-relative-time><br />
Greek: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="el"></sl-relative-time><br />
Russian: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="ru"></sl-relative-time>
```
@ -93,10 +91,14 @@ import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
English: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="en-US" /><br />
Chinese: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="zh-CN" /><br />
German: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="de" /><br />
Greek: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="el" /><br />
English: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="en-US" />
<br />
Chinese: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="zh-CN" />
<br />
German: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="de" />
<br />
Greek: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="el" />
<br />
Russian: <SlRelativeTime date="2020-07-15T09:17:00-04:00" lang="ru" />
</>
);

8
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
<div class="resize-observer-overview">
<sl-resize-observer>
<div>
Resize this box and watch the console 👉
</div>
<div>Resize this box and watch the console 👉</div>
</sl-resize-observer>
</div>
@ -54,9 +52,7 @@ const App = () => (
<>
<div className="resize-observer-overview">
<SlResizeObserver onSlResize={event => console.log(event.detail)}>
<div>
Resize this box and watch the console 👉
</div>
<div>Resize this box and watch the console 👉</div>
</SlResizeObserver>
</div>

24
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
<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>
```
@ -33,7 +36,10 @@ The following image maintains a `4:3` aspect ratio as its container is resized.
```html preview
<sl-responsive-media aspect-ratio="4:3">
<img src="https://images.unsplash.com/photo-1473186578172-c141e6798cf4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1800&q=80" alt="Two blue chairs on a sandy beach.">
<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>
```
@ -56,7 +62,12 @@ The following video is embedded using an `iframe` and maintains a `16:9` aspect
```html preview
<sl-responsive-media aspect-ratio="16:9">
<iframe src="https://player.vimeo.com/video/1053647?title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
<iframe
src="https://player.vimeo.com/video/1053647?title=0&byline=0&portrait=0"
frameborder="0"
allow="autoplay; fullscreen"
allowfullscreen
></iframe>
</sl-responsive-media>
```
@ -65,7 +76,12 @@ import { SlResponsiveMedia } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlResponsiveMedia aspect-ratio="16:9">
<iframe src="https://player.vimeo.com/video/1053647?title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen />
<iframe
src="https://player.vimeo.com/video/1053647?title=0&byline=0&portrait=0"
frameborder="0"
allow="autoplay; fullscreen"
allowfullscreen
/>
</SlResponsiveMedia>
);
```

20
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-select>
<br>
<br />
<sl-button data-option="option-1">Set 1</sl-button>
<sl-button data-option="option-2">Set 2</sl-button>
@ -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-select>
<br>
<br />
<sl-select placeholder="Medium" size="medium" multiple>
<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-select>
<br>
<br />
<sl-select placeholder="Large" size="large" multiple>
<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.
```html preview
<sl-select
label="Experience"
help-text="Please tell us your skill level."
>
<sl-select label="Experience" help-text="Please tell us your skill level.">
<sl-menu-item value="1">Novice</sl-menu-item>
<sl-menu-item value="2">Intermediate</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';
const App = () => (
<SlSelect
label="Experience"
help-text="Please tell us your skill level."
>
<SlSelect label="Experience" help-text="Please tell us your skill level.">
<SlMenuItem value="1">Novice</SlMenuItem>
<SlMenuItem value="2">Intermediate</SlMenuItem>
<SlMenuItem value="3">Advanced</SlMenuItem>
@ -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-icon name="chat" slot="suffix"></sl-icon>
</sl-select>
<br>
<br />
<sl-select placeholder="Medium" size="medium">
<sl-icon name="house" slot="prefix"></sl-icon>
<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-icon name="chat" slot="suffix"></sl-icon>
</sl-select>
<br>
<br />
<sl-select placeholder="Large" size="large">
<sl-icon name="house" slot="prefix"></sl-icon>
<sl-menu-item value="option-1">Option 1</sl-menu-item>

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

@ -155,10 +155,8 @@ const App = () => (
<div className="skeleton-effects">
<SlSkeleton effect="none" />
None
<SlSkeleton effect="sheen" />
Sheen
<SlSkeleton effect="pulse" />
Pulse
</div>
@ -252,7 +250,7 @@ Set a matching width and height to make a circle, square, or rounded avatar skel
display: inline-block;
width: 3rem;
height: 3rem;
margin-right: .5rem;
margin-right: 0.5rem;
}
.skeleton-avatars sl-skeleton:nth-child(1) {
@ -333,7 +331,20 @@ Use the `--border-radius` custom property to make circles, squares, and rectangl
.skeleton-shapes .cross::part(indicator) {
--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) {
@ -342,7 +353,7 @@ Use the `--border-radius` custom property to make circles, squares, and rectangl
}
.skeleton-shapes sl-skeleton:not(:last-child) {
margin-right: .5rem;
margin-right: 0.5rem;
}
</style>
```
@ -428,12 +439,7 @@ const css = `
}
`;
const App = () => (
<SlSkeleton
effect="sheen"
style={{ '--color': 'tomato', '--sheen-color': '#ffb094' }}
/>
);
const App = () => <SlSkeleton effect="sheen" style={{ '--color': 'tomato', '--sheen-color': '#ffb094' }} />;
```
[component-metadata:sl-skeleton]

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

@ -11,9 +11,7 @@ Spinners are used to show the progress of an indeterminate operation.
```jsx react
import { SlSpinner } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlSpinner />
);
const App = () => <SlSpinner />;
```
## Examples

161
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
<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
</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
</div>
</sl-split-panel>
@ -20,22 +26,28 @@ import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlSplitPanel>
<div slot="start" style={{
<div
slot="start"
style={{
height: '200px',
background: 'var(--sl-color-neutral-50)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}>
}}
>
Start
</div>
<div slot="end" style={{
<div
slot="end"
style={{
height: '200px',
background: 'var(--sl-color-neutral-50)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}>
}}
>
End
</div>
</SlSplitPanel>
@ -50,10 +62,16 @@ To set the initial position, use the `position` attribute. If no position is pro
```html preview
<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
</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
</div>
</sl-split-panel>
@ -65,10 +83,16 @@ To set the initial position in pixels instead of a percentage, use the `position
```html preview
<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
</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
</div>
</sl-split-panel>
@ -113,10 +137,16 @@ Add the `vertical` attribute to render the split panel in a vertical orientation
```html preview
<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
</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
</div>
</sl-split-panel>
@ -162,10 +192,16 @@ To snap panels at specific positions while dragging, add the `snap` attribute wi
```html preview
<div class="split-panel-snapping">
<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
</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
</div>
</sl-split-panel>
@ -273,10 +309,16 @@ Add the `disabled` attribute to prevent the divider from being repositioned.
```html preview
<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
</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
</div>
</sl-split-panel>
@ -324,10 +366,16 @@ Try resizing the example below with each option and notice how the panels respon
```html preview
<div class="split-panel-primary">
<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
</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
</div>
</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 select = container.querySelector('sl-select');
select.addEventListener('sl-change', () => splitPanel.primary = select.value);
select.addEventListener('sl-change', () => (splitPanel.primary = select.value));
</script>
```
@ -407,10 +455,16 @@ This examples demonstrates how you can ensure both panels are at least 150px usi
```html preview
<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
</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
</div>
</sl-split-panel>
@ -455,15 +509,24 @@ Create complex layouts that can be repositioned independently by nesting split p
```html preview
<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
</div>
<div slot="end">
<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
</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
</div>
</sl-split-panel>
@ -527,10 +590,16 @@ You can target the `divider` part to apply CSS properties to the divider. To add
```html preview
<sl-split-panel style="--divider-width: 20px;">
<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
</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
</div>
</sl-split-panel>
@ -542,22 +611,28 @@ import { SlSplitPanel, SlIcon } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlSplitPanel style={{ '--divider-width': '20px' }}>
<SlIcon slot="handle" name="grip-vertical" />
<div slot="start" style={{
<div
slot="start"
style={{
height: '200px',
background: 'var(--sl-color-neutral-50)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}>
}}
>
Start
</div>
<div slot="end" style={{
<div
slot="end"
style={{
height: '200px',
background: 'var(--sl-color-neutral-50)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}>
}}
>
End
</div>
</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">
<sl-split-panel>
<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
</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
</div>
</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);
background: var(--sl-color-pink-600);
color: var(--sl-color-neutral-0);
padding: .5rem .125rem;
padding: 0.5rem 0.125rem;
}
.split-panel-handle sl-split-panel::part(divider):focus-visible {
@ -642,22 +723,28 @@ const App = () => (
<div className="split-panel-handle">
<SlSplitPanel>
<SlIcon slot="handle" name="grip-vertical" />
<div slot="start" style={{
<div
slot="start"
style={{
height: '200px',
background: 'var(--sl-color-neutral-50)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}>
}}
>
Start
</div>
<div slot="end" style={{
<div
slot="end"
style={{
height: '200px',
background: 'var(--sl-color-neutral-50)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}>
}}
>
End
</div>
</SlSplitPanel>

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

@ -11,9 +11,7 @@ Switches allow the user to toggle an option on or off.
```jsx react
import { SlSwitch } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlSwitch>Switch</SlSwitch>
);
const App = () => <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.
@ -31,9 +29,7 @@ Use the `checked` attribute to activate the switch.
```jsx react
import { SlSwitch } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlSwitch checked>Checked</SlSwitch>
);
const App = () => <SlSwitch checked>Checked</SlSwitch>;
```
### Disabled
@ -47,9 +43,7 @@ Use the `disabled` attribute to disable the switch.
```jsx react
import { SlSwitch } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlSwitch disabled>Disabled</SlSwitch>
);
const App = () => <SlSwitch disabled>Disabled</SlSwitch>;
```
### Custom Size

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

@ -25,10 +25,18 @@ import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/rea
const App = () => (
<SlTabGroup>
<SlTab slot="nav" panel="general">General</SlTab>
<SlTab slot="nav" panel="custom">Custom</SlTab>
<SlTab slot="nav" panel="advanced">Advanced</SlTab>
<SlTab slot="nav" panel="disabled" disabled>Disabled</SlTab>
<SlTab slot="nav" panel="general">
General
</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="custom">This is the custom tab panel.</SlTabPanel>
@ -63,10 +71,18 @@ import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/rea
const App = () => (
<SlTabGroup placement="bottom">
<SlTab slot="nav" panel="general">General</SlTab>
<SlTab slot="nav" panel="custom">Custom</SlTab>
<SlTab slot="nav" panel="advanced">Advanced</SlTab>
<SlTab slot="nav" panel="disabled" disabled>Disabled</SlTab>
<SlTab slot="nav" panel="general">
General
</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="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>
```
```jsx react
import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlTabGroup placement="start">
<SlTab slot="nav" panel="general">General</SlTab>
<SlTab slot="nav" panel="custom">Custom</SlTab>
<SlTab slot="nav" panel="advanced">Advanced</SlTab>
<SlTab slot="nav" panel="disabled" disabled>Disabled</SlTab>
<SlTab slot="nav" panel="general">
General
</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="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>
```
```jsx react
import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlTabGroup placement="end">
<SlTab slot="nav" panel="general">General</SlTab>
<SlTab slot="nav" panel="custom">Custom</SlTab>
<SlTab slot="nav" panel="advanced">Advanced</SlTab>
<SlTab slot="nav" panel="disabled" disabled>Disabled</SlTab>
<SlTab slot="nav" panel="general">
General
</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="custom">This is the custom tab panel.</SlTabPanel>
@ -206,10 +236,18 @@ const App = () => {
return (
<SlTabGroup className="tabs-closable" onSlClose={handleClose}>
<SlTab slot="nav" panel="general">General</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>
<SlTab slot="nav" panel="general">
General
</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="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 = () => (
<SlTabGroup>
<SlTab slot="nav" panel="tab-1">Tab 1</SlTab>
<SlTab slot="nav" panel="tab-2">Tab 2</SlTab>
<SlTab slot="nav" panel="tab-3">Tab 3</SlTab>
<SlTab slot="nav" panel="tab-4">Tab 4</SlTab>
<SlTab slot="nav" panel="tab-5">Tab 5</SlTab>
<SlTab slot="nav" panel="tab-6">Tab 6</SlTab>
<SlTab slot="nav" panel="tab-7">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>
<SlTab slot="nav" panel="tab-1">
Tab 1
</SlTab>
<SlTab slot="nav" panel="tab-2">
Tab 2
</SlTab>
<SlTab slot="nav" panel="tab-3">
Tab 3
</SlTab>
<SlTab slot="nav" panel="tab-4">
Tab 4
</SlTab>
<SlTab slot="nav" panel="tab-5">
Tab 5
</SlTab>
<SlTab slot="nav" panel="tab-6">
Tab 6
</SlTab>
<SlTab slot="nav" panel="tab-7">
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-2">Tab panel 2</SlTabPanel>
@ -343,10 +421,18 @@ import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/rea
const App = () => (
<SlTabGroup activation="manual">
<SlTab slot="nav" panel="general">General</SlTab>
<SlTab slot="nav" panel="custom">Custom</SlTab>
<SlTab slot="nav" panel="advanced">Advanced</SlTab>
<SlTab slot="nav" panel="disabled" disabled>Disabled</SlTab>
<SlTab slot="nav" panel="general">
General
</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="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 = () => (
<SlTabGroup>
<SlTab slot="nav" panel="general">General</SlTab>
<SlTab slot="nav" panel="custom">Custom</SlTab>
<SlTab slot="nav" panel="advanced">Advanced</SlTab>
<SlTab slot="nav" panel="disabled" disabled>Disabled</SlTab>
<SlTab slot="nav" panel="general">
General
</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="custom">This is the custom tab panel.</SlTabPanel>

19
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>
```
```jsx react
import { SlTag } from '@shoelace-style/shoelace/dist/react';
@ -66,9 +65,15 @@ import { SlTag } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlTag size="small" pill>Small</SlTag>
<SlTag size="medium" pill>Medium</SlTag>
<SlTag size="large" pill>Large</SlTag>
<SlTag size="small" pill>
Small
</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 => {
const tag = event.target;
tag.style.opacity = '0';
setTimeout(() => tag.style.opacity = '1', 2000);
setTimeout(() => (tag.style.opacity = '1'), 2000);
});
</script>
@ -114,7 +119,7 @@ const App = () => {
function handleRemove(event) {
const tag = event.target;
tag.style.opacity = '0';
setTimeout(() => tag.style.opacity = '1', 2000);
setTimeout(() => (tag.style.opacity = '1'), 2000);
}
return (
@ -135,7 +140,7 @@ const App = () => {
<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
import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlTextarea />
);
const App = () => <SlTextarea />;
```
?> This component works with standard `<form>` elements. Please refer to the section on [form controls](/getting-started/form-controls) to learn more about form submission and client-side validation.
@ -31,9 +29,7 @@ Use the `rows` attribute to change the number of text rows that get shown.
```jsx react
import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlTextarea rows={2} />
);
const App = () => <SlTextarea rows={2} />;
```
### Placeholders
@ -47,9 +43,7 @@ Use the `placeholder` attribute to add a placeholder.
```jsx react
import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlTextarea placeholder="Type something" />
);
const App = () => <SlTextarea placeholder="Type something" />;
```
### Filled Textareas
@ -63,9 +57,7 @@ Add the `filled` attribute to draw a filled textarea.
```jsx react
import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlTextarea placeholder="Type something" filled />
);
const App = () => <SlTextarea placeholder="Type something" filled />;
```
### Disabled
@ -79,9 +71,7 @@ Use the `disabled` attribute to disable a textarea.
```jsx react
import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlTextarea placeholder="Textarea" disabled />
);
const App = () => <SlTextarea placeholder="Textarea" disabled />;
```
### Sizes
@ -90,9 +80,9 @@ Use the `size` attribute to change a textarea's size.
```html preview
<sl-textarea placeholder="Small" size="small"></sl-textarea>
<br>
<br />
<sl-textarea placeholder="Medium" size="medium"></sl-textarea>
<br>
<br />
<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
import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlTextarea label="Comments" />
);
const App = () => <SlTextarea label="Comments" />;
```
### 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.
```html preview
<sl-textarea
label="Feedback"
help-text="Please tell us what you think."
>
</sl-textarea>
<sl-textarea label="Feedback" help-text="Please tell us what you think."> </sl-textarea>
```
```jsx react
import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlTextarea
label="Feedback"
help-text="Please tell us what you think."
/>
);
const App = () => <SlTextarea label="Feedback" help-text="Please tell us what you think." />;
```
### Prevent Resizing
@ -160,9 +139,7 @@ By default, textareas can be resized vertically by the user. To prevent resizing
```jsx react
import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlTextarea resize="none" />
);
const App = () => <SlTextarea resize="none" />;
```
### Expand with Content
@ -176,9 +153,7 @@ Textareas will automatically resize to expand to fit their content when `resize`
```jsx react
import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlTextarea resize="auto" />
);
const App = () => <SlTextarea resize="auto" />;
```
[component-metadata:sl-textarea]

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

@ -270,10 +270,7 @@ const App = () => {
return (
<>
<SlButton
style={{ marginRight: '4rem' }}
onClick={() => setOpen(!open)}
>
<SlButton style={{ marginRight: '4rem' }} onClick={() => setOpen(!open)}>
Toggle Manually
</SlButton>
@ -331,9 +328,7 @@ Use the `content` slot to create tooltips with HTML content. Tooltips are design
```html preview
<sl-tooltip>
<div slot="content">
I'm not <strong>just</strong> a tooltip, I'm a <em>tooltip</em> with HTML!
</div>
<div slot="content">I'm not <strong>just</strong> a tooltip, I'm a <em>tooltip</em> with HTML!</div>
<sl-button>Hover me</sl-button>
</sl-tooltip>

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

6
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
<!-- This doesn't work -->
<sl-input v-model="name">
<!-- This works, but it's a bit longer -->
<sl-input :value="name" @input="name = $event.target.value">
<sl-input :value="name" @input="name = $event.target.value"></sl-input
></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.
@ -86,7 +86,7 @@ app.mount('#app');
Now you can use the `v-sl-model` directive to keep your data in sync!
```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)

66
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
<form class="input-validation-required">
<sl-input name="name" label="Name" required></sl-input>
<br>
<br />
<sl-select label="Favorite Animal" clearable required>
<sl-menu-item value="birds">Birds</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="other">Other</sl-menu-item>
</sl-select>
<br>
<br />
<sl-textarea name="comment" label="Comment" required></sl-textarea>
<br>
<br />
<sl-checkbox required>Check me before submitting</sl-checkbox>
<br><br>
<br /><br />
<sl-button type="submit" variant="primary">Submit</sl-button>
</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');
form.addEventListener('submit', event => {
event.preventDefault();
alert('All fields are valid!')
alert('All fields are valid!');
});
</script>
```
```jsx react
import {
SlButton,
SlCheckbox,
SlInput,
SlMenuItem,
SlSelect,
SlTextarea
} from '@shoelace-style/shoelace/dist/react';
import { SlButton, SlCheckbox, SlInput, SlMenuItem, SlSelect, SlTextarea } from '@shoelace-style/shoelace/dist/react';
const App = () => {
function handleSubmit(event) {
@ -103,8 +96,11 @@ const App = () => {
<SlTextarea name="comment" label="Comment" required></SlTextarea>
<br />
<SlCheckbox required>Check me before submitting</SlCheckbox>
<br /><br />
<SlButton type="submit" variant="primary">Submit</SlButton>
<br />
<br />
<SlButton type="submit" variant="primary">
Submit
</SlButton>
</form>
);
};
@ -117,7 +113,7 @@ To restrict a value to a specific [pattern](https://developer.mozilla.org/en-US/
```html preview
<form class="input-validation-pattern">
<sl-input name="letters" required label="Letters" pattern="[A-Za-z]+"></sl-input>
<br>
<br />
<sl-button type="submit" variant="primary">Submit</sl-button>
</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');
form.addEventListener('submit', event => {
event.preventDefault();
alert('All fields are valid!')
alert('All fields are valid!');
});
</script>
```
@ -143,7 +139,9 @@ const App = () => {
<form onSubmit={handleSubmit}>
<SlInput name="letters" required label="Letters" pattern="[A-Za-z]+" />
<br />
<SlButton type="submit" variant="primary">Submit</SlButton>
<SlButton type="submit" variant="primary">
Submit
</SlButton>
</form>
);
};
@ -156,9 +154,9 @@ Some input types will automatically trigger constraints, such as `email` and `ur
```html preview
<form class="input-validation-type">
<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>
<br>
<br />
<sl-button type="submit" variant="primary">Submit</sl-button>
</form>
@ -166,7 +164,7 @@ Some input types will automatically trigger constraints, such as `email` and `ur
const form = document.querySelector('.input-validation-type');
form.addEventListener('submit', event => {
event.preventDefault();
alert('All fields are valid!')
alert('All fields are valid!');
});
</script>
```
@ -186,7 +184,9 @@ const App = () => {
<br />
<SlInput variant="url" label="URL" placeholder="https://example.com/" required />
<br />
<SlButton type="submit" variant="primary">Submit</SlButton>
<SlButton type="submit" variant="primary">
Submit
</SlButton>
</form>
);
};
@ -199,7 +199,7 @@ To create a custom validation error, use the `setCustomValidity` method. The for
```html preview
<form class="input-validation-custom">
<sl-input label="Type 'shoelace'" required></sl-input>
<br>
<br />
<sl-button type="submit" variant="primary">Submit</sl-button>
</form>
@ -209,14 +209,14 @@ To create a custom validation error, use the `setCustomValidity` method. The for
form.addEventListener('submit', event => {
event.preventDefault();
alert('All fields are valid!')
alert('All fields are valid!');
});
input.addEventListener('sl-input', () => {
if (input.value === 'shoelace') {
input.setCustomValidity('');
} 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>
@ -236,7 +236,7 @@ const App = () => {
if (event.target.value === 'shoelace') {
input.current.setCustomValidity('');
} 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 (
<form onSubmit={handleSubmit}>
<SlInput
ref={input}
label="Type 'shoelace'"
required
value={value}
onSlInput={handleInput}
/>
<SlInput ref={input} label="Type 'shoelace'" required value={value} onSlInput={handleInput} />
<br />
<SlButton type="submit" variant="primary">Submit</SlButton>
<SlButton type="submit" variant="primary">
Submit
</SlButton>
</form>
);
};
@ -330,7 +326,7 @@ Instead, toggle a class and target it in your stylesheet as shown below.
<style>
sl-input.invalid {
...
...;
}
</style>
```

21
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.
```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>
```
@ -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.
```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>
```
@ -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.
```html
<link rel="stylesheet" media="(prefers-color-scheme:light)" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/light.css">
<link rel="stylesheet" media="(prefers-color-scheme:dark)"
<link
rel="stylesheet"
media="(prefers-color-scheme:light)"
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');">
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>
```
@ -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.
```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>
```
@ -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.
```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">
import '@shoelace-style/shoelace/dist/components/button/button.js';

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

@ -14,6 +14,7 @@
- Open source 😸
Designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska).
</div>
<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.">
@ -32,7 +33,7 @@ Designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska).
Add the following code to your page.
```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>
```
@ -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).
## 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!
@ -73,11 +73,11 @@ With Shoelace, you can:
- Incrementally adopt components as needed (no need to ditch your framework)
- 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.
<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

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

@ -26,7 +26,7 @@ To activate a theme, import it and apply the theme's class to the `<html>` eleme
```html
<html class="sl-theme-dark">
<head>
<link rel="stylesheet" href="path/to/shoelace/dist/themes/dark.css">
<link rel="stylesheet" href="path/to/shoelace/dist/themes/dark.css" />
</head>
<body>
@ -44,8 +44,8 @@ You can activate themes on various containers throughout the page. This example
```html
<html>
<head>
<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/light.css" />
<link rel="stylesheet" href="path/to/shoelace/dist/themes/dark.css" />
</head>
<body>
@ -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.
```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.

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

@ -132,7 +132,7 @@ A clever way to use this method is to hide the `<body>` with `opacity: 0` and ad
body.ready {
opacity: 1;
transition: .25s opacity;
transition: 0.25s opacity;
}
</style>

1
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
- 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)
- 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

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)
## 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).

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

@ -3,7 +3,7 @@
Spacing tokens are used to provide consistent spacing between components and content throughout your app.
| 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-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> |

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

@ -17,7 +17,7 @@ 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.
| 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-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> |
@ -40,7 +40,7 @@ Font sizes use `rem` units so they scale with the base font size. The pixel valu
## Letter Spacing
| 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-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> |
@ -50,7 +50,7 @@ Font sizes use `rem` units so they scale with the base font size. The pixel valu
## Line Height
| 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-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> |

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

@ -3,7 +3,7 @@
Z-indexes are used to stack components in a logical manner.
| Token | Value |
| ---------------------------- | ----- |
| -------------------------- | ----- |
| `--sl-z-index-drawer` | 700 |
| `--sl-z-index-dialog` | 800 |
| `--sl-z-index-dropdown` | 900 |

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

305
package-lock.json wygenerowano
Wyświetl plik

@ -43,6 +43,7 @@
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-lit": "^1.6.1",
"eslint-plugin-lit-a11y": "^2.2.0",
"eslint-plugin-markdown": "^2.2.1",
"eslint-plugin-wc": "^1.3.2",
"front-matter": "^4.0.2",
"get-port": "^6.1.0",
@ -1306,6 +1307,15 @@
"@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": {
"version": "1.3.2",
"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",
"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": {
"version": "7.4.7",
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-7.4.7.tgz",
@ -3043,6 +3059,36 @@
"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": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
@ -5561,6 +5607,21 @@
"integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
"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": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/eslint-plugin-wc/-/eslint-plugin-wc-1.3.2.tgz",
@ -7453,6 +7514,30 @@
"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": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@ -7550,6 +7635,16 @@
"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": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
@ -7613,6 +7708,16 @@
"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": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz",
@ -9131,6 +9236,33 @@
"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": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@ -9155,6 +9287,26 @@
"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": {
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
@ -10519,6 +10671,24 @@
"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": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/parse-filepath/-/parse-filepath-1.0.2.tgz",
@ -13399,6 +13569,19 @@
"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": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
@ -15236,6 +15419,15 @@
"@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": {
"version": "1.3.2",
"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",
"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": {
"version": "7.4.7",
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-7.4.7.tgz",
@ -16588,6 +16786,24 @@
"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": {
"version": "0.7.0",
"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": {
"version": "1.3.2",
"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-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": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@ -19963,6 +20204,12 @@
"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": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
@ -19999,6 +20246,12 @@
"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": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz",
@ -21178,6 +21431,25 @@
"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": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@ -21196,6 +21468,16 @@
"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
"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": {
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
@ -22223,6 +22505,20 @@
"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": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/parse-filepath/-/parse-filepath-1.0.2.tgz",
@ -24465,6 +24761,15 @@
"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": {
"version": "0.1.2",
"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:check": "prettier --check --loglevel warn .",
"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",
"create": "plop --plopfile scripts/plop/plopfile.js",
"test": "web-test-runner",
@ -86,6 +86,7 @@
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-lit": "^1.6.1",
"eslint-plugin-lit-a11y": "^2.2.0",
"eslint-plugin-markdown": "^2.2.1",
"eslint-plugin-wc": "^1.3.2",
"front-matter": "^4.0.2",
"get-port": "^6.1.0",
@ -107,5 +108,11 @@
"ttypescript": "^1.5.13",
"typescript": "^4.5.5",
"typescript-transform-paths": "^3.3.1"
},
"lint-staged": {
"*.{ts,js}": [
"eslint --max-warnings 0 --cache --fix",
"prettier --write"
]
}
}