Merge upstream 2.14.0

.github/workflows/node.js.yml

@@ -25,6 +25,6 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'npm'
-      - run: npx playwright install-deps
+      - run: npx playwright install --with-deps
       - run: npm ci
       - run: npm run verify

.gitignore

@@ -1,8 +1,6 @@
 _site
 .cache
 .DS_Store
-package.json
-package-lock.json
 cdn
 dist
 docs/assets/images/sprite.svg

.vscode/settings.json

@@ -2,7 +2,7 @@
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "cSpell.words": ["Teamshares"],
   "html.suggest.html5": true,

cspell.json

@@ -100,6 +100,7 @@
     "monospace",
     "mousedown",
     "mousemove",
+    "mouseout",
     "mouseup",
     "multiselectable",
     "nextjs",

custom-elements-manifest.config.js

@@ -148,6 +148,7 @@ export default {
         }
       }
     },
+
     {
       name: 'shoelace-react-event-names',
       analyzePhase({ ts, node, moduleDoc }) {
@@ -166,6 +167,7 @@ export default {
         }
       }
     },
+
     {
       name: 'shoelace-translate-module-paths',
       packageLinkPhase({ customElementsManifest }) {
@@ -202,6 +204,7 @@ export default {
         });
       }
     },
+
     // Generate custom VS Code data
     customElementVsCodePlugin({
       outdir,
@@ -216,6 +219,7 @@ export default {
     customElementJetBrainsPlugin({
       outdir: './dist',
       excludeCss: true,
+      packageJson: false,
       referencesTemplate: (_, tag) => {
         return {
           name: 'Documentation',

docs/_includes/component.njk

@@ -1,75 +1,62 @@
 {% extends "default.njk" %}
+
 {# Find the component based on the `tag` front matter #}
-{% set component =
-getComponent('sl-' + page.fileSlug) %}
+{% set component = getComponent('sl-' + page.fileSlug) %}
+
 {% block content %}
   {# Determine the badge variant for code status #}
-  {% if
-  component.status == 'stable' %}
+  {% if component.status == 'stable' %}
     {% set badgeVariant = 'primary' %}
   {% elseif component.status == 'experimental' %}
     {% set badgeVariant = 'warning' %}
   {% elseif component.status == 'planned' %}
     {% set badgeVariant = 'neutral' %}
-  {% elseif
-component.status == 'deprecated' %}
+  {% elseif component.status == 'deprecated' %}
     {% set badgeVariant = 'danger' %}
   {% else %}
     {% set badgeVariant = 'neutral' %}
   {% endif %}
+
   {# Determine the badge variant for pattern status #}
   {% if component.pattern.length %}
     {% if component.pattern == 'stable' %}
       {% set patternBadgeVariant = 'primary' %}
     {% elseif component.pattern == 'in review' %}
-      {% set
-      patternBadgeVariant = 'neutral' %}
+      {% set patternBadgeVariant = 'neutral' %}
     {% else %}
       {% set patternBadgeVariant = 'danger' %}
     {% endif %}
   {% else %}
-    {% set
-    patternBadgeVariant = 'danger' %}
+    {% set patternBadgeVariant = 'danger' %}
   {% endif %}
+
   {# Determine the badge variant for figma status #}
-  {% if
-  component.figma.length %}
+  {% if component.figma.length %}
     {% if component.figma == 'ready' %}
       {% set figmaBadgeVariant = 'success' %}
-    {% elseif
-component.figma == 'draft' %}
+    {% elseif component.figma == 'draft' %}
       {% set figmaBadgeVariant = 'warning' %}
     {% else %}
       {% set figmaBadgeVariant = 'danger' %}
     {% endif %}
   {% else %}
     {% set figmaBadgeVariant = 'danger' %}
   {% endif %}
+
   {# Header #}
   <header class="component-header">
     <div class="component-header__info">
-      <sl-tag variant="neutral" size="small" pill> Since Shoelace {{component.since or '?' }}
+      <sl-tag variant="neutral" size="small" pill>
+        Since Shoelace {{component.since or '?' }}
       </sl-tag>
-      <sl-tag size="small" variant="{{ badgeVariant }}" pill style="text-transform: capitalize">
-      Code {{ component.status }}
+      <sl-tag size="small" variant="{{ badgeVariant }}" pill style="text-transform: capitalize" >
+        Code {{ component.status }}
       </sl-tag>
-      <sl-tag
-      size="small"
-      variant="{{ patternBadgeVariant }}"
-      pill
-      style="text-transform: capitalize"
-      class="{% if component.pattern == 'hide' %}hidden{% endif %}"
-    >
-      Pattern {{ component.pattern or 'Tentative' }}
+      <sl-tag size="small" variant="{{ patternBadgeVariant }}" pill style="text-transform: capitalize" class="{% if component.pattern == 'hide' %}hidden{% endif %}" >
+        Pattern {{ component.pattern or 'Tentative' }}
       </sl-tag>
-      <sl-tag
-      size="small"
-      variant="{{ figmaBadgeVariant }}"
-      pill
-      style="text-transform: capitalize"
-      class="{% if component.figma == 'hide' %}hidden{% endif %}"
-    >
-      Figma {{ component.figma or 'Needed' }}
+      <sl-tag size="small" variant="{{ figmaBadgeVariant }}" pill style="text-transform: capitalize" class="{% if component.figma == 'hide' %}hidden{% endif %}" >
+        Figma {{ component.figma or 'Needed' }}
       </sl-tag>
     </div>
     <h1>{{ component.name | classNameToComponentName }}</h1>
@@ -87,20 +74,20 @@ component.figma == 'draft' %}
 
   {# Main Markdown Content #}
   {{ content | safe }}
-
   {# Guidelines #}
-  {% if guidelines %}
+  {% if
+  guidelines %}
     <h2>Guidelines</h2>
-    <div id="guidelines">
-      {{ guidelines | markdown | safe }}
-    </div>
+    <div id="guidelines">{{ guidelines | markdown | safe }}</div>
   {% endif %}
   {# Importing #}
   <h2>Importing</h2>
   <p>
-  If you're using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any
-  of the following snippets to <a href="/getting-started/installation#cherry-picking">cherry pick</a> this component.
-</p>
+    If you're using the autoloader or the traditional loader, you can ignore this
+    section. Otherwise, feel free to use any of the following snippets to
+    <a href="/getting-started/installation#cherry-picking">cherry pick</a> this
+    component.
+  </p>
 
   <sl-tab-group>
     <sl-tab slot="nav" panel="script">Script</sl-tab>
@@ -110,29 +97,41 @@ component.figma == 'draft' %}
 
     <sl-tab-panel name="script">
       <p>
-      To import this component from <a href="https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace">the CDN</a>
-      using a script tag:
-    </p>
+        To import this component from
+        <a href="https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace"
+          >the CDN</a
+        >
+        using a script tag:
+      </p>
       <pre><code class="language-html">&lt;script type=&quot;module&quot; src=&quot;https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@{{ meta.version }}/{{ meta.cdndir }}/{{ component.path }}&quot;&gt;&lt;/script&gt;</code></pre>
     </sl-tab-panel>
 
     <sl-tab-panel name="import">
       <p>
-      To import this component from <a href="https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace">the CDN</a>
-      using a JavaScript import:
-    </p>
+        To import this component from
+        <a href="https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace"
+          >the CDN</a
+        >
+        using a JavaScript import:
+      </p>
       <pre><code class="language-js">import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@{{ meta.version }}/{{ meta.cdndir }}/{{ component.path }}';</code></pre>
     </sl-tab-panel>
 
     <sl-tab-panel name="bundler">
       <p>
-      To import this component using <a href="{{ rootUrl('/getting-started/installation#bundling') }}">a bundler</a>:
-    </p>
+        To import this component using
+        <a href="{{ rootUrl('/getting-started/installation#bundling') }}"
+          >a bundler</a
+        >:
+      </p>
       <pre><code class="language-js">import '@shoelace-style/shoelace/{{ meta.npmdir }}/{{ component.path }}';</code></pre>
     </sl-tab-panel>
 
     <sl-tab-panel name="react">
-      <p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
+      <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/{{ component.tagNameWithoutPrefix }}';</code></pre>
     </sl-tab-panel>
   </sl-tab-group>
@@ -166,15 +165,17 @@ component.figma == 'draft' %}
       <em>Learn more about <a href="{{ rootUrl('/getting-started/usage#slots') }}">using slots</a>.</em>
     </p>
   {% endif %}
+
   {# Properties #}
   {% if component.properties.length %}
     <h2>Properties</h2>
     {% if unusedProperties.length %}
       <div role="alert" class="callout callout--warning">
         <p>
-          <strong>Note</strong>: The following appear as options in the Properties table but are currently not part of the
-    Teamshares Design System. Please check with the design team before using these options:
-  </p>
+          <strong>Note</strong>: The following appear as options in the Properties
+          table but are currently not part of the Teamshares Design System. Please
+          check with the design team before using these options:
+        </p>
         {{ unusedProperties | markdown | safe }}
       </div>
     {% endif %}
@@ -198,7 +199,8 @@ component.figma == 'draft' %}
             <td>
               <code class="nowrap">{{ prop.name }}</code>
               {% if prop.attribute | length > 0 %}
-                {% if prop.attribute != prop.name %}
+                {% if prop.attribute != prop.name
+ %}
                   <br/>
                   <sl-tooltip content="This attribute is different from its property">
                     <small>
@@ -210,17 +212,15 @@ component.figma == 'draft' %}
                 {% endif %}
               {% endif %}
             </td>
-            <td>
-              {{ prop.description | markdownInline | safe }}
-            </td>
+            <td>{{ prop.description | markdownInline | safe }}</td>
             <td style="text-align: center">
               {% if prop.reflects %}
                 <sl-icon label="yes" name="check-lg"></sl-icon>
               {% endif %}
             </td>
             <td>
               {% if prop.type.text %}
-                <code>{{ prop.type.text | markdownInline | safe }}</code>
+                <code>{{ prop.type.text | trimPipes | markdownInline | safe }}</code>
               {% else %} - {% endif %}
             </td>
             <td>
@@ -235,9 +235,8 @@ component.figma == 'draft' %}
             <code>updateComplete</code>
           </td>
           <td>
-        A read-only promise that resolves when the component has
-        <a href="/getting-started/usage?#component-rendering-and-updating">finished updating</a>.
-      </td>
+            A read-only promise that resolves when the component has <a href="/getting-started/usage?#component-rendering-and-updating">finished updating</a>.
+          </td>
           <td></td>
           <td></td>
           <td></td>
@@ -246,12 +245,10 @@ component.figma == 'draft' %}
     </table>
 
     <p>
-      <em
-    >Learn more about
-    <a href="{{ rootUrl('/getting-started/usage#attributes-and-properties') }}">attributes and properties</a>.</em
-  >
+      <em>Learn more about <a href="{{ rootUrl('/getting-started/usage#attributes-and-properties') }}" >attributes and properties</a >.</em>
     </p>
   {% endif %}
+
   {# Events #}
   {% if component.events.length %}
     <h2>Events</h2>
@@ -277,7 +274,7 @@ component.figma == 'draft' %}
             <td>{{ event.description | markdownInline | safe }}</td>
             <td>
               {% if event.type.text %}
-                <code>{{ event.type.text }}</code>
+                <code>{{ event.type.text | trimPipes }}</code>
               {% else %} - {% endif %}
             </td>
           </tr>
@@ -289,6 +286,7 @@ component.figma == 'draft' %}
       <em>Learn more about <a href="{{ rootUrl('/getting-started/usage#events') }}">events</a>.</em>
     </p>
   {% endif %}
+
   {# Methods #}
   {% if component.methods.length %}
     <h2>Methods</h2>
@@ -312,7 +310,7 @@ component.figma == 'draft' %}
               {% if method.parameters.length %}
                 <code>
                   {% for param in method.parameters %}
-                    {{ param.name }}: {{ param.type.text }}
+                    {{ param.name }}: {{ param.type.text | trimPipes }}
                     {% if not loop.last %},{% endif %}
                   {% endfor %}
                 </code>
@@ -327,6 +325,7 @@ component.figma == 'draft' %}
       <em>Learn more about <a href="{{ rootUrl('/getting-started/usage#methods') }}">methods</a>.</em>
     </p>
   {% endif %}
+
   {# Custom Properties #}
   {% if component.cssProperties.length %}
     <h2>Custom Properties</h2>
@@ -353,12 +352,10 @@ component.figma == 'draft' %}
     </table>
 
     <p>
-      <em
-    >Learn more about
-    <a href="{{ rootUrl('/getting-started/usage#custom-properties') }}">customizing CSS custom properties</a>.</em
-  >
+      <em>Learn more about <a href="{{ rootUrl('/getting-started/usage#custom-properties') }}">customizing CSS custom properties</a>.</em>
     </p>
   {% endif %}
+
   {# CSS Parts #}
   {% if component.cssParts.length %}
     <h2>Parts</h2>
@@ -383,11 +380,10 @@ component.figma == 'draft' %}
     </table>
 
     <p>
-      <em
-    >Learn more about <a href="{{ rootUrl('/getting-started/customizing/#css-parts') }}">customizing CSS parts</a>.</em
-  >
+      <em>Learn more about <a href="{{ rootUrl('/getting-started/customizing/#css-parts') }}">customizing CSS parts</a>.</em>
     </p>
   {% endif %}
+
   {# Animations #}
   {% if component.animations.length %}
     <h2>Animations</h2>
@@ -412,11 +408,10 @@ component.figma == 'draft' %}
     </table>
 
     <p>
-      <em
-    >Learn more about <a href="{{ rootUrl('/getting-started/customizing#animations') }}">customizing animations</a>.</em
-  >
+      <em>Learn more about <a href="{{ rootUrl('/getting-started/customizing#animations') }}">customizing animations</a>.</em>
     </p>
   {% endif %}
+
   {# Dependencies #}
   {% if component.dependencies.length %}
     <h2>Dependencies</h2>