{% if event.type.text %}
- {{ event.type.text }}
+ {{ event.type.text | trimPipes }}
{% else %}
-
{% endif %}
@@ -253,7 +253,7 @@
{% if method.parameters.length %}
{% for param in method.parameters %}
- {{ param.name }}: {{ param.type.text }}{% if not loop.last %},{% endif %}
+ {{ param.name }}: {{ param.type.text | trimPipes }}{% if not loop.last %},{% endif %}
{% endfor %}
{% else %}
diff --git a/docs/eleventy.config.cjs b/docs/eleventy.config.cjs
index 2377943fe2..4ca4cbd485 100644
--- a/docs/eleventy.config.cjs
+++ b/docs/eleventy.config.cjs
@@ -96,6 +96,12 @@ module.exports = function (eleventyConfig) {
return shoelaceFlavoredMarkdown.renderInline(content);
});
+ // Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited.
+ // With Prettier 3, this means a leading pipe will exist if the line wraps.
+ eleventyConfig.addFilter('trimPipes', content => {
+ return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content;
+ });
+
eleventyConfig.addFilter('classNameToComponentName', className => {
let name = capitalCase(className.replace(/^Sl/, ''));
if (name === 'Qr Code') name = 'QR Code'; // manual override
diff --git a/docs/pages/components/button.md b/docs/pages/components/button.md
index eb1d5afbac..5eba5b8fc1 100644
--- a/docs/pages/components/button.md
+++ b/docs/pages/components/button.md
@@ -428,7 +428,7 @@ const App = () => (
### Loading
-Use the `loading` attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around. Clicks will be suppressed until the loading state is removed.
+Use the `loading` attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around.
```html:preview
Default
diff --git a/docs/pages/components/carousel.md b/docs/pages/components/carousel.md
index ee4e239fd8..f9e8b75d52 100644
--- a/docs/pages/components/carousel.md
+++ b/docs/pages/components/carousel.md
@@ -1245,7 +1245,7 @@ const App = () => {
handleThumbnailClick(i)}
+ onClick={() => handleThumbnailClick(i)}
src={src}
/>
)}
diff --git a/docs/pages/components/menu-item.md b/docs/pages/components/menu-item.md
index ef80dfbb0a..b5098843cf 100644
--- a/docs/pages/components/menu-item.md
+++ b/docs/pages/components/menu-item.md
@@ -60,35 +60,6 @@ const App = () => (
## Examples
-### Disabled
-
-Add the `disabled` attribute to disable the menu item so it cannot be selected.
-
-```html:preview
-
- Option 1
- Option 2
- Option 3
-
-```
-
-{% raw %}
-
-```jsx:react
-import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
-import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
-
-const App = () => (
-
- Option 1
- Option 2
- Option 3
-
-);
-```
-
-{% endraw %}
-
### Prefix & Suffix
Add content to the start and end of menu items using the `prefix` and `suffix` slots.
@@ -151,6 +122,64 @@ const App = () => (
{% endraw %}
+### Disabled
+
+Add the `disabled` attribute to disable the menu item so it cannot be selected.
+
+```html:preview
+
+ Option 1
+ Option 2
+ Option 3
+
+```
+
+{% raw %}
+
+```jsx:react
+import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+
+const App = () => (
+
+ Option 1
+ Option 2
+ Option 3
+
+);
+```
+
+{% endraw %}
+
+### Loading
+
+Use the `loading` attribute to indicate that a menu item is busy. Like a disabled menu item, clicks will be suppressed until the loading state is removed.
+
+```html:preview
+
+ Option 1
+ Option 2
+ Option 3
+
+```
+
+{% raw %}
+
+```jsx:react
+import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+
+const App = () => (
+
+ Option 1
+ Option 2
+ Option 3
+
+);
+```
+
+{% endraw %}
+
### Checkbox Menu Items
Set the `type` attribute to `checkbox` to create a menu item that will toggle on and off when selected. You can use the `checked` attribute to set the initial state.
diff --git a/docs/pages/components/popup.md b/docs/pages/components/popup.md
index 1681209045..8903918f3a 100644
--- a/docs/pages/components/popup.md
+++ b/docs/pages/components/popup.md
@@ -1530,6 +1530,140 @@ const App = () => {
};
```
+### Hover Bridge
+
+When a gap exists between the anchor and the popup element, this option will add a "hover bridge" that fills the gap using an invisible element. This makes listening for events such as `mouseover` and `mouseout` more sane because the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is active. For demonstration purposes, the bridge in this example is shown in orange.
+
+```html:preview
+
+
+
+
+ );
+};
+```
+
### Virtual Elements
In most cases, popups are anchored to an actual element. Sometimes, it can be useful to anchor them to a non-element. To do this, you can pass a `VirtualElement` to the anchor property. A virtual element must contain a function called `getBoundingClientRect()` that returns a [`DOMRect`](https://developer.mozilla.org/en-US/docs/Web/API/DOMRect) object as shown below.
diff --git a/docs/pages/components/select.md b/docs/pages/components/select.md
index f71750a260..3bf4638697 100644
--- a/docs/pages/components/select.md
+++ b/docs/pages/components/select.md
@@ -233,7 +233,7 @@ import SlOption from '@shoelace-style/shoelace/dist/react/option';
import SlSelect from '@shoelace-style/shoelace/dist/react/select';
const App = () => (
-
+ Option 1Option 2Option 3
@@ -269,7 +269,7 @@ import SlOption from '@shoelace-style/shoelace/dist/react/option';
import SlSelect from '@shoelace-style/shoelace/dist/react/select';
const App = () => (
-
+ Option 1Option 2Option 3
diff --git a/docs/pages/components/tooltip.md b/docs/pages/components/tooltip.md
index 6d0177b434..fe1f39cdd3 100644
--- a/docs/pages/components/tooltip.md
+++ b/docs/pages/components/tooltip.md
@@ -249,7 +249,7 @@ const App = () => (
### Manual Trigger
-Tooltips can be controller programmatically by setting the `trigger` attribute to `manual`. Use the `open` attribute to control when the tooltip is shown.
+Tooltips can be controlled programmatically by setting the `trigger` attribute to `manual`. Use the `open` attribute to control when the tooltip is shown.
```html:preview
Toggle Manually
diff --git a/docs/pages/frameworks/vue.md b/docs/pages/frameworks/vue.md
index 28dc8bddab..a6009169a4 100644
--- a/docs/pages/frameworks/vue.md
+++ b/docs/pages/frameworks/vue.md
@@ -35,89 +35,20 @@ If you'd rather not use the CDN for assets, you can create a build task that cop
## Configuration
-You'll need to tell Vue to ignore Shoelace components. This is pretty easy because they all start with `sl-`.
-
-```js
-import { fileURLToPath, URL } from 'url';
-
-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-
-// https://vitejs.dev/config/
-export default defineConfig({
- plugins: [
- vue({
- template: {
- compilerOptions: {
- isCustomElement: tag => tag.startsWith('sl-')
- }
- }
- })
- ],
- resolve: {
- alias: {
- '@': fileURLToPath(new URL('./src', import.meta.url))
- }
- }
-});
-```
+If you haven't configured your Vue.js project to work with custom elements/web components, follow [the instructions here](https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue) based on your project type to ensure your project will not throw an error when it encounters a custom element.
Now you can start using Shoelace components in your app!
-## Local and optimized Configuration
-This config copies the assets to public/viur-shoelace and chunks the components without hashing
-
-```js
-import { fileURLToPath, URL } from 'url';
-
-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-import copy from 'rollup-plugin-copy'
-
-// https://vitejs.dev/config/
-export default defineConfig({
- plugins: [
- copy({
- targets: [
- {
- src: path.join(__dirname, "node_modules", "@viur", "viur-shoelace", "dist", "assets"),
- dest: path.join(__dirname, 'public', "viur-shoelace")
- }
- ]
- }),
- vue({
- template: {
- compilerOptions: {
- isCustomElement: tag => tag.startsWith('sl-')
- }
- }
- })
- ],
- resolve: {
- alias: {
- "@": path.resolve(__dirname, "./src")
- }
- },
- build: {
- rollupOptions: {
- output: {
- chunkFileNames: (chunkinfo) => {
- if (chunkinfo['moduleIds'].filter(x => x.includes('node_modules/@viur/shoelace/dist/components')).length > 0) {
- return `[name].js`
- } else {
- return `[name]-[hash].js`
- }
-
- },
- manualChunks(id) {
- if (id.includes('node_modules/@viur/shoelace/dist/components')) {
- return "viur-shoelace/component_" + id.split("/").slice(-2)[0];
- }
- }
- }
- }
+## Types
+
+Once you have configured your application for custom elements, you should be able to use Shoelace in your application without it causing any errors. Unfortunately, this doesn't register the custom elements to behave like components built using Vue. To provide autocomplete information and type safety for your components, you can import the Shoelace Vue types into your `tsconfig.json` to get better integration in your standard Vue and JSX templates.
+
+```json
+{
+ "compilerOptions": {
+ "types": ["@shoelace-style/shoelace/dist/types/vue"]
}
-});
+}
```
## Usage
@@ -182,7 +113,7 @@ Are you using Shoelace with Vue? [Help us improve this page!](https://github.com
### Slots
-To use Shoelace components with slots, follow the Vue documentation on using [slots with custom elements](https://vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue).
+Slots in Shoelace/web components are functionally the same as basic slots in Vue. Slots can be assigned to elements using the `slot` attribute followed by the name of the slot it is being assigned to.
Here is an example:
diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md
index c874cadf93..29cf223339 100644
--- a/docs/pages/resources/changelog.md
+++ b/docs/pages/resources/changelog.md
@@ -12,6 +12,33 @@ Components with the Experimental bad
New versions of Shoelace are released as-needed and generally occur when a critical mass of changes have accumulated. At any time, you can see what's coming in the next release by visiting [next.shoelace.style](https://next.shoelace.style).
+## 2.13.1
+
+- Fixed a bug where the safe triangle was always visible when selecting nested `` elements [#1835]
+
+## 2.13.0
+
+- Added the `hover-bridge` feature to `` to support better tooltip accessibility [#1734]
+- Added the `loading` attribute and the `spinner` and `spinner__base` part to `` [#1700]
+- Fixed files that did not have `.js` extensions. [#1770]
+- Fixed `` not accounting for elements with hidden dialog controls like `