@oiz/stzh-components 2.2.0 → 2.3.0-alpha2

package/dist/collection/components/stzh-hspace/stzh-hspace.css

@@ -98,17 +98,23 @@
 }
 
 :host {
-  --space: var(--stzh-space-default);
-  --around: 0;
+  --h-space: var(--stzh-space-default);
+  --h-around: 0;
+  clear: both;
+}
+:host::after {
+  content: "";
+  display: table;
+  clear: both;
 }
 :host ::slotted(*) {
   max-width: 100%;
-  padding-left: calc(var(--space) * var(--around));
-  padding-right: calc(var(--space) * var(--around));
+  padding-left: calc(var(--h-space) * var(--h-around));
+  padding-right: calc(var(--h-space) * var(--h-around));
   margin: 0;
 }
 :host ::slotted(*:not(:last-child)) {
-  margin-right: calc(var(--space) * (1 - var(--around)));
+  margin-right: calc(var(--h-space) * (1 - var(--h-around)));
 }
 :host ::slotted(stzh-vspace),
 :host ::slotted(stzh-hspace),
@@ -119,659 +125,676 @@
   flex-grow: 1;
 }
 
-:host([around]) {
-  --around: 1;
+:host(:empty) {
+  --h-around: 1;
+  width: var(--h-space);
+}
+
+:host([around]:not([around=false])) {
+  --h-around: 1;
+}
+
+/* Border variants */
+:host([border=left]),
+:host([border=left-right]) {
+  border-left: 0.0625rem solid var(--stzh-base-border-color);
+}
+
+:host([border=right]),
+:host([border=left-right]) {
+  border-right: 0.0625rem solid var(--stzh-base-border-color);
 }
 
+/* Space variants */
 :host([curve=tiny]) {
-  --space: var(--stzh-space-xsmall);
+  --h-space: var(--stzh-space-xsmall);
 }
 @media screen and (min-width: 1024px) {
   :host([curve=tiny]) {
-    --space: var(--stzh-space-small);
+    --h-space: var(--stzh-space-small);
   }
 }
 @media screen and (min-width: 1260px) {
   :host([curve=tiny]) {
-    --space: var(--stzh-space-medium);
+    --h-space: var(--stzh-space-medium);
   }
 }
 
 :host([curve=small]) {
-  --space: var(--stzh-space-small);
+  --h-space: var(--stzh-space-small);
 }
 @media screen and (min-width: 1024px) {
   :host([curve=small]) {
-    --space: var(--stzh-space-medium);
+    --h-space: var(--stzh-space-medium);
   }
 }
 @media screen and (min-width: 1260px) {
   :host([curve=small]) {
-    --space: var(--stzh-space-large);
+    --h-space: var(--stzh-space-large);
   }
 }
 
 :host([curve=regular]) {
-  --space: var(--stzh-space-medium);
+  --h-space: var(--stzh-space-medium);
 }
 @media screen and (min-width: 1024px) {
   :host([curve=regular]) {
-    --space: var(--stzh-space-large);
+    --h-space: var(--stzh-space-large);
   }
 }
 @media screen and (min-width: 1260px) {
   :host([curve=regular]) {
-    --space: var(--stzh-space-xlarge);
+    --h-space: var(--stzh-space-xlarge);
   }
 }
 
 :host([curve=medium]) {
-  --space: var(--stzh-space-xlarge);
+  --h-space: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
   :host([curve=medium]) {
-    --space: var(--stzh-space-xxlarge);
+    --h-space: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   :host([curve=medium]) {
-    --space: var(--stzh-space-xxxlarge);
+    --h-space: var(--stzh-space-xxxlarge);
   }
 }
 
 :host([curve=large]) {
-  --space: var(--stzh-space-xxlarge);
+  --h-space: var(--stzh-space-xxlarge);
 }
 @media screen and (min-width: 1024px) {
   :host([curve=large]) {
-    --space: var(--stzh-space-xxxlarge);
+    --h-space: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   :host([curve=large]) {
-    --space: var(--stzh-space-xxxxlarge);
+    --h-space: var(--stzh-space-xxxxlarge);
   }
 }
 
 :host([curve=big]) {
-  --space: var(--stzh-space-xxxlarge);
+  --h-space: var(--stzh-space-xxxlarge);
 }
 @media screen and (min-width: 600px) {
   :host([curve=big]) {
-    --space: var(--stzh-space-xxxxlarge);
+    --h-space: var(--stzh-space-xxxxlarge);
   }
 }
 @media screen and (min-width: 1024px) {
   :host([curve=big]) {
-    --space: var(--stzh-space-big);
+    --h-space: var(--stzh-space-big);
   }
 }
 @media screen and (min-width: 1260px) {
   :host([curve=big]) {
-    --space: var(--stzh-space-xbig);
+    --h-space: var(--stzh-space-xbig);
   }
 }
 
 :host([curve=huge]) {
-  --space: var(--stzh-space-xxxxlarge);
+  --h-space: var(--stzh-space-xxxxlarge);
 }
 @media screen and (min-width: 600px) {
   :host([curve=huge]) {
-    --space: var(--stzh-space-big);
+    --h-space: var(--stzh-space-big);
   }
 }
 @media screen and (min-width: 1024px) {
   :host([curve=huge]) {
-    --space: var(--stzh-space-xbig);
+    --h-space: var(--stzh-space-xbig);
   }
 }
 @media screen and (min-width: 1260px) {
   :host([curve=huge]) {
-    --space: var(--stzh-space-huge);
+    --h-space: var(--stzh-space-huge);
   }
 }
 
 :host([size=xxxsmall]) {
-  --space: var(--stzh-space-xxxsmall);
+  --h-space: var(--stzh-space-xxxsmall);
 }
 
 :host([size=xxsmall]) {
-  --space: var(--stzh-space-xxsmall);
+  --h-space: var(--stzh-space-xxsmall);
 }
 
 :host([size=xsmall]) {
-  --space: var(--stzh-space-xsmall);
+  --h-space: var(--stzh-space-xsmall);
 }
 
 :host([size=small]) {
-  --space: var(--stzh-space-small);
+  --h-space: var(--stzh-space-small);
 }
 
 :host([size=medium]) {
-  --space: var(--stzh-space-medium);
+  --h-space: var(--stzh-space-medium);
 }
 
 :host([size=large]) {
-  --space: var(--stzh-space-large);
+  --h-space: var(--stzh-space-large);
 }
 
 :host([size=xlarge]) {
-  --space: var(--stzh-space-xlarge);
+  --h-space: var(--stzh-space-xlarge);
 }
 
 :host([size=xxlarge]) {
-  --space: var(--stzh-space-xxlarge);
+  --h-space: var(--stzh-space-xxlarge);
 }
 
 :host([size=xxxlarge]) {
-  --space: var(--stzh-space-xxxlarge);
+  --h-space: var(--stzh-space-xxxlarge);
 }
 
 :host([size=xxxxlarge]) {
-  --space: var(--stzh-space-xxxxlarge);
+  --h-space: var(--stzh-space-xxxxlarge);
 }
 
 :host([size=big]) {
-  --space: var(--stzh-space-big);
+  --h-space: var(--stzh-space-big);
 }
 
 :host([size=xbig]) {
-  --space: var(--stzh-space-xbig);
+  --h-space: var(--stzh-space-xbig);
 }
 
 :host([size=huge]) {
-  --space: var(--stzh-space-huge);
+  --h-space: var(--stzh-space-huge);
 }
 
 :host([size=xhuge]) {
-  --space: var(--stzh-space-xhuge);
+  --h-space: var(--stzh-space-xhuge);
 }
 
 :host([size=none]) {
-  --space: var(--stzh-space-none);
+  --h-space: var(--stzh-space-none);
 }
 
 :host([size=default]) {
-  --space: var(--stzh-space-default);
+  --h-space: var(--stzh-space-default);
 }
 
 @media screen and (min-width: 600px) {
   :host([size-small=xxxsmall]) {
-    --space: var(--stzh-space-xxxsmall);
+    --h-space: var(--stzh-space-xxxsmall);
   }
 }
 
 @media screen and (min-width: 600px) {
   :host([size-small=xxsmall]) {
-    --space: var(--stzh-space-xxsmall);
+    --h-space: var(--stzh-space-xxsmall);
   }
 }
 
 @media screen and (min-width: 600px) {
   :host([size-small=xsmall]) {
-    --space: var(--stzh-space-xsmall);
+    --h-space: var(--stzh-space-xsmall);
   }
 }
 
 @media screen and (min-width: 600px) {
   :host([size-small=small]) {
-    --space: var(--stzh-space-small);
+    --h-space: var(--stzh-space-small);
   }
 }
 
 @media screen and (min-width: 600px) {
   :host([size-small=medium]) {
-    --space: var(--stzh-space-medium);
+    --h-space: var(--stzh-space-medium);
   }
 }
 
 @media screen and (min-width: 600px) {
   :host([size-small=large]) {
-    --space: var(--stzh-space-large);
+    --h-space: var(--stzh-space-large);
   }
 }
 
 @media screen and (min-width: 600px) {
   :host([size-small=xlarge]) {
-    --space: var(--stzh-space-xlarge);
+    --h-space: var(--stzh-space-xlarge);
   }
 }
 
 @media screen and (min-width: 600px) {
   :host([size-small=xxlarge]) {
-    --space: var(--stzh-space-xxlarge);
+    --h-space: var(--stzh-space-xxlarge);
   }
 }
 
 @media screen and (min-width: 600px) {
   :host([size-small=xxxlarge]) {
-    --space: var(--stzh-space-xxxlarge);
+    --h-space: var(--stzh-space-xxxlarge);
   }
 }
 
 @media screen and (min-width: 600px) {
   :host([size-small=xxxxlarge]) {
-    --space: var(--stzh-space-xxxxlarge);
+    --h-space: var(--stzh-space-xxxxlarge);
   }
 }
 
 @media screen and (min-width: 600px) {
   :host([size-small=big]) {
-    --space: var(--stzh-space-big);
+    --h-space: var(--stzh-space-big);
   }
 }
 
 @media screen and (min-width: 600px) {
   :host([size-small=xbig]) {
-    --space: var(--stzh-space-xbig);
+    --h-space: var(--stzh-space-xbig);
   }
 }
 
 @media screen and (min-width: 600px) {
   :host([size-small=huge]) {
-    --space: var(--stzh-space-huge);
+    --h-space: var(--stzh-space-huge);
   }
 }
 
 @media screen and (min-width: 600px) {
   :host([size-small=xhuge]) {
-    --space: var(--stzh-space-xhuge);
+    --h-space: var(--stzh-space-xhuge);
   }
 }
 
 @media screen and (min-width: 600px) {
   :host([size-small=none]) {
-    --space: var(--stzh-space-none);
+    --h-space: var(--stzh-space-none);
   }
 }
 
 @media screen and (min-width: 600px) {
   :host([size-small=default]) {
-    --space: var(--stzh-space-default);
+    --h-space: var(--stzh-space-default);
   }
 }
 
 @media screen and (min-width: 800px) {
   :host([size-smallheader=xxxsmall]) {
-    --space: var(--stzh-space-xxxsmall);
+    --h-space: var(--stzh-space-xxxsmall);
   }
 }
 
 @media screen and (min-width: 800px) {
   :host([size-smallheader=xxsmall]) {
-    --space: var(--stzh-space-xxsmall);
+    --h-space: var(--stzh-space-xxsmall);
   }
 }
 
 @media screen and (min-width: 800px) {
   :host([size-smallheader=xsmall]) {
-    --space: var(--stzh-space-xsmall);
+    --h-space: var(--stzh-space-xsmall);
   }
 }
 
 @media screen and (min-width: 800px) {
   :host([size-smallheader=small]) {
-    --space: var(--stzh-space-small);
+    --h-space: var(--stzh-space-small);
   }
 }
 
 @media screen and (min-width: 800px) {
   :host([size-smallheader=medium]) {
-    --space: var(--stzh-space-medium);
+    --h-space: var(--stzh-space-medium);
   }
 }
 
 @media screen and (min-width: 800px) {
   :host([size-smallheader=large]) {
-    --space: var(--stzh-space-large);
+    --h-space: var(--stzh-space-large);
   }
 }
 
 @media screen and (min-width: 800px) {
   :host([size-smallheader=xlarge]) {
-    --space: var(--stzh-space-xlarge);
+    --h-space: var(--stzh-space-xlarge);
   }
 }
 
 @media screen and (min-width: 800px) {
   :host([size-smallheader=xxlarge]) {
-    --space: var(--stzh-space-xxlarge);
+    --h-space: var(--stzh-space-xxlarge);
   }
 }
 
 @media screen and (min-width: 800px) {
   :host([size-smallheader=xxxlarge]) {
-    --space: var(--stzh-space-xxxlarge);
+    --h-space: var(--stzh-space-xxxlarge);
   }
 }
 
 @media screen and (min-width: 800px) {
   :host([size-smallheader=xxxxlarge]) {
-    --space: var(--stzh-space-xxxxlarge);
+    --h-space: var(--stzh-space-xxxxlarge);
   }
 }
 
 @media screen and (min-width: 800px) {
   :host([size-smallheader=big]) {
-    --space: var(--stzh-space-big);
+    --h-space: var(--stzh-space-big);
   }
 }
 
 @media screen and (min-width: 800px) {
   :host([size-smallheader=xbig]) {
-    --space: var(--stzh-space-xbig);
+    --h-space: var(--stzh-space-xbig);
   }
 }
 
 @media screen and (min-width: 800px) {
   :host([size-smallheader=huge]) {
-    --space: var(--stzh-space-huge);
+    --h-space: var(--stzh-space-huge);
   }
 }
 
 @media screen and (min-width: 800px) {
   :host([size-smallheader=xhuge]) {
-    --space: var(--stzh-space-xhuge);
+    --h-space: var(--stzh-space-xhuge);
   }
 }
 
 @media screen and (min-width: 800px) {
   :host([size-smallheader=none]) {
-    --space: var(--stzh-space-none);
+    --h-space: var(--stzh-space-none);
   }
 }
 
 @media screen and (min-width: 800px) {
   :host([size-smallheader=default]) {
-    --space: var(--stzh-space-default);
+    --h-space: var(--stzh-space-default);
   }
 }
 
 @media screen and (min-width: 1024px) {
   :host([size-medium=xxxsmall]) {
-    --space: var(--stzh-space-xxxsmall);
+    --h-space: var(--stzh-space-xxxsmall);
   }
 }
 
 @media screen and (min-width: 1024px) {
   :host([size-medium=xxsmall]) {
-    --space: var(--stzh-space-xxsmall);
+    --h-space: var(--stzh-space-xxsmall);
   }
 }
 
 @media screen and (min-width: 1024px) {
   :host([size-medium=xsmall]) {
-    --space: var(--stzh-space-xsmall);
+    --h-space: var(--stzh-space-xsmall);
   }
 }
 
 @media screen and (min-width: 1024px) {
   :host([size-medium=small]) {
-    --space: var(--stzh-space-small);
+    --h-space: var(--stzh-space-small);
   }
 }
 
 @media screen and (min-width: 1024px) {
   :host([size-medium=medium]) {
-    --space: var(--stzh-space-medium);
+    --h-space: var(--stzh-space-medium);
   }
 }
 
 @media screen and (min-width: 1024px) {
   :host([size-medium=large]) {
-    --space: var(--stzh-space-large);
+    --h-space: var(--stzh-space-large);
   }
 }
 
 @media screen and (min-width: 1024px) {
   :host([size-medium=xlarge]) {
-    --space: var(--stzh-space-xlarge);
+    --h-space: var(--stzh-space-xlarge);
   }
 }
 
 @media screen and (min-width: 1024px) {
   :host([size-medium=xxlarge]) {
-    --space: var(--stzh-space-xxlarge);
+    --h-space: var(--stzh-space-xxlarge);
   }
 }
 
 @media screen and (min-width: 1024px) {
   :host([size-medium=xxxlarge]) {
-    --space: var(--stzh-space-xxxlarge);
+    --h-space: var(--stzh-space-xxxlarge);
   }
 }
 
 @media screen and (min-width: 1024px) {
   :host([size-medium=xxxxlarge]) {
-    --space: var(--stzh-space-xxxxlarge);
+    --h-space: var(--stzh-space-xxxxlarge);
   }
 }
 
 @media screen and (min-width: 1024px) {
   :host([size-medium=big]) {
-    --space: var(--stzh-space-big);
+    --h-space: var(--stzh-space-big);
   }
 }
 
 @media screen and (min-width: 1024px) {
   :host([size-medium=xbig]) {
-    --space: var(--stzh-space-xbig);
+    --h-space: var(--stzh-space-xbig);
   }
 }
 
 @media screen and (min-width: 1024px) {
   :host([size-medium=huge]) {
-    --space: var(--stzh-space-huge);
+    --h-space: var(--stzh-space-huge);
   }
 }
 
 @media screen and (min-width: 1024px) {
   :host([size-medium=xhuge]) {
-    --space: var(--stzh-space-xhuge);
+    --h-space: var(--stzh-space-xhuge);
   }
 }
 
 @media screen and (min-width: 1024px) {
   :host([size-medium=none]) {
-    --space: var(--stzh-space-none);
+    --h-space: var(--stzh-space-none);
   }
 }
 
 @media screen and (min-width: 1024px) {
   :host([size-medium=default]) {
-    --space: var(--stzh-space-default);
+    --h-space: var(--stzh-space-default);
   }
 }
 
 @media screen and (min-width: 1260px) {
   :host([size-large=xxxsmall]) {
-    --space: var(--stzh-space-xxxsmall);
+    --h-space: var(--stzh-space-xxxsmall);
   }
 }
 
 @media screen and (min-width: 1260px) {
   :host([size-large=xxsmall]) {
-    --space: var(--stzh-space-xxsmall);
+    --h-space: var(--stzh-space-xxsmall);
   }
 }
 
 @media screen and (min-width: 1260px) {
   :host([size-large=xsmall]) {
-    --space: var(--stzh-space-xsmall);
+    --h-space: var(--stzh-space-xsmall);
   }
 }
 
 @media screen and (min-width: 1260px) {
   :host([size-large=small]) {
-    --space: var(--stzh-space-small);
+    --h-space: var(--stzh-space-small);
   }
 }
 
 @media screen and (min-width: 1260px) {
   :host([size-large=medium]) {
-    --space: var(--stzh-space-medium);
+    --h-space: var(--stzh-space-medium);
   }
 }
 
 @media screen and (min-width: 1260px) {
   :host([size-large=large]) {
-    --space: var(--stzh-space-large);
+    --h-space: var(--stzh-space-large);
   }
 }
 
 @media screen and (min-width: 1260px) {
   :host([size-large=xlarge]) {
-    --space: var(--stzh-space-xlarge);
+    --h-space: var(--stzh-space-xlarge);
   }
 }
 
 @media screen and (min-width: 1260px) {
   :host([size-large=xxlarge]) {
-    --space: var(--stzh-space-xxlarge);
+    --h-space: var(--stzh-space-xxlarge);
   }
 }
 
 @media screen and (min-width: 1260px) {
   :host([size-large=xxxlarge]) {
-    --space: var(--stzh-space-xxxlarge);
+    --h-space: var(--stzh-space-xxxlarge);
   }
 }
 
 @media screen and (min-width: 1260px) {
   :host([size-large=xxxxlarge]) {
-    --space: var(--stzh-space-xxxxlarge);
+    --h-space: var(--stzh-space-xxxxlarge);
   }
 }
 
 @media screen and (min-width: 1260px) {
   :host([size-large=big]) {
-    --space: var(--stzh-space-big);
+    --h-space: var(--stzh-space-big);
   }
 }
 
 @media screen and (min-width: 1260px) {
   :host([size-large=xbig]) {
-    --space: var(--stzh-space-xbig);
+    --h-space: var(--stzh-space-xbig);
   }
 }
 
 @media screen and (min-width: 1260px) {
   :host([size-large=huge]) {
-    --space: var(--stzh-space-huge);
+    --h-space: var(--stzh-space-huge);
   }
 }
 
 @media screen and (min-width: 1260px) {
   :host([size-large=xhuge]) {
-    --space: var(--stzh-space-xhuge);
+    --h-space: var(--stzh-space-xhuge);
   }
 }
 
 @media screen and (min-width: 1260px) {
   :host([size-large=none]) {
-    --space: var(--stzh-space-none);
+    --h-space: var(--stzh-space-none);
   }
 }
 
 @media screen and (min-width: 1260px) {
   :host([size-large=default]) {
-    --space: var(--stzh-space-default);
+    --h-space: var(--stzh-space-default);
   }
 }
 
 @media screen and (min-width: 1440px) {
   :host([size-ultra=xxxsmall]) {
-    --space: var(--stzh-space-xxxsmall);
+    --h-space: var(--stzh-space-xxxsmall);
   }
 }
 
 @media screen and (min-width: 1440px) {
   :host([size-ultra=xxsmall]) {
-    --space: var(--stzh-space-xxsmall);
+    --h-space: var(--stzh-space-xxsmall);
   }
 }
 
 @media screen and (min-width: 1440px) {
   :host([size-ultra=xsmall]) {
-    --space: var(--stzh-space-xsmall);
+    --h-space: var(--stzh-space-xsmall);
   }
 }
 
 @media screen and (min-width: 1440px) {
   :host([size-ultra=small]) {
-    --space: var(--stzh-space-small);
+    --h-space: var(--stzh-space-small);
   }
 }
 
 @media screen and (min-width: 1440px) {
   :host([size-ultra=medium]) {
-    --space: var(--stzh-space-medium);
+    --h-space: var(--stzh-space-medium);
   }
 }
 
 @media screen and (min-width: 1440px) {
   :host([size-ultra=large]) {
-    --space: var(--stzh-space-large);
+    --h-space: var(--stzh-space-large);
   }
 }
 
 @media screen and (min-width: 1440px) {
   :host([size-ultra=xlarge]) {
-    --space: var(--stzh-space-xlarge);
+    --h-space: var(--stzh-space-xlarge);
   }
 }
 
 @media screen and (min-width: 1440px) {
   :host([size-ultra=xxlarge]) {
-    --space: var(--stzh-space-xxlarge);
+    --h-space: var(--stzh-space-xxlarge);
   }
 }
 
 @media screen and (min-width: 1440px) {
   :host([size-ultra=xxxlarge]) {
-    --space: var(--stzh-space-xxxlarge);
+    --h-space: var(--stzh-space-xxxlarge);
   }
 }
 
 @media screen and (min-width: 1440px) {
   :host([size-ultra=xxxxlarge]) {
-    --space: var(--stzh-space-xxxxlarge);
+    --h-space: var(--stzh-space-xxxxlarge);
   }
 }
 
 @media screen and (min-width: 1440px) {
   :host([size-ultra=big]) {
-    --space: var(--stzh-space-big);
+    --h-space: var(--stzh-space-big);
   }
 }
 
 @media screen and (min-width: 1440px) {
   :host([size-ultra=xbig]) {
-    --space: var(--stzh-space-xbig);
+    --h-space: var(--stzh-space-xbig);
   }
 }
 
 @media screen and (min-width: 1440px) {
   :host([size-ultra=huge]) {
-    --space: var(--stzh-space-huge);
+    --h-space: var(--stzh-space-huge);
   }
 }
 
 @media screen and (min-width: 1440px) {
   :host([size-ultra=xhuge]) {
-    --space: var(--stzh-space-xhuge);
+    --h-space: var(--stzh-space-xhuge);
   }
 }
 
 @media screen and (min-width: 1440px) {
   :host([size-ultra=none]) {
-    --space: var(--stzh-space-none);
+    --h-space: var(--stzh-space-none);
   }
 }
 
 @media screen and (min-width: 1440px) {
   :host([size-ultra=default]) {
-    --space: var(--stzh-space-default);
+    --h-space: var(--stzh-space-default);
   }
 }
 
@@ -781,9 +804,8 @@
   align-items: flex-start;
   padding: 0;
   margin: 0;
-}
-.stzh-hspace:empty {
-  width: var(--space);
+  /* Justify content variants */
+  /* Align items variants */
 }
 .stzh-hspace--border-left {
   border-left: 0.0625rem solid var(--stzh-base-border-color);
@@ -805,4 +827,16 @@
 }
 .stzh-hspace--justify-evenly {
   justify-content: space-evenly;
+}
+.stzh-hspace--items-end {
+  align-items: flex-end;
+}
+.stzh-hspace--items-center {
+  align-items: center;
+}
+.stzh-hspace--items-baseline {
+  align-items: baseline;
+}
+.stzh-hspace--items-stretch {
+  align-items: stretch;
 }