From 0aa38ec81a6282a12fbc456b95943e25471b0bf0 Mon Sep 17 00:00:00 2001
From: Enrico Sacchetti <enrico@theetrain.ca>
Date: Thu, 4 Jan 2024 22:49:40 -0500
Subject: [PATCH] chore: use truncate mixins

---
 COMPONENT_INDEX.md                     | 2 +-
 docs/src/COMPONENT_API.json            | 2 +-
 docs/src/pages/components/Truncate.svx | 4 ++--
 src/Truncate/Truncate.svelte           | 4 ++--
 src/Truncate/truncate.js               | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index c87e7ef4..bf80ff3e 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1,6 +1,6 @@
 # Component Index
 
-> 164 components exported from carbon-components-svelte@0.82.7.
+> 165 components exported from carbon-components-svelte@0.82.7.
 
 ## Components
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 4c83eb4e..04ec09bd 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -1,5 +1,5 @@
 {
-  "total": 164,
+  "total": 165,
   "components": [
     {
       "moduleName": "Accordion",
diff --git a/docs/src/pages/components/Truncate.svx b/docs/src/pages/components/Truncate.svx
index efa56aeb..68d0dcb8 100644
--- a/docs/src/pages/components/Truncate.svx
+++ b/docs/src/pages/components/Truncate.svx
@@ -4,7 +4,7 @@
   import Preview from "../../components/Preview.svelte";
 </script>
 
-This utility component wraps the `.bx--text-truncate--*` CSS selectors from [carbon-components](https://github.com/carbon-design-system/carbon/blob/master/packages/components/src/globals/scss/_helper-classes.scss#L11) for single-line text truncation.
+This utility component wraps the `.bx--text-truncate-*` Sass mixins from [@carbon/styles](https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/utilities/_text-truncate.scss) for single-line text truncation.
 
 ## Default
 
@@ -31,4 +31,4 @@ The `truncate` action can be used on plain HTML elements.
 </h4>
 <h4 use:truncate={{ clamp: "front" }}>
   Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
-</h4>
\ No newline at end of file
+</h4>
diff --git a/src/Truncate/Truncate.svelte b/src/Truncate/Truncate.svelte
index 465d66d8..f9853f06 100644
--- a/src/Truncate/Truncate.svelte
+++ b/src/Truncate/Truncate.svelte
@@ -4,8 +4,8 @@
 </script>
 
 <p
-  class:bx--text-truncate--end="{clamp === 'end'}"
-  class:bx--text-truncate--front="{clamp === 'front'}"
+  class:bx--text-truncate-end="{clamp === 'end'}"
+  class:bx--text-truncate-front="{clamp === 'front'}"
   {...$$restProps}
 >
   <slot />
diff --git a/src/Truncate/truncate.js b/src/Truncate/truncate.js
index 42723c09..c737b317 100644
--- a/src/Truncate/truncate.js
+++ b/src/Truncate/truncate.js
@@ -7,7 +7,7 @@
  * <h1 use:truncate={{ clamp: "front" }}>...</h1>
  */
 export function truncate(node, options = {}) {
-  const prefix = "bx--text-truncate--";
+  const prefix = "bx--text-truncate-";
 
   function toggleClass(front = false) {
     const classes = [...node.classList]