@oiz/stzh-components 1.4.0-npmjstest → 2.0.0-beta

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

@@ -122,6 +122,7 @@
   /* Styles for floating label */
   /* Button Right Variant */
   /* Size variants */
+  /* Spin button */
   /* Invalid */
   /* Readonly / Disabled */
 }
@@ -265,8 +266,8 @@
   font-family: var(--stzh-font-family-heavy);
   font-weight: var(--stzh-font-weight-heavy);
   font-style: normal;
-  font-size: var(--stzh-font-micro-font-size);
-  line-height: var(--stzh-font-micro-text-line-height);
+  font-size: var(--stzh-font-nano-font-size);
+  line-height: var(--stzh-font-nano-text-line-height);
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -318,9 +319,7 @@
 .stzh-input--is-filled .stzh-input__button-right.is-search {
   pointer-events: initial;
 }
-.stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input:focus + .stzh-input__label, .stzh-input--has-fixed-label .stzh-input__label, .stzh-input--is-filled .stzh-input__label, .stzh-input--is-readonly .stzh-input__label, .stzh-input--is-disabled .stzh-input__label, .stzh-input--has-placeholder .stzh-input__label, .stzh-input--is-invalid .stzh-input__label {
-  font-size: var(--stzh-font-nano-font-size);
-  line-height: var(--stzh-font-nano-text-line-height);
+.stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input:focus + .stzh-input__label, .stzh-input--has-fixed-label .stzh-input__label, .stzh-input--is-filled .stzh-input__label, .stzh-input--is-readonly .stzh-input__label, .stzh-input--is-disabled .stzh-input__label, .stzh-input--is-invalid .stzh-input__label {
   display: block;
   top: 0;
   left: calc(var(--stzh-space-medium) - var(--stzh-space-xxsmall));
@@ -330,7 +329,7 @@
   max-width: calc(100% - var(--stzh-space-small) * 2);
   pointer-events: all;
 }
-.stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input:focus + .stzh-input__label:not(:empty)::before, .stzh-input--has-fixed-label .stzh-input__label:not(:empty)::before, .stzh-input--is-filled .stzh-input__label:not(:empty)::before, .stzh-input--is-readonly .stzh-input__label:not(:empty)::before, .stzh-input--is-disabled .stzh-input__label:not(:empty)::before, .stzh-input--has-placeholder .stzh-input__label:not(:empty)::before, .stzh-input--is-invalid .stzh-input__label:not(:empty)::before {
+.stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input:focus + .stzh-input__label:not(:empty)::before, .stzh-input--has-fixed-label .stzh-input__label:not(:empty)::before, .stzh-input--is-filled .stzh-input__label:not(:empty)::before, .stzh-input--is-readonly .stzh-input__label:not(:empty)::before, .stzh-input--is-disabled .stzh-input__label:not(:empty)::before, .stzh-input--is-invalid .stzh-input__label:not(:empty)::before {
   display: block;
 }
 .stzh-input--has-button-right .stzh-input__input {
@@ -339,7 +338,7 @@
 .stzh-input--has-button-right .stzh-input__label {
   max-width: calc(100% - (var(--stzh-space-medium) + 0.0625rem) * 2 - var(--stzh-form-input-height));
 }
-.stzh-input--has-button-right.stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input:focus + .stzh-input__label, .stzh-input--has-button-right.stzh-input--has-fixed-label .stzh-input__label, .stzh-input--has-button-right.stzh-input--is-filled .stzh-input__label, .stzh-input--has-button-right.stzh-input--is-readonly .stzh-input__label, .stzh-input--has-button-right.stzh-input--is-disabled .stzh-input__label, .stzh-input--has-button-right.stzh-input--has-placeholder .stzh-input__label, .stzh-input--has-button-right.stzh-input--is-invalid .stzh-input__label {
+.stzh-input--has-button-right.stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input:focus + .stzh-input__label, .stzh-input--has-button-right.stzh-input--has-fixed-label .stzh-input__label, .stzh-input--has-button-right.stzh-input--is-filled .stzh-input__label, .stzh-input--has-button-right.stzh-input--is-readonly .stzh-input__label, .stzh-input--has-button-right.stzh-input--is-disabled .stzh-input__label, .stzh-input--has-button-right.stzh-input--is-invalid .stzh-input__label {
   max-width: calc(100% - var(--stzh-space-medium) - var(--stzh-space-xxsmall) - 0.0625rem + var(--stzh-space-xxsmall) - var(--stzh-form-input-height));
 }
 .stzh-input--size-small {
@@ -359,7 +358,7 @@
 .stzh-input--size-small .stzh-input__label {
   top: calc(var(--stzh-form-input-small-height) / 2);
 }
-.stzh-input--size-small.stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input:focus + .stzh-input__label, .stzh-input--size-small.stzh-input--has-fixed-label .stzh-input__label, .stzh-input--size-small.stzh-input--is-filled .stzh-input__label, .stzh-input--size-small.stzh-input--is-readonly .stzh-input__label, .stzh-input--size-small.stzh-input--is-disabled .stzh-input__label, .stzh-input--size-small.stzh-input--has-placeholder .stzh-input__label, .stzh-input--size-small.stzh-input--is-invalid .stzh-input__label {
+.stzh-input--size-small.stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input:focus + .stzh-input__label, .stzh-input--size-small.stzh-input--has-fixed-label .stzh-input__label, .stzh-input--size-small.stzh-input--is-filled .stzh-input__label, .stzh-input--size-small.stzh-input--is-readonly .stzh-input__label, .stzh-input--size-small.stzh-input--is-disabled .stzh-input__label, .stzh-input--size-small.stzh-input--is-invalid .stzh-input__label {
   top: 0;
 }
 .stzh-input--size-small.stzh-input--has-button-right .stzh-input__input {
@@ -368,9 +367,19 @@
 .stzh-input--size-small.stzh-input--has-button-right .stzh-input__label {
   max-width: calc(100% - (var(--stzh-space-medium) + 0.0625rem) * 2 - var(--stzh-form-input-small-height));
 }
-.stzh-input--size-small.stzh-input--has-button-right.stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input:focus + .stzh-input__label, .stzh-input--size-small.stzh-input--has-button-right.stzh-input--has-fixed-label .stzh-input__label, .stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-filled .stzh-input__label, .stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-readonly .stzh-input__label, .stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-disabled .stzh-input__label, .stzh-input--size-small.stzh-input--has-button-right.stzh-input--has-placeholder .stzh-input__label, .stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-invalid .stzh-input__label {
+.stzh-input--size-small.stzh-input--has-button-right.stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input:focus + .stzh-input__label, .stzh-input--size-small.stzh-input--has-button-right.stzh-input--has-fixed-label .stzh-input__label, .stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-filled .stzh-input__label, .stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-readonly .stzh-input__label, .stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-disabled .stzh-input__label, .stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-invalid .stzh-input__label {
   max-width: calc(100% - var(--stzh-space-medium) - var(--stzh-space-xxsmall) - 0.0625rem + var(--stzh-space-xsmall) - var(--stzh-form-input-small-height));
 }
+.stzh-input:not(.stzh-input--has-spin) .stzh-input__input::-webkit-outer-spin-button, .stzh-input:not(.stzh-input--has-spin) .stzh-input__input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+          appearance: none;
+  margin: 0;
+}
+.stzh-input:not(.stzh-input--has-spin) .stzh-input__input[type=number] {
+  -webkit-appearance: textfield;
+     -moz-appearance: textfield;
+          appearance: textfield;
+}
 .stzh-input--is-invalid .stzh-input__input, .stzh-input--is-invalid .stzh-input__label, .stzh-input--is-invalid .stzh-input__input + .stzh-input__label {
   color: var(--stzh-color-error);
 }

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

@@ -16,6 +16,10 @@ export class StzhInput {
     this.multiline = false;
     /** If input field, this defines the type (if `search`, a search icon will be displayed) */
     this.type = "text";
+    /** If input type is number, this will be the step size  */
+    this.step = 1;
+    /** If input type is number and this property is true, this will show the spin buttons on hover/focus */
+    this.showSpin = false;
     /** Whether the element is readonly or not */
     this.readonly = false;
     /** Whether the element is disabled or not */
@@ -119,17 +123,17 @@ export class StzhInput {
   }
   typeWatcher(newValue) {
     const types = [
-      "text", "search", "password", "email", "url", "tel"
+      "text", "search", "password", "email", "url", "tel", "number"
     ];
     if (!this.multiline && !types.includes(newValue)) {
       throw new Error(`Type ${newValue} not supported`);
     }
   }
   renderTextarea() {
-    return (h("textarea", { class: "stzh-input__input stzh-input__input--textarea", ref: (el) => (this.input = el), id: this.inputId, name: this.name, rows: this.rows, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, minlength: this.minlength, maxlength: this.maxlength, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }, this.value));
+    return (h("textarea", { class: "stzh-input__input stzh-input__input--textarea", ref: (el) => (this.input = el), id: this.inputId, name: this.name, rows: this.rows, disabled: this.disabled, readonly: this.readonly, minlength: this.minlength, maxlength: this.maxlength, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }, this.value));
   }
   renderInput() {
-    return (h("input", { class: "stzh-input__input stzh-input__input--input", ref: (el) => (this.input = el), id: this.inputId, type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, inputmode: this.inputmode, disabled: this.disabled, readonly: this.readonly, minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.noAutocomplete ? "off" : this.autocomplete, "aria-autocomplete": this.noAutocomplete ? "none" : undefined, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }));
+    return (h("input", { class: "stzh-input__input stzh-input__input--input", ref: (el) => (this.input = el), id: this.inputId, type: this.type, name: this.name, value: this.value, min: this.min, max: this.max, step: this.step, inputmode: this.inputmode, disabled: this.disabled, readonly: this.readonly, minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.noAutocomplete ? "off" : this.autocomplete, "aria-autocomplete": this.noAutocomplete ? "none" : undefined, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }));
   }
   async componentWillLoad() {
     this.inputId = `stzh-input-${inputCounter++}`;
@@ -154,11 +158,11 @@ export class StzhInput {
       "stzh-input--has-description": descriptionUsed,
       "stzh-input--has-description-long": descriptionLongUsed,
       "stzh-input--has-error": errorUsed,
+      "stzh-input--has-spin": this.showSpin,
       "stzh-input--is-invalid": this.invalid,
       "stzh-input--is-disabled": this.disabled,
       "stzh-input--is-readonly": this.readonly,
       "stzh-input--is-required": this.required,
-      "stzh-input--has-placeholder": !!this.placeholder,
       "stzh-input--is-filled": this.filled,
       "stzh-input--is-clearable": this.clearable,
       "stzh-input--has-fixed-label": ((_a = window === null || window === void 0 ? void 0 : window.stzhComponents) === null || _a === void 0 ? void 0 : _a.labels) === "fixed",
@@ -249,8 +253,8 @@ export class StzhInput {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"text\" | \"search\" | \"password\" | \"email\" | \"url\" | \"tel\"",
-          "resolved": "\"email\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+          "original": "\"text\" | \"search\" | \"password\" | \"email\" | \"url\" | \"tel\" | \"number\"",
+          "resolved": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
           "references": {}
         },
         "required": false,
@@ -263,6 +267,76 @@ export class StzhInput {
         "reflect": false,
         "defaultValue": "\"text\""
       },
+      "step": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If input type is number, this will be the step size"
+        },
+        "attribute": "step",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "min": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If input type is number, this will be the minimum step number"
+        },
+        "attribute": "min",
+        "reflect": false
+      },
+      "max": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If input type is number, this will be the maximum step number"
+        },
+        "attribute": "max",
+        "reflect": false
+      },
+      "showSpin": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If input type is number and this property is true, this will show the spin buttons on hover/focus"
+        },
+        "attribute": "show-spin",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "readonly": {
         "type": "boolean",
         "mutable": false,
@@ -491,26 +565,6 @@ export class StzhInput {
         "reflect": true,
         "defaultValue": "false"
       },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": undefined
-            }],
-          "text": "Placeholder text"
-        },
-        "attribute": "placeholder",
-        "reflect": false
-      },
       "inputmode": {
         "type": "string",
         "mutable": false,

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

@@ -226,6 +226,11 @@
   font-size: var(--stzh-font-micro-font-size);
   line-height: var(--stzh-font-micro-text-line-height);
 }
+.stzh-link--size-inherit {
+  font-size: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+}
 .stzh-link--is-disabled {
   cursor: not-allowed;
 }

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

@@ -147,8 +147,8 @@ export class StzhLink {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"default\" | \"small\"",
-          "resolved": "\"default\" | \"small\"",
+          "original": "\"default\" | \"small\" | \"inherit\"",
+          "resolved": "\"default\" | \"inherit\" | \"small\"",
           "references": {}
         },
         "required": false,

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-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,