From 340351ca4bfa88156975adcd2244fde6baa8b244 Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Fri, 1 Dec 2023 12:12:49 -0500
Subject: [PATCH 1/4] improve variance between depth levels

---
 src/themes/chic.css           |  4 ++--
 src/themes/default.css        |  4 ++--
 src/themes/depth_2_chunky.css | 27 +++++++++++++++++++++++---
 src/themes/depth_3_punchy.css | 36 +++++++++++++++--------------------
 src/themes/depth_4_glossy.css | 12 ++++++------
 src/themes/glassy.css         |  2 +-
 src/themes/mellow.css         |  6 +++---
 src/themes/playful.css        |  4 ++--
 8 files changed, 55 insertions(+), 40 deletions(-)

diff --git a/src/themes/chic.css b/src/themes/chic.css
index 7a23821ba..286b27940 100644
--- a/src/themes/chic.css
+++ b/src/themes/chic.css
@@ -1,5 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..600&display=swap');
-@import 'depth_1_semiflat.css'; /* depth_0_flat.css, depth_1_semiflat.css, depth_2_chunky.css, depth_3_punchy.css, depth_4_glossy.css */
+@import 'depth_3_punchy.css'; /* depth_0_flat.css, depth_1_semiflat.css, depth_2_chunky.css, depth_3_punchy.css, depth_4_glossy.css */
 @import 'borders_2_light.css'; /* borders_0_minimal.css, borders_1_feather.css, borders_2_light.css, borders_3_medium.css, borders_4_heavy.css */
 
 :root,
@@ -343,7 +343,7 @@
 
   --wa-color-shadow: color-mix(
     in oklab,
-    var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 16% + 3%),
+    var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 8% + 6%),
     transparent
   );
 
diff --git a/src/themes/default.css b/src/themes/default.css
index bf4e85e72..1dd1b63b6 100644
--- a/src/themes/default.css
+++ b/src/themes/default.css
@@ -107,7 +107,7 @@
   /* Shadow specifies the default color for box shadows that indicate elevation. */
   --wa-color-shadow: color-mix(
     in oklab,
-    var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 8% + 4%),
+    var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 8% + 6%),
     transparent
   );
 
@@ -238,7 +238,7 @@
    */
   /* Corners are designed to scale according to a single base value.
    * The base value is intended for calculations and is not used by components directly. */
-  --wa-corners-base: 0.25;
+  --wa-corners-base: 0.375;
   --wa-corners-xs: calc(var(--wa-corners-base) * 0.75rem);
   --wa-corners-s: calc(var(--wa-corners-base) * 1rem);
   --wa-corners-m: calc(var(--wa-corners-base) * 2rem);
diff --git a/src/themes/depth_2_chunky.css b/src/themes/depth_2_chunky.css
index 3f2d0d622..5d852f1ae 100644
--- a/src/themes/depth_2_chunky.css
+++ b/src/themes/depth_2_chunky.css
@@ -25,7 +25,7 @@
   --wa-shadow-offset-y-level-2: calc(var(--wa-shadow-offset-y-base) * 1.5rem);
   --wa-shadow-offset-y-level-3: calc(var(--wa-shadow-offset-y-base) * 2rem);
 
-  --wa-shadow-offset-x-base: 0;
+  --wa-shadow-offset-x-base: 0.25;
   --wa-shadow-offset-x-inset: calc(var(--wa-shadow-offset-x-base) * 0.75rem);
   --wa-shadow-offset-x-level-1: calc(var(--wa-shadow-offset-x-base) * 1rem);
   --wa-shadow-offset-x-level-2: calc(var(--wa-shadow-offset-x-base) * 1.5rem);
@@ -49,14 +49,35 @@ wa-button {
   --wa-transition-faster: 0ms;
 
   &:not([variant='text']) {
-    --box-shadow: 0 var(--wa-shadow-offset-y-level-1) var(--wa-shadow-blur-base) var(--box-shadow-color);
+    --box-shadow: var(--wa-shadow-offset-x-level-1) var(--wa-shadow-offset-y-level-1) var(--wa-shadow-blur-level-1)
+      var(--box-shadow-color);
     margin-bottom: var(--wa-shadow-offset-y-level-1);
+    margin-right: var(--wa-shadow-offset-x-level-1);
 
     &:active {
       --box-shadow: none;
-      transform: translateY(var(--wa-shadow-offset-y-level-1));
+      transform: translateX(var(--wa-shadow-offset-x-level-1)) translateY(var(--wa-shadow-offset-y-level-1));
     }
   }
+  &[variant='brand'] {
+    --box-shadow-color: var(--wa-color-brand-spot-darker);
+  }
+
+  &[variant='success'] {
+    --box-shadow-color: var(--wa-color-success-spot-darker);
+  }
+
+  &[variant='neutral'] {
+    --box-shadow-color: var(--wa-color-neutral-spot-darker);
+  }
+
+  &[variant='warning'] {
+    --box-shadow-color: var(--wa-color-warning-spot-darker);
+  }
+
+  &[variant='danger'] {
+    --box-shadow-color: var(--wa-color-danger-spot-darker);
+  }
 }
 /* #endregion */
 
