Merge tag 'v2.7.0' into viur

2.7.0 # Conflicts: # docs/pages/components/card.md # docs/pages/components/color-picker.md # docs/pages/components/details.md # docs/pages/components/icon.md # docs/pages/components/spinner.md # docs/pages/frameworks/react.md # docs/pages/getting-started/form-controls.md # package-lock.json # package.json # scripts/make-icons.js # src/components/dialog/dialog.ts # src/components/spinner/spinner.ts
viur-framework · Aug 16, 2023 · f71461e · f71461e
2 parents cabdcfc + 6f08f50
commit f71461e
Show file tree

Hide file tree

Showing 211 changed files with 1,892 additions and 725 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -3,8 +3,7 @@ name: Bug Report
 about: Create a bug report to help us fix a demonstrable problem with code in the library.
 title: ''
 labels: bug
-assignees: claviska
-
+assignees: 
 ---
 
 ### Describe the bug

diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -3,8 +3,6 @@ name: Feature Request
 about: Suggest an idea for this project.
 title: ''
 labels: feature
-assignees: claviska
-
 ---
 
 ### What issue are you having?

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -3,5 +3,25 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
-  }
+  },
+  "workbench.colorCustomizations": {
+    "activityBar.activeBackground": "#1e3e7b",
+    "activityBar.background": "#1e3e7b",
+    "activityBar.foreground": "#e7e7e7",
+    "activityBar.inactiveForeground": "#e7e7e799",
+    "activityBarBadge.background": "#000000",
+    "activityBarBadge.foreground": "#e7e7e7",
+    "commandCenter.border": "#e7e7e799",
+    "sash.hoverBorder": "#1e3e7b",
+    "statusBar.background": "#142952",
+    "statusBar.foreground": "#e7e7e7",
+    "statusBarItem.hoverBackground": "#1e3e7b",
+    "statusBarItem.remoteBackground": "#142952",
+    "statusBarItem.remoteForeground": "#e7e7e7",
+    "titleBar.activeBackground": "#142952",
+    "titleBar.activeForeground": "#e7e7e7",
+    "titleBar.inactiveBackground": "#14295299",
+    "titleBar.inactiveForeground": "#e7e7e799"
+  },
+  "peacock.remoteColor": "#142952"
 }
diff --git a/cspell.json b/cspell.json
@@ -50,6 +50,7 @@
     "erroneou",
     "errormessage",
     "esbuild",
+    "exportmaps",
     "exportparts",
     "fieldsets",
     "formaction",
@@ -151,6 +152,7 @@
     "tinycolor",
     "transitionend",
     "treeitem",
+    "treeshaking",
     "Triaging",
     "turbolinks",
     "typeof",

diff --git a/custom-elements-manifest.config.js b/custom-elements-manifest.config.js
@@ -1,9 +1,9 @@
-import { generateCustomData } from 'cem-plugin-vs-code-custom-data-generator';
+import * as path from 'path';
+import { customElementVsCodePlugin } from 'custom-element-vs-code-integration';
 import { parse } from 'comment-parser';
 import { pascalCase } from 'pascal-case';
 import commandLineArgs from 'command-line-args';
 import fs from 'fs';
-import * as path from 'path';
 
 const packageData = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
 const { name, description, version, author, homepage, license } = packageData;
@@ -53,8 +53,10 @@ export default {
               return;
             }
 
-            const tagName = 'sl-' + path.basename(importPath, '.component.ts');
+            const tagNameWithoutPrefix = path.basename(importPath, '.component.ts');
+            const tagName = 'sl-' + tagNameWithoutPrefix;
 
+            classDoc.tagNameWithoutPrefix = tagNameWithoutPrefix;
             classDoc.tagName = tagName;
 
             // This used to be set to true by @customElement
