feat(button-skeleton): add size prop consistent with Button

COMPONENT_INDEX.md

@@ -462,10 +462,11 @@ import { ButtonSkeleton } from "carbon-components-svelte";
 
 ### Props
 
-| Prop name | Type                 | Default value |
+| Prop name | Type                                                 | Default value |
-| :-------- | :------------------- | :------------ |
+| :-------- | :--------------------------------------------------- | :------------ |
-| href      | <code>string</code>  | --            |
+| href      | <code>string</code>                                  | --            |
-| small     | <code>boolean</code> | false         |
+| size      | <code>"default" &#124; "field" &#124; "small"</code> | "default"     |
+| small     | <code>boolean</code>                                 | false         |
 
 ### Slots
 
@@ -3219,6 +3220,7 @@ import { ProgressIndicatorSkeleton } from "carbon-components-svelte";
 | Prop name | Type                 | Default value |
 | :-------- | :------------------- | :------------ |
 | vertical  | <code>boolean</code> | false         |
+| count     | <code>number</code>  | 4             |
 
 ### Slots
 

docs/src/pages/components/Button.svx

@@ -68,4 +68,6 @@ description: High-level description
 
 ### Skeleton
 
-<Button skeleton />
+<Button skeleton />
+<Button skeleton size="field" />
+<Button skeleton size="small" />

src/Button/Button.Skeleton.svelte

@@ -5,6 +5,12 @@
    */
   export let href = undefined;
 
+  /**
+   * Specify the size of button skeleton
+   * @type {"default" | "field" | "small"} [size="default"]
+   */
+  export let size = "default";
+
   /**
    * Set to `true` to use the small variant
    * @type {boolean} [small=false]
@@ -19,7 +25,8 @@
     role="button"
     class:bx--skeleton="{true}"
     class:bx--btn="{true}"
-    class:bx--btn--sm="{small}"
+    class:bx--btn--field="{size === 'field'}"
+    class:bx--btn--sm="{size === 'small' || small}"
     {...$$restProps}
     on:click
     on:mouseover
@@ -32,7 +39,8 @@
   <div
     class:bx--skeleton="{true}"
     class:bx--btn="{true}"
-    class:bx--btn--sm="{small}"
+    class:bx--btn--field="{size === 'field'}"
+    class:bx--btn--sm="{size === 'small' || small}"
     {...$$restProps}
     on:click
     on:mouseover

src/Button/Button.svelte

@@ -123,7 +123,7 @@
 {#if skeleton}
   <ButtonSkeleton
     href="{href}"
-    small="{size === 'small'}"
+    size="{size}"
     {...$$restProps}
     style="{hasIconOnly && 'width: 3rem;'}"
     on:click

types/index.d.ts

@@ -227,7 +227,13 @@ export class ButtonSkeleton extends CarbonSvelteComponent {
     href?: string;
 
     /**
-     * Set to `true` to use the small variant
+     * Specify the size of button skeleton
+     * @default "default"
+     */
+    size?: "default" | "field" | "small";
+
+    /**
+     *
      * @default false
      */
     small?: boolean;
@@ -3144,6 +3150,12 @@ export class ProgressIndicatorSkeleton extends CarbonSvelteComponent {
      * @default false
      */
     vertical?: boolean;
+
+    /**
+     * Specify the number of steps to render
+     * @default 4
+     */
+    count?: number;
   };
 }