diff --git a/src/themes/depth_3_punchy.css b/src/themes/depth_3_punchy.css
index aef243d3d..a1fd723d2 100644
--- a/src/themes/depth_3_punchy.css
+++ b/src/themes/depth_3_punchy.css
@@ -11,7 +11,7 @@
    */
   /* Shadow blur is designed to scale according to a single base value to ensure consistent and realistic effects.
    * The base value is intended for calculations and is not used by components directly. */
-  --wa-shadow-blur-base: 0;
+  --wa-shadow-blur-base: 0.125;
   --wa-shadow-blur-inset: calc(var(--wa-shadow-blur-base) * 0.75rem);
   --wa-shadow-blur-level-1: calc(var(--wa-shadow-blur-base) * 1rem);
   --wa-shadow-blur-level-2: calc(var(--wa-shadow-blur-base) * 1.5rem);
@@ -19,13 +19,13 @@
 
   /* Offset values are used in pre-constructed shadows and may be used when creating custom shadows
    * or transforming elements with shadows. */
-  --wa-shadow-offset-y-base: 0.25;
+  --wa-shadow-offset-y-base: 0.125;
   --wa-shadow-offset-y-inset: calc(var(--wa-shadow-offset-y-base) * 0.75rem);
   --wa-shadow-offset-y-level-1: calc(var(--wa-shadow-offset-y-base) * 1rem);
   --wa-shadow-offset-y-level-2: calc(var(--wa-shadow-offset-y-base) * 1.5rem);
   --wa-shadow-offset-y-level-3: calc(var(--wa-shadow-offset-y-base) * 2rem);
 
-  --wa-shadow-offset-x-base: 0.25;
+  --wa-shadow-offset-x-base: 0;
   --wa-shadow-offset-x-inset: calc(var(--wa-shadow-offset-x-base) * 0.75rem);
   --wa-shadow-offset-x-level-1: calc(var(--wa-shadow-offset-x-base) * 1rem);
   --wa-shadow-offset-x-level-2: calc(var(--wa-shadow-offset-x-base) * 1.5rem);
@@ -44,29 +44,17 @@
 
 /* #region Buttons */
 wa-button:not([variant='text']) {
-  --wa-transition-normal: 0ms;
-  --wa-transition-fast: 0ms;
-  --wa-transition-faster: 0ms;
-
-  --box-shadow: var(--wa-shadow-offset-x-level-1) var(--wa-shadow-offset-y-level-1) var(--wa-shadow-blur-level-1)
-    var(--box-shadow-color);
+  --box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
+    inset 0 0.0625rem 0.125rem 0 rgb(255 255 255 / 0.2) /* inner highlight */,
+    inset 0 -0.0625rem 0.0625rem 0 rgb(0 0 0 / 0.2) /* inner shadow */, var(--wa-shadow-level-1) /* outer shadow */;
 
   margin-bottom: var(--wa-shadow-offset-y-level-1);
-  margin-right: var(--wa-shadow-offset-x-level-1);
 
   &:not([disabled]) {
-    &:hover {
-      --box-shadow: var(--wa-shadow-offset-x-level-2) var(--wa-shadow-offset-y-level-2) var(--wa-shadow-blur-level-2)
-        var(--box-shadow-color);
-
-      transform: translateY(calc((var(--wa-shadow-offset-y-level-2) - var(--wa-shadow-offset-y-level-1)) * -1))
-        translateX(calc((var(--wa-shadow-offset-x-level-2) - var(--wa-shadow-offset-x-level-1)) * -1));
-    }
-
     &:active {
-      --box-shadow: none;
-
-      transform: translateY(var(--wa-shadow-offset-y-level-1)) translateX(var(--wa-shadow-offset-x-level-1));
+      --box-shadow: inset 0 0 0 0 transparent /* shine */,
+        inset 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.1) /* inner highlight */,
+        inset 0 -0.0625rem 0.25rem 0 rgb(0 0 0 / 0.1) /* inner shadow */, 0 0 0 0 transparent /* outer shadow */;
     }
   }
 }
