feat(content-switcher): add "sm", "xl" size variants

COMPONENT_INDEX.md

@@ -857,10 +857,11 @@ import { ContentSwitcher } from "carbon-components-svelte";
 
 ### Props
 
-| Prop name     | Type                 | Default value |
+| Prop name     | Type                          | Default value |
-| :------------ | :------------------- | :------------ |
+| :------------ | :---------------------------- | :------------ |
-| selectedIndex | <code>number</code>  | 0             |
+| selectedIndex | <code>number</code>           | 0             |
-| light         | <code>boolean</code> | false         |
+| light         | <code>boolean</code>          | false         |
+| size          | <code>"sm" &#124; "xl"</code> | --            |
 
 ### Slots
 

docs/src/pages/components/ContentSwitcher.svx

@@ -31,6 +31,22 @@
   <Switch text="Switch 2" />
 </ContentSwitcher>
 
+### Extra-large size
+
+<ContentSwitcher size="xl">
+  <Switch text="Switch 1" />
+  <Switch text="Switch 2" />
+  <Switch text="Switch 3" />
+</ContentSwitcher>
+
+### Small size
+
+<ContentSwitcher size="sm">
+  <Switch text="Switch 1" />
+  <Switch text="Switch 2" />
+  <Switch text="Switch 3" />
+</ContentSwitcher>
+
 ### Disabled
 
 <ContentSwitcher>

src/ContentSwitcher/ContentSwitcher.svelte

@@ -11,6 +11,12 @@
    */
   export let light = false;
 
+  /**
+   * Specify the size of the content switcher
+   * @type {"sm" | "xl"} [size]
+   */
+  export let size = undefined;
+
   import { afterUpdate, createEventDispatcher, setContext } from "svelte";
   import { writable } from "svelte/store";
 
@@ -61,6 +67,7 @@
   class:bx--content-switcher="{true}"
   class:bx--content-switcher--light="{light}"
   {...$$restProps}
+  class="{size && `bx--content-switcher--${size}`} {$$restProps.class}"
   on:click
   on:mouseover
   on:mouseenter

types/index.d.ts

@@ -261,7 +261,7 @@ export class ButtonSkeleton extends CarbonSvelteComponent {
     size?: "default" | "field" | "small";
 
     /**
-     *
+     * Set to `true` to use the small variant
      * @default false
      */
     small?: boolean;
@@ -717,6 +717,11 @@ export class ContentSwitcher extends CarbonSvelteComponent {
      * @default false
      */
     light?: boolean;
+
+    /**
+     * Specify the size of the content switcher
+     */
+    size?: "sm" | "xl";
   };
 
   $$slot_def: { default: {} };