diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 81b84cf0..0bda1ff3 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -79,6 +79,7 @@ module.exports = { '@typescript-eslint/no-unnecessary-boolean-literal-compare': 'warn', '@typescript-eslint/no-unnecessary-condition': 'off', '@typescript-eslint/no-unnecessary-qualifier': 'warn', + '@typescript-eslint/no-unnecessary-type-assertion': 'off', '@typescript-eslint/non-nullable-type-assertion-style': 'warn', '@typescript-eslint/prefer-for-of': 'warn', '@typescript-eslint/prefer-optional-chain': 'warn', diff --git a/README.md b/README.md index 8e6eed96..1477eb9b 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ A forward-thinking library of web components. - Built with accessibility in mind ♿️ - Open source 😸 -Designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska). +Designed in New Hampshire by [Cory LaViska](https://twitter.com/cory_laviska). --- @@ -77,6 +77,6 @@ Shoelace is an open source project and contributions are encouraged! If you're i ## License -Shoelace was created by [Cory LaViska](https://twitter.com/claviska) and is available under the terms of the MIT license. +Shoelace was created by [Cory LaViska](https://twitter.com/cory_laviska) and is available under the terms of the MIT license. Whether you're building Shoelace or building something _with_ Shoelace — have fun creating! 🥾 diff --git a/cspell.json b/cspell.json index ba7ba2e8..2030af68 100644 --- a/cspell.json +++ b/cspell.json @@ -14,6 +14,7 @@ "autoloading", "autoplay", "bezier", + "Bokmål", "boxicons", "CACHEABLE", "callout", @@ -166,6 +167,7 @@ "valpha", "valuenow", "valuetext", + "vuejs", "WEBP", "Webpacker", "wordmark" diff --git a/docs/_includes/component.njk b/docs/_includes/component.njk index e377e692..2bc8c002 100644 --- a/docs/_includes/component.njk +++ b/docs/_includes/component.njk @@ -283,7 +283,7 @@ -

Learn more about customizing CSS custom properties.

+

Learn more about customizing CSS custom properties.

{% endif %} {# CSS Parts #} diff --git a/docs/_includes/sidebar.njk b/docs/_includes/sidebar.njk index 11745e65..df0958bb 100644 --- a/docs/_includes/sidebar.njk +++ b/docs/_includes/sidebar.njk @@ -17,6 +17,7 @@
  • React
  • Vue
  • Angular
    • +
  • Svelte
  • diff --git a/docs/assets/scripts/turbo.js b/docs/assets/scripts/turbo.js index 7075217f..6d506ef6 100644 --- a/docs/assets/scripts/turbo.js +++ b/docs/assets/scripts/turbo.js @@ -1,4 +1,4 @@ -import * as Turbo from 'https://cdn.jsdelivr.net/npm/@hotwired/turbo@7.3.0/+esm'; +import * as Turbo from 'https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm'; (() => { if (!window.scrollPositions) { @@ -6,13 +6,13 @@ import * as Turbo from 'https://cdn.jsdelivr.net/npm/@hotwired/turbo@7.3.0/+esm' } function preserveScroll() { - document.querySelectorAll('[data-preserve-scroll').forEach(element => { + document.querySelectorAll('[data-preserve-scroll]').forEach(element => { scrollPositions[element.id] = element.scrollTop; }); } function restoreScroll(event) { - document.querySelectorAll('[data-preserve-scroll').forEach(element => { + document.querySelectorAll('[data-preserve-scroll]').forEach(element => { element.scrollTop = scrollPositions[element.id]; }); diff --git a/docs/pages/components/select.md b/docs/pages/components/select.md index 15ef3da3..de452824 100644 --- a/docs/pages/components/select.md +++ b/docs/pages/components/select.md @@ -504,17 +504,17 @@ Remember that custom tags are rendered in a shadow root. To style them, you can ### Lazy loading options -Lazy loading options is very hard to get right. `` largely follows how a native `` works. Here are the following conditions: -- If a `` is created without any options, but is given a `value` attribute, its `value` will be `""`, and then when options are added, if any of the options have a value equal to the `` value, the value of the `` will equal that of the option. +- If a `` is created without any options, but is given a `value` attribute, its `value` will be `""`, and then when options are added, if any of the options have a value equal to the `` value, the value of the `` will equal that of the option. -EX: `` will have a value of `""` until `Foo` connects, at which point its value will become `"foo"` when submitting. +EX: `` will have a value of `""` until `Foo` connects, at which point its value will become `"foo"` when submitting. -- If a `` with an initial value has multiple values, but only some of the options are present, it will only respect the options that are present, and if a selected option is loaded in later, _AND_ the value of the select has not changed via user interaction or direct property assignment, it will add the selected option to the form value and to the `.value` of the select. +- If a `` with an initial value has multiple values, but only some of the options are present, it will only respect the options that are present, and if a selected option is loaded in later, _AND_ the value of the select has not changed via user interaction or direct property assignment, it will add the selected option to the form value and to the `.value` of the select. -This can be hard to conceptualize, so heres a fairly large example showing how lazy loaded options work with `` and `` when given initial value attributes. Feel free to play around with it in a codepen. +This can be hard to conceptualize, so heres a fairly large example showing how lazy loaded options work with `` and `` when given initial value attributes. Feel free to play around with it in a codepen. ```html:preview
    diff --git a/docs/pages/components/tag.md b/docs/pages/components/tag.md index 4339ff58..d0026ecd 100644 --- a/docs/pages/components/tag.md +++ b/docs/pages/components/tag.md @@ -31,7 +31,7 @@ const App = () => ( ### Sizes -Use the `size` attribute to change a tab's size. +Use the `size` attribute to change a tag's size. ```html:preview Small @@ -53,7 +53,7 @@ const App = () => ( ### Pill -Use the `pill` attribute to give tabs rounded edges. +Use the `pill` attribute to give tags rounded edges. ```html:preview Small diff --git a/docs/pages/frameworks/svelte.md b/docs/pages/frameworks/svelte.md new file mode 100644 index 00000000..0e11967b --- /dev/null +++ b/docs/pages/frameworks/svelte.md @@ -0,0 +1,85 @@ +--- +meta: + title: Svelte + description: Tips for using Shoelace in your Svelte app. +--- + +# Svelte + +Svelte [plays nice](https://custom-elements-everywhere.com/#svelte) with custom elements, so you can use Shoelace in your Svelte apps with ease. + +## Installation + +To add Shoelace to your Svelte app, install the package from npm. + +```bash +npm install @shoelace-style/shoelace +``` + +Next, [include a theme](/getting-started/themes) and set the [base path](/getting-started/installation#setting-the-base-path) for icons and other assets. In this example, we'll import the light theme and use the CDN as a base path. + +```jsx +// main.js or main.ts +import '@shoelace-style/shoelace/dist/themes/light.css'; +import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path'; + +setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/'); +``` + +:::tip +If you'd rather not use the CDN for assets, you can create a build task that copies `node_modules/@shoelace-style/shoelace/dist/assets` into a public folder in your app. Then you can point the base path to that folder instead. +::: + +## Usage + +### QR code generator example + +```jsx +

    Live editing

    + + message = event.target.value}> + + + + {message} + + + +``` + +### Two-way Binding + +One caveat is there's currently Svelte only supports `bind:value` directive in ``, `