feat: support skeleton prop

src/Accordion/Accordion.svelte

@@ -6,7 +6,12 @@
 </script>
 
 {#if skeleton}
-  <AccordionSkeleton {...$$restProps} />
+  <AccordionSkeleton
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave />
 {:else}
   <ul
     class:bx--accordion={true}

src/Breadcrumb/Breadcrumb.svelte

@@ -1,7 +1,18 @@
 <script>
   export let noTrailingSlash = false;
+  export let skeleton = false;
+
+  import BreadcrumbSkeleton from "./Breadcrumb.Skeleton.svelte";
 </script>
 
+{#if skeleton}
+  <BreadcrumbSkeleton
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave />
+{:else}
   <nav
     aria-label="Breadcrumb"
     {...$$restProps}
@@ -15,3 +26,4 @@
       <slot />
     </ol>
   </nav>
+{/if}

src/Button/Button.svelte

@@ -1,5 +1,6 @@
 <script>
   export let as = undefined;
+  export let skeleton = false;
   export let disabled = false;
   export let href = undefined;
   export let icon = undefined;
@@ -14,6 +15,7 @@
   export let ref = null;
 
   import { getContext } from "svelte";
+  import ButtonSkeleton from "./Button.Skeleton.svelte";
 
   const ctx = getContext("ComposedModal");
 
@@ -40,13 +42,24 @@
       hasIconOnly &&
         tooltipAlignment &&
         `bx--tooltip--align-${tooltipAlignment}`,
-      $$restProps.class
+      $$restProps.class,
     ]
       .filter(Boolean)
-      .join(" ")
+      .join(" "),
   };
 </script>
 
+{#if skeleton}
+  <ButtonSkeleton
+    {href}
+    small={size === 'small'}
+    {...$$restProps}
+    style={hasIconOnly && 'width: 3rem;'}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave />
+{:else}
   {#if as}
     <slot props={buttonProps} />
   {:else if href && !disabled}
@@ -91,3 +104,4 @@
       {/if}
     </button>
   {/if}
+{/if}

src/Checkbox/Checkbox.svelte

@@ -1,4 +1,5 @@
 <script>
+  export let skeleton = false;
   export let indeterminate = false;
   export let readonly = false;
   export let checked = false;
@@ -11,12 +12,21 @@
   export let ref = null;
 
   import { createEventDispatcher } from "svelte";
+  import CheckboxSkeleton from "./Checkbox.Skeleton.svelte";
 
   const dispatch = createEventDispatcher();
 
   $: dispatch("check", checked);
 </script>
 
+{#if skeleton}
+  <CheckboxSkeleton
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave />
+{:else}
   <div
     class:bx--form-item={true}
     class:bx--checkbox-wrapper={true}
@@ -47,3 +57,4 @@
       </span>
     </label>
   </div>
+{/if}

src/CodeSnippet/CodeSnippet.svelte

@@ -1,6 +1,7 @@
 <script>
   export let type = "single"; // "single" | "inline" | "multi"
   export let code = undefined;
+  export let expanded = false;
   export let light = false;
   export let skeleton = false;
   export let copyButtonDescription = undefined;
@@ -9,6 +10,7 @@
   export let feedbackTimeout = 2000;
   export let showLessText = "Show less";
   export let showMoreText = "Show more";
+  export let showMoreLess = false;
   export let id = "ccs-" + Math.random().toString(36);
   export let ref = null;
 
@@ -19,8 +21,6 @@
   import { CopyButton } from "../CopyButton";
   import CodeSnippetSkeleton from "./CodeSnippet.Skeleton.svelte";
 
-  $: showMoreLess = false;
-  $: expanded = false;
   $: expandText = expanded ? showLessText : showMoreText;
 
   afterUpdate(() => {
@@ -31,7 +31,13 @@
 </script>
 
 {#if skeleton}
-  <CodeSnippetSkeleton {type} {...$$restProps} />
+  <CodeSnippetSkeleton
+    {type}
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave />
 {:else}
   {#if type === 'inline'}
     <Copy