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.

docs/src/COMPONENT_API.json

@@ -4608,7 +4608,8 @@
         { "type": "dispatched", "name": "focusInputSearch" },
         { "type": "dispatched", "name": "focusOutInputSearch" }
       ],
-      "typedefs": []
+      "typedefs": [],
+      "componentComment": "\n@deprecated\nThis component is deprecated. Use `HeaderSearch` instead."
     },
     {
       "moduleName": "HeaderGlobalAction",
@@ -4991,7 +4992,8 @@
       "extends": {
         "interface": "IconSkeletonProps",
         "import": "\"./IconSkeleton.svelte\""
-      }
+      },
+      "componentComment": "\n@deprecated This component is deprecated.\nUse icons from \"carbon-icons-svelte\" instead."
     },
     {
       "moduleName": "IconSkeleton",
@@ -5017,7 +5019,8 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
-      "rest_props": { "type": "Element", "name": "div" }
+      "rest_props": { "type": "Element", "name": "div" },
+      "componentComment": "\n@deprecated This component is deprecated."
     },
     {
       "moduleName": "ImageLoader",
@@ -6985,7 +6988,8 @@
       ],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [],
-      "typedefs": []
+      "typedefs": [],
+      "componentComment": "\n@deprecated This component is deprecated."
     },
     {
       "moduleName": "NumberInput",
@@ -12716,7 +12720,8 @@
         { "type": "forwarded", "name": "blur", "element": "input" }
       ],
       "typedefs": [],
-      "rest_props": { "type": "Element", "name": "div" }
+      "rest_props": { "type": "Element", "name": "div" },
+      "componentComment": "\n@deprecated This component is deprecated.\nUse`<Toggle size=\"sm\" />` instead."
     },
     {
       "moduleName": "ToggleSmallSkeleton",
@@ -12753,7 +12758,8 @@
         { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
-      "rest_props": { "type": "Element", "name": "div" }
+      "rest_props": { "type": "Element", "name": "div" },
+      "componentComment": "\n@deprecated This component is deprecated.\nUse`<ToggleSkeleton size=\"sm\" />` instead."
     },
     {
       "moduleName": "Toolbar",

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"

types/Icon/Icon.svelte.d.ts

@@ -18,6 +18,10 @@ export interface IconProps
   skeleton?: boolean;
 }
 
+/**
+ * @deprecated This component is deprecated.
+ * Use icons from "carbon-icons-svelte" instead.
+ */
 export default class Icon extends SvelteComponentTyped<
   IconProps,
   {

types/Icon/IconSkeleton.svelte.d.ts

@@ -10,6 +10,9 @@ export interface IconSkeletonProps
   size?: number;
 }
 
+/**
+ * @deprecated This component is deprecated.
+ */
 export default class IconSkeleton extends SvelteComponentTyped<
   IconSkeletonProps,
   {

types/Notification/NotificationTextDetails.svelte.d.ts

@@ -27,6 +27,9 @@ export interface NotificationTextDetailsProps {
   caption?: string;
 }
 
+/**
+ * @deprecated This component is deprecated.
+ */
 export default class NotificationTextDetails extends SvelteComponentTyped<
   NotificationTextDetailsProps,
   {},

types/ToggleSmall/ToggleSmall.svelte.d.ts

@@ -46,6 +46,10 @@ export interface ToggleSmallProps
   name?: string;
 }
 
+/**
+ * @deprecated This component is deprecated.
+ * Use`<Toggle size="sm" />` instead.
+ */
 export default class ToggleSmall extends SvelteComponentTyped<
   ToggleSmallProps,
   {

types/ToggleSmall/ToggleSmallSkeleton.svelte.d.ts

@@ -16,6 +16,10 @@ export interface ToggleSmallSkeletonProps
   id?: string;
 }
 
+/**
+ * @deprecated This component is deprecated.
+ * Use`<ToggleSkeleton size="sm" />` instead.
+ */
 export default class ToggleSmallSkeleton extends SvelteComponentTyped<
   ToggleSmallSkeletonProps,
   {

types/UIShell/GlobalHeader/HeaderActionSearch.svelte.d.ts

@@ -9,6 +9,10 @@ export interface HeaderActionSearchProps {
   searchIsActive?: boolean;
 }
 
+/**
+ * @deprecated
+ * This component is deprecated. Use `HeaderSearch` instead.
+ */
 export default class HeaderActionSearch extends SvelteComponentTyped<
   HeaderActionSearchProps,
   {