chore: use truncate mixins

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
 

docs/src/COMPONENT_API.json

@@ -1,5 +1,5 @@
 {
-  "total": 164,
+  "total": 165,
   "components": [
     {
       "moduleName": "Accordion",

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>
+</h4>

src/Truncate/Truncate.svelte

@@ -4,8 +4,8 @@
 </script>
 
 <p
-  class:bx--text-truncate--end="{clamp === 'end'}"
+  class:bx--text-truncate-end="{clamp === 'end'}"
-  class:bx--text-truncate--front="{clamp === 'front'}"
+  class:bx--text-truncate-front="{clamp === 'front'}"
   {...$$restProps}
 >
   <slot />

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]