fix(types): use @component comments for deprecation notices (#1111)

The Svelte Language Server allows component-level comments through `<!-- @component ... -->` syntax.

Deprecation notices for components should be moved from the script block to the markup template.

src/Icon/Icon.svelte

@@ -1,10 +1,4 @@
 <script>
-  /**
-   * @deprecated
-   * This component will be removed in version 1.0.0.
-   * Use icons from "carbon-icons-svelte" instead
-   */
-
   /**
    * @extends {"./IconSkeleton.svelte"} IconSkeletonProps
    * @restProps {svg}
@@ -22,6 +16,11 @@
   import IconSkeleton from "./IconSkeleton.svelte";
 </script>
 
+<!-- @component
+@deprecated This component is deprecated.
+Use icons from "carbon-icons-svelte" instead.
+-->
+
 {#if skeleton}
   <IconSkeleton
     {...$$restProps}

src/Icon/IconSkeleton.svelte

@@ -1,13 +1,12 @@
 <script>
-  /**
-   * @deprecated
-   * This component will be removed in version 1.0.0.
-   */
-
   /** Set the size of the icon */
   export let size = 16;
 </script>
 
+<!-- @component
+@deprecated This component is deprecated.
+-->
+
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--icon--skeleton="{true}"

src/Notification/NotificationTextDetails.svelte

@@ -1,9 +1,4 @@
 <script>
-  /**
-   * @deprecated
-   * This component will be removed in version 1.0.0.
-   */
-
   /**
    * Set the type of notification
    * @type {"toast" | "inline"}
@@ -20,6 +15,10 @@
   export let caption = "Caption";
 </script>
 
+<!-- @component
+@deprecated This component is deprecated.
+-->
+
 {#if notificationType === "toast"}
   <div class:bx--toast-notification__details="{true}">
     <h3 class:bx--toast-notification__title="{true}">{title}</h3>

src/ToggleSmall/ToggleSmall.svelte

@@ -1,10 +1,4 @@
 <script>
-  /**
-   * @deprecated
-   * This component will be removed in version 1.0.0.
-   * Use `<Toggle size="sm" />` instead
-   */
-
   /** Set to `true` to toggle the checkbox input */
   export let toggled = false;
 
@@ -30,6 +24,11 @@
   export let name = undefined;
 </script>
 
+<!-- @component
+@deprecated This component is deprecated.
+Use`<Toggle size="sm" />` instead.
+-->
+
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--form-item="{true}"

src/ToggleSmall/ToggleSmallSkeleton.svelte

@@ -1,10 +1,4 @@
 <script>
-  /**
-   * @deprecated
-   * This component will be removed in version 1.0.0.
-   * Use `<ToggleSkeleton size="sm" />` instead
-   */
-
   /** Specify the label text */
   export let labelText = "";
 
@@ -12,6 +6,11 @@
   export let id = "ccs-" + Math.random().toString(36);
 </script>
 
+<!-- @component
+@deprecated This component is deprecated.
+Use`<ToggleSkeleton size="sm" />` instead.
+-->
+
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--form-item="{true}"

src/UIShell/GlobalHeader/HeaderActionSearch.svelte

@@ -1,10 +1,4 @@
 <script>
-  /**
-   * @deprecated
-   * This component will be removed in version 1.0.0.
-   * Use `HeaderSearch` instead
-   */
-
   /**
    * @event {{ action: "search"; textInput: string; }} inputSearch
    */
@@ -64,6 +58,10 @@
   }}"
 />
 
+<!-- @component
+@deprecated
+This component is deprecated. Use `HeaderSearch` instead.
+-->
 <div
   bind:this="{elTypeSearch}"
   role="search"