diff --git a/.vscode/extensions.json b/.vscode/extensions.json index d76a8740..254c87de 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -3,6 +3,7 @@ "ms-vscode.vscode-typescript-tslint-plugin", "esbenp.prettier-vscode", "bierner.lit-html", - "bashmish.es6-string-css" + "bashmish.es6-string-css", + "streetsidesoftware.code-spell-checker" ] } diff --git a/cspell.json b/cspell.json new file mode 100644 index 00000000..2a48d033 --- /dev/null +++ b/cspell.json @@ -0,0 +1,110 @@ +{ + "version": "0.2", + "words": [ + "allowfullscreen", + "animationend", + "Animista", + "apos", + "atrule", + "autocorrect", + "autoplay", + "bezier", + "boxicons", + "chatbubble", + "claviska", + "Clippy", + "codepen", + "colocated", + "combobox", + "Composability", + "Consolas", + "contenteditable", + "copydir", + "coverpage", + "crossorigin", + "crutchcorn", + "csspart", + "cssproperty", + "datetime", + "Docsify", + "dropdowns", + "easings", + "erroneou", + "esbuild", + "exportparts", + "fieldsets", + "formdata", + "FOUC", + "FOUCE", + "fullscreen", + "globby", + "Grayscale", + "haspopup", + "heroicons", + "hexa", + "Iconoir", + "Iframes", + "inputmode", + "ionicon", + "ionicons", + "jsDelivr", + "jsfiddle", + "keydown", + "keyframes", + "labelledby", + "Laravel", + "LaViska", + "litelement", + "lowercasing", + "maxlength", + "Menlo", + "minlength", + "monospace", + "mousedown", + "mouseup", + "nextjs", + "noopener", + "noreferrer", + "novalidate", + "outdir", + "ParamagicDev", + "popperjs", + "progressbar", + "radiogroup", + "Railsbyte", + "remixicon", + "reregister", + "resizer", + "resizers", + "rgba", + "roadmap", + "Roboto", + "Schilp", + "Segoe", + "semibold", + "slotchange", + "spacebar", + "Tabbable", + "tabindex", + "tablist", + "tabpanel", + "templating", + "textareas", + "transitionend", + "Triaging", + "turbolinks", + "unbundles", + "unbundling", + "unicons", + "unsupportive", + "valpha", + "valuenow", + "valuetext", + "WEBP", + "Webpacker", + "wordmark" + ], + "ignorePaths": ["package.json", "package-lock.json", ".vscode/**", "src/translations/!(en).ts", "**/*.min.js"], + "ignoreRegExpList": ["(^|[^a-z])sl[a-z]*(^|[^a-z])"], + "useGitignore": true +} diff --git a/docs/assets/plugins/metadata/metadata.js b/docs/assets/plugins/metadata/metadata.js index 19c92333..249659d0 100644 --- a/docs/assets/plugins/metadata/metadata.js +++ b/docs/assets/plugins/metadata/metadata.js @@ -240,7 +240,7 @@ const ul = document.createElement('ul'); const dependencies = []; - // Recursively fetch subdependencies + // Recursively fetch sub-dependencies function getDependencies(tag) { const component = allComponents.find(c => c.tagName === tag); if (!component || !Array.isArray(component.dependencies)) { diff --git a/docs/assets/plugins/theme-picker/theme-picker.js b/docs/assets/plugins/theme-picker/theme-picker.js index 95fe7c74..cfcb1bab 100644 --- a/docs/assets/plugins/theme-picker/theme-picker.js +++ b/docs/assets/plugins/theme-picker/theme-picker.js @@ -76,7 +76,7 @@ } }); - // Set the intial theme and sync the UI + // Set the initial theme and sync the UI setTheme(theme); }); }); diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index 89faab5e..e01dd8b3 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -583,7 +583,7 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code { background: var(--sl-color-primary-600); } -/* Elevation dmeo */ +/* Elevation demo */ .elevation-demo { background: transparent; border-radius: 3px; diff --git a/docs/components/details.md b/docs/components/details.md index d23541f8..b9f78d80 100644 --- a/docs/components/details.md +++ b/docs/components/details.md @@ -1,3 +1,5 @@ + + # Details [component-header:sl-details] diff --git a/docs/components/dialog.md b/docs/components/dialog.md index 60e9bbcb..a5102a1e 100644 --- a/docs/components/dialog.md +++ b/docs/components/dialog.md @@ -1,3 +1,5 @@ + + # Dialog [component-header:sl-dialog] @@ -83,12 +85,7 @@ const App = () => { return ( <> - setOpen(false)} - > + setOpen(false)}> Lorem ipsum dolor sit amet, consectetur adipiscing elit. setOpen(false)}> Close @@ -135,11 +132,13 @@ const App = () => { return ( <> setOpen(false)}> -
+

