feat(truncate): integrate Truncate with v11 (#1958)

src/Truncate/Truncate.svelte

@@ -1,12 +1,24 @@
 <script>
-  /** @type {"end" | "front"}*/
+  // @ts-check
+  
+  /**
+   * Specify the truncation direction
+   * @type {"end" | "front"}
+   */
   export let clamp = "end";
+
+  /**
+   * Specify the tag name
+   * @type {keyof HTMLElementTagNameMap}
+   */
+  export let tag = "p";
 </script>
 
-<p
+<svelte:element
+  this="{tag}"
   class:bx--text-truncate-end="{clamp === 'end'}"
   class:bx--text-truncate-front="{clamp === 'front'}"
   {...$$restProps}
 >
   <slot />
-</p>
+</svelte:element>

src/Truncate/truncate.d.ts

@@ -1,12 +1,9 @@
+import type { Action } from "svelte/action";
+
 interface TruncateOptions {
   clamp?: "end" | "front";
 }
 
-export function TruncateAction(
-  node: HTMLElement,
-  options?: TruncateOptions
-): {
-  update: (options?: TruncateOptions) => void;
-};
+export declare const truncate: Action<HTMLElement, TruncateOptions>;
 
-export default TruncateAction;
+export default truncate;

src/Truncate/truncate.js

@@ -1,7 +1,9 @@
+// @ts-check
+
 /**
  * Svelte action that applies single-line text truncation to an element
  * @typedef {{ clamp?: "end" | "front" }} TruncateOptions
- * @type {(node: HTMLElement, options?: TruncateOptions) => { update: (options?: TruncateOptions) => void; }}
+ * @type {import ("svelte/action").Action<HTMLElement, TruncateOptions>}
  * @example
  * <h1 use:truncate>...</h1>
  * <h1 use:truncate={{ clamp: "front" }}>...</h1>