@oiz/stzh-components 3.3.0-beta2 → 3.3.0-beta5

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

@@ -167,310 +167,342 @@
   --row-gap: var(--stzh-row-row-gap, 0px);
 }
 
-:host([span="1"]) ::slotted(stzh-cell) {
-  flex: 0 0 8.3333333333%;
-  max-width: 8.3333333333%;
+:host([span="1"]) ::slotted(stzh-cell:not([span])) {
+  --cell-width: 8.3333333333%;
 }
 
-:host([span="2"]) ::slotted(stzh-cell) {
-  flex: 0 0 16.6666666667%;
-  max-width: 16.6666666667%;
+:host([span="2"]) ::slotted(stzh-cell:not([span])) {
+  --cell-width: 16.6666666667%;
 }
 
-:host([span="3"]) ::slotted(stzh-cell) {
-  flex: 0 0 25%;
-  max-width: 25%;
+:host([span="3"]) ::slotted(stzh-cell:not([span])) {
+  --cell-width: 25%;
 }
 
-:host([span="4"]) ::slotted(stzh-cell) {
-  flex: 0 0 33.3333333333%;
-  max-width: 33.3333333333%;
+:host([span="4"]) ::slotted(stzh-cell:not([span])) {
+  --cell-width: 33.3333333333%;
 }
 
-:host([span="5"]) ::slotted(stzh-cell) {
-  flex: 0 0 41.6666666667%;
-  max-width: 41.6666666667%;
+:host([span="5"]) ::slotted(stzh-cell:not([span])) {
+  --cell-width: 41.6666666667%;
 }
 
-:host([span="6"]) ::slotted(stzh-cell) {
-  flex: 0 0 50%;
-  max-width: 50%;
+:host([span="6"]) ::slotted(stzh-cell:not([span])) {
+  --cell-width: 50%;
 }
 
-:host([span="7"]) ::slotted(stzh-cell) {
-  flex: 0 0 58.3333333333%;
-  max-width: 58.3333333333%;
+:host([span="7"]) ::slotted(stzh-cell:not([span])) {
+  --cell-width: 58.3333333333%;
 }
 
-:host([span="8"]) ::slotted(stzh-cell) {
-  flex: 0 0 66.6666666667%;
-  max-width: 66.6666666667%;
+:host([span="8"]) ::slotted(stzh-cell:not([span])) {
+  --cell-width: 66.6666666667%;
 }
 
-:host([span="9"]) ::slotted(stzh-cell) {
-  flex: 0 0 75%;
-  max-width: 75%;
+:host([span="9"]) ::slotted(stzh-cell:not([span])) {
+  --cell-width: 75%;
 }
 
-:host([span="10"]) ::slotted(stzh-cell) {
-  flex: 0 0 83.3333333333%;
-  max-width: 83.3333333333%;
+:host([span="10"]) ::slotted(stzh-cell:not([span])) {
+  --cell-width: 83.3333333333%;
 }
 
-:host([span="11"]) ::slotted(stzh-cell) {
-  flex: 0 0 91.6666666667%;
-  max-width: 91.6666666667%;
+:host([span="11"]) ::slotted(stzh-cell:not([span])) {
+  --cell-width: 91.6666666667%;
 }
 
-:host([span="12"]) ::slotted(stzh-cell) {
-  flex: 0 0 100%;
-  max-width: 100%;
+:host([span="12"]) ::slotted(stzh-cell:not([span])) {
+  --cell-width: 100%;
 }
 
-@media (min-width: 600px) {
-  :host([span-small="1"]) ::slotted(stzh-cell) {
-    flex: 0 0 8.3333333333%;
-    max-width: 8.3333333333%;
+@media screen and (min-width: 600px) {
+  :host([span-small="1"]) ::slotted(stzh-cell:not([span-small])) {
+    --cell-width: 8.3333333333%;
   }
+}
 
-  :host([span-small="2"]) ::slotted(stzh-cell) {
-    flex: 0 0 16.6666666667%;
-    max-width: 16.6666666667%;
+@media screen and (min-width: 600px) {
+  :host([span-small="2"]) ::slotted(stzh-cell:not([span-small])) {
+    --cell-width: 16.6666666667%;
   }
+}
 
-  :host([span-small="3"]) ::slotted(stzh-cell) {
-    flex: 0 0 25%;
-    max-width: 25%;
+@media screen and (min-width: 600px) {
+  :host([span-small="3"]) ::slotted(stzh-cell:not([span-small])) {
+    --cell-width: 25%;
   }
+}
 
-  :host([span-small="4"]) ::slotted(stzh-cell) {
-    flex: 0 0 33.3333333333%;
-    max-width: 33.3333333333%;
+@media screen and (min-width: 600px) {
+  :host([span-small="4"]) ::slotted(stzh-cell:not([span-small])) {
+    --cell-width: 33.3333333333%;
   }
+}
 
-  :host([span-small="5"]) ::slotted(stzh-cell) {
-    flex: 0 0 41.6666666667%;
-    max-width: 41.6666666667%;
+@media screen and (min-width: 600px) {
+  :host([span-small="5"]) ::slotted(stzh-cell:not([span-small])) {
+    --cell-width: 41.6666666667%;
   }
+}
 
-  :host([span-small="6"]) ::slotted(stzh-cell) {
-    flex: 0 0 50%;
-    max-width: 50%;
+@media screen and (min-width: 600px) {
+  :host([span-small="6"]) ::slotted(stzh-cell:not([span-small])) {
+    --cell-width: 50%;
   }
+}
 
-  :host([span-small="7"]) ::slotted(stzh-cell) {
-    flex: 0 0 58.3333333333%;
-    max-width: 58.3333333333%;
+@media screen and (min-width: 600px) {
+  :host([span-small="7"]) ::slotted(stzh-cell:not([span-small])) {
+    --cell-width: 58.3333333333%;
   }
+}
 
-  :host([span-small="8"]) ::slotted(stzh-cell) {
-    flex: 0 0 66.6666666667%;
-    max-width: 66.6666666667%;
+@media screen and (min-width: 600px) {
+  :host([span-small="8"]) ::slotted(stzh-cell:not([span-small])) {
+    --cell-width: 66.6666666667%;
   }
+}
 
-  :host([span-small="9"]) ::slotted(stzh-cell) {
-    flex: 0 0 75%;
-    max-width: 75%;
+@media screen and (min-width: 600px) {
+  :host([span-small="9"]) ::slotted(stzh-cell:not([span-small])) {
+    --cell-width: 75%;
   }
+}
 
-  :host([span-small="10"]) ::slotted(stzh-cell) {
-    flex: 0 0 83.3333333333%;
-    max-width: 83.3333333333%;
+@media screen and (min-width: 600px) {
+  :host([span-small="10"]) ::slotted(stzh-cell:not([span-small])) {
+    --cell-width: 83.3333333333%;
   }
+}
 
-  :host([span-small="11"]) ::slotted(stzh-cell) {
-    flex: 0 0 91.6666666667%;
-    max-width: 91.6666666667%;
+@media screen and (min-width: 600px) {
+  :host([span-small="11"]) ::slotted(stzh-cell:not([span-small])) {
+    --cell-width: 91.6666666667%;
   }
+}
 
-  :host([span-small="12"]) ::slotted(stzh-cell) {
-    flex: 0 0 100%;
-    max-width: 100%;
+@media screen and (min-width: 600px) {
+  :host([span-small="12"]) ::slotted(stzh-cell:not([span-small])) {
+    --cell-width: 100%;
   }
 }
-@media (min-width: 900px) {
-  :host([span-medium="1"]) ::slotted(stzh-cell) {
-    flex: 0 0 8.3333333333%;
-    max-width: 8.3333333333%;
+
+@media screen and (min-width: 900px) {
+  :host([span-medium="1"]) ::slotted(stzh-cell:not([span-medium])) {
+    --cell-width: 8.3333333333%;
   }
+}
 
-  :host([span-medium="2"]) ::slotted(stzh-cell) {
-    flex: 0 0 16.6666666667%;
-    max-width: 16.6666666667%;
+@media screen and (min-width: 900px) {
+  :host([span-medium="2"]) ::slotted(stzh-cell:not([span-medium])) {
+    --cell-width: 16.6666666667%;
   }
+}
 
-  :host([span-medium="3"]) ::slotted(stzh-cell) {
-    flex: 0 0 25%;
-    max-width: 25%;
+@media screen and (min-width: 900px) {
+  :host([span-medium="3"]) ::slotted(stzh-cell:not([span-medium])) {
+    --cell-width: 25%;
   }
+}
 
-  :host([span-medium="4"]) ::slotted(stzh-cell) {
-    flex: 0 0 33.3333333333%;
-    max-width: 33.3333333333%;
+@media screen and (min-width: 900px) {
+  :host([span-medium="4"]) ::slotted(stzh-cell:not([span-medium])) {
+    --cell-width: 33.3333333333%;
   }
+}
 
-  :host([span-medium="5"]) ::slotted(stzh-cell) {
-    flex: 0 0 41.6666666667%;
-    max-width: 41.6666666667%;
+@media screen and (min-width: 900px) {
+  :host([span-medium="5"]) ::slotted(stzh-cell:not([span-medium])) {
+    --cell-width: 41.6666666667%;
   }
+}
 
-  :host([span-medium="6"]) ::slotted(stzh-cell) {
-    flex: 0 0 50%;
-    max-width: 50%;
+@media screen and (min-width: 900px) {
+  :host([span-medium="6"]) ::slotted(stzh-cell:not([span-medium])) {
+    --cell-width: 50%;
   }
+}
 
-  :host([span-medium="7"]) ::slotted(stzh-cell) {
-    flex: 0 0 58.3333333333%;
-    max-width: 58.3333333333%;
+@media screen and (min-width: 900px) {
+  :host([span-medium="7"]) ::slotted(stzh-cell:not([span-medium])) {
+    --cell-width: 58.3333333333%;
   }
+}
 
-  :host([span-medium="8"]) ::slotted(stzh-cell) {
-    flex: 0 0 66.6666666667%;
-    max-width: 66.6666666667%;
+@media screen and (min-width: 900px) {
+  :host([span-medium="8"]) ::slotted(stzh-cell:not([span-medium])) {
+    --cell-width: 66.6666666667%;
   }
+}
 
-  :host([span-medium="9"]) ::slotted(stzh-cell) {
-    flex: 0 0 75%;
-    max-width: 75%;
+@media screen and (min-width: 900px) {
+  :host([span-medium="9"]) ::slotted(stzh-cell:not([span-medium])) {
+    --cell-width: 75%;
   }
+}
 
-  :host([span-medium="10"]) ::slotted(stzh-cell) {
-    flex: 0 0 83.3333333333%;
-    max-width: 83.3333333333%;
+@media screen and (min-width: 900px) {
+  :host([span-medium="10"]) ::slotted(stzh-cell:not([span-medium])) {
+    --cell-width: 83.3333333333%;
   }
+}
 
-  :host([span-medium="11"]) ::slotted(stzh-cell) {
-    flex: 0 0 91.6666666667%;
-    max-width: 91.6666666667%;
+@media screen and (min-width: 900px) {
+  :host([span-medium="11"]) ::slotted(stzh-cell:not([span-medium])) {
+    --cell-width: 91.6666666667%;
   }
+}
 
-  :host([span-medium="12"]) ::slotted(stzh-cell) {
-    flex: 0 0 100%;
-    max-width: 100%;
+@media screen and (min-width: 900px) {
+  :host([span-medium="12"]) ::slotted(stzh-cell:not([span-medium])) {
+    --cell-width: 100%;
   }
 }
-@media (min-width: 1260px) {
-  :host([span-large="1"]) ::slotted(stzh-cell) {
-    flex: 0 0 8.3333333333%;
-    max-width: 8.3333333333%;
+
+@media screen and (min-width: 1260px) {
+  :host([span-large="1"]) ::slotted(stzh-cell:not([span-large])) {
+    --cell-width: 8.3333333333%;
   }
+}
 
-  :host([span-large="2"]) ::slotted(stzh-cell) {
-    flex: 0 0 16.6666666667%;
-    max-width: 16.6666666667%;
+@media screen and (min-width: 1260px) {
+  :host([span-large="2"]) ::slotted(stzh-cell:not([span-large])) {
+    --cell-width: 16.6666666667%;
   }
+}
 
-  :host([span-large="3"]) ::slotted(stzh-cell) {
-    flex: 0 0 25%;
-    max-width: 25%;
+@media screen and (min-width: 1260px) {
+  :host([span-large="3"]) ::slotted(stzh-cell:not([span-large])) {
+    --cell-width: 25%;
   }
+}
 
-  :host([span-large="4"]) ::slotted(stzh-cell) {
-    flex: 0 0 33.3333333333%;
-    max-width: 33.3333333333%;
+@media screen and (min-width: 1260px) {
+  :host([span-large="4"]) ::slotted(stzh-cell:not([span-large])) {
+    --cell-width: 33.3333333333%;
   }
+}
 
-  :host([span-large="5"]) ::slotted(stzh-cell) {
-    flex: 0 0 41.6666666667%;
-    max-width: 41.6666666667%;
+@media screen and (min-width: 1260px) {
+  :host([span-large="5"]) ::slotted(stzh-cell:not([span-large])) {
+    --cell-width: 41.6666666667%;
   }
+}
 
-  :host([span-large="6"]) ::slotted(stzh-cell) {
-    flex: 0 0 50%;
-    max-width: 50%;
+@media screen and (min-width: 1260px) {
+  :host([span-large="6"]) ::slotted(stzh-cell:not([span-large])) {
+    --cell-width: 50%;
   }
+}
 
-  :host([span-large="7"]) ::slotted(stzh-cell) {
-    flex: 0 0 58.3333333333%;
-    max-width: 58.3333333333%;
+@media screen and (min-width: 1260px) {
+  :host([span-large="7"]) ::slotted(stzh-cell:not([span-large])) {
+    --cell-width: 58.3333333333%;
   }
+}
 
-  :host([span-large="8"]) ::slotted(stzh-cell) {
-    flex: 0 0 66.6666666667%;
-    max-width: 66.6666666667%;
+@media screen and (min-width: 1260px) {
+  :host([span-large="8"]) ::slotted(stzh-cell:not([span-large])) {
+    --cell-width: 66.6666666667%;
   }
+}
 
-  :host([span-large="9"]) ::slotted(stzh-cell) {
-    flex: 0 0 75%;
-    max-width: 75%;
+@media screen and (min-width: 1260px) {
+  :host([span-large="9"]) ::slotted(stzh-cell:not([span-large])) {
+    --cell-width: 75%;
   }
+}
 
-  :host([span-large="10"]) ::slotted(stzh-cell) {
-    flex: 0 0 83.3333333333%;
-    max-width: 83.3333333333%;
+@media screen and (min-width: 1260px) {
+  :host([span-large="10"]) ::slotted(stzh-cell:not([span-large])) {
+    --cell-width: 83.3333333333%;
   }
+}
 
-  :host([span-large="11"]) ::slotted(stzh-cell) {
-    flex: 0 0 91.6666666667%;
-    max-width: 91.6666666667%;
+@media screen and (min-width: 1260px) {
+  :host([span-large="11"]) ::slotted(stzh-cell:not([span-large])) {
+    --cell-width: 91.6666666667%;
   }
+}
 
-  :host([span-large="12"]) ::slotted(stzh-cell) {
-    flex: 0 0 100%;
-    max-width: 100%;
+@media screen and (min-width: 1260px) {
+  :host([span-large="12"]) ::slotted(stzh-cell:not([span-large])) {
+    --cell-width: 100%;
   }
 }
-@media (min-width: 1600px) {
-  :host([span-ultra="1"]) ::slotted(stzh-cell) {
-    flex: 0 0 8.3333333333%;
-    max-width: 8.3333333333%;
+
+@media screen and (min-width: 1600px) {
+  :host([span-ultra="1"]) ::slotted(stzh-cell:not([span-ultra])) {
+    --cell-width: 8.3333333333%;
   }
+}
 
-  :host([span-ultra="2"]) ::slotted(stzh-cell) {
-    flex: 0 0 16.6666666667%;
-    max-width: 16.6666666667%;
+@media screen and (min-width: 1600px) {
+  :host([span-ultra="2"]) ::slotted(stzh-cell:not([span-ultra])) {
+    --cell-width: 16.6666666667%;
   }
+}
 
-  :host([span-ultra="3"]) ::slotted(stzh-cell) {
-    flex: 0 0 25%;
-    max-width: 25%;
+@media screen and (min-width: 1600px) {
+  :host([span-ultra="3"]) ::slotted(stzh-cell:not([span-ultra])) {
+    --cell-width: 25%;
   }
+}
 
-  :host([span-ultra="4"]) ::slotted(stzh-cell) {
-    flex: 0 0 33.3333333333%;
-    max-width: 33.3333333333%;
+@media screen and (min-width: 1600px) {
+  :host([span-ultra="4"]) ::slotted(stzh-cell:not([span-ultra])) {
+    --cell-width: 33.3333333333%;
   }
+}
 
-  :host([span-ultra="5"]) ::slotted(stzh-cell) {
-    flex: 0 0 41.6666666667%;
-    max-width: 41.6666666667%;
+@media screen and (min-width: 1600px) {
+  :host([span-ultra="5"]) ::slotted(stzh-cell:not([span-ultra])) {
+    --cell-width: 41.6666666667%;
   }
+}
 
-  :host([span-ultra="6"]) ::slotted(stzh-cell) {
-    flex: 0 0 50%;
-    max-width: 50%;
+@media screen and (min-width: 1600px) {
+  :host([span-ultra="6"]) ::slotted(stzh-cell:not([span-ultra])) {
+    --cell-width: 50%;
   }
+}
 
-  :host([span-ultra="7"]) ::slotted(stzh-cell) {
-    flex: 0 0 58.3333333333%;
-    max-width: 58.3333333333%;
+@media screen and (min-width: 1600px) {
+  :host([span-ultra="7"]) ::slotted(stzh-cell:not([span-ultra])) {
+    --cell-width: 58.3333333333%;
   }
+}
 
-  :host([span-ultra="8"]) ::slotted(stzh-cell) {
-    flex: 0 0 66.6666666667%;
-    max-width: 66.6666666667%;
+@media screen and (min-width: 1600px) {
+  :host([span-ultra="8"]) ::slotted(stzh-cell:not([span-ultra])) {
+    --cell-width: 66.6666666667%;
   }
+}
 
-  :host([span-ultra="9"]) ::slotted(stzh-cell) {
-    flex: 0 0 75%;
-    max-width: 75%;
+@media screen and (min-width: 1600px) {
+  :host([span-ultra="9"]) ::slotted(stzh-cell:not([span-ultra])) {
+    --cell-width: 75%;
   }
+}
 
-  :host([span-ultra="10"]) ::slotted(stzh-cell) {
-    flex: 0 0 83.3333333333%;
-    max-width: 83.3333333333%;
+@media screen and (min-width: 1600px) {
+  :host([span-ultra="10"]) ::slotted(stzh-cell:not([span-ultra])) {
+    --cell-width: 83.3333333333%;
   }
+}
 
-  :host([span-ultra="11"]) ::slotted(stzh-cell) {
-    flex: 0 0 91.6666666667%;
-    max-width: 91.6666666667%;
+@media screen and (min-width: 1600px) {
+  :host([span-ultra="11"]) ::slotted(stzh-cell:not([span-ultra])) {
+    --cell-width: 91.6666666667%;
   }
+}
 
-  :host([span-ultra="12"]) ::slotted(stzh-cell) {
-    flex: 0 0 100%;
-    max-width: 100%;
+@media screen and (min-width: 1600px) {
+  :host([span-ultra="12"]) ::slotted(stzh-cell:not([span-ultra])) {
+    --cell-width: 100%;
   }
 }
+
 .stzh-row {
   display: flex;
   flex-wrap: wrap;
@@ -482,6 +514,30 @@
   /* Align items variants */
   /* Align content variants */
 }
+@media screen and (min-width: 600px) {
+  .stzh-row {
+    margin-left: calc(var(--stzh-grid-gutter-small) / -2);
+    margin-right: calc(var(--stzh-grid-gutter-small) / -2);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-row {
+    margin-left: calc(var(--stzh-grid-gutter-medium) / -2);
+    margin-right: calc(var(--stzh-grid-gutter-medium) / -2);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-row {
+    margin-left: calc(var(--stzh-grid-gutter-large) / -2);
+    margin-right: calc(var(--stzh-grid-gutter-large) / -2);
+  }
+}
+@media screen and (min-width: 1600px) {
+  .stzh-row {
+    margin-left: calc(var(--stzh-grid-gutter-ultra) / -2);
+    margin-right: calc(var(--stzh-grid-gutter-ultra) / -2);
+  }
+}
 .stzh-row--justify-end {
   justify-content: flex-end;
 }

package/dist/collection/components/stzh-tooltip/stzh-tooltip.js

@@ -135,6 +135,7 @@ export class StzhTooltip {
         trigger.addEventListener("focusout", this.onBlurTrigger);
       }
     };
+    this.initializedTooltip = false;
     this.open = false;
     this.label = "";
     this.content = "";
@@ -243,7 +244,6 @@ export class StzhTooltip {
     }
   }
   componentDidRender() {
-    this.computePosition();
     const isStzh = isStzhElement(this.triggerFirstElement);
     if (this.hasTrigger("click")) {
       this.triggerFirstElement.setAttribute(isStzh ? "a11y-expanded" : "aria-expanded", this.open ? "true" : "false");
@@ -271,23 +271,35 @@ export class StzhTooltip {
     }
   }
   componentDidUpdate() {
-    if (this.trap) {
-      this.trap.updateContainerElements(this.contentElement);
+    if (this.open && !this.initializedTooltip) {
+      this.initializeAutoUpdate();
+      this.initializeFocusTrap();
+      this.initializedTooltip = true;
+    }
+    if (this.initializedTooltip) {
+      this.computePosition();
+      if (this.trap) {
+        this.trap.updateContainerElements(this.contentElement);
+      }
     }
   }
-  componentDidLoad() {
+  initializeAutoUpdate() {
     this.autoUpdateCleanup = autoUpdate(this.element, this.contentElement, this.computePosition);
+  }
+  initializeFocusTrap() {
     if (this.interactive) {
       this.trap = createFocusTrap(this.contentElement, {
         fallbackFocus: this.contentElement,
         clickOutsideDeactivates: true,
         returnFocusOnDeactivate: true,
       });
-      if (this.open) {
-        this.trap.activate();
-      }
     }
+  }
+  componentDidLoad() {
     this.contentElement.hidden = !this.open;
+    if (this.open && this.trap) {
+      this.trap.activate();
+    }
   }
   connectedCallback() {
     this.init();