diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 4bfec8e3..24bf5357 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1,6 +1,6 @@
# Component Index
-> 168 components exported from carbon-components-svelte@1.0.0-next.1.
+> 169 components exported from carbon-components-svelte@1.0.0-next.1.
## Components
@@ -127,6 +127,7 @@
- [`SkipToContent`](#skiptocontent)
- [`Slider`](#slider)
- [`SliderSkeleton`](#sliderskeleton)
+- [`Stack`](#stack)
- [`StructuredList`](#structuredlist)
- [`StructuredListBody`](#structuredlistbody)
- [`StructuredListCell`](#structuredlistcell)
@@ -3618,6 +3619,32 @@ None.
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
+## `Stack`
+
+### Types
+
+```ts
+export type StackScale = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13;
+```
+
+### Props
+
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :---------- | :------- | :--------------- | :------- | ------------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| gap | No | let | No | StackScale | string | 1 | Specify the gap between items in the stack.
The scale maps to Carbon layout values.
Alternatively, specify a custom value (e.g., "200px"). |
+| orientation | No | let | No | "vertical" | "horizontal" | "vertical" | Specify the orientation of the stack. |
+| tag | No | let | No | keyof HTMLElementTagNameMap | "div" | Specify the tag name |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
+
+### Events
+
+None.
+
## `StructuredList`
### Props
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index daff6e0f..7de6625f 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -1,5 +1,5 @@
{
- "total": 168,
+ "total": 169,
"components": [
{
"moduleName": "Accordion",
@@ -11453,6 +11453,59 @@
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
},
+ {
+ "moduleName": "Stack",
+ "filePath": "src/Stack/Stack.svelte",
+ "props": [
+ {
+ "name": "gap",
+ "kind": "let",
+ "description": "Specify the gap between items in the stack.\nThe scale maps to Carbon layout values.\nAlternatively, specify a custom value (e.g., \"200px\").",
+ "type": "StackScale | string",
+ "value": "1",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
+ {
+ "name": "orientation",
+ "kind": "let",
+ "description": "Specify the orientation of the stack.",
+ "type": "\"vertical\" | \"horizontal\"",
+ "value": "\"vertical\"",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
+ {
+ "name": "tag",
+ "kind": "let",
+ "description": "Specify the tag name",
+ "type": "keyof HTMLElementTagNameMap",
+ "value": "\"div\"",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ }
+ ],
+ "moduleExports": [],
+ "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+ "events": [],
+ "typedefs": [
+ {
+ "type": "1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13",
+ "name": "StackScale",
+ "ts": "type StackScale = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13"
+ }
+ ],
+ "rest_props": { "type": "Element", "name": "svelte:element" }
+ },
{
"moduleName": "StructuredList",
"filePath": "src/StructuredList/StructuredList.svelte",
diff --git a/docs/src/global.css b/docs/src/global.css
index 441bdb22..002ecc71 100644
--- a/docs/src/global.css
+++ b/docs/src/global.css
@@ -149,6 +149,7 @@ html[data-carbon-theme="g90"] .code-override {
}
.preview-viewer > .bx--aspect-ratio,
+.preview-viewer > .bx--stack > *,
.preview-viewer [data-outline] {
outline: 1px solid var(--bx-interactive);
}
diff --git a/docs/src/pages/components/Stack.svx b/docs/src/pages/components/Stack.svx
new file mode 100644
index 00000000..23d87cab
--- /dev/null
+++ b/docs/src/pages/components/Stack.svx
@@ -0,0 +1,276 @@
+
+
+`Stack` is a utility component that can be used to create a stack of elements with a consistent gap between them. It supports both vertical and horizontal orientations.
+
+It uses layout tokens from the Carbon Design System to define the gap between elements. The default gap is `1`, which is equivalent to `0.125rem` (`2px`).
+
+The `gap` scale can be set from `1` to `13`:
+
+
+ 1: 0.125rem (2px)
+ 2: 0.25rem (4px)
+ 3: 0.5rem (8px)
+ 4: 0.75rem (12px)
+ 5: 1rem (16px)
+ 6: 1.5rem (24px)
+ 7: 2rem (32px)
+ 8: 2.5rem (40px)
+ 9: 3rem (48px)
+ 10: 4rem (64px)
+ 11: 5rem (80px)
+ 12: 6rem (96px)
+ 13: 10rem (160px)
+
+
+Alternatively, you can specify an arbitrary `gap` value (e.g., `200px`).
+
+## Vertical (gap 1)
+
+By default, the `Stack` component has a vertical orientation and a gap scale of `1`.
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+## Vertical (gap 2)
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+## Vertical (gap 3)
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+## Vertical (gap 4)
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+## Vertical (gap 5)
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+## Vertical (gap 6)
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+## Vertical (gap 7)
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+## Vertical (gap 8)
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+## Vertical (gap 9)
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+## Vertical (gap 10)
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+## Vertical (gap 11)
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+## Vertical (gap 12)
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+## Vertical (gap 13)
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+## Vertical (custom value)
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+## Vertical (custom element)
+
+By default, the `Stack` component uses a `div` element. You can specify a different element using the `as` prop.
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+## Horizontal (gap 1)
+
+Set the `orientation` prop to `horizontal` to create a horizontal stack.
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+## Horizontal (gap 2)
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+## Horizontal (gap 3)
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+## Horizontal (gap 4)
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+## Horizontal (gap 5)
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+## Horizontal (gap 6)
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+## Horizontal (gap 7)
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+## Horizontal (gap 8)
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+## Horizontal (gap 9)
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+## Horizontal (gap 10)
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+## Horizontal (gap 11)
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+## Horizontal (gap 12)
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+## Horizontal (gap 13)
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+## Horizontal (custom value)
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+## Horizontal (custom element)
+
+By default, the `Stack` component uses a `div` element. You can specify a different element using the `as` prop.
+
+
+ Item 1
+ Item 2
+ Item 3
+
diff --git a/src/Stack/Stack.svelte b/src/Stack/Stack.svelte
new file mode 100644
index 00000000..51e93e39
--- /dev/null
+++ b/src/Stack/Stack.svelte
@@ -0,0 +1,66 @@
+
+
+
+
+
diff --git a/src/Stack/index.js b/src/Stack/index.js
new file mode 100644
index 00000000..cb4eee2b
--- /dev/null
+++ b/src/Stack/index.js
@@ -0,0 +1 @@
+export { default as Stack } from "./Stack.svelte";
diff --git a/src/index.js b/src/index.js
index d42445a2..4e2cfd0a 100644
--- a/src/index.js
+++ b/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,
diff --git a/tests/Stack.test.svelte b/tests/Stack.test.svelte
new file mode 100644
index 00000000..ea416a0c
--- /dev/null
+++ b/tests/Stack.test.svelte
@@ -0,0 +1,6 @@
+
+
+Content
+Content
diff --git a/types/Stack/Stack.svelte.d.ts b/types/Stack/Stack.svelte.d.ts
new file mode 100644
index 00000000..c0595c22
--- /dev/null
+++ b/types/Stack/Stack.svelte.d.ts
@@ -0,0 +1,36 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+export type StackScale = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13;
+
+type RestProps = SvelteHTMLElements["svelte:element"];
+
+export interface StackProps extends RestProps {
+ /**
+ * Specify the gap between items in the stack.
+ * The scale maps to Carbon layout values.
+ * Alternatively, specify a custom value (e.g., "200px").
+ * @default 1
+ */
+ gap?: StackScale | string;
+
+ /**
+ * Specify the orientation of the stack.
+ * @default "vertical"
+ */
+ orientation?: "vertical" | "horizontal";
+
+ /**
+ * Specify the tag name
+ * @default "div"
+ */
+ tag?: keyof HTMLElementTagNameMap;
+
+ [key: `data-${string}`]: any;
+}
+
+export default class Stack extends SvelteComponentTyped<
+ StackProps,
+ Record,
+ { default: {} }
+> {}
diff --git a/types/index.d.ts b/types/index.d.ts
index 58ab50e1..c1403334 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -113,6 +113,7 @@ export { default as SkeletonPlaceholder } from "./SkeletonPlaceholder/SkeletonPl
export { default as SkeletonText } from "./SkeletonText/SkeletonText.svelte";
export { default as Slider } from "./Slider/Slider.svelte";
export { default as SliderSkeleton } from "./Slider/SliderSkeleton.svelte";
+export { default as Stack } from "./Stack/Stack.svelte";
export { default as StructuredList } from "./StructuredList/StructuredList.svelte";
export { default as StructuredListSkeleton } from "./StructuredList/StructuredListSkeleton.svelte";
export { default as StructuredListBody } from "./StructuredList/StructuredListBody.svelte";