@@ -80,4 +68,10 @@ wa-textarea {
     --box-shadow: var(--wa-shadow-inset);
   }
 }
+
+wa-switch {
+  --thumb-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
+    inset 0 0.0625rem 0.125rem 0 rgb(255 255 255 / 0.1) /* inner highlight */,
+    inset 0 -0.0625rem 0.0625rem 0 rgb(0 0 0 / 0.1) /* inner shadow */, var(--wa-shadow-level-1) /* outer shadow */;
+}
 /* #endregion */
diff --git a/src/themes/depth_4_glossy.css b/src/themes/depth_4_glossy.css
index 7b1faa388..4072f873b 100644
--- a/src/themes/depth_4_glossy.css
+++ b/src/themes/depth_4_glossy.css
@@ -102,9 +102,9 @@
 /* #region Buttons */
 wa-button:not([variant='text']) {
   --box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
-    inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
+    inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
     inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */, inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
-    inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.1) /* bottom highlight */, var(--wa-shadow-level-1) /* outer shadow */;
+    inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-level-1) /* outer shadow */;
 
   margin-bottom: var(--wa-shadow-offset-y-inset);
   transition: transform var(--wa-transition-faster);
@@ -112,7 +112,7 @@ wa-button:not([variant='text']) {
   &:not([disabled]) {
     &:hover {
       --box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
-        inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
+        inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
         inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
         inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
         inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.1) /* bottom highlight */, var(--wa-shadow-level-2) /* outer shadow */;
@@ -120,7 +120,7 @@ wa-button:not([variant='text']) {
 
     &:active {
       --box-shadow: inset 0 -0.0625rem 0 0 rgb(255 255 255 / 0.1) /* shine */,
-        inset 0 0.125rem 0 0 rgb(0 0 0 / 0.08) /* top highlight */,
+        inset 0 0.125rem 0 0 rgb(0 0 0 / 0.1) /* top highlight */,
         inset 0 1.25em 0 0 rgb(255 255 255 / 0.08) /* upper tint */,
         inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
         inset 0 -0.125rem 0 0 rgb(255 255 255 / 0.04) /* bottom highlight */, 0 0 0 0 transparent /* outer shadow */;
@@ -234,8 +234,8 @@ wa-button:not([outline]) {
 wa-input:not(:focus),
 wa-select {
   &:not([filled]):not([disabled]) {
-    --box-shadow: var(--wa-shadow-inset), inset 0 1.25em 0 0 rgb(255 255 255 / 0.04) /* upper tint */,
-      inset 0 -1.125em 0 0 rgb(0 0 0 / 0.02) /* lower shade */;
+    --box-shadow: var(--wa-shadow-inset), inset 0 1.25em 0 0 rgb(0 0 0 / 0.02) /* upper tint */,
+      inset 0 -1.125em 0 0 rgb(255 255 255 / 0.05) /* lower shade */;
   }
 }
 
diff --git a/src/themes/glassy.css b/src/themes/glassy.css
index 3ab5a4a05..cc460f653 100644
--- a/src/themes/glassy.css
+++ b/src/themes/glassy.css
@@ -108,7 +108,7 @@
   /* Shadow specifies the default color for box shadows that indicate elevation. */
   --wa-color-shadow: color-mix(
     in oklab,
-    var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 8% + 4%),
+    var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 8% + 6%),
     transparent
   );
 
diff --git a/src/themes/mellow.css b/src/themes/mellow.css
index 27b5d1a9d..772e5acc2 100644
--- a/src/themes/mellow.css
+++ b/src/themes/mellow.css
@@ -89,7 +89,7 @@
   /* Text colors are used for standard text elements.
    * Text should have a minimum 4.5:1 contrast ratio against surfaces.
    * Inverse text should support appropriate contrast against background colors with opposing lightness. */
-  --wa-color-text-normal: var(--wa-color-base-30);
+  --wa-color-text-normal: var(--wa-color-base-40);
   --wa-color-text-quiet: var(--wa-color-base-50);
   --wa-color-text-link: var(--wa-color-blue-50);
 
@@ -108,7 +108,7 @@
   /* Shadow specifies the default color for box shadows that indicate elevation. */
   --wa-color-shadow: color-mix(
     in oklab,
-    var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 8% + 4%),
+    var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 8% + 6%),
     transparent
   );
 
@@ -193,7 +193,7 @@
   --wa-font-weight-medium: 500;
   --wa-font-weight-heavy: 600;
 
-  --wa-font-weight-heading: var(--wa-font-weight-heavy);
+  --wa-font-weight-heading: var(--wa-font-weight-medium);
   --wa-font-weight-body: var(--wa-font-weight-normal);
   --wa-font-weight-action: var(--wa-font-weight-medium);
 
diff --git a/src/themes/playful.css b/src/themes/playful.css
index 6239a1e90..3eabe38d0 100644
--- a/src/themes/playful.css
+++ b/src/themes/playful.css
@@ -1,5 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@300..700&family=Roboto+Slab:wght@300..700&display=swap');
-@import 'depth_3_punchy.css';
+@import 'depth_2_chunky.css';
 @import 'borders_4_heavy.css';
 
 :root,
@@ -108,7 +108,7 @@
   /* Shadow specifies the default color for box shadows that indicate elevation. */
   --wa-color-shadow: color-mix(
     in oklab,
-    var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 8% + 4%),
+    var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 8% + 6%),
     transparent
   );
 