@@ -170,7 +172,7 @@ export default {
           //
           const terms = [
             { from: /^src\//, to: '' }, // Strip the src/ prefix
-            { from: /\.(t|j)sx?$/, to: '.js' } // Convert .ts to .js
+            { from: /\.component.(t|j)sx?$/, to: '.js' } // Convert .ts to .js
           ];
 
           mod.path = replace(mod.path, terms);
@@ -192,9 +194,15 @@ export default {
       }
     },
     // Generate custom VS Code data
-    generateCustomData({
+    customElementVsCodePlugin({
       outdir,
-      cssFileName: null
+      cssFileName: null,
+      referencesTemplate: (_, tag) => [
+        {
+          name: 'Documentation',
+          url: `https://shoelace.style/components/${tag.replace('sl-', '')}`
+        }
+      ]
     })
   ]
 };
diff --git a/docs/_includes/component.njk b/docs/_includes/component.njk
@@ -84,7 +84,7 @@
       <p>
         To import this component as a <a href="/frameworks/react">React component</a>:
       </p>
-      <pre><code class="language-js">import { {{ component.name }} } from '@shoelace-style/shoelace/{{ meta.npmdir }}/react';</code></pre>
+      <pre><code class="language-js">import {{ component.name }} from '@shoelace-style/shoelace/{{ meta.npmdir }}/react/{{ component.tagNameWithoutPrefix }}';</code></pre>
     </sl-tab-panel>
   </sl-tab-group>
 

diff --git a/docs/assets/scripts/code-previews.js b/docs/assets/scripts/code-previews.js
@@ -1,9 +1,9 @@
 (() => {
   function convertModuleLinks(html) {
     html = html
-      .replace(/@shoelace-style\/shoelace/g, `https://cdn.skypack.dev/@shoelace-style/shoelace@${shoelaceVersion}`)
-      .replace(/from 'react'/g, `from 'https://cdn.skypack.dev/react@${reactVersion}'`)
-      .replace(/from "react"/g, `from "https://cdn.skypack.dev/react@${reactVersion}"`);
+      .replace(/@shoelace-style\/shoelace/g, `https://esm.sh/@shoelace-style/shoelace@${shoelaceVersion}`)
+      .replace(/from 'react'/g, `from 'https://esm.sh/react@${reactVersion}'`)
+      .replace(/from "react"/g, `from "https://esm.sh/react@${reactVersion}"`);
 
     return html;
   }
@@ -191,12 +191,12 @@
       if (isReact) {
         htmlTemplate = '<div id="root"></div>';
         jsTemplate =
-          `import React from 'https://cdn.skypack.dev/react@${reactVersion}';\n` +
-          `import ReactDOM from 'https://cdn.skypack.dev/react-dom@${reactVersion}';\n` +
-          `import { setBasePath } from 'https://cdn.skypack.dev/@shoelace-style/shoelace@${shoelaceVersion}/${cdndir}/utilities/base-path';\n` +
+          `import React from 'https://esm.sh/react@${reactVersion}';\n` +
+          `import ReactDOM from 'https://esm.sh/react-dom@${reactVersion}';\n` +
+          `import { setBasePath } from 'https://esm.sh/@shoelace-style/shoelace@${shoelaceVersion}/${cdndir}/utilities/base-path';\n` +
           `\n` +
           `// Set the base path for Shoelace assets\n` +
-          `setBasePath('https://cdn.skypack.dev/@shoelace-style/shoelace@${shoelaceVersion}/${npmdir}/')\n` +
+          `setBasePath('https://esm.sh/@shoelace-style/shoelace@${shoelaceVersion}/${npmdir}/')\n` +
           `\n${convertModuleLinks(reactExample)}\n` +
           `\n` +
           `ReactDOM.render(<App />, document.getElementById('root'));`;

diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
@@ -237,6 +237,7 @@ kbd {
   border: solid 1px var(--sl-color-neutral-200);
   box-shadow: inset 0 1px 0 0 var(--sl-color-neutral-0), inset 0 -1px 0 0 var(--sl-color-neutral-200);
   font-family: var(--sl-font-mono);
+  font-size: 0.9125em;
   border-radius: var(--docs-border-radius);
   color: var(--sl-color-neutral-800);
   padding: 0.125em 0.4em;
@@ -393,6 +394,10 @@ table td p:last-child {
   overflow-x: auto;
 }
 
+.table-scroll code {
+  white-space: nowrap;
+}
+
 th.table-name,
 th.table-event-detail {
   min-width: 15ch;
@@ -1061,23 +1066,29 @@ html.sidebar-open #menu-toggle {
   /* Hide when not defined to prevent extra wide icon toolbar while loading */
   display: none;
 }
+
 #theme-selector sl-menu {
-  /* Set an initial size to prevent width being initally too small when first opening on small screen width */
+  /* Set an initial size to prevent width being too small when first opening on small screen width */
   width: 140px;
 }
+
 #theme-selector sl-button {
   transition: 250ms scale ease;
 }
+
 #theme-selector sl-button::part(base) {
   color: var(--sl-color-neutral-0);
 }
+
 #theme-selector sl-button::part(label) {
   display: flex;
   padding: 0.5rem;
 }
+
 #theme-selector sl-icon {
   font-size: 1.25rem;
 }
+
 .sl-theme-dark #theme-selector sl-button::part(base) {
   color: var(--sl-color-neutral-1000);
 }

diff --git a/docs/pages/components/alert.md b/docs/pages/components/alert.md
@@ -13,7 +13,8 @@ layout: component
 ```
 
 ```jsx:react
