Repository: marigold-ui/marigold
Pull request #2469 (2022-09-16 10:40:48)

docs: rewrite divider docs

changeset-bot[bot]: ###  ⚠️  No Changeset found

Latest commit: 0d565233c4d04480c3c079bf64eaea1496078c5b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/master/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/marigold-ui/marigold/new/divider-docs?filename=.changeset/cyan-parrots-enjoy.md&value=---%0A%22%40marigold%2Fdocs%22%3A%20patch%0A---%0A%0Adocs%3A%20rewrite%20divider%20docs%0A)



Patch:
diff --git a/.changeset/heavy-items-hang.md b/.changeset/heavy-items-hang.md
new file mode 100644
index 000000000..689b50616
--- /dev/null
+++ b/.changeset/heavy-items-hang.md
@@ -0,0 +1,5 @@
+---
+"@marigold/components": patch
+---
+
+fix: use 'initial' for default `Container` item alignment
diff --git a/.changeset/rich-elephants-attend.md b/.changeset/rich-elephants-attend.md
new file mode 100644
index 000000000..71a30ff13
--- /dev/null
+++ b/.changeset/rich-elephants-attend.md
@@ -0,0 +1,5 @@
+---
+"@marigold/system": patch
+---
+
+feat: improve `&:hover` selector to adhere CSS specificity
diff --git a/.changeset/strong-buses-jog.md b/.changeset/strong-buses-jog.md
new file mode 100644
index 000000000..16b900234
--- /dev/null
+++ b/.changeset/strong-buses-jog.md
@@ -0,0 +1,9 @@
+---
+"@marigold/docs": patch
+"@marigold/components": major
+---
+
+refa: Improve behavior of `<Stack>` and remove option to render it as a list (use `<List>` instead)
+
+- `<Stack>` will no longer align items by default, since this will cause children to not take all the available space
+- `<Stack as="ul|ol">` will no longer work, we have a `<List>` comopnent for that
diff --git a/docs/src/components/Navigation/Navigation.tsx b/docs/src/components/Navigation/Navigation.tsx
index 80c937abb..0b39e8e30 100644
--- a/docs/src/components/Navigation/Navigation.tsx
+++ b/docs/src/components/Navigation/Navigation.tsx
@@ -1,3 +1,4 @@
+import { Badge } from '@marigold/components';
 import { Box, CSSObject, useComponentStyles } from '@marigold/system';
 import { Link, LinkProps } from '~/components/Link';
 
@@ -22,6 +23,7 @@ export interface NavigationMenuItem {
   slug: string;
   group?: string;
   order?: number;
+  badge?: string;
 }
 
 export interface NavigationProps {
@@ -32,6 +34,7 @@ export interface NavigationProps {
 
 interface NavigationItemProps extends LinkProps, NavigationStyles {
   title: string;
+  badge?: string;
 }
 
 interface NavigationMenuGroupProps
@@ -85,18 +88,30 @@ const NavigationItem = ({
   title,
   css,
   variant,
+  badge,
   ...props
 }: NavigationItemProps) => {
+  const badgeNameToLowerCase = (badge: string) => {
+    return badge.toLowerCase();
+  };
   return (
     <Box
       as="li"
       role="menuitem"
       __baseCSS={{ listStyle: 'none' }}
       css={css?.item}
+      display="flex"
+      justifyContent="space-between"
+      alignItems="center"
     >
       <Link variant="navigation" {...props}>
         {title}
       </Link>
+      {badge && (
+        <Badge variant={badgeNameToLowerCase(badge)} size="small">
+          {badge}
+        </Badge>
+      )}
     </Box>
   );
 };
@@ -113,6 +128,7 @@ const NavigationGroup = ({ name, items, css }: NavigationMenuGroupProps) => (
           css={css}
           title={item.title}
           href={`/${item.slug}`}
+          badge={item.badge}
         />
       ))}
     </Box>