From 4f8417806c9b03da2eef726836f0e17e436c0e6b Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 6 Dec 2023 12:02:20 -0500
Subject: [PATCH 2/4] backport 1764

---
 docs/pages/resources/changelog.md         |  1 +
 src/components/select/select.component.ts | 19 +++++++++++++------
 src/components/select/select.test.ts      |  1 +
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md
index 37c63a4b6..a9fc72a0d 100644
--- a/docs/pages/resources/changelog.md
+++ b/docs/pages/resources/changelog.md
@@ -24,6 +24,7 @@ New versions of Web Awesome are released as-needed and generally occur when a cr
 
 - Added the `hover-bridge` feature to `<sl-popup>` to support better tooltip accessibility [#1734]
 - Fixed a bug in `<sl-input>` and `<sl-textarea>` that made it work differently from `<input>` and `<textarea>` when using defaults [#1746]
+- Fixed a bug in `<sl-select>` that prevented it from closing when tabbing to another select inside a shadow root [#1763]
 - Improved the accessibility of `<sl-tooltip>` so they persist when hovering over the tooltip and dismiss when pressing [[Esc]] [#1734]
 
 ## 2.12.0
diff --git a/src/components/select/select.component.ts b/src/components/select/select.component.ts
index e5bbf329a..89643b914 100644
--- a/src/components/select/select.component.ts
+++ b/src/components/select/select.component.ts
@@ -223,15 +223,22 @@ export default class WaSelect extends WebAwesomeElement implements WebAwesomeFor
   }
 
   private addOpenListeners() {
-    document.addEventListener('focusin', this.handleDocumentFocusIn);
-    document.addEventListener('keydown', this.handleDocumentKeyDown);
-    document.addEventListener('mousedown', this.handleDocumentMouseDown);
+    //
+    // Listen on the root node instead of the document in case the elements are inside a shadow root
+    //
+    // https://github.com/shoelace-style/shoelace/issues/1763
+    //
+    const root = this.getRootNode();
+    root.addEventListener('focusin', this.handleDocumentFocusIn);
+    root.addEventListener('keydown', this.handleDocumentKeyDown);
+    root.addEventListener('mousedown', this.handleDocumentMouseDown);
   }
 
   private removeOpenListeners() {
-    document.removeEventListener('focusin', this.handleDocumentFocusIn);
-    document.removeEventListener('keydown', this.handleDocumentKeyDown);
-    document.removeEventListener('mousedown', this.handleDocumentMouseDown);
+    const root = this.getRootNode();
+    root.removeEventListener('focusin', this.handleDocumentFocusIn);
+    root.removeEventListener('keydown', this.handleDocumentKeyDown);
+    root.removeEventListener('mousedown', this.handleDocumentMouseDown);
   }
 
   private handleFocus() {
diff --git a/src/components/select/select.test.ts b/src/components/select/select.test.ts
index 82cdfe4d2..159631546 100644
--- a/src/components/select/select.test.ts
+++ b/src/components/select/select.test.ts
@@ -156,6 +156,7 @@ describe('<wa-select>', () => {
       await el.updateComplete;
       await sendKeys({ press: 'ArrowDown' }); // move selection to the third option
       await el.updateComplete;
+      el.focus(); // For some reason, the browser loses focus before we press enter. Refocus the select.
       await sendKeys({ press: 'Enter' }); // commit the selection
       await el.updateComplete;
 

From 8acfc4c9de320ce0137c1b8687ce345f96e4a60f Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 6 Dec 2023 16:19:01 -0500
Subject: [PATCH 3/4] backport 1767

---
 scripts/make-themes.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/scripts/make-themes.js b/scripts/make-themes.js
index eb4c12ac7..740688834 100644
--- a/scripts/make-themes.js
+++ b/scripts/make-themes.js
@@ -47,9 +47,19 @@ files.forEach(async file => {
     { parser: 'babel-ts' }
   );
 
+  let dTs = await prettier.format(
+    `
+    declare const _default: import("lit").CSSResult;
+    export default _default;
+  `,
+    { parser: 'babel-ts' }
+  );
+
   const cssFile = path.join(themesDir, path.basename(file));
   const jsFile = path.join(themesDir, path.basename(file).replace('.css', '.styles.js'));
+  const dTsFile = path.join(themesDir, path.basename(file).replace('.css', '.styles.d.ts'));
 
   fs.writeFileSync(cssFile, css, 'utf8');
   fs.writeFileSync(jsFile, js, 'utf8');
+  fs.writeFileSync(dTsFile, dTs, 'utf8');
 });

From fcf0a136f21582f24d97a7864a99add8392ecac6 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 6 Dec 2023 16:26:15 -0500
Subject: [PATCH 4/4] backport 1771

---
 custom-elements-manifest.config.js | 6 ++++++
 docs/_includes/component.njk       | 6 +++---
 docs/eleventy.config.cjs           | 6 ++++++
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/custom-elements-manifest.config.js b/custom-elements-manifest.config.js
index 5a444d3a1..303f036ed 100644
--- a/custom-elements-manifest.config.js
+++ b/custom-elements-manifest.config.js
@@ -38,6 +38,7 @@ export default {
         customElementsManifest.package = { name, description, version, author, homepage, license };
       }
     },
+
     // Infer tag names because we no longer use @customElement decorators.
     {
       name: 'wa-infer-tag-names',
@@ -66,6 +67,7 @@ export default {
         }
       }
     },
+
     // Parse custom jsDoc tags
     {
       name: 'wa-custom-tags',
@@ -137,6 +139,7 @@ export default {
         }
       }
     },
+
     {
       name: 'wa-react-event-names',
       analyzePhase({ ts, node, moduleDoc }) {
@@ -155,6 +158,7 @@ export default {
         }
       }
     },
+
     {
       name: 'wa-translate-module-paths',
       packageLinkPhase({ customElementsManifest }) {
@@ -191,6 +195,7 @@ export default {
         });
       }
     },
+
     // Generate custom VS Code data
     customElementVsCodePlugin({
       outdir,
@@ -202,6 +207,7 @@ export default {
         }
       ]
     }),