-import { SlAlert, SlIcon } from '@shoelace-style/shoelace/dist/react';
+import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => (
   <SlAlert open>
@@ -90,7 +91,8 @@ Set the `variant` attribute to change the alert's variant.
 ```
 
 ```jsx:react
-import { SlAlert, SlIcon } from '@shoelace-style/shoelace/dist/react';
+import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => (
   <>
@@ -160,7 +162,8 @@ Add the `closable` attribute to show a close button that will hide the alert.
 
 ```jsx:react
 import { useState } from 'react';
-import { SlAlert, SlIcon } from '@shoelace-style/shoelace/dist/react';
+import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => {
   const [open, setOpen] = useState(true);
@@ -188,7 +191,7 @@ Icons are optional. Simply omit the `icon` slot if you don't want them.
 ```
 
 ```jsx:react
-import { SlAlert } from '@shoelace-style/shoelace/dist/react';
+import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
 
 const App = () => (
   <SlAlert variant="primary" open>
@@ -228,7 +231,9 @@ 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 from '@shoelace-style/shoelace/dist/react/alert';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const css = `
   .alert-duration sl-alert {
@@ -317,7 +322,9 @@ 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 from '@shoelace-style/shoelace/dist/react/alert';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 function showToast(alert) {
   alert.toast();

diff --git a/docs/pages/components/animated-image.md b/docs/pages/components/animated-image.md
@@ -13,7 +13,7 @@ layout: component
 ```
 
 ```jsx:react
-import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react';
+import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';
 
 const App = () => (
   <SlAnimatedImage
@@ -41,7 +41,7 @@ Both GIF and WEBP images are supported.
 ```
 
 ```jsx:react
-import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react';
+import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';
 
 const App = () => (
   <SlAnimatedImage src="https://shoelace.style/assets/images/tie.webp" alt="Animation of a shoe being tied" />
@@ -64,7 +64,7 @@ To set a custom size, apply a width and/or height to the host element.
 {% raw %}
 
 ```jsx:react
-import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react';
+import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';
 
 const App = () => (
   <SlAnimatedImage
@@ -102,7 +102,7 @@ You can change the appearance and location of the control box by targeting the `
 ```
 
 ```jsx:react
-import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react';
+import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';
 
 const css = `
   .animated-image-custom-control-box::part(control-box) {

diff --git a/docs/pages/components/animation.md b/docs/pages/components/animation.md
@@ -27,7 +27,7 @@ To animate an element, wrap it in `<sl-animation>` and set an animation `name`.
 ```
 
 ```jsx:react
-import { SlAnimation } from '@shoelace-style/shoelace/dist/react';
+import SlAnimation from '@shoelace-style/shoelace/dist/react/animation';
 
 const css = `
   .animation-overview .box {
@@ -173,7 +173,7 @@ Use an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/
 
 ```jsx:react
 import { useEffect, useRef, useState } from 'react';
-import { SlAnimation } from '@shoelace-style/shoelace/dist/react';
+import SlAnimation from '@shoelace-style/shoelace/dist/react/animation';
 
 const css = `
   .animation-scroll {
@@ -262,7 +262,7 @@ Supply your own [keyframe formats](https://developer.mozilla.org/en-US/docs/Web/
 ```
 
 ```jsx:react
-import { SlAnimation } from '@shoelace-style/shoelace/dist/react';
+import SlAnimation from '@shoelace-style/shoelace/dist/react/animation';
 
 const css = `
   .animation-keyframes .box {
@@ -329,7 +329,8 @@ Animations won't play until you apply the `play` attribute. You can omit it init
 
 ```jsx:react
 import { useState } from 'react';
-import { SlAnimation, SlButton } from '@shoelace-style/shoelace/dist/react';
+import SlAnimation from '@shoelace-style/shoelace/dist/react/animation';
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
 
 const App = () => {
   const [play, setPlay] = useState(false);

diff --git a/docs/pages/components/avatar.md b/docs/pages/components/avatar.md
@@ -12,7 +12,7 @@ By default, a generic icon will be shown. You can personalize avatars by adding
 ```
 
 ```jsx:react
-import { SlAvatar } from '@shoelace-style/shoelace/dist/react';
+import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
 
 const App = () => <SlAvatar label="User avatar" />;
 ```
@@ -37,7 +37,7 @@ Avatar images can be lazily loaded by setting the `loading` attribute to `lazy`.
 ```
 
 ```jsx:react
-import { SlAvatar } from '@shoelace-style/shoelace/dist/react';
+import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
 
 const App = () => (
   <SlAvatar
@@ -61,7 +61,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';
+import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
 
 const App = () => <SlAvatar initials="SL" label="Avatar with initials: SL" />;
 ```
@@ -85,7 +85,8 @@ When no image or initials are set, an icon will be shown. The default avatar sho
 ```
 
 ```jsx:react
-import { SlAvatar, SlIcon } from '@shoelace-style/shoelace/dist/react';
+import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => (
   <>
@@ -115,7 +116,8 @@ Avatars can be shaped using the `shape` attribute.
 ```
 
 ```jsx:react
-import { SlAvatar, SlIcon } from '@shoelace-style/shoelace/dist/react';
+import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const App = () => (
   <>
@@ -165,7 +167,8 @@ You can group avatars with a few lines of CSS.
 ```
 
 ```jsx:react
-import { SlAvatar, SlIcon } from '@shoelace-style/shoelace/dist/react';
+import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 
 const css = `
   .avatar-group sl-avatar:not(:first-of-type) {