diff --git a/docs/src/components/Navigation/NavigationLayout.tsx b/docs/src/components/Navigation/NavigationLayout.tsx
index bddb1b652..3c81abccc 100644
--- a/docs/src/components/Navigation/NavigationLayout.tsx
+++ b/docs/src/components/Navigation/NavigationLayout.tsx
@@ -58,7 +58,7 @@ export const NavigationLayout = ({ tree, links }: NavigationLayoutProps) => {
             ? {
                 position: ['absolute', 'static'],
                 bg: 'background.page',
-                width: '100%',
+                width: ['100%', 'auto'],
                 ml: '-1rem',
                 whiteSpace: 'nowrap',
                 zIndex: 1,
diff --git a/docs/src/demos/components/Divider/divider-bold.demo.tsx b/docs/src/demos/components/Divider/divider-bold.demo.tsx
index f7a04d5c9..3d154b797 100644
--- a/docs/src/demos/components/Divider/divider-bold.demo.tsx
+++ b/docs/src/demos/components/Divider/divider-bold.demo.tsx
@@ -1,3 +1,9 @@
-import { Divider } from '@marigold/components';
+import { Box, Divider } from '@marigold/components';
 
-export const DividerBold = () => <Divider variant="bold" />;
+export const DividerBold = () => (
+  <>
+    <Box>Up</Box>
+    <Divider variant="bold" />
+    <Box>Down</Box>
+  </>
+);
diff --git a/docs/src/demos/components/Divider/divider-section.demo.tsx b/docs/src/demos/components/Divider/divider-section.demo.tsx
new file mode 100644
index 000000000..a4a6fa482
--- /dev/null
+++ b/docs/src/demos/components/Divider/divider-section.demo.tsx
@@ -0,0 +1,15 @@
+import { Divider, Menu } from '@marigold/components';
+
+export const DividerSection = () => (
+  <Menu aria-label="Only a Menu">
+    <Menu.Item key={1}>
+      Item 1
+      <Divider variant="section" />
+    </Menu.Item>
+    <Menu.Item key={2}>
+      Item 2
+      <Divider variant="section" />
+    </Menu.Item>
+    <Menu.Item key={3}>Item 3</Menu.Item>
+  </Menu>
+);
diff --git a/docs/src/demos/components/Divider/divider.demo.tsx b/docs/src/demos/components/Divider/divider.demo.tsx
index f18bec070..f2e3c702d 100644
--- a/docs/src/demos/components/Divider/divider.demo.tsx
+++ b/docs/src/demos/components/Divider/divider.demo.tsx
@@ -1,3 +1,9 @@
-import { Divider } from '@marigold/components';
+import { Divider, Box } from '@marigold/components';
 
-export const DividerBasic = () => <Divider />;
+export const DividerBasic = () => (
+  <>
+    <Box>Content above</Box>
+    <Divider />
+    <Box>Content below</Box>
+  </>
+);
diff --git a/docs/src/demos/components/Divider/index.ts b/docs/src/demos/components/Divider/index.ts
index b36ec5109..8fb1dd49f 100644
--- a/docs/src/demos/components/Divider/index.ts
+++ b/docs/src/demos/components/Divider/index.ts
@@ -1,3 +1,4 @@
 export * from './divider.demo';
+export * from './divider-section.demo';
 export * from './divider-bold.demo';
 export * from './divider-text.demo';
diff --git a/docs/src/pages/_app.tsx b/docs/src/pages/_app.tsx
index 1bee4a505..fe83abaad 100644
--- a/docs/src/pages/_app.tsx
+++ b/docs/src/pages/_app.tsx
@@ -2,7 +2,7 @@ import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import { MDXProvider } from '@mdx-js/react';
 
-import { MarigoldProvider, SSRProvider } from '@marigold/components';
+import { Badge, MarigoldProvider, SSRProvider } from '@marigold/components';
 import * as MarigoldComponents from '@marigold/components';
 import * as MarigoldIcons from '@marigold/icons';
 import unicornTheme from '@marigold/theme-unicorn';
@@ -70,6 +70,10 @@ const components = {
   ...MarigoldIcons,
 };
 
+const badgeNameToLowercase = (badge: string) => {
+  return badge.toLowerCase();
+};
+
 export interface PageProps {
   title?: string;
   caption?: string;
@@ -77,6 +81,7 @@ export interface PageProps {
   figma?: string;
   github?: string;
   edit?: string;
+  badge?: string;
 }
 
 const MyApp = ({ Component, pageProps }: AppProps<PageProps>) => {
@@ -90,6 +95,11 @@ const MyApp = ({ Component, pageProps }: AppProps<PageProps>) => {
               <Title title={pageProps?.title} />
               {pageProps?.title && (
                 <Header>
+                  {pageProps?.badge && (
+                    <Badge variant={badgeNameToLowercase(pageProps.badge)}>
+                      {pageProps.badge}
+                    </Badge>
+                  )}
                   <GradientHeadline>{pageProps.title}</GradientHeadline>
                   {pageProps.caption && (
                     <Text variant="page-caption">{pageProps.caption}</Text>
diff --git a/docs/src/pages/components/divider.mdx b/docs/src/pages/components/divider.mdx
index 0c1269436..1f7b698e1 100644
--- a/docs/src/pages/components/divider.mdx
+++ b/docs/src/pages/components/divider.mdx
@@ -1,20 +1,31 @@
 ---
 title: Divider
-group: Layout
+group: Content
 github: https://github.com/marigold-ui/marigold/blob/main/packages/components/src/Divider/Divider.tsx
 edit: https://github.com/marigold-ui/marigold/blob/main/docs/src/pages/components/divider.mdx
+caption: Component to seperate content.
 ---
 
-A divider is a visual separator between two groups of content,
+A `<Divider>` is a visual separator between two groups of content,
 e.g. groups of menu items or sections of a page.
 
-```tsx preview file=components/Divider/divider.demo.tsx
+It has two specific variants given, `bold` and `section`. You can view some examples further down the page.
 
-```
+<Preview>
+  <DividerText />
+</Preview>
 
 ## Usage
 
-### Apperance
+### Import
+
+To import the component you just have to use this code below.
+
+```tsx
+import { Divider } from '@marigold/components';
+```
+
+### Appearance
 
 <AppearanceTable component={title} />
 
@@ -24,20 +35,26 @@ e.g. groups of menu items or sections of a page.
 
 ## Examples
 
-### Standard Divider
+### Divider between Text
+
+This shows the default behavior of the `<Divider>`.
 
-```tsx preview file=components/Divider/divider.demo.tsx
+```tsx preview file=components/Divider/divider-text.demo.tsx
 
 ```
 
-### Bold Divider
+### Section Divider variant
 
-```tsx preview file=components/Divider/divider-bold.demo.tsx
+The Example shows the `variant="section"` of the `<Divider>` component. It can be used when you want to seperate some sections like e.g. `<Menu.Items>`. It has a lighter color than the default.
+
+```tsx preview file=components/Divider/divider-section.demo.tsx
 
 ```
 
-### Divider between Text
+### Bold Divider variant
 
-```tsx preview file=components/Divider/divider-text.demo.tsx
+The other variant which you can use is the `bold` one. This is a stronger line than the other variant and should be used if you want a striking seperator.
+
+```tsx preview file=components/Divider/divider-bold.demo.tsx
 
 ```
diff --git a/docs/src/pages/components/stack.mdx b/docs/src/pages/components/stack.mdx
index 53d85d8f9..7f26ac9b0 100644
--- a/docs/src/pages/components/stack.mdx
+++ b/docs/src/pages/components/stack.mdx
@@ -23,15 +23,15 @@ Layout component to stack elements. This component uses the spaces from the give
     },
     {
       property: 'alignX',
-      type: '`left, right, center`',
+      type: '`none, left, right, center`',
       description: '',
-      default: 'left',
+      default: 'none',
     },
     {
       property: 'alignY',
-      type: '`top, bottom, center`',
+      type: '`none, top, bottom, center`',
       description: '',
-      default: 'center',
+      default: 'none',
     },
     {
       property: 'stretch',
diff --git a/docs/src/theme/colors.ts b/docs/src/theme/colors.ts
index 6627e6898..02aaf3f6e 100644
--- a/docs/src/theme/colors.ts
+++ b/docs/src/theme/colors.ts
@@ -7,7 +7,7 @@ export const colors = {
   background: {
     // alternative
     //background: '#FFF8ED',
-    light: 'hsla(28, 100%, 2.9%, .2)',
+    light: 'hsla(28, 100%, 3%, .2)',
     page: 'hsl(36, 100%, 99%)',
     foreground: 'hsl(36, 100%, 100%)',
   },
@@ -27,10 +27,25 @@ export const colors = {
   },
   yellow: {
     base: 'hsl(46, 81%, 63%)',
+    50: 'hsl(45, 97%, 54%)',
   },
   info: {
-    background: 'hsl(207.5,100%,98.3%)',
-    base: 'hsl(208,100%,82.9%)',
-    text: 'hsl(208, 100%, 20.2%)',
+    background: 'hsl(207, 100%, 98%)',
+    base: 'hsl(208, 100%, 83%)',
+    text: 'hsl(208, 100%, 20%)',
+  },
+  red: {
+    50: 'hsl(0, 100%, 71%)',
+  },
+
+  green: {
+    50: 'hsl(130, 57%, 56%)',
+  },
+
+  blue: {
+    50: 'hsl(207, 86%, 57%)',
+  },
+  orange: {
+    50: 'hsl(29, 100%, 58%)',
   },
 };
diff --git a/docs/src/theme/components/Badge.style.ts b/docs/src/theme/components/Badge.style.ts
new file mode 100644
index 000000000..dc93a8649
--- /dev/null
+++ b/docs/src/theme/components/Badge.style.ts
@@ -0,0 +1,48 @@
+import type { Theme } from '@marigold/components';
+
+export const Badge: Theme['components']['Badge'] = {
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    fontSize: 'fixed.medium-1',
+    fontFamily: 'headline',
+    textTransform: 'lowercase',
+    borderRadius: 'medium-1',
+    border: '2px solid transparent',
+    whiteSpace: 'nowrap',
+    py: 4,
+    px: 12,
+    mb: 16,
+  },
+  variant: {
+    new: {
+      color: 'text.regular',
+      borderColor: 'green.50',
+      bg: 'green.50',
+    },
+    updated: {
+      color: 'text.regular',
+      borderColor: 'blue.50',
+      bg: 'blue.50',
+    },
+    beta: {
+      color: 'text.regular',
+      borderColor: 'yellow.50',
+      bg: 'yellow.50',
+    },
+    deprecated: {
+      color: 'text.regular',
+      borderColor: 'red.50',
+      bg: 'red.50',
+    },
+  },
+  size: {
+    small: {
+      fontSize: '12px',
+      mb: 0,
+      py: 0,
+      px: 4,
+      ml: 16,
+    },
+  },
+};
diff --git a/docs/src/theme/components/index.ts b/docs/src/theme/components/index.ts
index 9eb65eaf3..f6210b8a2 100644
--- a/docs/src/theme/components/index.ts
+++ b/docs/src/theme/components/index.ts
@@ -1,3 +1,4 @@
+export * from './Badge.style';
 export * from './Button.style';
 export * from './Card.style';
 export * from './Preview.style';
diff --git a/packages/components/src/Container/Container.stories.tsx b/packages/components/src/Container/Container.stories.tsx
index 98bb39e30..f35822a33 100644
--- a/packages/components/src/Container/Container.stories.tsx
+++ b/packages/components/src/Container/Container.stories.tsx
@@ -61,29 +61,32 @@ export const Header: ComponentStory<typeof Container> = args => (
 );
 
 export const InnerContent: ComponentStory<typeof Container> = args => (
-  <Box as={Container} bg="blue10" p="small" {...args}>
-    <Headline level="2">Star Wars - The Empire Strikes Back</Headline>
-    <Box pt="xsmall" width="100%">
-      <Text>
-        It is a dark time for the Rebellion. Although the Death Star has been
-        destroyed, Imperial troops have driven the Rebel forces from their
-        hidden base and pursued them across the galaxy. Evading the dreaded
-        Imperial Starfleet, a group of freedom fighters led by Luke Skywalker
-        has established a new secret base on the remote ice world of Hoth. The
-        evil lord Darth Vader, obsessed with finding young Skywalker, has
-        dispatched thousands of remote probes into the far reaches of space....
-      </Text>
-    </Box>
-    <Box width="20ch">
-      <ul>
-        <li>Luke</li>
-        <li>Leia</li>
-        <li>Han Solo</li>
-        <li>Chewbacca</li>
-        <li>R2D2</li>
-        <li>C3PO</li>
-        <li>Darth Vader</li>
-      </ul>
-    </Box>
+  <Box bg="blue10" p="small">
+    <Container {...args}>
+      <Headline level="2">Star Wars - The Empire Strikes Back</Headline>
+      <Box pt="xsmall" width="100%">
+        <Text>
+          It is a dark time for the Rebellion. Although the Death Star has been
+          destroyed, Imperial troops have driven the Rebel forces from their
+          hidden base and pursued them across the galaxy. Evading the dreaded
+          Imperial Starfleet, a group of freedom fighters led by Luke Skywalker
+          has established a new secret base on the remote ice world of Hoth. The
+          evil lord Darth Vader, obsessed with finding young Skywalker, has
+          dispatched thousands of remote probes into the far reaches of
+          space....
+        </Text>
+      </Box>
+      <Box width="20ch">
+        <ul>
+          <li>Luke</li>
+          <li>Leia</li>
+          <li>Han Solo</li>
+          <li>Chewbacca</li>
+          <li>R2D2</li>
+          <li>C3PO</li>
+          <li>Darth Vader</li>
+        </ul>
+      </Box>
+    </Container>
   </Box>
 );
diff --git a/packages/components/src/Container/Container.tsx b/packages/components/src/Container/Container.tsx
index 66148b9e6..6421928a9 100755
--- a/packages/components/src/Container/Container.tsx
+++ b/packages/components/src/Container/Container.tsx
@@ -17,7 +17,7 @@ const ALIGN_ITEMS = {
   left: 'start',
   center: 'center',
   right: 'end',
-  none: 'undefined',
+  none: 'initial',
 };
 
 // for responsive reasons we needed to use the `minmax(0, 60ch)` value instead of `fit-content(60ch)`
diff --git a/packages/components/src/Stack/Stack.stories.tsx b/packages/components/src/Stack/Stack.stories.tsx
index 3d399ac8e..15f065f47 100644
--- a/packages/components/src/Stack/Stack.stories.tsx
+++ b/packages/components/src/Stack/Stack.stories.tsx
@@ -1,7 +1,6 @@
 import React, { ReactNode } from 'react';
 import type { Meta, ComponentStory } from '@storybook/react';
 import { Box } from '@marigold/system';
-import { shadow } from '@marigold/tokens';
 
 import { Headline } from '../Headline';
 import { Text } from '../Text';
@@ -30,14 +29,14 @@ export default {
       control: {
         type: 'select',
       },
-      options: ['left', 'center', 'right'],
+      options: ['none', 'left', 'center', 'right'],
       description: 'Vertical Alignment',
     },
     alignY: {
       control: {
         type: 'select',
       },
-      options: ['top', 'center', 'bottom'],
+      options: ['none', 'top', 'center', 'bottom'],
       description: 'Vertical Alignment',
     },
     stretch: {
@@ -45,11 +44,24 @@ export default {
         type: 'boolean',
       },
       description:
-        'Stretch to fill space (useful if you want to change y alignment)',
+        'Stretch to fill space (vertical AND horizontal, useful if you want to change y alignment)',
     },
   },
 } as Meta;
 
+const Block = ({ children }: { children: ReactNode }) => (
+  <Box
+    css={{
+      background: 'hsla(218 16% 77% / 50%)',
+      border: '1px solid hsla(218 16% 70% / 50%)',
+      borderRadius: 12,
+      p: 12,
+    }}
+  >
+    {children}
+  </Box>
+);
+
 export const Basic: ComponentStory<typeof Stack> = args => (
   <Stack {...args}>
     <Headline level="2">Heading</Headline>
@@ -69,77 +81,62 @@ export const Basic: ComponentStory<typeof Stack> = args => (
 );
 
 export const Nested: ComponentStory<typeof Stack> = args => (
-  <Stack {...args}>
-    <Stack space="xsmall">
-      <Headline level="2">Heading</Headline>
-      <Text>
-        Part 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        Suspendisse dignissim dapibus elit, vel egestas felis pharetra non. Cras
-        malesuada, massa nec ultricies efficitur, lectus ante consequat magna, a
-        porttitor massa ex ut quam.
-      </Text>
-      <Text>
-        Part 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        Suspendisse dignissim dapibus elit, vel egestas felis pharetra non. Cras
-        malesuada, massa nec ultricies efficitur, lectus ante consequat magna, a
-        porttitor massa ex ut quam.
-      </Text>
-    </Stack>
-    <Stack space="xsmall">
-      <Headline level="2">Heading</Headline>
-      <Text>
-        Part 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        Suspendisse dignissim dapibus elit, vel egestas felis pharetra non. Cras
-        malesuada, massa nec ultricies efficitur, lectus ante consequat magna, a
-        porttitor massa ex ut quam.
-      </Text>
-      <Text>
-        Part 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        Suspendisse dignissim dapibus elit, vel egestas felis pharetra non. Cras
-        malesuada, massa nec ultricies efficitur, lectus ante consequat magna, a
-        porttitor massa ex ut quam.
-      </Text>
-    </Stack>
-  </Stack>
-);
-
-export const List: ComponentStory<typeof Stack> = args => (
-  <Stack space="large">
-    <Stack as="ol" {...args}>
-      <li>one</li>
-      <li>two</li>
-      <li>three</li>
-    </Stack>
-    <Stack as="ul" {...args}>
-      <li>one</li>
-      <li>two</li>
-      <li>three</li>
+  <Block>
+    <Stack {...args}>
+      <Stack space="xsmall">
+        <Block>
+          <Headline level="2">With xsmall spacing</Headline>
+        </Block>
+        <Block>
+          <Text>
+            Part 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Suspendisse dignissim dapibus elit, vel egestas felis pharetra non.
+            Cras malesuada, massa nec ultricies efficitur, lectus ante consequat
+            magna, a porttitor massa ex ut quam.
+          </Text>
+        </Block>
+        <Block>
+          <Text>
+            Part 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Suspendisse dignissim dapibus elit, vel egestas felis pharetra non.
+            Cras malesuada, massa nec ultricies efficitur, lectus ante consequat
+            magna, a porttitor massa ex ut quam.
+          </Text>
+        </Block>
+      </Stack>
+      <Stack space="medium">
+        <Block>
+          <Headline level="2">With Medium Spacing</Headline>
+        </Block>
+        <Block>
+          <Text>
+            Part 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Suspendisse dignissim dapibus elit, vel egestas felis pharetra non.
+            Cras malesuada, massa nec ultricies efficitur, lectus ante consequat
+            magna, a porttitor massa ex ut quam.
+          </Text>
+        </Block>
+        <Block>
+          <Text>
+            Part 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Suspendisse dignissim dapibus elit, vel egestas felis pharetra non.
+            Cras malesuada, massa nec ultricies efficitur, lectus ante consequat
+            magna, a porttitor massa ex ut quam.
+          </Text>
+        </Block>
+      </Stack>
     </Stack>
-  </Stack>
-);
-
-const Block = ({ children }: { children: ReactNode }) => (
-  <Box
-    css={{
-      border: '1px solid #364fc7',
-      borderRadius: 16,
-      bg: '#4263eb',
-      color: '#edf2ff',
-      px: 32,
-      py: 12,
-      boxShadow: shadow['medium-1'],
-    }}
-  >
-    {children}
-  </Box>
+  </Block>
 );
 
 export const Stretch: ComponentStory<typeof Stack> = args => (
-  <Box css={{ height: 300 }}>
-    <Stack {...args}>
-      <Block>Lirum</Block>
-      <Block>Larum</Block>
-      <Block>Löffelstiel!</Block>
-    </Stack>
-  </Box>
+  <Block>
+    <Box css={{ height: 300 }}>
+      <Stack {...args}>
+        <Block>Lirum</Block>
+        <Block>Larum</Block>
+        <Block>Löffelstiel!</Block>
+      </Stack>
+    </Box>
+  </Block>
 );
diff --git a/packages/components/src/Stack/Stack.tsx b/packages/components/src/Stack/Stack.tsx
index 8266dc9e0..69caab6b8 100755
--- a/packages/components/src/Stack/Stack.tsx
+++ b/packages/components/src/Stack/Stack.tsx
@@ -2,13 +2,16 @@ import React, { ReactNode } from 'react';
 import { ResponsiveStyleValue } from '@marigold/system';
 
 import { Box } from '../Box';
+
 const ALIGNMENT_X = {
+  none: 'initial',
   left: 'flex-start',
   center: 'center',
   right: 'flex-end',
 };
 
 const ALIGNMENT_Y = {
+  none: 'initial',
   top: 'flex-start',
   center: 'center',
   bottom: 'flex-end',
@@ -17,7 +20,6 @@ const ALIGNMENT_Y = {
 // Props
 // ---------------
 export interface StackProps {
-  as?: 'div' | 'ul' | 'ol';
   children?: ReactNode;
   space?: ResponsiveStyleValue<string>;
   alignX?: keyof typeof ALIGNMENT_X;
@@ -30,8 +32,8 @@ export interface StackProps {
 export const Stack = ({
   children,
   space = 'none',
-  alignX = 'left',
-  alignY = 'top',
+  alignX = 'none',
+  alignY = 'none',
   stretch = false,
   ...props
 }: StackProps) => (
@@ -43,7 +45,7 @@ export const Stack = ({
       gap: space,
       alignItems: ALIGNMENT_X[alignX],
       justifyContent: ALIGNMENT_Y[alignY],
-      blockSize: stretch ? '100%' : 'auto',
+      blockSize: stretch ? '100%' : 'initial',
     }}
     {...props}
   >
diff --git a/packages/system/src/components/Box/selector.ts b/packages/system/src/components/Box/selector.ts
index 3df58a404..627010afd 100644
--- a/packages/system/src/components/Box/selector.ts
+++ b/packages/system/src/components/Box/selector.ts
@@ -20,7 +20,7 @@ const selector = {
 
 const state = {
   none: [''],
-  hover: [':hover', '[data-hover]'],
+  hover: [':hover:enabled', '[data-hover]'],
   focus: [':focus', '[data-focus]'],
   focusVisible: [':focus-visible', '[data-focus-visible]'],
   active: [':active', '[data-active]'],


Test patch:
diff --git a/packages/components/src/Container/Container.test.tsx b/packages/components/src/Container/Container.test.tsx
index d8479d31f..5dcd1ba4e 100644
--- a/packages/components/src/Container/Container.test.tsx
+++ b/packages/components/src/Container/Container.test.tsx
@@ -107,7 +107,7 @@ test('supports default align items none', () => {
     </Container>
   );
   const container = screen.getByTestId(/container/);
-  expect(container).toHaveStyle(`placeItems: undefined`);
+  expect(container).toHaveStyle(`placeItems: initial`);
 });
 
 test('supports align items center', () => {
diff --git a/packages/components/src/Stack/Stack.test.tsx b/packages/components/src/Stack/Stack.test.tsx
index d7bb8f347..f0f263698 100644
--- a/packages/components/src/Stack/Stack.test.tsx
+++ b/packages/components/src/Stack/Stack.test.tsx
@@ -30,7 +30,7 @@ test('default space is "none"', () => {
   expect(first).toHaveStyle(`gap: 0`);
 });
 
-test('accepts and uses spacing from theme', () => {
+test('uses spacing from theme', () => {
   render(
     <ThemeProvider theme={theme}>
       <Stack space="small">
@@ -43,13 +43,23 @@ test('accepts and uses spacing from theme', () => {
   expect(first).toHaveStyle(`gap: 2px`);
 });
 
-test('align children left by default', () => {
+test('children are not aligned by default', () => {
   render(
     <Stack data-testid="stack">
       <Text>first</Text>
     </Stack>
   );
   const stack = screen.getByTestId('stack');
+  expect(stack).toHaveStyle(`align-items: initial`);
+});
+
+test('allows to align children to the left', () => {
+  render(
+    <Stack alignX="left" data-testid="stack">
+      <Text>first</Text>
+    </Stack>
+  );
+  const stack = screen.getByTestId('stack');
   expect(stack).toHaveStyle(`align-items: flex-start`);
 });
 
@@ -73,13 +83,23 @@ test('allows to align children to the right', () => {
   expect(stack).toHaveStyle(`align-items: flex-end`);
 });
 
-test('children to the top by default', () => {
+test('children are not aligned vertically by default', () => {
   render(
     <Stack data-testid="stack">
       <Text>first</Text>
     </Stack>
   );
   const stack = screen.getByTestId('stack');
+  expect(stack).toHaveStyle(`justify-content: initial`);
+});
+
+test('allows to align children to the vertical top', () => {
+  render(
+    <Stack alignY="top" data-testid="stack">
+      <Text>first</Text>
+    </Stack>
+  );
+  const stack = screen.getByTestId('stack');
   expect(stack).toHaveStyle(`justify-content: flex-start`);
 });
 
@@ -110,7 +130,7 @@ test('behaves as inline be default', () => {
     </Stack>
   );
   const stack = screen.getByTestId('stack');
-  expect(stack).toHaveStyle(`blockSize: auto`);
+  expect(stack).toHaveStyle(`blockSize: initial`);
 });
 
 test('allows to fill space', () => {
@@ -162,31 +182,3 @@ test('renders as div per default', () => {
   const stack = screen.getByTestId('stack');
   expect(stack instanceof HTMLDivElement).toBeTruthy();
 });
-
-test('can render as "ul"', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Stack as="ul" data-testid="stack">
-        <Text>first</Text>
-        <Text>second</Text>
-      </Stack>
-    </ThemeProvider>
-  );
-
-  const stack = screen.getByTestId('stack');
-  expect(stack instanceof HTMLUListElement).toBeTruthy();
-});
-
-test('can render as "ol"', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Stack as="ol" data-testid="stack">
-        <Text>first</Text>
-        <Text>second</Text>
-      </Stack>
-    </ThemeProvider>
-  );
-
-  const stack = screen.getByTestId('stack');
-  expect(stack instanceof HTMLOListElement).toBeTruthy();
-});
diff --git a/packages/system/src/components/Box/selector.test.ts b/packages/system/src/components/Box/selector.test.ts
index d78e6387d..f21724855 100644
--- a/packages/system/src/components/Box/selector.test.ts
+++ b/packages/system/src/components/Box/selector.test.ts
@@ -23,7 +23,7 @@ describe('transform states', () => {
         '&:hover': {},
       },
       expected: {
-        '&:hover, &[data-hover]': {},
+        '&:hover:enabled, &[data-hover]': {},
       },
     },
     {
@@ -131,7 +131,7 @@ describe('transform states', () => {
         '&:hover-group': {},
       },
       expected: {
-        '[role=group]:hover &, [role=group][data-hover] &, [data-group]:hover &, [data-group][data-hover] &':
+        '[role=group]:hover:enabled &, [role=group][data-hover] &, [data-group]:hover:enabled &, [data-group][data-hover] &':
           {},
       },
     },
@@ -182,7 +182,7 @@ describe('transform states', () => {
       })
     ).toMatchInlineSnapshot(`
       {
-        "&:hover, &[data-hover]": {
+        "&:hover:enabled, &[data-hover]": {
           "&:focus, &[data-focus]": {
             "outline": "1px solid #228be6",
           },