refactor(truncate): rename "direction" prop to "clamp"

COMPONENT_INDEX.md

@@ -4285,7 +4285,7 @@ None.
 
 | Prop name | Kind             | Reactive | Type                              | Default value      | Description |
 | :-------- | :--------------- | :------- | :-------------------------------- | ------------------ | ----------- |
-| direction | <code>let</code> | No       | <code>"end" &#124; "front"</code> | <code>"end"</code> | --          |
+| clamp     | <code>let</code> | No       | <code>"end" &#124; "front"</code> | <code>"end"</code> | --          |
 
 ### Slots
 

actions/truncate.js

@@ -1,24 +1,25 @@
 /**
  * Svelte action that applies single-line text truncation to an element
  * @param {HTMLElement} node
- * @param {{ direction?: "end" | "front" }} params
+ * @param {{ clamp?: "end" | "front" }} params
  * @example
  * <script>
  *   import { truncate } from "carbon-components-svelte/actions";
  * </script>
  *
  * <h1 use:truncate>...</h1>
+ * <h1 use:truncate={{ clamp: "front" }}>...</h1>
  */
 export function truncate(node, params = {}) {
   function toggleClass(front = false) {
     node.className = `bx--text-truncate--${front ? "front" : "end"}`;
   }
 
-  toggleClass(params.direction === "front");
+  toggleClass(params.clamp === "front");
 
   return {
     update(params) {
-      toggleClass(params.direction === "front");
+      toggleClass(params.clamp === "front");
     },
   };
 }

docs/src/COMPONENT_API.json

@@ -10669,7 +10669,7 @@
       "filePath": "src/Truncate/Truncate.svelte",
       "props": [
         {
-          "name": "direction",
+          "name": "clamp",
           "kind": "let",
           "type": "\"end\" | \"front\"",
           "value": "\"end\"",
@@ -10681,7 +10681,7 @@
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [],
       "typedefs": [],
-      "rest_props": { "type": "Element", "name": "div" }
+      "rest_props": { "type": "Element", "name": "p" }
     },
     {
       "moduleName": "UnorderedList",

docs/src/pages/components/Truncate.svx

@@ -5,7 +5,7 @@
   import Preview from "../../components/Preview.svelte";
 </script>
 
-This is a utility component that wraps the `.bx--text-truncate--*` CSS selector from `carbon-components` for single line text truncation.
+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.
 
 ### Default
 
@@ -15,11 +15,11 @@ By default, text will be clamped at the end of the line. Text is wrapped with a
   Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
 </Truncate>
 
-### Direction (front)
+### Clamp front
 
-Set `direction` to `"front"` to clamp the text from the front.
+Set `clamp` to `"front"` to clamp the text from the front.
 
-<Truncate direction="front">
+<Truncate clamp="front">
   Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
 </Truncate>
 
@@ -32,6 +32,6 @@ Import path: `import { truncate } from "carbon-components-svelte/actions";`
 <h4 use:truncate>
   Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
 </h4>
-<h4 use:truncate={{ direction: "front" }}>
+<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>

src/Truncate/Truncate.svelte

@@ -1,11 +1,11 @@
 <script>
   /** @type {"end" | "front"}*/
-  export let direction = "end";
+  export let clamp = "end";
 </script>
 
 <p
-  class:bx--text-truncate--end="{direction === 'end'}"
+  class:bx--text-truncate--end="{clamp === 'end'}"
-  class:bx--text-truncate--front="{direction === 'front'}"
+  class:bx--text-truncate--front="{clamp === 'front'}"
   {...$$restProps}
 >
   <slot />

tests/Truncate.test.svelte

@@ -8,7 +8,7 @@
   Carbon Design System, an open source design system by IBM.
 </Truncate>
 
-<Truncate direction="front">
+<Truncate clamp="front">
   Carbon Components Svelte is a Svelte component library that implements the
   Carbon Design System, an open source design system by IBM.
 </Truncate>
@@ -17,7 +17,7 @@
   Carbon Components Svelte is a Svelte component library that implements the
   Carbon Design System, an open source design system by IBM.
 </h4>
-<h4 use:truncate="{{ direction: 'front' }}">
+<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>

types/Truncate/Truncate.d.ts

@@ -2,11 +2,11 @@
 import { SvelteComponentTyped } from "svelte";
 
 export interface TruncateProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["p"]> {
   /**
    * @default "end"
    */
-  direction?: "end" | "front";
+  clamp?: "end" | "front";
 }
 
 export default class Truncate extends SvelteComponentTyped<