Scroll down and give it a try! 👇

@@ -189,9 +188,9 @@ const App = () => { return ( <> - event.preventDefault()} onSlAfterHide={() => setOpen(false)} > @@ -237,11 +236,7 @@ By default, the dialog's panel will gain focus when opened. This allows a subseq ```jsx react import { useRef, useState } from 'react'; -import { - SlButton, - SlDialog, - SlInput -} from '@shoelace-style/shoelace/dist/react'; +import { SlButton, SlDialog, SlInput } from '@shoelace-style/shoelace/dist/react'; const App = () => { const input = useRef(null); @@ -254,12 +249,7 @@ const App = () => { return ( <> - setOpen(false)} - > + setOpen(false)}> setOpen(false)}> Close diff --git a/docs/components/drawer.md b/docs/components/drawer.md index 28b76504..8c02017d 100644 --- a/docs/components/drawer.md +++ b/docs/components/drawer.md @@ -1,3 +1,5 @@ + + # Drawer [component-header:sl-drawer] @@ -77,12 +79,7 @@ const App = () => { return ( <> - setOpen(false)} - > + setOpen(false)}> This drawer slides in from the start. setOpen(false)}> Close @@ -126,12 +123,7 @@ const App = () => { return ( <> - setOpen(false)} - > + setOpen(false)}> This drawer slides in from the top. setOpen(false)}> Close @@ -175,12 +167,7 @@ const App = () => { return ( <> - setOpen(false)} - > + setOpen(false)}> This drawer slides in from the bottom. setOpen(false)}> Close @@ -239,15 +226,9 @@ const App = () => { marginBottom: '1rem' }} > - The drawer will be contained to this box. This content won't shift or be affected in any way when the drawer opens. - - setOpen(false)} - style={{ '--size': '50%' }} - > + The drawer will be contained to this box. This content won't shift or be affected in any way when the drawer + opens. + setOpen(false)} style={{ '--size': '50%' }}> Lorem ipsum dolor sit amet, consectetur adipiscing elit. setOpen(false)}> Close @@ -292,11 +273,7 @@ const App = () => { return ( <> - setOpen(false)} - style={{ '--size': '50vw' }} - > + setOpen(false)} style={{ '--size': '50vw' }}> This drawer is always 50% of the viewport. setOpen(false)}> Close @@ -343,7 +320,7 @@ const App = () => { return ( <> setOpen(false)}> -
This drawer will not close unless you use the button below. @@ -399,9 +375,9 @@ const App = () => { return ( <> - event.preventDefault()} onSlAfterHide={() => setOpen(false)} > @@ -441,17 +417,13 @@ By default, the drawer's panel will gain focus when opened. This allows the firs drawer.addEventListener('sl-initial-focus', event => { event.preventDefault(); input.focus({ preventScroll: true }); - }); + }); ``` ```jsx react import { useRef, useState } from 'react'; -import { - SlButton, - SlDrawer, - SlInput -} from '@shoelace-style/shoelace/dist/react'; +import { SlButton, SlDrawer, SlInput } from '@shoelace-style/shoelace/dist/react'; const App = () => { const input = useRef(null); @@ -464,12 +436,7 @@ const App = () => { return ( <> - setOpen(false)} - > + setOpen(false)}> setOpen(false)}> Close diff --git a/docs/components/split-panel.md b/docs/components/split-panel.md index 17572f92..801b888c 100644 --- a/docs/components/split-panel.md +++ b/docs/components/split-panel.md @@ -61,7 +61,7 @@ To set the initial position, use the `position` attribute. If no position is pro ### Initial Position in Pixels -To set the intial position in pixels instead of a percentage, use the `position-in-pixels` attribute. +To set the initial position in pixels instead of a percentage, use the `position-in-pixels` attribute. ```html preview diff --git a/docs/getting-started/customizing.md b/docs/getting-started/customizing.md index ab42c945..9d509927 100644 --- a/docs/getting-started/customizing.md +++ b/docs/getting-started/customizing.md @@ -40,9 +40,7 @@ Shoelace components use a [shadow DOM](https://developer.mozilla.org/en-US/docs/ Here's an example that modifies buttons with the `tomato-button` class. ```html preview - - Tomato Button - + Tomato Button