umb-stack element

[mattbrailsford]

Description

The PR introduces a new umb-stack element. The purpose of this element is to provide consistent spacing between stacks of items.

There is a default and a compact mode, as well as a flag to include a dividing line.

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Motivation and context

I was finding myself adding the same styles in a lot of places to space items in a list. These were becoming inconsistent and a annoying to copy. I thought it would be good if we had a component that applied the spacing when needed. This should also be useful for things like umb-property which is currently struggling to align correctly in places. With this, we can remove any styling from individual elements, and let the stack do the layout.

How to test?

Create a umb-stack element and create any number of items inside of it. These should all be spaced nicely.

<umb-stack>
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</umb-stack>

Checklist

• If my change requires a change to the documentation, I have updated the documentation in this pull request.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.

[bjarnef]

Perhaps the divider itself could be an component something like this:
https://shoelace.style/components/divider/

But not sure it is needed specific for the stacked content (unless it should have an option/attribute og umb-stack to tell is dividers should be added). In that case divider should probably be a component added to UI library.