Create the stack element

src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts

@@ -33,4 +33,5 @@ export * from './multiple-color-picker-input/index.js';
 export * from './multiple-text-string-input/index.js';
 export * from './popover-layout/index.js';
 export * from './ref-item/index.js';
+export * from './stack/index.js';
 export * from './table/index.js';

src/Umbraco.Web.UI.Client/src/packages/core/components/stack/index.ts

@@ -0,0 +1 @@
+export * from './stack.element.js';

src/Umbraco.Web.UI.Client/src/packages/core/components/stack/stack.element.ts

@@ -0,0 +1,84 @@
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+import { customElement, html, css, property, classMap } from "@umbraco-cms/backoffice/external/lit";
+
+/**
+ *  @element umb-stack
+ *  @description - Element for displaying items in a stack with even spacing between
+ *  @extends LitElement
+ */
+@customElement('umb-stack')
+export class UmbStackElement extends UmbLitElement
+{
+		/**
+			 * Look
+			 * @type {String}
+			 * @memberof UmbStackElement
+			 */
+    @property({ type:String })
+    look: 'compact' | 'default' = 'default';
+
+		/**
+			 * Divide
+			 * @type {Boolean}
+			 * @memberof UmbStackElement
+			 */
+    @property({ type:Boolean })
+    divide: boolean = false;
+
+    render() {
+        return html`<div class=${classMap({ divide: this.divide, compact: this.look === 'compact' })}>
+            <slot></slot>
+        </div>`;
+    }
+
+    static styles = [
+        css`
+            div {
+                display: block;
+                position: relative;
+            }
+
+            ::slotted(*) {
+                position: relative;
+                margin-top: var(--uui-size-space-6);
+            }
+
+            .divide ::slotted(*)::before {
+                content: '';
+                position: absolute;
+                top: calc((var(--uui-size-space-6) / 2) * -1);
+                height: 0;
+                width: 100%;
+                border-top: solid 1px var(--uui-color-divider-standalone);
+            }
+
+            ::slotted(*:first-child) {
+                margin-top: 0;
+            }
+
+            .divide ::slotted(*:first-child)::before {
+                display: none;
+            }
+
+            .compact ::slotted(*) {
+                margin-top: var(--uui-size-space-3);
+            }
+
+            .compact ::slotted(*:first-child) {
+                margin-top: 0;
+            }
+
+            .compact.divide ::slotted(*)::before {
+                display: none;
+            }
+        `
+    ];
+}
+
+export default UmbStackElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-stack': UmbStackElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/components/stack/stack.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import './stack.element.js';
+import type { UmbStackElement} from './stack.element.js';
+
+const meta: Meta<UmbStackElement> = {
+	title: 'Components/Stack',
+	component: 'umb-stack',
+};
+
+export default meta;
+
+type Story = StoryObj<UmbStackElement>;
+
+export const Default: Story = {
+	args: { },
+};
+
+export const Divide: Story = {
+	args: {
+		divide: true
+	},
+};
+
+export const Compact: Story = {
+	args: {
+		look: 'compact'
+	},
+};