feat(stack): add Stack component (#1963)

src/Stack/Stack.svelte

@@ -0,0 +1,66 @@
+<script>
+  // @ts-check
+
+  /**
+   * The stack scale maps to the following `@carbon/layout` values:
+   * - 1 --> 0.125rem
+   * - 2 --> 0.25rem
+   * - 3 --> 0.5rem
+   * - 4 --> 0.75rem
+   * - 5 --> 1rem
+   * - 6 --> 1.5rem
+   * - 7 --> 2rem
+   * - 8 --> 2.5rem
+   * - 9 --> 3rem
+   * - 10 --> 4rem
+   * - 11 --> 5rem
+   * - 12 --> 6rem
+   * - 13 --> 10rem
+   * @typedef {1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13} StackScale
+   */
+
+  /**
+   * Specify the gap between items in the stack.
+   * The scale maps to Carbon layout values.
+   * Alternatively, specify a custom value (e.g., "200px").
+   * @type {StackScale | string}
+   */
+  export let gap = 1;
+
+  /**
+   * Specify the orientation of the stack.
+   * @type {"vertical" | "horizontal"}
+   */
+
+  export let orientation = "vertical";
+
+  /**
+   * Specify the tag name
+   * @type {keyof HTMLElementTagNameMap}
+   */
+  export let tag = "div";
+</script>
+
+<svelte:element
+  this="{tag}"
+  class:bx--stack="{true}"
+  class:bx--stack-vertical="{orientation === 'vertical'}"
+  class:bx--stack-horizontal="{orientation === 'horizontal'}"
+  class:bx--stack-scale-1="{gap === 1}"
+  class:bx--stack-scale-2="{gap === 2}"
+  class:bx--stack-scale-3="{gap === 3}"
+  class:bx--stack-scale-4="{gap === 4}"
+  class:bx--stack-scale-5="{gap === 5}"
+  class:bx--stack-scale-6="{gap === 6}"
+  class:bx--stack-scale-7="{gap === 7}"
+  class:bx--stack-scale-8="{gap === 8}"
+  class:bx--stack-scale-9="{gap === 9}"
+  class:bx--stack-scale-10="{gap === 10}"
+  class:bx--stack-scale-11="{gap === 11}"
+  class:bx--stack-scale-12="{gap === 12}"
+  class:bx--stack-scale-13="{gap === 13}"
+  style:--bx-stack-gap={typeof gap === 'string' ? gap : undefined}
+  {...$$restProps}
+>
+  <slot />
+</svelte:element>

src/Stack/index.js

@@ -0,0 +1 @@
+export { default as Stack } from "./Stack.svelte";

src/index.js

@@ -101,6 +101,7 @@ export { Select, SelectSkeleton, SelectItem, SelectItemGroup } from "./Select";
 export { SkeletonPlaceholder } from "./SkeletonPlaceholder";
 export { SkeletonText } from "./SkeletonText";
 export { Slider, SliderSkeleton } from "./Slider";
+export { Stack } from "./Stack";
 export {
   StructuredList,
   StructuredListSkeleton,