feat(breadcrumb)!: integrate Breadcrumb with v11 (#1956)

src/Breadcrumb/Breadcrumb.svelte

@@ -1,40 +1,15 @@
 <script>
-  /** @extends {"./BreadcrumbSkeleton.svelte"} BreadcrumbSkeletonProps */
+  // @ts-check
 
   /** Set to `true` to hide the breadcrumb trailing slash */
   export let noTrailingSlash = false;
-
-  /** Set to `true` to display skeleton state */
-  export let skeleton = false;
-
-  import BreadcrumbSkeleton from "./BreadcrumbSkeleton.svelte";
 </script>
 
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-{#if skeleton}
-  <BreadcrumbSkeleton
-    noTrailingSlash="{noTrailingSlash}"
-    {...$$restProps}
-    on:click
-    on:mouseover
-    on:mouseenter
-    on:mouseleave
-  />
-{:else}
-  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-  <nav
-    aria-label="Breadcrumb"
-    {...$$restProps}
-    on:click
-    on:mouseover
-    on:mouseenter
-    on:mouseleave
+<nav aria-label="Breadcrumb" {...$$restProps}>
+  <ol
+    class:bx--breadcrumb="{true}"
+    class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}"
   >
-    <ol
-      class:bx--breadcrumb="{true}"
-      class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}"
-    >
-      <slot />
-    </ol>
-  </nav>
-{/if}
+    <slot />
+  </ol>
+</nav>

src/Breadcrumb/BreadcrumbItem.svelte

@@ -1,10 +1,13 @@
 <script>
+  // @ts-check
+
   /**
-   * @slot {{props?: { ["aria-current"]?: string; class: "bx--link"; }}}
+   * @slot {{props?: Pick<AriaAttributes, "aria-current"> & { class: "bx--link"; }}}
    */
 
   /**
-   * Set the `href` to use an anchor link
+   * Set the `href` to use an anchor link.
+   * The `Link` component is used if `href` is set.
    * @type {string}
    */
   export let href = undefined;
@@ -17,28 +20,32 @@
   import { setContext } from "svelte";
 
   setContext("BreadcrumbItem", {});
+
+  $: ariaCurrent = $$props["aria-current"];
+  $: current = isCurrentPage && ariaCurrent !== "page";
 </script>
 
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <li
   class:bx--breadcrumb-item="{true}"
-  class:bx--breadcrumb-item--current="{isCurrentPage &&
-    $$restProps['aria-current'] !== 'page'}"
+  class:bx--breadcrumb-item--current="{current}"
   {...$$restProps}
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
+  aria-current={undefined}
 >
   {#if href}
-    <Link href="{href}" aria-current="{$$restProps['aria-current']}">
+    <Link
+      href="{href}"
+      aria-current="{ariaCurrent}"
+      on:click
+      on:mouseover
+      on:mouseenter
+      on:mouseleave
+    >
       <slot />
     </Link>
   {:else}
     <slot
       props="{{
-        'aria-current': $$restProps['aria-current'],
+        'aria-current': ariaCurrent,
         class: 'bx--link',
       }}"
     />

src/Breadcrumb/BreadcrumbSkeleton.svelte

@@ -1,4 +1,6 @@
 <script>
+  // @ts-check
+
   /** Set to `true` to hide the breadcrumb trailing slash */
   export let noTrailingSlash = false;
 
@@ -6,19 +8,13 @@
   export let count = 3;
 </script>
 
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class:bx--skeleton="{true}"
   class:bx--breadcrumb="{true}"
   class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}"
   {...$$restProps}
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
 >
-  {#each Array.from({ length: count }, (_, i) => i) as item (item)}
+  {#each Array.from({ length: count }) as item}
     <div class:bx--breadcrumb-item="{true}">
       <span class:bx--link="{true}">&nbsp;</span>
     </div>