@oiz/stzh-components 1.5.0-alpha → 2.0.0

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

@@ -200,6 +200,11 @@
     margin-top: var(--stzh-space-medium);
   }
 }
+@media screen and (min-width: 1260px) {
+  .stzh-message__link:not(:empty) {
+    margin-top: var(--stzh-space-large);
+  }
+}
 .stzh-message__description:empty + .stzh-message__link {
   margin-top: 0;
 }

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

@@ -94,6 +94,10 @@
   box-sizing: border-box;
 }
 
+:host {
+  --backdrop-opacity: 0.8;
+}
+
 .stzh-overlay {
   display: none;
   z-index: var(--stzh-z-index-overlay);
@@ -109,7 +113,7 @@
 .stzh-overlay__backdrop {
   z-index: 1;
   background-color: var(--stzh-color-white);
-  opacity: 0.95;
+  opacity: var(--backdrop-opacity);
   position: absolute;
   top: 0;
   left: 0;

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

@@ -95,21 +95,16 @@
 }
 
 :host ::slotted([slot=heading]) {
-  margin-bottom: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted([slot=heading]) {
-    margin-bottom: var(--stzh-space-large);
-  }
+  margin-bottom: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
   :host ::slotted([slot=heading]) {
-    margin-bottom: var(--stzh-space-xlarge);
+    margin-bottom: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   :host ::slotted([slot=heading]) {
-    margin-bottom: var(--stzh-space-xxlarge);
+    margin-bottom: var(--stzh-space-xxxlarge);
   }
 }
 :host ::slotted([slot=image]) {

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

@@ -1,64 +1,64 @@
 import { Host, h, } from "@stencil/core";
-import { computePosition, offset, shift, flip, arrow, autoUpdate, } from '@floating-ui/dom';
-import { createFocusTrap } from 'focus-trap';
+import { computePosition, offset, shift, flip, arrow, autoUpdate, } from "@floating-ui/dom";
+import { createFocusTrap } from "focus-trap";
 import { fetchTranslations } from "../../utils/translation-utils";
-import { media } from '../../utils/media-utils';
+import { media } from "../../utils/media-utils";
 import { waitForEvent } from "../../utils/event-utils";
 import { stopAnimations, animateTo } from "../../utils/animation-utils";
-import Arrow from '../stzh-tooltip/assets/arrow.svg';
+import Arrow from "../stzh-tooltip/assets/arrow.svg";
 const ANIMATION_SHOW_DURATION = 200;
 const ANIMATION_HIDE_DURATION = 300;
 const ANIMATION_SHOW_DURATION_SMALL = 100;
 const ANIMATION_HIDE_DURATION_SMALL = 200;
 function animationContentWrapperShow() {
-  const isSmall = media('small').matches;
+  const isSmall = media("small").matches;
   return {
     keyframes: [
-      { opacity: '0' },
-      { opacity: '1' }
+      { opacity: "0" },
+      { opacity: "1" }
     ],
     options: {
       duration: isSmall ? ANIMATION_SHOW_DURATION_SMALL : ANIMATION_SHOW_DURATION,
-      easing: 'linear'
+      easing: "linear"
     }
   };
 }
 function animationContentWrapperHide() {
-  const isSmall = media('small').matches;
+  const isSmall = media("small").matches;
   return {
     keyframes: [
-      { opacity: '1' },
-      { opacity: '0' }
+      { opacity: "1" },
+      { opacity: "0" }
     ],
     options: {
       duration: isSmall ? ANIMATION_HIDE_DURATION_SMALL : ANIMATION_HIDE_DURATION,
-      easing: 'linear'
+      easing: "linear"
     }
   };
 }
 function animationDialogShow() {
-  const isSmall = media('small').matches;
+  const isSmall = media("small").matches;
   return {
     keyframes: [
-      { transform: isSmall ? 'translateY(-8px)' : 'translateY(100%)' },
-      { transform: 'translateY(0px)' }
+      { transform: isSmall ? "translateY(-8px)" : "translateY(100%)" },
+      { transform: "translateY(0px)" }
     ],
     options: {
       duration: isSmall ? ANIMATION_SHOW_DURATION_SMALL : ANIMATION_SHOW_DURATION,
-      easing: 'linear'
+      easing: "linear"
     }
   };
 }
 function animationDialogHide() {
-  const isSmall = media('small').matches;
+  const isSmall = media("small").matches;
   return {
     keyframes: [
-      { transform: 'translateY(0px)' },
-      { transform: isSmall ? 'translateY(-8px)' : 'translateY(100%)' }
+      { transform: "translateY(0px)" },
+      { transform: isSmall ? "translateY(-8px)" : "translateY(100%)" }
     ],
     options: {
       duration: isSmall ? ANIMATION_HIDE_DURATION_SMALL : ANIMATION_HIDE_DURATION,
-      easing: 'linear'
+      easing: "linear"
     }
   };
 }
@@ -87,6 +87,8 @@ export class StzhPopover {
     this.skidding = 0;
     /** Label for mobile view (use label slot as alternative) */
     this.label = "";
+    /** Position strategy */
+    this.strategy = "absolute";
     this.initialTouchX = null;
     this.initialTouchY = null;
     this.handleKeydown = (event) => {
@@ -98,7 +100,7 @@ export class StzhPopover {
       this.toggle();
     };
     this.computePosition = async () => {
-      if (media('small').matches) {
+      if (media("small").matches) {
         const middleware = [
           offset({
             mainAxis: this.distance,
@@ -117,8 +119,8 @@ export class StzhPopover {
             padding: 5
           }));
         }
-        const { x = 0, y = 0, strategy = 'absolute', placement, middlewareData } = await computePosition(this.element, this.dialogElement, {
-          // strategy: 'fixed',
+        const { x = 0, y = 0, strategy = "absolute", placement, middlewareData } = await computePosition(this.element, this.dialogElement, {
+          strategy: this.strategy,
           placement: this.placement,
           middleware,
         });
@@ -130,8 +132,8 @@ export class StzhPopover {
         });
         if (this.variant === "tooltip") {
           Object.assign(this.arrowElement.style, {
-            left: x != null ? `${middlewareData.arrow.x}px` : '',
-            top: y != null ? `${middlewareData.arrow.y}px` : '',
+            left: x != null ? `${middlewareData.arrow.x}px` : "",
+            top: y != null ? `${middlewareData.arrow.y}px` : "",
           });
         }
       }
@@ -233,7 +235,7 @@ export class StzhPopover {
       this.contentWrapperElement.hidden = false;
       await Promise.all([
         animateTo(this.contentWrapperElement, animationShow.keyframes, animationShow.options),
-        animateTo(media('small').matches ? this.dialogElement : this.contentElement, animationShowDialog.keyframes, animationShowDialog.options)
+        animateTo(media("small").matches ? this.dialogElement : this.contentElement, animationShowDialog.keyframes, animationShowDialog.options)
       ]);
       if (this.toggledByMethod) {
         this.stzhOpened.emit({
@@ -256,7 +258,7 @@ export class StzhPopover {
       ]);
       await Promise.all([
         animateTo(this.contentWrapperElement, animationHide.keyframes, animationHide.options),
-        animateTo(media('small').matches ? this.dialogElement : this.contentElement, animationHideDialog.keyframes, animationHideDialog.options),
+        animateTo(media("small").matches ? this.dialogElement : this.contentElement, animationHideDialog.keyframes, animationHideDialog.options),
       ]);
       this.contentWrapperElement.hidden = true;
       this.dialogElement.style.willChange = "auto";
@@ -269,7 +271,7 @@ export class StzhPopover {
     this.toggledByMethod = false;
   }
   distanceWatcher(newValue) {
-    if (typeof newValue === 'number') {
+    if (typeof newValue === "number") {
       this.distance = newValue;
     }
     else {
@@ -281,13 +283,13 @@ export class StzhPopover {
     popoverCounter++;
     this.distanceWatcher(this.distance);
     if (!this.localization) {
-      this.localization = await fetchTranslations(this.element, 'popover');
+      this.localization = await fetchTranslations(this.element, "popover");
     }
   }
   popoverShown() {
     document.body.classList.add(CLASS_BODY_OPEN);
     this.triggerElement.firstElementChild
-      .setAttribute('aria-expanded', 'true');
+      .setAttribute("aria-expanded", "true");
     if (this.trap) {
       this.trap.activate();
     }
@@ -295,7 +297,7 @@ export class StzhPopover {
   popoverHidden() {
     document.body.classList.remove(CLASS_BODY_OPEN);
     this.triggerElement.firstElementChild
-      .setAttribute('aria-expanded', 'false');
+      .setAttribute("aria-expanded", "false");
     if (this.trap) {
       this.trap.deactivate();
     }
@@ -324,7 +326,7 @@ export class StzhPopover {
     let trigger = (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
     if (!trigger) {
       const defaultSlot = Array.from(this.element.children)
-        .find(child => !child.hasAttribute('slot'));
+        .find(child => !child.hasAttribute("slot"));
       trigger = defaultSlot;
     }
     if (trigger) {
@@ -473,6 +475,24 @@ export class StzhPopover {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "strategy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"absolute\" | \"fixed\"",
+          "resolved": "\"absolute\" | \"fixed\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Position strategy"
+        },
+        "attribute": "strategy",
+        "reflect": false,
+        "defaultValue": "\"absolute\""
+      },
       "localization": {
         "type": "unknown",
         "mutable": false,