diff --git a/.prettierignore b/.prettierignore
index a9772565..104baae5 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,10 +1,8 @@
*.hbs
-*.md
.cache
.github
cspell.json
dist
-docs/*.md
docs/search.json
src/components/icon/icons
src/react/index.ts
diff --git a/docs/_sidebar.md b/docs/_sidebar.md
index 06e3a1d4..4cf6a835 100644
--- a/docs/_sidebar.md
+++ b/docs/_sidebar.md
@@ -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 @@
- 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)
\ No newline at end of file
+ - [Integrating with Rails](/tutorials/integrating-with-rails)
diff --git a/docs/components/alert.md b/docs/components/alert.md
index 3cab705a..9202f081 100644
--- a/docs/components/alert.md
+++ b/docs/components/alert.md
@@ -33,40 +33,40 @@ Set the `variant` attribute to change the alert's variant.
```html preview
- This is super informative
+ This is super informative
You can tell by how pretty the alert is.
-
+
- Your changes have been saved
+ Your changes have been saved
You can safely exit the app now.
-
+
- Your settings have been updated
+ Your settings have been updated
Settings will take affect on next login.
-
+
- Your session has ended
+ Your session has ended
Please login again to continue.
-
+
- Your account has been deleted
- We're very sorry to see you go!
+ Your account has been deleted
+ We're very sorry to see you go!
```
@@ -77,7 +77,8 @@ const App = () => (
<>
- This is super informative
+ This is super informative
+
You can tell by how pretty the alert is.
@@ -85,7 +86,8 @@ const App = () => (
- Your changes have been saved
+ Your changes have been saved
+
You can safely exit the app now.
@@ -93,7 +95,8 @@ const App = () => (
- Your settings have been updated
+ Your settings have been updated
+
Settings will take affect on next login.
@@ -101,7 +104,8 @@ const App = () => (
- Your session has ended
+ Your session has ended
+
Please login again to continue.
@@ -109,8 +113,9 @@ const App = () => (
- Your account has been deleted
- We're very sorry to see you go!
+ Your account has been deleted
+
+ We're very sorry to see you go!
>
);
@@ -129,7 +134,7 @@ Add the `closable` attribute to show a close button that will hide the alert.
```
@@ -147,11 +152,7 @@ const App = () => {
}
return (
-
+
You can close this alert any time!
@@ -164,9 +165,7 @@ const App = () => {
Icons are optional. Simply omit the `icon` slot if you don't want them.
```html preview
-
- Nothing fancy here, just a simple alert.
-
+ Nothing fancy here, just a simple 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 (
<>
- setOpen(true)}>Show Alert
+ setOpen(true)}>
+ Show Alert
+
- setOpen(false)}
- >
+ setOpen(false)}>
This alert will automatically hide itself after three seconds, unless you interact with it.
@@ -261,34 +252,34 @@ You should always use the `closable` attribute so users can dismiss the notifica
NeutralWarningDanger
-
+
- This is super informative
+ This is super informative
You can tell by how pretty the alert is.
- Your changes have been saved
+ Your changes have been saved
You can safely exit the app now.
- Your settings have been updated
+ Your settings have been updated
Settings will take affect on next login.
- Your session has ended
+ Your session has ended
Please login again to continue.
- Your account has been deleted
+ Your account has been deleted
We're very sorry to see you go!
@@ -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 = () => {
- This is super informative
+ This is super informative
+
You can tell by how pretty the alert is.
- Your changes have been saved
+ Your changes have been saved
+
You can safely exit the app now.
- Your settings have been updated
+ Your settings have been updated
+
Settings will take affect on next login.
- Your session has ended
+ Your session has ended
+
Please login again to continue.
- Your account has been deleted
+ Your account has been deleted
+
We're very sorry to see you go!
>
@@ -399,7 +391,7 @@ For convenience, you can create a utility that emits toast notifications with a
const div = document.createElement('div');
div.textContent = html;
return div.innerHTML;
- }
+ }
// Custom function to emit toast notifications
function notify(message, variant = 'primary', icon = 'info-circle', duration = 3000) {
diff --git a/docs/components/animated-image.md b/docs/components/animated-image.md
index 5f81730e..4f12320b 100644
--- a/docs/components/animated-image.md
+++ b/docs/components/animated-image.md
@@ -5,8 +5,8 @@
A component for displaying animated GIFs and WEBPs that play and pause on interaction.
```html preview
-
```
@@ -16,7 +16,7 @@ import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react';
const App = () => (
);
@@ -31,8 +31,8 @@ const App = () => (
Both GIF and WEBP images are supported.
```html preview
-
```
@@ -41,10 +41,7 @@ Both GIF and WEBP images are supported.
import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react';
const App = () => (
-
+
);
```
@@ -53,8 +50,8 @@ const App = () => (
To set a custom size, apply a width and/or height to the host element.
```html preview
-
@@ -66,7 +63,7 @@ import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react';
const App = () => (
@@ -78,8 +75,8 @@ const App = () => (
You can change the appearance and location of the control box by targeting the `control-box` part in your styles.
```html preview
-
@@ -116,7 +113,7 @@ const App = () => (
<>
diff --git a/docs/components/animation.md b/docs/components/animation.md
index 6e367f18..29244a39 100644
--- a/docs/components/animation.md
+++ b/docs/components/animation.md
@@ -41,13 +41,21 @@ const css = `
const App = () => (
<>
- setPlay(false)}
- >
+ setPlay(false)}>
setPlay(true)}>
Click me
diff --git a/docs/components/avatar.md b/docs/components/avatar.md
index 61b3f571..2fa905be 100644
--- a/docs/components/avatar.md
+++ b/docs/components/avatar.md
@@ -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 = () => (
-
-);
+const App = () => ;
```
## 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 = () => (
-
-);
+const App = () => ;
```
### Custom Icons
@@ -124,22 +120,22 @@ You can group avatars with a few lines of CSS.
```html preview
@@ -147,12 +165,16 @@ const App = () => (
Warnings
- 8
+
+ 8
+
Errors
- 6
+
+ 6
+
>
);
@@ -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
-
+MessagesComments 4Replies 12
@@ -174,7 +198,7 @@ When including badges in menu items, use the `suffix` slot to make sure they're
import { SlBadge, SlButton, SlMenu, SlMenuItem, SlMenuLabel } from '@shoelace-style/shoelace/dist/react';
const App = () => (
- (
}}
>
Messages
- Comments 4
- Replies 12
+
+ Comments
+
+ 4
+
+
+
+ Replies
+
+ 12
+
+
);
```
diff --git a/docs/components/breadcrumb.md b/docs/components/breadcrumb.md
index b1c554d8..6684b447 100644
--- a/docs/components/breadcrumb.md
+++ b/docs/components/breadcrumb.md
@@ -38,21 +38,13 @@ For websites, you'll probably want to use links instead. You can make any breadc
```html preview
-
- Homepage
-
+ Homepage
-
- Our Services
-
+ Our Services
-
- Digital Media
-
+ Digital Media
-
- Web Design
-
+ Web Design
```
@@ -61,21 +53,13 @@ import { SlBreadcrumb, SlBreadcrumbItem } from '@shoelace-style/shoelace/dist/re
const App = () => (
-
- Homepage
-
+ Homepage
-
- Our Services
-
+ Our Services
-
- Digital Media
-
+ Digital Media
-
- Web Design
-
+ Web Design
);
```
@@ -89,25 +73,25 @@ Use the `separator` slot to change the separator that goes between breadcrumb it
FirstSecond
- Third
+ Third
-
+ FirstSecond
- Third
+ Third
-
+ /FirstSecond
- Third
+ Third
```
@@ -121,7 +105,7 @@ const App = () => (
FirstSecond
- Third
+ Third
@@ -130,7 +114,7 @@ const App = () => (
FirstSecond
- Third
+ Third
@@ -139,7 +123,7 @@ const App = () => (
/FirstSecond
- Third
+ Third
>
);
@@ -225,15 +209,15 @@ Dropdown menus can be placed in a prefix or suffix slot to provide additional op
Web DevelopmentMarketing
-
+
```
```jsx react
-import {
- SlBreadcrumb,
- SlBreadcrumbItem,
+import {
+ SlBreadcrumb,
+ SlBreadcrumbItem,
SlButton,
SlDropdown,
SlIcon,
@@ -257,7 +241,7 @@ const App = () => (
Web DevelopmentMarketing
-
+
);
diff --git a/docs/components/button-group.md b/docs/components/button-group.md
index 8b081524..6b415f88 100644
--- a/docs/components/button-group.md
+++ b/docs/components/button-group.md
@@ -37,7 +37,7 @@ All button sizes are supported, but avoid mixing sizes within the same button gr
Right
-
+
Left
@@ -45,7 +45,7 @@ All button sizes are supported, but avoid mixing sizes within the same button gr
Right
-
+
Left
@@ -65,7 +65,8 @@ const App = () => (
Right
-
+
+ Left
@@ -73,7 +74,8 @@ const App = () => (
Right
-
+
+ Left
@@ -95,7 +97,7 @@ Theme buttons are supported through the button's `type` attribute.
Right
-
+
Left
@@ -103,7 +105,7 @@ Theme buttons are supported through the button's `type` attribute.
Right
-
+
Left
@@ -111,7 +113,7 @@ Theme buttons are supported through the button's `type` attribute.
Right
-
+
Left
@@ -119,7 +121,7 @@ Theme buttons are supported through the button's `type` attribute.
Right
-
+
Left
@@ -139,7 +141,8 @@ const App = () => (
Right
-
+
+ Left
@@ -147,7 +150,8 @@ const App = () => (
Right
-
+
+ Left
@@ -155,7 +159,8 @@ const App = () => (
Right
-
+
+ Left
@@ -163,7 +168,8 @@ const App = () => (
Right
-
+
+ Left
@@ -185,7 +191,7 @@ Pill buttons are supported through the button's `pill` attribute.
Right
-
+
Left
@@ -193,7 +199,7 @@ Pill buttons are supported through the button's `pill` attribute.
Right
-
+
Left
@@ -208,25 +214,45 @@ import { SlButton, SlButtonGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
- Left
- Center
- Right
+
+ Left
+
+
+ Center
+
+
+ Right
+
-
+
+
- Left
- Center
- Right
+
+ Left
+
+
+ Center
+
+
+ Right
+
-
+
+
- Left
- Center
- Right
+
+ Left
+
+
+ Center
+
+
+ Right
+
>
);
@@ -237,7 +263,7 @@ const App = () => (
Dropdowns can be placed inside button groups as long as the trigger is an `` element.
```html preview
-
+ButtonButton
@@ -252,20 +278,16 @@ Dropdowns can be placed inside button groups as long as the trigger is an ` (
-
+ ButtonButton
- Dropdown
+
+ Dropdown
+ Item 1Item 2
@@ -281,7 +303,7 @@ const App = () => (
Create a split button using a button and a dropdown.
```html preview
-
+Save
@@ -295,16 +317,10 @@ 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 = () => (
-
+ Save
@@ -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 = () => (
+
+
@@ -343,9 +385,15 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
- Small
- Medium
- Large
+
+ Small
+
+
+ Medium
+
+
+ Large
+
>
);
```
@@ -368,12 +416,24 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
- Default
- Primary
- Success
- Neutral
- Warning
- Danger
+
+ Default
+
+
+ Primary
+
+
+ Success
+
+
+ Neutral
+
+
+ Warning
+
+
+ Danger
+
>
);
```
@@ -396,12 +456,29 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
- Default
- Primary
- Success
- Neutral
- Warning
- Danger
+
+ Default
+
+
+
+ Primary
+
+
+
+ Success
+
+
+
+ Neutral
+
+
+
+ Warning
+
+
+
+ Danger
+
>
);
```
@@ -418,7 +495,7 @@ This example demonstrates how to style buttons using a custom class. This is the
/* Set design tokens for height and border width */
--sl-input-height-medium: 48px;
--sl-input-border-width: 4px;
-
+
border-radius: 0;
background-color: #ff1493;
border-top-color: #ff7ac1;
diff --git a/docs/components/card.md b/docs/components/card.md
index 4d4b0fef..4ecac543 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -6,14 +6,14 @@ Cards can be used to group related subjects in a container.
```html preview
-
+ />
- Mittens
- This kitten is as cute as he is playful. Bring him home today!
+ Mittens
+ This kitten is as cute as he is playful. Bring him home today!
6 weeks old
@@ -31,20 +31,16 @@ Cards can be used to group related subjects in a container.
color: var(--sl-color-neutral-500);
}
- .card-overview [slot="footer"] {
- display: flex;
- justify-content: space-between;
+ .card-overview [slot='footer'] {
+ display: flex;
+ justify-content: space-between;
align-items: center;
}
```
```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 {
@@ -65,18 +61,20 @@ const css = `
const App = () => (
<>
-
-
- Mittens
- This kitten is as cute as he is playful. Bring him home today!
+ Mittens
+
+ This kitten is as cute as he is playful. Bring him home today!
+
6 weeks old
-
- More Info
+
+ More Info
+
@@ -144,9 +142,9 @@ Headers can be used to display titles and more.
max-width: 300px;
}
- .card-header [slot="header"] {
- display: flex;
- align-items: center;
+ .card-header [slot='header'] {
+ display: flex;
+ align-items: center;
justify-content: space-between;
}
@@ -188,10 +186,8 @@ const App = () => (
Header Title
-
-
This card has a header. You can put all sorts of things in it!
@@ -219,20 +215,16 @@ Footers can be used to display actions, summaries, or other relevant content.
max-width: 300px;
}
- .card-footer [slot="footer"] {
- display: flex;
- justify-content: space-between;
+ .card-footer [slot='footer'] {
+ display: flex;
+ justify-content: space-between;
align-items: center;
}
```
```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 = () => (
<>
This card has a footer. You can put all sorts of things in it!
-
- Preview
+
+ Preview
+
@@ -268,11 +261,11 @@ Cards accept an `image` slot. The image is displayed atop the card and stretches
```html preview
-
+ />
This is a kitten, but not just any kitten. This kitten likes walking along pallets.
@@ -295,9 +288,9 @@ const css = `
const App = () => (
<>
-
This is a kitten, but not just any kitten. This kitten likes walking along pallets.
diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md
index d11fa427..dbb67e37 100644
--- a/docs/components/checkbox.md
+++ b/docs/components/checkbox.md
@@ -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 = () => (
- Checkbox
-);
+const App = () => Checkbox;
```
?> This component works with standard `
```
@@ -340,14 +335,14 @@ Icons in this library are licensed under the [MIT License](https://github.com/io
-
+
-
+
@@ -380,7 +375,7 @@ Icons in this library are licensed under the [MIT License](https://github.com/mi
-
+
@@ -416,14 +411,14 @@ Icons in this library are licensed under the [Apache 2.0 License](https://github
-
+
-
+
@@ -460,13 +455,13 @@ Icons in this library are licensed under the [Apache 2.0 License](https://github
-
+
-
+
```
@@ -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,12 +493,12 @@ Icons in this library are licensed under the [Apache 2.0 License](https://github
-
+
-
+
```
diff --git a/docs/components/image-comparer.md b/docs/components/image-comparer.md
index 6fcabab7..a8cf946e 100644
--- a/docs/components/image-comparer.md
+++ b/docs/components/image-comparer.md
@@ -8,8 +8,16 @@ For best results, use images that share the same dimensions. The slider can be c
```html preview
-
-
+
+
```
@@ -18,8 +26,16 @@ import { SlImageComparer } from '@shoelace-style/shoelace/dist/react';
const App = () => (
-
-
+
+
);
```
@@ -32,8 +48,16 @@ Use the `position` attribute to set the initial position of the slider. This is
```html preview
-
-
+
+
```
@@ -42,8 +66,16 @@ import { SlImageComparer } from '@shoelace-style/shoelace/dist/react';
const App = () => (
-
-
+
+
);
```
diff --git a/docs/components/include.md b/docs/components/include.md
index 17d6cbe8..870baf14 100644
--- a/docs/components/include.md
+++ b/docs/components/include.md
@@ -15,9 +15,7 @@ The included content will be inserted into the `` element's default
```jsx react
import { SlInclude } from '@shoelace-style/shoelace/dist/react';
-const App = () => (
-
-);
+const App = () => ;
```
## Examples
@@ -33,7 +31,7 @@ If the request fails, the `sl-error` event will be emitted. In this case, `event
>
@@ -112,7 +112,7 @@ const App = () => (
### Effects
-There are two built-in effects, `sheen` and `pulse`. Effects are intentionally subtle, as they can be distracting when used extensively. The default is `none`, which displays a static, non-animated skeleton.
+There are two built-in effects, `sheen` and `pulse`. Effects are intentionally subtle, as they can be distracting when used extensively. The default is `none`, which displays a static, non-animated skeleton.
```html preview
@@ -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));
```
@@ -358,8 +406,8 @@ const App = () => {
return (
<>
-
{
>
Start
-
{
- setPrimary(event.target.value)}
>
NoneStartEnd
-
+
>
);
};
@@ -407,10 +455,16 @@ This examples demonstrates how you can ensure both panels are at least 150px usi
```html preview
-
@@ -570,10 +645,16 @@ Here's a more elaborate example that changes the divider's color and width and a
-
+
Start
-
+
End
@@ -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 {
@@ -639,29 +720,35 @@ const css = `
const App = () => (
<>
-
-
-
-
- Start
-
-
- End
-
-
-
+
+
+
+
+ Start
+
+
+ End
+
+
+
>
diff --git a/docs/components/switch.md b/docs/components/switch.md
index c638b487..4ce52264 100644
--- a/docs/components/switch.md
+++ b/docs/components/switch.md
@@ -2,7 +2,7 @@
[component-header:sl-switch]
-Switches allow the user to toggle an option on or off.
+Switches allow the user to toggle an option on or off.
```html preview
Switch
@@ -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 = () => (
- Switch
-);
+const App = () => Switch;
```
?> This component works with standard `
Hover Me
-
+
);
```
diff --git a/docs/frameworks/react.md b/docs/frameworks/react.md
index 693f96c7..0419c547 100644
--- a/docs/frameworks/react.md
+++ b/docs/frameworks/react.md
@@ -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 = () => (
-
- Click me
-
-);
+const MyComponent = () => Click me;
export default MyComponent;
```
@@ -57,13 +53,8 @@ import { SlInput } from '@shoelace-style/shoelace/dist/react';
function MyComponent() {
const [value, setValue] = useState('');
- return (
- setValue(event.target.value)}
- />
- )
-};
+ return 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 (
- setValue((event.target as SlInputElement).value)}
- />
- )
-};
+ return 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()
+ }))
});
```
diff --git a/docs/frameworks/vue.md b/docs/frameworks/vue.md
index 377c805e..70db345d 100644
--- a/docs/frameworks/vue.md
+++ b/docs/frameworks/vue.md
@@ -57,9 +57,9 @@ One caveat is there's currently [no support for v-model on custom elements](http
```html
-
-
-
+
+
```
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
-
+
```
?> Are you using Shoelace with Vue? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/vue.md)
diff --git a/docs/getting-started/form-controls.md b/docs/getting-started/form-controls.md
index 3fae82c1..d85bdf3b 100644
--- a/docs/getting-started/form-controls.md
+++ b/docs/getting-started/form-controls.md
@@ -49,18 +49,18 @@ To make a field required, use the `required` prop. The form will not be submitte
```html preview
-
+ BirdsCatsDogsOther
-
+
-
+ Check me before submitting
-
+
Submit
@@ -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!');
});
```
```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 = () => {
Check me before submitting
-
- Submit
+
+
+
+ Submit
+
);
};
@@ -117,7 +113,7 @@ To restrict a value to a specific [pattern](https://developer.mozilla.org/en-US/
```html preview
-
+ Submit
@@ -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!');
});
```
@@ -143,7 +139,9 @@ const App = () => {
- Submit
+
+ Submit
+
);
};
@@ -156,9 +154,9 @@ Some input types will automatically trigger constraints, such as `email` and `ur
```html preview
-
+
-
+ Submit
@@ -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!');
});
```
@@ -186,7 +184,9 @@ const App = () => {
- Submit
+
+ Submit
+
);
};
@@ -199,7 +199,7 @@ To create a custom validation error, use the `setCustomValidity` method. The for
```html preview
-
+ Submit
@@ -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!");
}
});
@@ -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 (
-
+
- Submit
+
+ Submit
+
);
};
@@ -276,9 +272,9 @@ The `invalid` attribute reflects the form control's validity, so you can style i
color: var(--sl-color-danger-600);
}
- .custom-input[invalid]:not([disabled])::part(base) {
+ .custom-input[invalid]:not([disabled])::part(base) {
border-color: var(--sl-color-danger-500);
- }
+ }
.custom-input[invalid]:focus-within::part(base) {
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-danger-500);
@@ -330,7 +326,7 @@ Instead, toggle a class and target it in your stylesheet as shown below.
-```
\ No newline at end of file
+```
diff --git a/docs/getting-started/installation.md b/docs/getting-started/installation.md
index b884b2bd..d844b780 100644
--- a/docs/getting-started/installation.md
+++ b/docs/getting-started/installation.md
@@ -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
-
+
```
@@ -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 `` to the page.
```html
-
+
```
@@ -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 `` element.
```html
-
-
+
+
```
@@ -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
-
+
```
@@ -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
-
+
```
@@ -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.
-*Please consider giving back some of what you save by [supporting this project with a sponsorship](https://github.com/sponsors/claviska).
+\*Please consider giving back some of what you save by [supporting this project with a sponsorship](https://github.com/sponsors/claviska).
## Browser Support
diff --git a/docs/getting-started/themes.md b/docs/getting-started/themes.md
index bde4d93e..dd56da2b 100644
--- a/docs/getting-started/themes.md
+++ b/docs/getting-started/themes.md
@@ -8,7 +8,7 @@ A theme is nothing more than a stylesheet that uses the Shoelace API to define d
## Theme Basics
-All themes are scoped to classes using the `sl-theme-{name}` convention, where `{name}` is a lowercase, hyphen-delimited value representing the name of the theme. The included light and dark themes use `sl-theme-light` and `sl-theme-dark`, respectively. A custom theme called "Purple Power", for example, would use a class called `sl-theme-purple-power`
+All themes are scoped to classes using the `sl-theme-{name}` convention, where `{name}` is a lowercase, hyphen-delimited value representing the name of the theme. The included light and dark themes use `sl-theme-light` and `sl-theme-dark`, respectively. A custom theme called "Purple Power", for example, would use a class called `sl-theme-purple-power`
All selectors must be scoped to the theme's class to ensure interoperability with other themes. You should also scope them to `:host` so they can be imported and applied to custom element shadow roots.
@@ -26,7 +26,7 @@ To activate a theme, import it and apply the theme's class to the `` eleme
```html
-
+
@@ -44,15 +44,15 @@ You can activate themes on various containers throughout the page. This example
```html
-
-
+
+
-
+
@@ -71,8 +71,8 @@ The easiest way to customize Shoelace is to override one of the built-in themes.
If you're customizing the light theme, you should scope your styles to the following selectors.
```css
-:root,
-:host,
+:root,
+:host,
.sl-theme-light {
/* your custom styles here */
}
@@ -117,7 +117,7 @@ The dark theme works by taking the light theme's [color tokens](/tokens/color) a
To install the dark theme, add the following to the `` section of your page.
```html
-
+
```
To activate the theme, apply the `sl-theme-dark` class to the `` element.
diff --git a/docs/getting-started/usage.md b/docs/getting-started/usage.md
index 221df44f..4d408446 100644
--- a/docs/getting-started/usage.md
+++ b/docs/getting-started/usage.md
@@ -2,7 +2,7 @@
Shoelace components are just regular HTML elements, or [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) to be precise. You can use them like any other element. Each component has detailed documentation that describes its full API, including properties, events, methods, and more.
-If you're new to custom elements, often referred to as "web components," this section will familiarize you with how to use them.
+If you're new to custom elements, often referred to as "web components," this section will familiarize you with how to use them.
## Properties
@@ -132,7 +132,7 @@ A clever way to use this method is to hide the `` with `opacity: 0` and ad
body.ready {
opacity: 1;
- transition: .25s opacity;
+ transition: 0.25s opacity;
}
diff --git a/docs/resources/accessibility.md b/docs/resources/accessibility.md
index 4760d454..f7c85dea 100644
--- a/docs/resources/accessibility.md
+++ b/docs/resources/accessibility.md
@@ -15,4 +15,4 @@ I’m fully aware that I may not get it right every time for every user, so I in
This is the path forward. Together, we will continue to make Shoelace accessible to as many users as possible.
— Cory LaViska
-_Creator of Shoelace_
\ No newline at end of file
+_Creator of Shoelace_
diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 1862e794..4f0da733 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -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 `` [#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 Enter inside of an `` [#700](https://github.com/shoelace-style/shoelace/issues/700)
- Improved `autofocus` behavior in Safari for `` and `` [#693](https://github.com/shoelace-style/shoelace/issues/693)
- Removed feature detection for `focus({ preventScroll })` since it no longer works in Safari
@@ -16,7 +17,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
## 2.0.0-beta.70
- Added `tag-base`, `tag-content`, and `tag-remove-button` parts to `` [#682](https://github.com/shoelace-style/shoelace/discussions/682)
-- Added support for focusing elements with `autofocus` when `` and `` open [#688](https://github.com/shoelace-style/shoelace/issues/688)
+- Added support for focusing elements with `autofocus` when `` and `` open [#688](https://github.com/shoelace-style/shoelace/issues/688)
- Added the `placement` attribute to `` [#687](https://github.com/shoelace-style/shoelace/pull/687)
- Added Danish translation [#690](https://github.com/shoelace-style/shoelace/pull/690)
- Fixed a bug that allowed `` to go into an incorrect state when activating the trigger while disabled [#684](https://github.com/shoelace-style/shoelace/pull/684)
@@ -63,7 +64,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
- Refactored `` to use `Intl.NumberFormat` so it supports localization
- Refactored themes so utility styles are no longer injected as `