+
     customElementJetBrainsPlugin({
       outdir: './dist',
       excludeCss: true,
diff --git a/docs/_includes/component.njk b/docs/_includes/component.njk
index d2153d54a..7d74a7fb9 100644
--- a/docs/_includes/component.njk
+++ b/docs/_includes/component.njk
@@ -160,7 +160,7 @@
             </td>
             <td>
               {% if prop.type.text %}
-                <code>{{ prop.type.text | markdownInline | safe }}</code>
+                <code>{{ prop.type.text | trimPipes | markdownInline | safe }}</code>
               {% else %}
                 -
               {% endif %}
@@ -211,7 +211,7 @@
             <td>{{ event.description | markdownInline | safe }}</td>
             <td>
               {% if event.type.text %}
-                <code>{{ event.type.text }}</code>
+                <code>{{ event.type.text | trimPipes }}</code>
               {% else %}
                 -
               {% endif %}
@@ -245,7 +245,7 @@
               {% if method.parameters.length %}
                 <code>
                   {% 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 %}
                 </code>
               {% else %}
diff --git a/docs/eleventy.config.cjs b/docs/eleventy.config.cjs
index 138c121da..8c671afb4 100644
--- a/docs/eleventy.config.cjs
+++ b/docs/eleventy.config.cjs
@@ -96,6 +96,12 @@ module.exports = function (eleventyConfig) {
     return webAwesomeFlavoredMarkdown.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 content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '');
+  });
+
   eleventyConfig.addFilter('classNameToComponentName', className => {
     let name = capitalCase(className.replace(/^Wa/, ''));
     if (name === 'Qr Code') name = 'QR Code'; // manual override