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,8 +1,19 @@
 <script>
   export let noTrailingSlash = false;
+  export let skeleton = false;
+
+  import BreadcrumbSkeleton from "./Breadcrumb.Skeleton.svelte";
 </script>
 
-<nav
+{#if skeleton}
+  <BreadcrumbSkeleton
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave />
+{:else}
+  <nav
     aria-label="Breadcrumb"
     {...$$restProps}
     on:click
@@ -14,4 +25,5 @@
       class:bx--breadcrumb--no-trailing-slash={noTrailingSlash}>
       <slot />
     </ol>
-</nav>
+  </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,16 +42,27 @@
       hasIconOnly &&
         tooltipAlignment &&
         `bx--tooltip--align-${tooltipAlignment}`,
-      $$restProps.class
+      $$restProps.class,
     ]
       .filter(Boolean)
-      .join(" ")
+      .join(" "),
   };
 </script>
 
-{#if as}
+{#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}
+  {:else if href && !disabled}
     <!-- svelte-ignore a11y-missing-attribute -->
     <a
       bind:this={ref}
@@ -70,7 +83,7 @@
           aria-label={iconDescription} />
       {/if}
     </a>
-{:else}
+  {:else}
     <button
       bind:this={ref}
       {...buttonProps}
@@ -90,4 +103,5 @@
           aria-label={iconDescription} />
       {/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,13 +12,22 @@
   export let ref = null;
 
   import { createEventDispatcher } from "svelte";
+  import CheckboxSkeleton from "./Checkbox.Skeleton.svelte";
 
   const dispatch = createEventDispatcher();
 
   $: dispatch("check", checked);
 </script>
 
-<div
+{#if skeleton}
+  <CheckboxSkeleton
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave />
+{:else}
+  <div
     class:bx--form-item={true}
     class:bx--checkbox-wrapper={true}
     {...$$restProps}
@@ -46,4 +56,5 @@
         {labelText}
       </span>
     </label>
-</div>
+  </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