chore: lift components folder

src/Breadcrumb/Breadcrumb.Skeleton.svelte

@@ -0,0 +1,14 @@
+<div
+  class:bx--breadcrumb={true}
+  class:bx--skeleton={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  {#each [0, 1, 2] as item, i (item)}
+    <div class:bx--breadcrumb-item={true}>
+      <span class:bx--link={true}>&nbsp;</span>
+    </div>
+  {/each}
+</div>

src/Breadcrumb/Breadcrumb.Story.svelte

@@ -0,0 +1,36 @@
+<script>
+  export let story = undefined;
+  export let noTrailingSlash = undefined;
+
+  import Breadcrumb from "./Breadcrumb.svelte";
+  import BreadcrumbItem from "./BreadcrumbItem.svelte";
+  import BreadcrumbSkeleton from "./Breadcrumb.Skeleton.svelte";
+</script>
+
+{#if story === 'current page'}
+  <Breadcrumb noTrailingSlash aria-label="Breadcrumb header">
+    <BreadcrumbItem let:props>
+      <a {...props} href="/#">Breadcrumb 1</a>
+    </BreadcrumbItem>
+    <BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
+    <BreadcrumbItem href="#" isCurrentPage>Breadcrumb 3</BreadcrumbItem>
+  </Breadcrumb>
+{:else if story === 'current page with aria-current'}
+  <Breadcrumb noTrailingSlash>
+    <BreadcrumbItem let:props>
+      <a {...props} href="/#">Breadcrumb 1</a>
+    </BreadcrumbItem>
+    <BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
+    <BreadcrumbItem href="#" aria-current="page">Breadcrumb 3</BreadcrumbItem>
+  </Breadcrumb>
+{:else if story === 'skeleton'}
+  <BreadcrumbSkeleton />
+{:else}
+  <Breadcrumb {noTrailingSlash}>
+    <BreadcrumbItem let:props>
+      <a {...props} href="/#">Breadcrumb 1</a>
+    </BreadcrumbItem>
+    <BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
+    <BreadcrumbItem href="#">Breadcrumb 3</BreadcrumbItem>
+  </Breadcrumb>
+{/if}

src/Breadcrumb/Breadcrumb.stories.js

@@ -0,0 +1,26 @@
+import { withKnobs, boolean } from "@storybook/addon-knobs";
+import Component from "./Breadcrumb.Story.svelte";
+
+export default { title: "Breadcrumb", decorators: [withKnobs] };
+
+export const Default = () => ({
+  Component,
+  props: {
+    noTrailingSlash: boolean("No Trailing Slash (noTrailingSlash)", false),
+  },
+});
+
+export const Skeleton = () => ({
+  Component,
+  props: { story: "skeleton" },
+});
+
+export const CurrentPage = () => ({
+  Component,
+  props: { story: "current page" },
+});
+
+export const CurrentPageWithAriaCurrent = () => ({
+  Component,
+  props: { story: "current page with aria-current" },
+});

src/Breadcrumb/Breadcrumb.svelte

@@ -0,0 +1,17 @@
+<script>
+  export let noTrailingSlash = false;
+</script>
+
+<nav
+  aria-label="Breadcrumb"
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  <ol
+    class:bx--breadcrumb={true}
+    class:bx--breadcrumb--no-trailing-slash={noTrailingSlash}>
+    <slot />
+  </ol>
+</nav>

src/Breadcrumb/BreadcrumbItem.svelte

@@ -0,0 +1,24 @@
+<script>
+  export let href = undefined;
+  export let isCurrentPage = false;
+
+  import { Link } from "../Link";
+</script>
+
+<li
+  class:bx--breadcrumb-item={true}
+  class:bx--breadcrumb-item--current={isCurrentPage && $$restProps['aria-current'] !== 'page'}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  {#if href}
+    <Link {href} aria-current={$$restProps['aria-current']}>
+      <slot />
+    </Link>
+  {:else}
+    <slot
+      props={{ 'aria-current': $$restProps['aria-current'], class: 'bx--link' }} />
+  {/if}
+</li>

src/Breadcrumb/index.js

@@ -0,0 +1,3 @@
+export { default as Breadcrumb } from "./Breadcrumb.svelte";
+export { default as BreadcrumbItem } from "./BreadcrumbItem.svelte";
+export { default as BreadcrumbSkeleton } from "./Breadcrumb.Skeleton.svelte";