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

package/dist/esm/stzh-popover_2.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-e3050b18.js';
-import { c as computePosition, a as autoUpdate, A as Arrow, o as offset, f as flip, s as shift, b as arrow } from './arrow-fc956b24.js';
+import { c as computePosition, a as autoUpdate, A as Arrow, o as offset, f as flip, s as shift, b as arrow } from './arrow-8f47d7ea.js';
 import { c as createFocusTrap } from './focus-trap.esm-5ca3a3f7.js';
 import { i as isStzhElement } from './utils-4f9b3f37.js';
 import { m as media, a as addMediaChangeListener, r as removeMediaChangeListener } from './media-utils-d80f83d2.js';
@@ -170,6 +170,7 @@ const StzhPopover = class {
         trigger.addEventListener("click", this.onClickTrigger);
       }
     };
+    this.initializedPopover = false;
     this.open = false;
     this.placement = "bottom";
     this.fullwidth = "";
@@ -346,9 +347,7 @@ const StzhPopover = class {
     }
   }
   componentDidRender() {
-    this.computePosition();
     this.mediaChangeHandler();
-    this.open ? this.popoverShown() : this.popoverHidden();
     const isStzh = isStzhElement(this.triggerFirstElement);
     if ((isStzh && !this.triggerFirstElement.getAttribute("a11y-describedby")) ||
       (!isStzh && !this.triggerFirstElement.getAttribute("aria-describedby"))) {
@@ -364,19 +363,32 @@ const StzhPopover = class {
     }
   }
   componentDidUpdate() {
-    this.trap.updateContainerElements(this.dialogElement);
+    if (this.open && !this.initializedPopover) {
+      this.initializeAutoUpdate();
+      this.initializeFocusTrap();
+      this.popoverShown();
+      this.initializedPopover = true;
+    }
+    if (this.initializedPopover) {
+      this.computePosition();
+      if (this.trap) {
+        this.trap.updateContainerElements(this.dialogElement);
+      }
+    }
   }
-  componentDidLoad() {
+  initializeAutoUpdate() {
     this.autoUpdateCleanup = autoUpdate(this.triggerFirstElement, this.dialogElement, this.computePosition);
-    this.contentWrapperElement.hidden = !this.open;
+  }
+  initializeFocusTrap() {
     this.trap = createFocusTrap(this.dialogElement, {
       fallbackFocus: this.dialogElement,
       clickOutsideDeactivates: true,
       returnFocusOnDeactivate: true,
     });
-    if (this.open) {
-      this.popoverShown();
-    }
+  }
+  componentDidLoad() {
+    this.contentWrapperElement.hidden = !this.open;
+    this.open ? this.popoverShown() : this.popoverHidden();
   }
   connectedCallback() {
     addMediaChangeListener(this.mediaChangeHandler);

package/dist/esm/stzh-popover_2.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-popover.stzh-text.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-popover/stzh-popover.scss?tag=stzh-popover&encapsulation=scoped","src/components/stzh-popover/stzh-popover.tsx","src/components/stzh-text/stzh-text.scss?tag=stzh-text&encapsulation=scoped","src/components/stzh-text/stzh-text.tsx"],"sourcesContent":["/**\n * @prop --width: Width of popover above small breakpoint\n * @prop --min-width: Minimum width of popover above small breakpoint\n * @prop --max-width: Maximum width of popover above small breakpoint\n * @prop --padding: Padding of popover\n * @prop --content-padding: Padding of popover content\n * @prop --border-radius: Border radius of popover\n * @prop --backdrop-opacity: Opacity of popover backdrop (used on mikro breakpoint)\n *\n * @prop --stzh-popover-width: **Global**: Width of popover above small breakpoint (default `223px`)\n * @prop --stzh-popover-min-width: **Global**: Minimum width of popover above small breakpoint (default `initial`)\n * @prop --stzh-popover-max-width: **Global**: Maximum width of popover above small breakpoint (default `initial`)\n * @prop --stzh-popover-padding: **Global**: Padding of popover (default `0px`)\n * @prop --stzh-popover-content-padding: **Global**: Padding of popover content (default `8px 0px`)\n * @prop --stzh-popover-border-radius: **Global**: Border radius of popover above small breakpoint (default `3px`)\n *\n * @prop --stzh-dialog-backdrop-opacity: **Global**: Opacity of backdrops\n * @prop --stzh-dialog-backdrop-background-color: **Global**: Background color of backdrops\n */\n\n:host {\n  display: contents;\n\n  --color: #{$colorBlack};\n  --width: #{$popoverWidth};\n  --min-width: #{$popoverMinWidth};\n  --max-width: #{$popoverMaxWidth};\n  --height: auto;\n  --min-height: initial;\n  --max-height: initial;\n  --padding: #{$popoverPadding};\n  --content-padding: #{$popoverContentPadding};\n  --border-radius: #{$popoverBorderRadius};\n  --background-color: #{$popoverBackgroundColor};\n  --backdrop-opacity: #{$dialogBackdropOpacity};\n  --backdrop-background-color: #{$dialogBackdropBackgroundColor};\n\n  &[size=\"large\"] {\n    --content-padding: #{$popoverLargeContentPadding};\n  }\n\n  &[variant=\"secondary\"] {\n    --background-color: #{$colorSecondary20};\n  }\n\n  &[variant=\"tooltip\"] {\n    --width: #{$tooltipWidth};\n    --min-width: #{$tooltipMinWidth};\n    --max-width: #{$tooltipMaxWidth};\n    --content-padding: #{space('small')} #{space('large')};\n    --border-radius: #{$tooltipBorderRadius};\n\n    @include mq($from: small) {\n      --content-padding: #{$tooltipPadding};\n      --color: #{$colorWhite};\n      --link-color: #{$colorWhite};\n      --hover-link-color: #{$colorWhite70op};\n      --background-color: #{$colorCoolgrey60};\n    }\n  }\n}\n\n.stzh-popover {\n  @include tooltip-arrow;\n  display: contents;\n\n  &__trigger {\n    display: contents;\n  }\n\n  &__content-wrapper {\n    // position: absolute;\n    // width: 100%;\n    // height: 100%;\n    // pointer-events: none;\n    display: contents;\n\n    @include mq($to: small) {\n      z-index: $zIndexDialog;\n      display: flex;\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      flex-direction: column;\n      align-items: stretch;\n      justify-content: stretch;\n    }\n  }\n\n  &__backdrop {\n    display: contents;\n\n    @include mq($to: small) {\n      z-index: 1;\n      position: absolute;\n      display: block;\n      top: 0px;\n      left: 0px;\n      width: 100%;\n      height: 100%;\n      overflow-x: hidden;\n      overflow-y: auto;\n      text-align: center;\n      background-color: var(--backdrop-background-color);\n      opacity: var(--backdrop-opacity);\n    }\n  }\n\n  &__content {\n    // pointer-events: all;\n    display: contents;\n\n    @include mq($to: small) {\n      z-index: 2;\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      flex-grow: 1;\n      overflow: auto;\n    }\n  }\n\n  &__dialog {\n    margin-top: auto;\n    width: 100%;\n    overflow: visible;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n    background-color: var(--background-color);\n    touch-action: none;\n    outline: none;\n    border-bottom: 2px solid $colorOldGrey13;\n    color: var(--color);\n\n    --stzh-base-color: var(--color);\n    --stzh-link-color: var(--link-color);\n    // TODO: check with designer\n    --stzh-link-hover-color: var(--hover-link-color);\n\n    @include mq($from: small) {\n      z-index: $zIndexPopover;\n      position: absolute;\n      display: flex;\n      width: var(--width);\n      min-width: var(--min-width);\n      max-width: var(--max-width);\n      // max-width: calc(100vw - var(--stzh-scrollbar-width) - #{space('small')});\n      height: var(--height);\n      min-height: var(--min-height);\n      max-height: var(--max-height);\n      left: auto;\n      right: auto;\n      bottom: auto;\n      border-radius: var(--border-radius);\n      box-shadow: $boxShadowPopover;\n      border: none;\n    }\n  }\n\n  &__content-inner,\n  &__content-slot-wrapper {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  &__content-slot-wrapper {\n    padding: var(--padding);\n  }\n\n  &__content-slot {\n    overflow-y: auto;\n    overflow-x: hidden;\n    overflow-scrolling: touch;\n    padding: var(--content-padding);\n  }\n\n  &__action-slot {\n    display: flex;\n    flex-direction: column;\n\n    // &:not(:empty) {\n    //   margin: space('xsmall') space('small');\n    //   margin-bottom: space('medium');\n    // }\n  }\n\n  &__label-wrapper {\n    display: flex;\n    align-items: center;\n    padding: space('small') space('large');\n    padding-right: space('medium');\n    border-bottom: 1px solid $baseBorderColor;\n    color: $colorOldGrey70;\n\n    @include mq($from: small) {\n      padding: 0;\n      border-bottom: 0;\n    }\n  }\n\n  &__label {\n    @include font('heavy');\n    @include fontCurve('p2');\n    margin: 0;\n    margin-right: space('small');\n\n    @include mq($from: small) {\n      @include visuallyhidden;\n    }\n  }\n\n  &__close {\n    visibility: $popoverCloseVisibility;\n    cursor: pointer;\n    display: flex;\n    appearance: none;\n    font-family: inherit;\n    border: none;\n    background-color: transparent;\n    padding: 0;\n    margin-left: auto;\n    border-radius: 50%;\n    color: $baseLeadColor;\n    padding: space('xxsmall');\n  }\n\n  &__icon {\n    --size: #{iconSize('xsmall')};\n  }\n\n  &__arrow {\n    position: absolute;\n    display: none;\n\n    @include mq($from: small) {\n      display: flex;\n    }\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  /* Only non tooltip variants */\n\n  &--default &__close,\n  &--secondary &__close {\n    &:focus {\n      box-shadow: 0 0 0 1px $colorPrimary;\n    }\n\n    @include mq($from: small) {\n      @include visuallyhiddenFocusable;\n      position: absolute;\n      top: 0;\n      right: 0;\n      transform: translate(30%, -30%);\n      background-color: $colorOldGrey5;\n    }\n  }\n\n  /* Tooltip variant */\n\n  &--tooltip &__content-inner {\n    @include mq($from: small) {\n      flex-direction: row-reverse;\n      align-items: flex-start;\n    }\n  }\n\n  &--tooltip &__close {\n    visibility: visible;\n\n    @include mq($from: small) {\n      @include tooltip__close;\n    }\n  }\n\n  &--tooltip &__icon {\n    @include mq($from: small) {\n      @include tooltip__icon;\n    }\n  }\n\n  &--tooltip &__dialog {\n    @include mq($from: small) {\n      @include tooltip-dropshadow;\n    }\n  }\n\n  &--tooltip &__content-slot {\n    @include mq($from: small) {\n      @include tooltip-fontsize;\n    }\n  }\n\n  /* Has fullwidth popover */\n\n  &--popover-fullwidth-horizontal &__dialog {\n    @include mq($from: small) {\n      left: 0 !important;\n      right: 0 !important;\n      width: 100%;\n    }\n  }\n\n  &--popover-fullwidth-vertical &__dialog {\n    @include mq($from: small) {\n      top: 0 !important;\n      bottom: 0 !important;\n      height: 100%;\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n  StzhPopoverClosedEvent,\n  StzhPopoverCloseEvent,\n  StzhPopoverOpenedEvent,\n  StzhPopoverOpenEvent,\n} from \"../../index\";\n\nimport { arrow, autoUpdate, computePosition, flip, offset, Placement, shift } from \"@floating-ui/dom\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\nimport { isStzhElement } from \"../../utils/utils\";\nimport { addMediaChangeListener, media, removeMediaChangeListener } from \"../../utils/media-utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, stopAnimations } from \"../../utils/animation-utils\";\n\nimport { StzhPopoverLocalizedText } from \"./stzh-popover.localization\";\n\nimport Arrow from \"../stzh-tooltip/assets/arrow.svg\";\n\nconst ANIMATION_SHOW_DURATION = 200;\nconst ANIMATION_HIDE_DURATION = 300;\nconst ANIMATION_SHOW_DURATION_SMALL = 100;\nconst ANIMATION_HIDE_DURATION_SMALL = 200;\n\nfunction animationContentWrapperShow() {\n  const isSmall = media(\"small\").matches;\n  return {\n    keyframes: [{ opacity: \"0\" }, { opacity: \"1\" }],\n    options: {\n      duration: isSmall ? ANIMATION_SHOW_DURATION_SMALL : ANIMATION_SHOW_DURATION,\n      easing: \"linear\",\n    },\n  };\n}\n\nfunction animationContentWrapperHide() {\n  const isSmall = media(\"small\").matches;\n  return {\n    keyframes: [{ opacity: \"1\" }, { opacity: \"0\" }],\n    options: {\n      duration: isSmall ? ANIMATION_HIDE_DURATION_SMALL : ANIMATION_HIDE_DURATION,\n      easing: \"linear\",\n    },\n  };\n}\n\nfunction animationDialogShow() {\n  const isSmall = media(\"small\").matches;\n  return {\n    keyframes: [{ transform: isSmall ? \"translateY(-8px)\" : \"translateY(100%)\" }, { transform: \"translateY(0px)\" }],\n    options: {\n      duration: isSmall ? ANIMATION_SHOW_DURATION_SMALL : ANIMATION_SHOW_DURATION,\n      easing: \"linear\",\n    },\n  };\n}\n\nfunction animationDialogHide() {\n  const isSmall = media(\"small\").matches;\n  return {\n    keyframes: [{ transform: \"translateY(0px)\" }, { transform: isSmall ? \"translateY(-8px)\" : \"translateY(100%)\" }],\n    options: {\n      duration: isSmall ? ANIMATION_HIDE_DURATION_SMALL : ANIMATION_HIDE_DURATION,\n      easing: \"linear\",\n    },\n  };\n}\n\nconst keyCode = {\n  ESC: 27,\n};\n\nconst CLASS_BODY_OPEN = \"stzh-popover-open\";\n\nlet popoverCounter = 0;\n\n/**\n * @slot - Trigger element for popover\n * @slot content - Any element used as popover content\n * @slot action - `stzh-button` element\n * @slot label - Label for mobile view (alternative for label property)\n */\n@Component({\n  tag: \"stzh-popover\",\n  styleUrl: \"stzh-popover.scss\",\n  scoped: true,\n})\nexport class StzhPopover {\n  /** Whether popover should be open */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Default placement of popover relative to trigger element */\n  @Prop({ reflect: true }) placement: Placement = \"bottom\";\n\n  /** Whether to stretch popover to fullwith of parent */\n  @Prop({ reflect: true }) fullwidth: \"horizontal\" | \"vertical\" | \"\" = \"\";\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"secondary\" | \"tooltip\" = \"default\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: \"default\" | \"large\" = \"default\";\n\n  /** Shifting of popover content */\n  @Prop() skidding: number = 0;\n\n  /** Distance from popover content to trigger. \"8\" when default variant, \"16\" when tooltip variant, arrow height (8px) + spacing (4px) = 12. */\n  @Prop() distance: number;\n\n  /** Label for mobile view (use label slot as alternative) */\n  @Prop() label: string = \"\";\n\n  /** Position strategy */\n  @Prop() strategy: \"absolute\" | \"fixed\" = \"absolute\";\n\n  /** Translation strings. */\n  @Prop() localization: StzhPopoverLocalizedText;\n\n  @Element() element: HTMLStzhPopoverElement;\n\n  /** Popover open event */\n  @Event() stzhOpen: EventEmitter<StzhPopoverOpenEvent>;\n\n  /** Popover opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhPopoverOpenedEvent>;\n\n  /** Popover close event */\n  @Event() stzhClose: EventEmitter<StzhPopoverCloseEvent>;\n\n  /** Popover closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhPopoverClosedEvent>;\n\n  private parentNode: Node;\n\n  /** Show popover content */\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.mediaChangeHandler();\n    if (this.isHeaderStuckAndViewportMicro) {\n      this.branchOutToBody();\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  /** Hide popover content */\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n\n    await waitForEvent(this.element, \"stzhClosed\");\n\n    this.mediaChangeHandler();\n    if (this.isHeaderStuckAndViewportMicro) {\n      this.branchInFromBody();\n    }\n\n    return true;\n  }\n\n  /** Toggle popover content */\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  @Method()\n  async update() {\n    return await this.computePosition();\n  }\n\n  @Listen(\"click\", { target: \"document\", capture: true })\n  handleOutsideClick(event: MouseEvent) {\n    if (!this.open) {\n      return;\n    }\n\n    const isClickOutside =\n      event.target !== this.dialogElement && this.dialogElement.contains(event.target as HTMLElement) === false;\n\n    const isClickTrigger =\n      event.target === this.triggerElement || this.triggerElement.contains(event.target as HTMLElement);\n\n    if (isClickOutside && !isClickTrigger) {\n      this.hide();\n    }\n  }\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.dialogElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-popover\",\n        });\n      }\n\n      const animationShow = animationContentWrapperShow();\n      const animationShowDialog = animationDialogShow();\n\n      await Promise.all([\n        stopAnimations(this.contentWrapperElement),\n        stopAnimations(this.contentElement),\n        stopAnimations(this.dialogElement),\n      ]);\n\n      // safari seems to need will-change,\n      // otherwise it has problems animating the element with the drop shadow\n      this.dialogElement.style.willChange = \"transform, opacity, position, top, left, bottom, right\";\n      this.contentWrapperElement.hidden = false;\n\n      await Promise.all([\n        animateTo(\n          media(\"small\").matches ? this.dialogElement : this.contentWrapperElement,\n          animationShow.keyframes,\n          animationShow.options\n        ),\n        animateTo(\n          media(\"small\").matches ? this.dialogElement : this.contentElement,\n          animationShowDialog.keyframes,\n          animationShowDialog.options\n        ),\n      ]);\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-popover\",\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-popover\",\n        });\n      }\n\n      const animationHide = animationContentWrapperHide();\n      const animationHideDialog = animationDialogHide();\n\n      await Promise.all([\n        stopAnimations(this.contentWrapperElement),\n        stopAnimations(this.contentElement),\n        stopAnimations(this.dialogElement),\n      ]);\n\n      await Promise.all([\n        animateTo(\n          media(\"small\").matches ? this.dialogElement : this.contentWrapperElement,\n          animationHide.keyframes,\n          animationHide.options\n        ),\n        animateTo(\n          media(\"small\").matches ? this.dialogElement : this.contentElement,\n          animationHideDialog.keyframes,\n          animationHideDialog.options\n        ),\n      ]);\n\n      this.contentWrapperElement.hidden = true;\n      this.dialogElement.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-popover\",\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  @Watch(\"distance\")\n  distanceWatcher(newValue: number) {\n    if (typeof newValue === \"number\") {\n      this.distance = newValue;\n    } else {\n      this.distance = this.variant === \"tooltip\" ? 12 : 8;\n    }\n  }\n\n  @State() computedPlacement: Placement;\n  @State() isHeaderStuckAndViewportMicro: boolean;\n  @State() isBranchedOutToBody: boolean;\n  @State() hasStzhHeaderParent: boolean;\n\n  private observer: MutationObserver;\n\n  private contentWrapperElement: HTMLElement;\n  private contentElement: HTMLElement;\n  private arrowElement: HTMLElement;\n  private rootElement: HTMLElement;\n  private triggerElement: HTMLElement;\n  private triggerFirstElement: HTMLElement;\n  private dialogElement: HTMLElement;\n  private autoUpdateCleanup: Function;\n\n  private initialTouchX: number = null;\n  private initialTouchY: number = null;\n\n  private id: string;\n  private trap: FocusTrap;\n  private toggledByMethod: boolean;\n\n  private setStzhHeaderParent(): boolean {\n    let parent = this.element.parentElement;\n    while (parent) {\n      if (parent.tagName && parent.tagName.toLowerCase() === \"stzh-header\") {\n        return true;\n      }\n      parent = parent.parentElement;\n    }\n    return false;\n  }\n\n  private mediaChangeHandler = () => {\n    const isStzhHeaderStuck = document.documentElement.style.getPropertyValue(\"--stzh-header-is-stuck\");\n    this.isHeaderStuckAndViewportMicro =\n      !media(\"small\").matches && isStzhHeaderStuck === \"1\" && this.hasStzhHeaderParent;\n\n    if (this.open && this.isBranchedOutToBody && !this.isHeaderStuckAndViewportMicro) {\n      this.branchInFromBody();\n    }\n  };\n\n  private branchOutToBody() {\n    document.body.append(this.element);\n    this.parentNode.appendChild(this.triggerElement);\n    this.isBranchedOutToBody = true;\n  }\n\n  private branchInFromBody() {\n    this.parentNode.appendChild(this.element);\n    this.rootElement.prepend(this.triggerElement);\n    this.isBranchedOutToBody = false;\n  }\n\n  private handleKeydown = (event: KeyboardEvent) => {\n    if (event.keyCode === keyCode.ESC) {\n      this.hide();\n    }\n  };\n\n  private onClickTrigger = () => {\n    this.toggle();\n  };\n\n  private computePosition = async () => {\n    if (media(\"small\").matches) {\n      const middleware = [\n        offset({\n          mainAxis: this.distance,\n          crossAxis: this.skidding,\n        }),\n        flip({\n          padding: 5,\n        }),\n        shift({\n          padding: 5,\n        }),\n      ];\n\n      if (this.variant === \"tooltip\") {\n        middleware.push(\n          arrow({\n            element: this.arrowElement,\n            padding: 5,\n          })\n        );\n      }\n\n      const {\n        x = 0,\n        y = 0,\n        strategy = \"absolute\",\n        placement,\n        middlewareData,\n      } = await computePosition(this.triggerFirstElement, this.dialogElement, {\n        strategy: this.strategy,\n        placement: this.placement,\n        middleware,\n      });\n\n      this.computedPlacement = placement;\n\n      Object.assign(this.dialogElement.style, {\n        position: strategy,\n        left: `${x}px`,\n        top: `${y}px`,\n      });\n\n      if (this.variant === \"tooltip\") {\n        Object.assign(this.arrowElement.style, {\n          left: x != null ? `${middlewareData.arrow.x}px` : \"\",\n          top: y != null ? `${middlewareData.arrow.y}px` : \"\",\n        });\n      }\n    } else {\n      Object.assign(this.dialogElement.style, {\n        position: null,\n        left: null,\n        top: null,\n      });\n\n      if (this.variant === \"tooltip\") {\n        Object.assign(this.arrowElement.style, {\n          left: null,\n          top: null,\n        });\n      }\n    }\n  };\n\n  private handleTouchStart = (event: TouchEvent) => {\n    const touch = event.changedTouches[0];\n    this.initialTouchX = touch.pageX;\n    this.initialTouchY = touch.pageY;\n  };\n\n  // private handleTouchMove = (event: TouchEvent) => {\n  //   event.preventDefault()\n  // }\n\n  private handleTouchEnd = (event: TouchEvent) => {\n    const touch = event.changedTouches[0];\n    const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled\n    const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\n    const threshold = 70;\n\n    const isYSwipe = Math.abs(distY) >= threshold && Math.abs(distX) <= threshold;\n\n    if (isYSwipe) {\n      const isInDropdown = (event.target as HTMLElement).closest('.stzh-dropdown') !== null;\n      if (!isInDropdown){\n        this.hide();\n      }\n    }\n\n    this.initialTouchY = null;\n    this.initialTouchX = null;\n  };\n\n  private init = () => {\n    let trigger = this.triggerElement?.firstElementChild as HTMLElement;\n\n    if (!trigger) {\n      const defaultSlot = Array.from(this.element.children).find(child => !child.hasAttribute(\"slot\")) as HTMLElement;\n\n      trigger = defaultSlot;\n    }\n\n    if (trigger) {\n      this.triggerFirstElement = trigger;\n      trigger.addEventListener(\"click\", this.onClickTrigger);\n    }\n  };\n\n  async componentWillLoad() {\n    this.id = `stzh-popover-${popoverCounter++}`;\n    this.parentNode = this.element.parentNode;\n    this.hasStzhHeaderParent = this.setStzhHeaderParent();\n\n    this.distanceWatcher(this.distance);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"popover\");\n    }\n  }\n\n  private popoverShown() {\n    document.body.classList.add(CLASS_BODY_OPEN);\n\n    const isStzh = isStzhElement(this.triggerFirstElement);\n\n    this.triggerFirstElement.setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", \"true\");\n\n    if (this.trap) {\n      this.trap.activate();\n    }\n  }\n\n  private popoverHidden() {\n    document.body.classList.remove(CLASS_BODY_OPEN);\n\n    const isStzh = isStzhElement(this.triggerFirstElement);\n\n    this.triggerFirstElement.setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", \"false\");\n\n    if (this.trap) {\n      this.trap.deactivate();\n    }\n  }\n\n  componentDidRender() {\n    this.computePosition();\n    this.mediaChangeHandler();\n    this.open ? this.popoverShown() : this.popoverHidden();\n\n    const isStzh = isStzhElement(this.triggerFirstElement);\n\n    if (\n      (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\")) ||\n      (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n    ) {\n      this.triggerFirstElement.setAttribute(\n        isStzh ? \"a11y-describedby\" : \"aria-describedby\",\n        `${this.id}-trigger-description`\n      );\n    }\n\n    if (\n      (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-label\")) ||\n      (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-label\"))\n    ) {\n      this.triggerFirstElement.setAttribute(isStzh ? \"a11y-label\" : \"aria-label\", this.label);\n    }\n\n    if (\n      (isStzh && !this.triggerFirstElement.getAttribute(\"analytics-id\")) ||\n      (!isStzh && !this.triggerFirstElement.getAttribute(\"s-object-id\"))\n    ) {\n      this.triggerFirstElement.setAttribute(isStzh ? \"analytics-id\" : \"s-object-id\", this.label);\n    }\n  }\n\n  componentDidUpdate() {\n    this.trap.updateContainerElements(this.dialogElement);\n  }\n\n  componentDidLoad() {\n    this.autoUpdateCleanup = autoUpdate(this.triggerFirstElement, this.dialogElement, this.computePosition);\n\n    this.contentWrapperElement.hidden = !this.open;\n\n    this.trap = createFocusTrap(this.dialogElement, {\n      fallbackFocus: this.dialogElement,\n      clickOutsideDeactivates: true,\n      returnFocusOnDeactivate: true,\n    });\n\n    if (this.open) {\n      this.popoverShown();\n    }\n  }\n\n  connectedCallback() {\n    addMediaChangeListener(this.mediaChangeHandler);\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.mediaChangeHandler);\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n\n    if (this.triggerFirstElement) {\n      this.triggerFirstElement.removeEventListener(\"click\", this.onClickTrigger);\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-popover\": true,\n      [`stzh-popover--open`]: this.open,\n      [`stzh-popover--placement-${this.computedPlacement}`]: !!this.computedPlacement,\n      [`stzh-popover--fullwidth-${this.fullwidth}`]: !!this.fullwidth,\n      [`stzh-popover--${this.size}`]: !!this.size,\n      [`stzh-popover--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host>\n        <div\n          class={classes}\n          onTouchStart={this.handleTouchStart}\n          onTouchEnd={this.handleTouchEnd}\n          ref={el => (this.rootElement = el as HTMLDivElement)}\n        >\n          <div ref={el => (this.triggerElement = el as HTMLDivElement)} class=\"stzh-popover__trigger\">\n            <slot></slot>\n          </div>\n          <div class=\"stzh-popover__vhidden\" id={`${this.id}-trigger-description`}>\n            {this.localization.open}\n          </div>\n          <div ref={el => (this.contentWrapperElement = el as HTMLDivElement)} class=\"stzh-popover__content-wrapper\">\n            <div class=\"stzh-popover__backdrop\"></div>\n            <div ref={el => (this.contentElement = el as HTMLDivElement)} class=\"stzh-popover__content\">\n              <div\n                ref={el => (this.dialogElement = el as HTMLDivElement)}\n                class=\"stzh-popover__dialog\"\n                role=\"dialog\"\n                tabindex=\"-1\"\n                aria-modal=\"true\"\n                aria-labelledby={this.label ? `${this.id}-label` : null}\n                aria-hidden={this.open ? \"false\" : \"true\"}\n                onKeyDown={this.handleKeydown}\n              >\n                {this.variant === \"tooltip\" && (\n                  <div\n                    class=\"stzh-popover__arrow\"\n                    ref={el => (this.arrowElement = el as HTMLDivElement)}\n                    innerHTML={Arrow}\n                  ></div>\n                )}\n                <div class=\"stzh-popover__content-inner\">\n                  <div class=\"stzh-popover__label-wrapper\">\n                    <h2 id={`${this.id}-label`} class=\"stzh-popover__label\">\n                      {this.label ? this.label : <slot name=\"label\"></slot>}\n                    </h2>\n                    <button class=\"stzh-popover__close\" onClick={() => this.hide()} type=\"button\">\n                      <stzh-icon name=\"close\" class=\"stzh-popover__icon\"></stzh-icon>\n                      <span class=\"stzh-popover__vhidden\">{this.localization.close}</span>\n                    </button>\n                  </div>\n                  <div class=\"stzh-popover__content-slot-wrapper\">\n                    <div class=\"stzh-popover__content-slot\">\n                      <slot name=\"content\"></slot>\n                    </div>\n                    <div class=\"stzh-popover__action-slot\">\n                      <slot name=\"action\"></slot>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --color: Text color (also `color` can be overwritten)\n * @prop --icon-size: Icon size\n * @prop --icon-vertical-align: Icon vertical alignment\n *\n * @prop --stzh-base-color: **Global**: Text color\n * @prop --stzh-base-lead-color: **Global**: Lead text color\n */\n\n:host {\n  --icon-size: 1.25em;\n  --icon-vertical-align: text-bottom;\n  --color: #{$baseColor};\n  --display: var(--stzh-text-display, block);\n\n  width: 100%;\n  color: var(--color);\n\n  --grid-template-areas: var(\n    --stzh-text-grid-template-areas,\n    \"text text text text\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-text-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-text-grid-template-areas,\n      \"text text text text\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-text-grid-template-areas,\n      \"text text text text text text text text\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-text-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  ::slotted(*:first-child) {\n    margin-top: 0 !important;\n  }\n\n  ::slotted(*:last-child) {\n    margin-bottom: 0 !important;\n  }\n\n  ::slotted(a),\n  ::slotted(* a) {\n    color: $linkColor;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n    text-underline-offset: $linkTextUnderlineOffset;\n    text-decoration-line: $linkTextDecorationLine;\n    text-decoration-thickness: $linkTextDecorationThickness;\n    text-decoration-skip-ink: $linkTextDecorationSkipInk;\n\n    &:hover {\n      color: $linkHoverColor;\n      text-decoration-line: $linkHoverTextDecorationLine;\n    }\n\n    &:hover {\n      color: $linkHoverColor;\n    }\n  }\n\n  ::slotted(b),\n  ::slotted(strong),\n  ::slotted(* b),\n  ::slotted(* strong) {\n    @include font('heavy');\n  }\n\n  ::slotted(i),\n  ::slotted(em),\n  ::slotted(* i),\n  ::slotted(* em) {\n    @include font;\n  }\n\n  &[lead]:not([lead=\"false\"]) {\n    --color: #{$baseLeadColor};\n  }\n\n  &[color=\"primary\"] {\n    --color: #{$colorPrimary70};\n  }\n\n  &[color=\"secondary\"] {\n    --color: #{$colorSecondary60};\n  }\n\n  &[color=\"info\"] {\n    --color: #{$textInfoColor};\n  }\n\n  &[color=\"inherit\"] {\n    --color: initial;\n  }\n}\n\n.stzh-text {\n  --stzh-icon-size: var(--icon-size);\n  --stzh-icon-vertical-align: var(--icon-vertical-align);\n\n  --stzh-list-font-size: \"\";\n  --stzh-list-line-height: \"\";\n  --stzh-list-letter-spacing: \"\";\n\n  // default font styling without attributes\n  @include fontCurve($textFontCurveDefault);\n  @include gridGutter;\n  display: var(--display);\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  color: var(--color);\n\n  &__text {\n    grid-area: text;\n    display: flex;\n  }\n\n  &__icon {\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      margin-right: 0.25em;\n    }\n  }\n\n  &__text-inner {\n    flex-grow: 1;\n  }\n\n  /* Lead variant */\n\n  &--is-lead {\n    @include font('heavy');\n    @include fontCurve('lead', 'lead');\n  }\n\n  /* Font variants */\n\n  @each $font, $value in $fonts {\n    &--font-#{$font} {\n      @include font($font);\n    }\n  }\n\n  /* Curve variants */\n\n  &--curve-none {\n    font-size: inherit;\n  }\n\n  @each $fontCurveName, $config in $fontCurves {\n    &--curve-#{$fontCurveName} {\n      @include fontCurve($fontCurveName);\n    }\n  }\n\n  /* Size variants when consumer wants to overwrite predefined font curves */\n\n  @each $size, $value in $fontSizes {\n    &--size-#{$size} {\n      @include fontSize($size);\n    }\n  }\n\n  @each $breakpoint, $size in $breakpoints {\n    @each $size, $value in $fontSizes {\n      &--size-#{$breakpoint}-#{$size} {\n        @include mq($from: $breakpoint) {\n          @include fontSize($size);\n        }\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Font } from \"../../index\";\n\n/**\n * @slot - Slot for text and icons\n * @slot icon - Slot for icon that should be on left side of the text (not inline)\n */\n@Component({\n  tag: \"stzh-text\",\n  styleUrl: \"stzh-text.scss\",\n  scoped: true\n})\nexport class StzhText {\n  /** Font used */\n  @Prop() font: Font.Fonts = \"default\";\n\n  /** Type of curve (see [Spacings docs page](/docs/tokens-typography--docs#curves) for more info). */\n  @Prop({ reflect: true }) curve: Font.Curves = \"default\";\n\n  /** Whether if text is lead text */\n  @Prop({ reflect: true }) lead: boolean = false;\n\n  /** Color used */\n  @Prop({ reflect: true }) color: \"default\" | \"primary\" | \"secondary\" | \"info\" | \"inherit\" = \"default\";\n\n  /** Manually overwrite font size applied by curve attribute (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() size: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above small breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeSmall: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above medium breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeMedium: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above large breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeLarge: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above ultra breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeUltra: Font.Sizes | \"inherit\" = \"inherit\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-text\": true,\n            \"stzh-text--is-lead\": this.lead,\n            [`stzh-text--font-${this.font}`]: !!this.font,\n            [`stzh-text--curve-${this.curve}`]: !!this.curve,\n            [`stzh-text--size-${this.size}`]: !!this.size,\n            [`stzh-text--size-small-${this.sizeSmall}`]: !!this.sizeSmall,\n            [`stzh-text--size-medium-${this.sizeMedium}`]: !!this.sizeMedium,\n            [`stzh-text--size-large-${this.sizeLarge}`]: !!this.sizeLarge,\n            [`stzh-text--size-ultra-${this.sizeUltra}`]: !!this.sizeUltra,\n          }}\n        >\n          <div class=\"stzh-text__text\">\n            <div class=\"stzh-text__icon\">\n              <slot name=\"icon\"></slot>\n            </div>\n            <div class=\"stzh-text__text-inner\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-popover.stzh-text.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-popover/stzh-popover.scss?tag=stzh-popover&encapsulation=scoped","src/components/stzh-popover/stzh-popover.tsx","src/components/stzh-text/stzh-text.scss?tag=stzh-text&encapsulation=scoped","src/components/stzh-text/stzh-text.tsx"],"sourcesContent":["/**\n * @prop --width: Width of popover above small breakpoint\n * @prop --min-width: Minimum width of popover above small breakpoint\n * @prop --max-width: Maximum width of popover above small breakpoint\n * @prop --padding: Padding of popover\n * @prop --content-padding: Padding of popover content\n * @prop --border-radius: Border radius of popover\n * @prop --backdrop-opacity: Opacity of popover backdrop (used on mikro breakpoint)\n *\n * @prop --stzh-popover-width: **Global**: Width of popover above small breakpoint (default `223px`)\n * @prop --stzh-popover-min-width: **Global**: Minimum width of popover above small breakpoint (default `initial`)\n * @prop --stzh-popover-max-width: **Global**: Maximum width of popover above small breakpoint (default `initial`)\n * @prop --stzh-popover-padding: **Global**: Padding of popover (default `0px`)\n * @prop --stzh-popover-content-padding: **Global**: Padding of popover content (default `8px 0px`)\n * @prop --stzh-popover-border-radius: **Global**: Border radius of popover above small breakpoint (default `3px`)\n *\n * @prop --stzh-dialog-backdrop-opacity: **Global**: Opacity of backdrops\n * @prop --stzh-dialog-backdrop-background-color: **Global**: Background color of backdrops\n */\n\n:host {\n  display: contents;\n\n  --color: #{$colorBlack};\n  --width: #{$popoverWidth};\n  --min-width: #{$popoverMinWidth};\n  --max-width: #{$popoverMaxWidth};\n  --height: auto;\n  --min-height: initial;\n  --max-height: initial;\n  --padding: #{$popoverPadding};\n  --content-padding: #{$popoverContentPadding};\n  --border-radius: #{$popoverBorderRadius};\n  --background-color: #{$popoverBackgroundColor};\n  --backdrop-opacity: #{$dialogBackdropOpacity};\n  --backdrop-background-color: #{$dialogBackdropBackgroundColor};\n\n  &[size=\"large\"] {\n    --content-padding: #{$popoverLargeContentPadding};\n  }\n\n  &[variant=\"secondary\"] {\n    --background-color: #{$colorSecondary20};\n  }\n\n  &[variant=\"tooltip\"] {\n    --width: #{$tooltipWidth};\n    --min-width: #{$tooltipMinWidth};\n    --max-width: #{$tooltipMaxWidth};\n    --content-padding: #{space('small')} #{space('large')};\n    --border-radius: #{$tooltipBorderRadius};\n\n    @include mq($from: small) {\n      --content-padding: #{$tooltipPadding};\n      --color: #{$colorWhite};\n      --link-color: #{$colorWhite};\n      --hover-link-color: #{$colorWhite70op};\n      --background-color: #{$colorCoolgrey60};\n    }\n  }\n}\n\n.stzh-popover {\n  @include tooltip-arrow;\n  display: contents;\n\n  &__trigger {\n    display: contents;\n  }\n\n  &__content-wrapper {\n    // position: absolute;\n    // width: 100%;\n    // height: 100%;\n    // pointer-events: none;\n    display: contents;\n\n    @include mq($to: small) {\n      z-index: $zIndexDialog;\n      display: flex;\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      flex-direction: column;\n      align-items: stretch;\n      justify-content: stretch;\n    }\n  }\n\n  &__backdrop {\n    display: contents;\n\n    @include mq($to: small) {\n      z-index: 1;\n      position: absolute;\n      display: block;\n      top: 0px;\n      left: 0px;\n      width: 100%;\n      height: 100%;\n      overflow-x: hidden;\n      overflow-y: auto;\n      text-align: center;\n      background-color: var(--backdrop-background-color);\n      opacity: var(--backdrop-opacity);\n    }\n  }\n\n  &__content {\n    // pointer-events: all;\n    display: contents;\n\n    @include mq($to: small) {\n      z-index: 2;\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      flex-grow: 1;\n      overflow: auto;\n    }\n  }\n\n  &__dialog {\n    margin-top: auto;\n    width: 100%;\n    overflow: visible;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n    background-color: var(--background-color);\n    touch-action: none;\n    outline: none;\n    border-bottom: 2px solid $colorOldGrey13;\n    color: var(--color);\n\n    --stzh-base-color: var(--color);\n    --stzh-link-color: var(--link-color);\n    // TODO: check with designer\n    --stzh-link-hover-color: var(--hover-link-color);\n\n    @include mq($from: small) {\n      z-index: $zIndexPopover;\n      position: absolute;\n      display: flex;\n      width: var(--width);\n      min-width: var(--min-width);\n      max-width: var(--max-width);\n      // max-width: calc(100vw - var(--stzh-scrollbar-width) - #{space('small')});\n      height: var(--height);\n      min-height: var(--min-height);\n      max-height: var(--max-height);\n      left: auto;\n      right: auto;\n      bottom: auto;\n      border-radius: var(--border-radius);\n      box-shadow: $boxShadowPopover;\n      border: none;\n    }\n  }\n\n  &__content-inner,\n  &__content-slot-wrapper {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  &__content-slot-wrapper {\n    padding: var(--padding);\n  }\n\n  &__content-slot {\n    overflow-y: auto;\n    overflow-x: hidden;\n    overflow-scrolling: touch;\n    padding: var(--content-padding);\n  }\n\n  &__action-slot {\n    display: flex;\n    flex-direction: column;\n\n    // &:not(:empty) {\n    //   margin: space('xsmall') space('small');\n    //   margin-bottom: space('medium');\n    // }\n  }\n\n  &__label-wrapper {\n    display: flex;\n    align-items: center;\n    padding: space('small') space('large');\n    padding-right: space('medium');\n    border-bottom: 1px solid $baseBorderColor;\n    color: $colorOldGrey70;\n\n    @include mq($from: small) {\n      padding: 0;\n      border-bottom: 0;\n    }\n  }\n\n  &__label {\n    @include font('heavy');\n    @include fontCurve('p2');\n    margin: 0;\n    margin-right: space('small');\n\n    @include mq($from: small) {\n      @include visuallyhidden;\n    }\n  }\n\n  &__close {\n    visibility: $popoverCloseVisibility;\n    cursor: pointer;\n    display: flex;\n    appearance: none;\n    font-family: inherit;\n    border: none;\n    background-color: transparent;\n    padding: 0;\n    margin-left: auto;\n    border-radius: 50%;\n    color: $baseLeadColor;\n    padding: space('xxsmall');\n  }\n\n  &__icon {\n    --size: #{iconSize('xsmall')};\n  }\n\n  &__arrow {\n    position: absolute;\n    display: none;\n\n    @include mq($from: small) {\n      display: flex;\n    }\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  /* Only non tooltip variants */\n\n  &--default &__close,\n  &--secondary &__close {\n    &:focus {\n      box-shadow: 0 0 0 1px $colorPrimary;\n    }\n\n    @include mq($from: small) {\n      @include visuallyhiddenFocusable;\n      position: absolute;\n      top: 0;\n      right: 0;\n      transform: translate(30%, -30%);\n      background-color: $colorOldGrey5;\n    }\n  }\n\n  /* Tooltip variant */\n\n  &--tooltip &__content-inner {\n    @include mq($from: small) {\n      flex-direction: row-reverse;\n      align-items: flex-start;\n    }\n  }\n\n  &--tooltip &__close {\n    visibility: visible;\n\n    @include mq($from: small) {\n      @include tooltip__close;\n    }\n  }\n\n  &--tooltip &__icon {\n    @include mq($from: small) {\n      @include tooltip__icon;\n    }\n  }\n\n  &--tooltip &__dialog {\n    @include mq($from: small) {\n      @include tooltip-dropshadow;\n    }\n  }\n\n  &--tooltip &__content-slot {\n    @include mq($from: small) {\n      @include tooltip-fontsize;\n    }\n  }\n\n  /* Has fullwidth popover */\n\n  &--popover-fullwidth-horizontal &__dialog {\n    @include mq($from: small) {\n      left: 0 !important;\n      right: 0 !important;\n      width: 100%;\n    }\n  }\n\n  &--popover-fullwidth-vertical &__dialog {\n    @include mq($from: small) {\n      top: 0 !important;\n      bottom: 0 !important;\n      height: 100%;\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n  StzhPopoverClosedEvent,\n  StzhPopoverCloseEvent,\n  StzhPopoverOpenedEvent,\n  StzhPopoverOpenEvent,\n} from \"../../index\";\n\nimport { arrow, autoUpdate, computePosition, flip, offset, Placement, shift } from \"@floating-ui/dom\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\nimport { isStzhElement } from \"../../utils/utils\";\nimport { addMediaChangeListener, media, removeMediaChangeListener } from \"../../utils/media-utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, stopAnimations } from \"../../utils/animation-utils\";\n\nimport { StzhPopoverLocalizedText } from \"./stzh-popover.localization\";\n\nimport Arrow from \"../stzh-tooltip/assets/arrow.svg\";\n\nconst ANIMATION_SHOW_DURATION = 200;\nconst ANIMATION_HIDE_DURATION = 300;\nconst ANIMATION_SHOW_DURATION_SMALL = 100;\nconst ANIMATION_HIDE_DURATION_SMALL = 200;\n\nfunction animationContentWrapperShow() {\n  const isSmall = media(\"small\").matches;\n  return {\n    keyframes: [{ opacity: \"0\" }, { opacity: \"1\" }],\n    options: {\n      duration: isSmall ? ANIMATION_SHOW_DURATION_SMALL : ANIMATION_SHOW_DURATION,\n      easing: \"linear\",\n    },\n  };\n}\n\nfunction animationContentWrapperHide() {\n  const isSmall = media(\"small\").matches;\n  return {\n    keyframes: [{ opacity: \"1\" }, { opacity: \"0\" }],\n    options: {\n      duration: isSmall ? ANIMATION_HIDE_DURATION_SMALL : ANIMATION_HIDE_DURATION,\n      easing: \"linear\",\n    },\n  };\n}\n\nfunction animationDialogShow() {\n  const isSmall = media(\"small\").matches;\n  return {\n    keyframes: [{ transform: isSmall ? \"translateY(-8px)\" : \"translateY(100%)\" }, { transform: \"translateY(0px)\" }],\n    options: {\n      duration: isSmall ? ANIMATION_SHOW_DURATION_SMALL : ANIMATION_SHOW_DURATION,\n      easing: \"linear\",\n    },\n  };\n}\n\nfunction animationDialogHide() {\n  const isSmall = media(\"small\").matches;\n  return {\n    keyframes: [{ transform: \"translateY(0px)\" }, { transform: isSmall ? \"translateY(-8px)\" : \"translateY(100%)\" }],\n    options: {\n      duration: isSmall ? ANIMATION_HIDE_DURATION_SMALL : ANIMATION_HIDE_DURATION,\n      easing: \"linear\",\n    },\n  };\n}\n\nconst keyCode = {\n  ESC: 27,\n};\n\nconst CLASS_BODY_OPEN = \"stzh-popover-open\";\n\nlet popoverCounter = 0;\n\n/**\n * @slot - Trigger element for popover\n * @slot content - Any element used as popover content\n * @slot action - `stzh-button` element\n * @slot label - Label for mobile view (alternative for label property)\n */\n@Component({\n  tag: \"stzh-popover\",\n  styleUrl: \"stzh-popover.scss\",\n  scoped: true,\n})\nexport class StzhPopover {\n  /** Whether popover should be open */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Default placement of popover relative to trigger element */\n  @Prop({ reflect: true }) placement: Placement = \"bottom\";\n\n  /** Whether to stretch popover to fullwith of parent */\n  @Prop({ reflect: true }) fullwidth: \"horizontal\" | \"vertical\" | \"\" = \"\";\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"secondary\" | \"tooltip\" = \"default\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: \"default\" | \"large\" = \"default\";\n\n  /** Shifting of popover content */\n  @Prop() skidding: number = 0;\n\n  /** Distance from popover content to trigger. \"8\" when default variant, \"16\" when tooltip variant, arrow height (8px) + spacing (4px) = 12. */\n  @Prop() distance: number;\n\n  /** Label for mobile view (use label slot as alternative) */\n  @Prop() label: string = \"\";\n\n  /** Position strategy */\n  @Prop() strategy: \"absolute\" | \"fixed\" = \"absolute\";\n\n  /** Translation strings. */\n  @Prop() localization: StzhPopoverLocalizedText;\n\n  @Element() element: HTMLStzhPopoverElement;\n\n  /** Popover open event */\n  @Event() stzhOpen: EventEmitter<StzhPopoverOpenEvent>;\n\n  /** Popover opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhPopoverOpenedEvent>;\n\n  /** Popover close event */\n  @Event() stzhClose: EventEmitter<StzhPopoverCloseEvent>;\n\n  /** Popover closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhPopoverClosedEvent>;\n\n  private parentNode: Node;\n\n  /** Show popover content */\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.mediaChangeHandler();\n    if (this.isHeaderStuckAndViewportMicro) {\n      this.branchOutToBody();\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  /** Hide popover content */\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n\n    await waitForEvent(this.element, \"stzhClosed\");\n\n    this.mediaChangeHandler();\n    if (this.isHeaderStuckAndViewportMicro) {\n      this.branchInFromBody();\n    }\n\n    return true;\n  }\n\n  /** Toggle popover content */\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  @Method()\n  async update() {\n    return await this.computePosition();\n  }\n\n  @Listen(\"click\", { target: \"document\", capture: true })\n  handleOutsideClick(event: MouseEvent) {\n    if (!this.open) {\n      return;\n    }\n\n    const isClickOutside =\n      event.target !== this.dialogElement && this.dialogElement.contains(event.target as HTMLElement) === false;\n\n    const isClickTrigger =\n      event.target === this.triggerElement || this.triggerElement.contains(event.target as HTMLElement);\n\n    if (isClickOutside && !isClickTrigger) {\n      this.hide();\n    }\n  }\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.dialogElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-popover\",\n        });\n      }\n\n      const animationShow = animationContentWrapperShow();\n      const animationShowDialog = animationDialogShow();\n\n      await Promise.all([\n        stopAnimations(this.contentWrapperElement),\n        stopAnimations(this.contentElement),\n        stopAnimations(this.dialogElement),\n      ]);\n\n      // safari seems to need will-change,\n      // otherwise it has problems animating the element with the drop shadow\n      this.dialogElement.style.willChange = \"transform, opacity, position, top, left, bottom, right\";\n      this.contentWrapperElement.hidden = false;\n\n      await Promise.all([\n        animateTo(\n          media(\"small\").matches ? this.dialogElement : this.contentWrapperElement,\n          animationShow.keyframes,\n          animationShow.options\n        ),\n        animateTo(\n          media(\"small\").matches ? this.dialogElement : this.contentElement,\n          animationShowDialog.keyframes,\n          animationShowDialog.options\n        ),\n      ]);\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-popover\",\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-popover\",\n        });\n      }\n\n      const animationHide = animationContentWrapperHide();\n      const animationHideDialog = animationDialogHide();\n\n      await Promise.all([\n        stopAnimations(this.contentWrapperElement),\n        stopAnimations(this.contentElement),\n        stopAnimations(this.dialogElement),\n      ]);\n\n      await Promise.all([\n        animateTo(\n          media(\"small\").matches ? this.dialogElement : this.contentWrapperElement,\n          animationHide.keyframes,\n          animationHide.options\n        ),\n        animateTo(\n          media(\"small\").matches ? this.dialogElement : this.contentElement,\n          animationHideDialog.keyframes,\n          animationHideDialog.options\n        ),\n      ]);\n\n      this.contentWrapperElement.hidden = true;\n      this.dialogElement.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-popover\",\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  @Watch(\"distance\")\n  distanceWatcher(newValue: number) {\n    if (typeof newValue === \"number\") {\n      this.distance = newValue;\n    } else {\n      this.distance = this.variant === \"tooltip\" ? 12 : 8;\n    }\n  }\n\n  @State() computedPlacement: Placement;\n  @State() isHeaderStuckAndViewportMicro: boolean;\n  @State() isBranchedOutToBody: boolean;\n  @State() hasStzhHeaderParent: boolean;\n\n  private observer: MutationObserver;\n\n  private contentWrapperElement: HTMLElement;\n  private contentElement: HTMLElement;\n  private arrowElement: HTMLElement;\n  private rootElement: HTMLElement;\n  private triggerElement: HTMLElement;\n  private triggerFirstElement: HTMLElement;\n  private dialogElement: HTMLElement;\n  private autoUpdateCleanup: Function;\n\n  private initialTouchX: number = null;\n  private initialTouchY: number = null;\n\n  private id: string;\n  private trap: FocusTrap;\n  private toggledByMethod: boolean;\n\n  private setStzhHeaderParent(): boolean {\n    let parent = this.element.parentElement;\n    while (parent) {\n      if (parent.tagName && parent.tagName.toLowerCase() === \"stzh-header\") {\n        return true;\n      }\n      parent = parent.parentElement;\n    }\n    return false;\n  }\n\n  private mediaChangeHandler = () => {\n    const isStzhHeaderStuck = document.documentElement.style.getPropertyValue(\"--stzh-header-is-stuck\");\n    this.isHeaderStuckAndViewportMicro =\n      !media(\"small\").matches && isStzhHeaderStuck === \"1\" && this.hasStzhHeaderParent;\n\n    if (this.open && this.isBranchedOutToBody && !this.isHeaderStuckAndViewportMicro) {\n      this.branchInFromBody();\n    }\n  };\n\n  private branchOutToBody() {\n    document.body.append(this.element);\n    this.parentNode.appendChild(this.triggerElement);\n    this.isBranchedOutToBody = true;\n  }\n\n  private branchInFromBody() {\n    this.parentNode.appendChild(this.element);\n    this.rootElement.prepend(this.triggerElement);\n    this.isBranchedOutToBody = false;\n  }\n\n  private handleKeydown = (event: KeyboardEvent) => {\n    if (event.keyCode === keyCode.ESC) {\n      this.hide();\n    }\n  };\n\n  private onClickTrigger = () => {\n    this.toggle();\n  };\n\n  private computePosition = async () => {\n    if (media(\"small\").matches) {\n      const middleware = [\n        offset({\n          mainAxis: this.distance,\n          crossAxis: this.skidding,\n        }),\n        flip({\n          padding: 5,\n        }),\n        shift({\n          padding: 5,\n        }),\n      ];\n\n      if (this.variant === \"tooltip\") {\n        middleware.push(\n          arrow({\n            element: this.arrowElement,\n            padding: 5,\n          })\n        );\n      }\n\n      const {\n        x = 0,\n        y = 0,\n        strategy = \"absolute\",\n        placement,\n        middlewareData,\n      } = await computePosition(this.triggerFirstElement, this.dialogElement, {\n        strategy: this.strategy,\n        placement: this.placement,\n        middleware,\n      });\n\n      this.computedPlacement = placement;\n\n      Object.assign(this.dialogElement.style, {\n        position: strategy,\n        left: `${x}px`,\n        top: `${y}px`,\n      });\n\n      if (this.variant === \"tooltip\") {\n        Object.assign(this.arrowElement.style, {\n          left: x != null ? `${middlewareData.arrow.x}px` : \"\",\n          top: y != null ? `${middlewareData.arrow.y}px` : \"\",\n        });\n      }\n    } else {\n      Object.assign(this.dialogElement.style, {\n        position: null,\n        left: null,\n        top: null,\n      });\n\n      if (this.variant === \"tooltip\") {\n        Object.assign(this.arrowElement.style, {\n          left: null,\n          top: null,\n        });\n      }\n    }\n  };\n\n  private handleTouchStart = (event: TouchEvent) => {\n    const touch = event.changedTouches[0];\n    this.initialTouchX = touch.pageX;\n    this.initialTouchY = touch.pageY;\n  };\n\n  // private handleTouchMove = (event: TouchEvent) => {\n  //   event.preventDefault()\n  // }\n\n  private handleTouchEnd = (event: TouchEvent) => {\n    const touch = event.changedTouches[0];\n    const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled\n    const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\n    const threshold = 70;\n\n    const isYSwipe = Math.abs(distY) >= threshold && Math.abs(distX) <= threshold;\n\n    if (isYSwipe) {\n      const isInDropdown = (event.target as HTMLElement).closest('.stzh-dropdown') !== null;\n      if (!isInDropdown){\n        this.hide();\n      }\n    }\n\n    this.initialTouchY = null;\n    this.initialTouchX = null;\n  };\n\n  private init = () => {\n    let trigger = this.triggerElement?.firstElementChild as HTMLElement;\n\n    if (!trigger) {\n      const defaultSlot = Array.from(this.element.children).find(child => !child.hasAttribute(\"slot\")) as HTMLElement;\n\n      trigger = defaultSlot;\n    }\n\n    if (trigger) {\n      this.triggerFirstElement = trigger;\n      trigger.addEventListener(\"click\", this.onClickTrigger);\n    }\n  };\n\n  async componentWillLoad() {\n    this.id = `stzh-popover-${popoverCounter++}`;\n    this.parentNode = this.element.parentNode;\n    this.hasStzhHeaderParent = this.setStzhHeaderParent();\n\n    this.distanceWatcher(this.distance);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"popover\");\n    }\n  }\n\n  private popoverShown() {\n    document.body.classList.add(CLASS_BODY_OPEN);\n\n    const isStzh = isStzhElement(this.triggerFirstElement);\n\n    this.triggerFirstElement.setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", \"true\");\n\n    if (this.trap) {\n      this.trap.activate();\n    }\n  }\n\n  private popoverHidden() {\n    document.body.classList.remove(CLASS_BODY_OPEN);\n\n    const isStzh = isStzhElement(this.triggerFirstElement);\n\n    this.triggerFirstElement.setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", \"false\");\n\n    if (this.trap) {\n      this.trap.deactivate();\n    }\n  }\n\n  componentDidRender() {\n    this.mediaChangeHandler();\n    const isStzh = isStzhElement(this.triggerFirstElement);\n\n    if (\n      (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\")) ||\n      (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n    ) {\n      this.triggerFirstElement.setAttribute(\n        isStzh ? \"a11y-describedby\" : \"aria-describedby\",\n        `${this.id}-trigger-description`\n      );\n    }\n\n    if (\n      (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-label\")) ||\n      (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-label\"))\n    ) {\n      this.triggerFirstElement.setAttribute(isStzh ? \"a11y-label\" : \"aria-label\", this.label);\n    }\n\n    if (\n      (isStzh && !this.triggerFirstElement.getAttribute(\"analytics-id\")) ||\n      (!isStzh && !this.triggerFirstElement.getAttribute(\"s-object-id\"))\n    ) {\n      this.triggerFirstElement.setAttribute(isStzh ? \"analytics-id\" : \"s-object-id\", this.label);\n    }\n  }\n\n  private initializedPopover = false\n\n  componentDidUpdate() {\n    if (this.open && !this.initializedPopover) {\n      this.initializeAutoUpdate();\n      this.initializeFocusTrap();\n      this.popoverShown();\n      this.initializedPopover = true\n    }\n\n    if (this.initializedPopover) {\n      this.computePosition();\n      if (this.trap) {\n        this.trap.updateContainerElements(this.dialogElement);\n      }\n    }\n  }\n\n  initializeAutoUpdate() {\n    this.autoUpdateCleanup = autoUpdate(this.triggerFirstElement, this.dialogElement, this.computePosition);\n  }\n\n  initializeFocusTrap() {\n    this.trap = createFocusTrap(this.dialogElement, {\n      fallbackFocus: this.dialogElement,\n      clickOutsideDeactivates: true,\n      returnFocusOnDeactivate: true,\n    });\n  }\n\n  componentDidLoad() {\n    this.contentWrapperElement.hidden = !this.open;\n    this.open ? this.popoverShown() : this.popoverHidden();\n  }\n\n  connectedCallback() {\n    addMediaChangeListener(this.mediaChangeHandler);\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.mediaChangeHandler);\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n\n    if (this.triggerFirstElement) {\n      this.triggerFirstElement.removeEventListener(\"click\", this.onClickTrigger);\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-popover\": true,\n      [`stzh-popover--open`]: this.open,\n      [`stzh-popover--placement-${this.computedPlacement}`]: !!this.computedPlacement,\n      [`stzh-popover--fullwidth-${this.fullwidth}`]: !!this.fullwidth,\n      [`stzh-popover--${this.size}`]: !!this.size,\n      [`stzh-popover--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host>\n        <div\n          class={classes}\n          onTouchStart={this.handleTouchStart}\n          onTouchEnd={this.handleTouchEnd}\n          ref={el => (this.rootElement = el as HTMLDivElement)}\n        >\n          <div ref={el => (this.triggerElement = el as HTMLDivElement)} class=\"stzh-popover__trigger\">\n            <slot></slot>\n          </div>\n          <div class=\"stzh-popover__vhidden\" id={`${this.id}-trigger-description`}>\n            {this.localization.open}\n          </div>\n          <div ref={el => (this.contentWrapperElement = el as HTMLDivElement)} class=\"stzh-popover__content-wrapper\">\n            <div class=\"stzh-popover__backdrop\"></div>\n            <div ref={el => (this.contentElement = el as HTMLDivElement)} class=\"stzh-popover__content\">\n              <div\n                ref={el => (this.dialogElement = el as HTMLDivElement)}\n                class=\"stzh-popover__dialog\"\n                role=\"dialog\"\n                tabindex=\"-1\"\n                aria-modal=\"true\"\n                aria-labelledby={this.label ? `${this.id}-label` : null}\n                aria-hidden={this.open ? \"false\" : \"true\"}\n                onKeyDown={this.handleKeydown}\n              >\n                {this.variant === \"tooltip\" && (\n                  <div\n                    class=\"stzh-popover__arrow\"\n                    ref={el => (this.arrowElement = el as HTMLDivElement)}\n                    innerHTML={Arrow}\n                  ></div>\n                )}\n                <div class=\"stzh-popover__content-inner\">\n                  <div class=\"stzh-popover__label-wrapper\">\n                    <h2 id={`${this.id}-label`} class=\"stzh-popover__label\">\n                      {this.label ? this.label : <slot name=\"label\"></slot>}\n                    </h2>\n                    <button class=\"stzh-popover__close\" onClick={() => this.hide()} type=\"button\">\n                      <stzh-icon name=\"close\" class=\"stzh-popover__icon\"></stzh-icon>\n                      <span class=\"stzh-popover__vhidden\">{this.localization.close}</span>\n                    </button>\n                  </div>\n                  <div class=\"stzh-popover__content-slot-wrapper\">\n                    <div class=\"stzh-popover__content-slot\">\n                      <slot name=\"content\"></slot>\n                    </div>\n                    <div class=\"stzh-popover__action-slot\">\n                      <slot name=\"action\"></slot>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --color: Text color (also `color` can be overwritten)\n * @prop --icon-size: Icon size\n * @prop --icon-vertical-align: Icon vertical alignment\n *\n * @prop --stzh-base-color: **Global**: Text color\n * @prop --stzh-base-lead-color: **Global**: Lead text color\n */\n\n:host {\n  --icon-size: 1.25em;\n  --icon-vertical-align: text-bottom;\n  --color: #{$baseColor};\n  --display: var(--stzh-text-display, block);\n\n  width: 100%;\n  color: var(--color);\n\n  --grid-template-areas: var(\n    --stzh-text-grid-template-areas,\n    \"text text text text\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-text-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-text-grid-template-areas,\n      \"text text text text\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-text-grid-template-areas,\n      \"text text text text text text text text\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-text-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  ::slotted(*:first-child) {\n    margin-top: 0 !important;\n  }\n\n  ::slotted(*:last-child) {\n    margin-bottom: 0 !important;\n  }\n\n  ::slotted(a),\n  ::slotted(* a) {\n    color: $linkColor;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n    text-underline-offset: $linkTextUnderlineOffset;\n    text-decoration-line: $linkTextDecorationLine;\n    text-decoration-thickness: $linkTextDecorationThickness;\n    text-decoration-skip-ink: $linkTextDecorationSkipInk;\n\n    &:hover {\n      color: $linkHoverColor;\n      text-decoration-line: $linkHoverTextDecorationLine;\n    }\n\n    &:hover {\n      color: $linkHoverColor;\n    }\n  }\n\n  ::slotted(b),\n  ::slotted(strong),\n  ::slotted(* b),\n  ::slotted(* strong) {\n    @include font('heavy');\n  }\n\n  ::slotted(i),\n  ::slotted(em),\n  ::slotted(* i),\n  ::slotted(* em) {\n    @include font;\n  }\n\n  &[lead]:not([lead=\"false\"]) {\n    --color: #{$baseLeadColor};\n  }\n\n  &[color=\"primary\"] {\n    --color: #{$colorPrimary70};\n  }\n\n  &[color=\"secondary\"] {\n    --color: #{$colorSecondary60};\n  }\n\n  &[color=\"info\"] {\n    --color: #{$textInfoColor};\n  }\n\n  &[color=\"inherit\"] {\n    --color: initial;\n  }\n}\n\n.stzh-text {\n  --stzh-icon-size: var(--icon-size);\n  --stzh-icon-vertical-align: var(--icon-vertical-align);\n\n  --stzh-list-font-size: \"\";\n  --stzh-list-line-height: \"\";\n  --stzh-list-letter-spacing: \"\";\n\n  // default font styling without attributes\n  @include fontCurve($textFontCurveDefault);\n  @include gridGutter;\n  display: var(--display);\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  color: var(--color);\n\n  &__text {\n    grid-area: text;\n    display: flex;\n  }\n\n  &__icon {\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      margin-right: 0.25em;\n    }\n  }\n\n  &__text-inner {\n    flex-grow: 1;\n  }\n\n  /* Lead variant */\n\n  &--is-lead {\n    @include font('heavy');\n    @include fontCurve('lead', 'lead');\n  }\n\n  /* Font variants */\n\n  @each $font, $value in $fonts {\n    &--font-#{$font} {\n      @include font($font);\n    }\n  }\n\n  /* Curve variants */\n\n  &--curve-none {\n    font-size: inherit;\n  }\n\n  @each $fontCurveName, $config in $fontCurves {\n    &--curve-#{$fontCurveName} {\n      @include fontCurve($fontCurveName);\n    }\n  }\n\n  /* Size variants when consumer wants to overwrite predefined font curves */\n\n  @each $size, $value in $fontSizes {\n    &--size-#{$size} {\n      @include fontSize($size);\n    }\n  }\n\n  @each $breakpoint, $size in $breakpoints {\n    @each $size, $value in $fontSizes {\n      &--size-#{$breakpoint}-#{$size} {\n        @include mq($from: $breakpoint) {\n          @include fontSize($size);\n        }\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Font } from \"../../index\";\n\n/**\n * @slot - Slot for text and icons\n * @slot icon - Slot for icon that should be on left side of the text (not inline)\n */\n@Component({\n  tag: \"stzh-text\",\n  styleUrl: \"stzh-text.scss\",\n  scoped: true\n})\nexport class StzhText {\n  /** Font used */\n  @Prop() font: Font.Fonts = \"default\";\n\n  /** Type of curve (see [Spacings docs page](/docs/tokens-typography--docs#curves) for more info). */\n  @Prop({ reflect: true }) curve: Font.Curves = \"default\";\n\n  /** Whether if text is lead text */\n  @Prop({ reflect: true }) lead: boolean = false;\n\n  /** Color used */\n  @Prop({ reflect: true }) color: \"default\" | \"primary\" | \"secondary\" | \"info\" | \"inherit\" = \"default\";\n\n  /** Manually overwrite font size applied by curve attribute (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() size: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above small breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeSmall: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above medium breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeMedium: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above large breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeLarge: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above ultra breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeUltra: Font.Sizes | \"inherit\" = \"inherit\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-text\": true,\n            \"stzh-text--is-lead\": this.lead,\n            [`stzh-text--font-${this.font}`]: !!this.font,\n            [`stzh-text--curve-${this.curve}`]: !!this.curve,\n            [`stzh-text--size-${this.size}`]: !!this.size,\n            [`stzh-text--size-small-${this.sizeSmall}`]: !!this.sizeSmall,\n            [`stzh-text--size-medium-${this.sizeMedium}`]: !!this.sizeMedium,\n            [`stzh-text--size-large-${this.sizeLarge}`]: !!this.sizeLarge,\n            [`stzh-text--size-ultra-${this.sizeUltra}`]: !!this.sizeUltra,\n          }}\n        >\n          <div class=\"stzh-text__text\">\n            <div class=\"stzh-text__icon\">\n              <slot name=\"icon\"></slot>\n            </div>\n            <div class=\"stzh-text__text-inner\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/stzh-row.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, a as Host } from './index-e3050b18.js';
 
-const stzhRowCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{width:100%;--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=\"2\"]) ::slotted(stzh-cell){flex:0 0 16.6666666667%;max-width:16.6666666667%}:host([span=\"3\"]) ::slotted(stzh-cell){flex:0 0 25%;max-width:25%}:host([span=\"4\"]) ::slotted(stzh-cell){flex:0 0 33.3333333333%;max-width:33.3333333333%}:host([span=\"5\"]) ::slotted(stzh-cell){flex:0 0 41.6666666667%;max-width:41.6666666667%}:host([span=\"6\"]) ::slotted(stzh-cell){flex:0 0 50%;max-width:50%}:host([span=\"7\"]) ::slotted(stzh-cell){flex:0 0 58.3333333333%;max-width:58.3333333333%}:host([span=\"8\"]) ::slotted(stzh-cell){flex:0 0 66.6666666667%;max-width:66.6666666667%}:host([span=\"9\"]) ::slotted(stzh-cell){flex:0 0 75%;max-width:75%}:host([span=\"10\"]) ::slotted(stzh-cell){flex:0 0 83.3333333333%;max-width:83.3333333333%}:host([span=\"11\"]) ::slotted(stzh-cell){flex:0 0 91.6666666667%;max-width:91.6666666667%}:host([span=\"12\"]) ::slotted(stzh-cell){flex:0 0 100%;max-width:100%}@media (min-width: 600px){:host([span-small=\"1\"]) ::slotted(stzh-cell){flex:0 0 8.3333333333%;max-width:8.3333333333%}:host([span-small=\"2\"]) ::slotted(stzh-cell){flex:0 0 16.6666666667%;max-width:16.6666666667%}:host([span-small=\"3\"]) ::slotted(stzh-cell){flex:0 0 25%;max-width:25%}:host([span-small=\"4\"]) ::slotted(stzh-cell){flex:0 0 33.3333333333%;max-width:33.3333333333%}:host([span-small=\"5\"]) ::slotted(stzh-cell){flex:0 0 41.6666666667%;max-width:41.6666666667%}:host([span-small=\"6\"]) ::slotted(stzh-cell){flex:0 0 50%;max-width:50%}:host([span-small=\"7\"]) ::slotted(stzh-cell){flex:0 0 58.3333333333%;max-width:58.3333333333%}:host([span-small=\"8\"]) ::slotted(stzh-cell){flex:0 0 66.6666666667%;max-width:66.6666666667%}:host([span-small=\"9\"]) ::slotted(stzh-cell){flex:0 0 75%;max-width:75%}:host([span-small=\"10\"]) ::slotted(stzh-cell){flex:0 0 83.3333333333%;max-width:83.3333333333%}:host([span-small=\"11\"]) ::slotted(stzh-cell){flex:0 0 91.6666666667%;max-width:91.6666666667%}:host([span-small=\"12\"]) ::slotted(stzh-cell){flex:0 0 100%;max-width:100%}}@media (min-width: 900px){:host([span-medium=\"1\"]) ::slotted(stzh-cell){flex:0 0 8.3333333333%;max-width:8.3333333333%}:host([span-medium=\"2\"]) ::slotted(stzh-cell){flex:0 0 16.6666666667%;max-width:16.6666666667%}:host([span-medium=\"3\"]) ::slotted(stzh-cell){flex:0 0 25%;max-width:25%}:host([span-medium=\"4\"]) ::slotted(stzh-cell){flex:0 0 33.3333333333%;max-width:33.3333333333%}:host([span-medium=\"5\"]) ::slotted(stzh-cell){flex:0 0 41.6666666667%;max-width:41.6666666667%}:host([span-medium=\"6\"]) ::slotted(stzh-cell){flex:0 0 50%;max-width:50%}:host([span-medium=\"7\"]) ::slotted(stzh-cell){flex:0 0 58.3333333333%;max-width:58.3333333333%}:host([span-medium=\"8\"]) ::slotted(stzh-cell){flex:0 0 66.6666666667%;max-width:66.6666666667%}:host([span-medium=\"9\"]) ::slotted(stzh-cell){flex:0 0 75%;max-width:75%}:host([span-medium=\"10\"]) ::slotted(stzh-cell){flex:0 0 83.3333333333%;max-width:83.3333333333%}:host([span-medium=\"11\"]) ::slotted(stzh-cell){flex:0 0 91.6666666667%;max-width:91.6666666667%}:host([span-medium=\"12\"]) ::slotted(stzh-cell){flex:0 0 100%;max-width:100%}}@media (min-width: 1260px){:host([span-large=\"1\"]) ::slotted(stzh-cell){flex:0 0 8.3333333333%;max-width:8.3333333333%}:host([span-large=\"2\"]) ::slotted(stzh-cell){flex:0 0 16.6666666667%;max-width:16.6666666667%}:host([span-large=\"3\"]) ::slotted(stzh-cell){flex:0 0 25%;max-width:25%}:host([span-large=\"4\"]) ::slotted(stzh-cell){flex:0 0 33.3333333333%;max-width:33.3333333333%}:host([span-large=\"5\"]) ::slotted(stzh-cell){flex:0 0 41.6666666667%;max-width:41.6666666667%}:host([span-large=\"6\"]) ::slotted(stzh-cell){flex:0 0 50%;max-width:50%}:host([span-large=\"7\"]) ::slotted(stzh-cell){flex:0 0 58.3333333333%;max-width:58.3333333333%}:host([span-large=\"8\"]) ::slotted(stzh-cell){flex:0 0 66.6666666667%;max-width:66.6666666667%}:host([span-large=\"9\"]) ::slotted(stzh-cell){flex:0 0 75%;max-width:75%}:host([span-large=\"10\"]) ::slotted(stzh-cell){flex:0 0 83.3333333333%;max-width:83.3333333333%}:host([span-large=\"11\"]) ::slotted(stzh-cell){flex:0 0 91.6666666667%;max-width:91.6666666667%}:host([span-large=\"12\"]) ::slotted(stzh-cell){flex:0 0 100%;max-width:100%}}@media (min-width: 1600px){:host([span-ultra=\"1\"]) ::slotted(stzh-cell){flex:0 0 8.3333333333%;max-width:8.3333333333%}:host([span-ultra=\"2\"]) ::slotted(stzh-cell){flex:0 0 16.6666666667%;max-width:16.6666666667%}:host([span-ultra=\"3\"]) ::slotted(stzh-cell){flex:0 0 25%;max-width:25%}:host([span-ultra=\"4\"]) ::slotted(stzh-cell){flex:0 0 33.3333333333%;max-width:33.3333333333%}:host([span-ultra=\"5\"]) ::slotted(stzh-cell){flex:0 0 41.6666666667%;max-width:41.6666666667%}:host([span-ultra=\"6\"]) ::slotted(stzh-cell){flex:0 0 50%;max-width:50%}:host([span-ultra=\"7\"]) ::slotted(stzh-cell){flex:0 0 58.3333333333%;max-width:58.3333333333%}:host([span-ultra=\"8\"]) ::slotted(stzh-cell){flex:0 0 66.6666666667%;max-width:66.6666666667%}:host([span-ultra=\"9\"]) ::slotted(stzh-cell){flex:0 0 75%;max-width:75%}:host([span-ultra=\"10\"]) ::slotted(stzh-cell){flex:0 0 83.3333333333%;max-width:83.3333333333%}:host([span-ultra=\"11\"]) ::slotted(stzh-cell){flex:0 0 91.6666666667%;max-width:91.6666666667%}:host([span-ultra=\"12\"]) ::slotted(stzh-cell){flex:0 0 100%;max-width:100%}}.stzh-row{display:flex;flex-wrap:wrap;justify-content:flex-start;row-gap:var(--row-gap);margin-left:calc(var(--stzh-grid-gutter) / -2);margin-right:calc(var(--stzh-grid-gutter) / -2);}.stzh-row--justify-end{justify-content:flex-end}.stzh-row--justify-center{justify-content:center}.stzh-row--justify-between{justify-content:space-between}.stzh-row--justify-around{justify-content:space-around}.stzh-row--justify-evenly{justify-content:space-evenly}.stzh-row--items-end{align-items:flex-end}.stzh-row--items-center{align-items:center}.stzh-row--items-baseline{align-items:baseline}.stzh-row--items-stretch{align-items:stretch}.stzh-row--content-end{align-content:flex-end}.stzh-row--content-center{align-content:center}.stzh-row--content-between{align-content:space-between}.stzh-row--content-around{align-content:space-around}.stzh-row--content-evenly{align-content:space-evenly}";
+const stzhRowCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{width:100%;--row-gap:var(--stzh-row-row-gap, 0px)}:host([span=\"1\"]) ::slotted(stzh-cell:not([span])){--cell-width:8.3333333333%}:host([span=\"2\"]) ::slotted(stzh-cell:not([span])){--cell-width:16.6666666667%}:host([span=\"3\"]) ::slotted(stzh-cell:not([span])){--cell-width:25%}:host([span=\"4\"]) ::slotted(stzh-cell:not([span])){--cell-width:33.3333333333%}:host([span=\"5\"]) ::slotted(stzh-cell:not([span])){--cell-width:41.6666666667%}:host([span=\"6\"]) ::slotted(stzh-cell:not([span])){--cell-width:50%}:host([span=\"7\"]) ::slotted(stzh-cell:not([span])){--cell-width:58.3333333333%}:host([span=\"8\"]) ::slotted(stzh-cell:not([span])){--cell-width:66.6666666667%}:host([span=\"9\"]) ::slotted(stzh-cell:not([span])){--cell-width:75%}:host([span=\"10\"]) ::slotted(stzh-cell:not([span])){--cell-width:83.3333333333%}:host([span=\"11\"]) ::slotted(stzh-cell:not([span])){--cell-width:91.6666666667%}:host([span=\"12\"]) ::slotted(stzh-cell:not([span])){--cell-width:100%}@media screen and (min-width: 600px){:host([span-small=\"1\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:8.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"2\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:16.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"3\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:25%}}@media screen and (min-width: 600px){:host([span-small=\"4\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:33.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"5\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:41.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"6\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:50%}}@media screen and (min-width: 600px){:host([span-small=\"7\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:58.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"8\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:66.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"9\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:75%}}@media screen and (min-width: 600px){:host([span-small=\"10\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:83.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"11\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:91.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"12\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:100%}}@media screen and (min-width: 900px){:host([span-medium=\"1\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:8.3333333333%}}@media screen and (min-width: 900px){:host([span-medium=\"2\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:16.6666666667%}}@media screen and (min-width: 900px){:host([span-medium=\"3\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:25%}}@media screen and (min-width: 900px){:host([span-medium=\"4\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:33.3333333333%}}@media screen and (min-width: 900px){:host([span-medium=\"5\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:41.6666666667%}}@media screen and (min-width: 900px){:host([span-medium=\"6\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:50%}}@media screen and (min-width: 900px){:host([span-medium=\"7\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:58.3333333333%}}@media screen and (min-width: 900px){:host([span-medium=\"8\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:66.6666666667%}}@media screen and (min-width: 900px){:host([span-medium=\"9\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:75%}}@media screen and (min-width: 900px){:host([span-medium=\"10\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:83.3333333333%}}@media screen and (min-width: 900px){:host([span-medium=\"11\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:91.6666666667%}}@media screen and (min-width: 900px){:host([span-medium=\"12\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:100%}}@media screen and (min-width: 1260px){:host([span-large=\"1\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:8.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"2\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:16.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"3\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:25%}}@media screen and (min-width: 1260px){:host([span-large=\"4\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:33.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"5\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:41.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"6\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:50%}}@media screen and (min-width: 1260px){:host([span-large=\"7\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:58.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"8\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:66.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"9\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:75%}}@media screen and (min-width: 1260px){:host([span-large=\"10\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:83.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"11\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:91.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"12\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:100%}}@media screen and (min-width: 1600px){:host([span-ultra=\"1\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:8.3333333333%}}@media screen and (min-width: 1600px){:host([span-ultra=\"2\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:16.6666666667%}}@media screen and (min-width: 1600px){:host([span-ultra=\"3\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:25%}}@media screen and (min-width: 1600px){:host([span-ultra=\"4\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:33.3333333333%}}@media screen and (min-width: 1600px){:host([span-ultra=\"5\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:41.6666666667%}}@media screen and (min-width: 1600px){:host([span-ultra=\"6\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:50%}}@media screen and (min-width: 1600px){:host([span-ultra=\"7\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:58.3333333333%}}@media screen and (min-width: 1600px){:host([span-ultra=\"8\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:66.6666666667%}}@media screen and (min-width: 1600px){:host([span-ultra=\"9\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:75%}}@media screen and (min-width: 1600px){:host([span-ultra=\"10\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:83.3333333333%}}@media screen and (min-width: 1600px){:host([span-ultra=\"11\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:91.6666666667%}}@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;justify-content:flex-start;row-gap:var(--row-gap);margin-left:calc(var(--stzh-grid-gutter) / -2);margin-right:calc(var(--stzh-grid-gutter) / -2);}@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}.stzh-row--justify-center{justify-content:center}.stzh-row--justify-between{justify-content:space-between}.stzh-row--justify-around{justify-content:space-around}.stzh-row--justify-evenly{justify-content:space-evenly}.stzh-row--items-end{align-items:flex-end}.stzh-row--items-center{align-items:center}.stzh-row--items-baseline{align-items:baseline}.stzh-row--items-stretch{align-items:stretch}.stzh-row--content-end{align-content:flex-end}.stzh-row--content-center{align-content:center}.stzh-row--content-between{align-content:space-between}.stzh-row--content-around{align-content:space-around}.stzh-row--content-evenly{align-content:space-evenly}";
 
 const StzhRow = class {
   constructor(hostRef) {

package/dist/esm/stzh-row.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-row.entry.js","mappings":";;AAAA,MAAM,UAAU,GAAG,8pOAA8pO;;MCiBpqO,OAAO;;;gBAEsB,EAAE;;;;;mBAWS,OAAO;iBAGX,OAAO;mBAGH,OAAO;;EAE1D,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,UAAU,EAAE,IAAI;QAChB,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;QACrD,CAAC,mBAAmB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;QAC/C,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;OACtD,IAED,eAAa,CACT,CACD,EACP;GACH;;;;;;","names":[],"sources":["src/components/stzh-row/stzh-row.scss?tag=stzh-row&encapsulation=shadow","src/components/stzh-row/stzh-row.tsx"],"sourcesContent":[":host {\n  width: 100%;\n\n  --row-gap: var(--stzh-row-row-gap, 0px);\n}\n\n@for $i from 1 through $gridCells {\n  // Standard span\n  :host([span=\"#{$i}\"]) ::slotted(stzh-cell) {\n    flex: 0 0 #{100% / $gridCells * $i};\n    max-width: #{100% / $gridCells * $i};\n  }\n}\n\n// Small breakpoint\n@media (min-width: 600px) {\n  @for $i from 1 through $gridCells {\n    :host([span-small=\"#{$i}\"]) ::slotted(stzh-cell) {\n      flex: 0 0 #{100% / $gridCells * $i};\n      max-width: #{100% / $gridCells * $i};\n    }\n  }\n}\n\n// Medium breakpoint\n@media (min-width: 900px) {\n  @for $i from 1 through $gridCells {\n    :host([span-medium=\"#{$i}\"]) ::slotted(stzh-cell) {\n      flex: 0 0 #{100% / $gridCells * $i};\n      max-width: #{100% / $gridCells * $i};\n    }\n  }\n}\n\n// Large breakpoint\n@media (min-width: 1260px) {\n  @for $i from 1 through $gridCells {\n    :host([span-large=\"#{$i}\"]) ::slotted(stzh-cell) {\n      flex: 0 0 #{100% / $gridCells * $i};\n      max-width: #{100% / $gridCells * $i};\n    }\n  }\n}\n\n// Ultra breakpoint\n@media (min-width: 1600px) {\n  @for $i from 1 through $gridCells {\n    :host([span-ultra=\"#{$i}\"]) ::slotted(stzh-cell) {\n      flex: 0 0 #{100% / $gridCells * $i};\n      max-width: #{100% / $gridCells * $i};\n    }\n  }\n}\n\n.stzh-row {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  row-gap: var(--row-gap);\n  margin-left: calc(#{$gridGutter} / -2);\n  margin-right: calc(#{$gridGutter} / -2);\n\n  /* Justify content variants */\n\n  &--justify-end {\n    justify-content: flex-end;\n  }\n\n  &--justify-center {\n    justify-content: center;\n  }\n\n  &--justify-between {\n    justify-content: space-between;\n  }\n\n  &--justify-around {\n    justify-content: space-around;\n  }\n\n  &--justify-evenly {\n    justify-content: space-evenly;\n  }\n\n  /* Align items variants */\n\n  &--items-end {\n    align-items: flex-end;\n  }\n\n  &--items-center {\n    align-items: center;\n  }\n\n  &--items-baseline {\n    align-items: baseline;\n  }\n\n  &--items-stretch {\n    align-items: stretch;\n  }\n\n  /* Align content variants */\n\n  &--content-end {\n    align-content: flex-end;\n  }\n\n  &--content-center {\n    align-content: center;\n  }\n\n  &--content-between {\n    align-content: space-between;\n  }\n\n  &--content-around {\n    align-content: space-around;\n  }\n\n  &--content-evenly {\n    align-content: space-evenly;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for `stzh-cell` elements\n */\n@Component({\n  tag: \"stzh-row\",\n  styleUrl: \"stzh-row.scss\",\n  shadow: true\n})\nexport class StzhRow {\n  /** Default span of each cell */\n  @Prop({ reflect: true }) span: number = 12;\n  /** Default span of each cell above small breakpoint */\n  @Prop({ reflect: true }) spanSmall: number;\n  /** Default span of each cell above medium breakpoint */\n  @Prop({ reflect: true }) spanMedium: number;\n  /** Default span of each cell above large breakpoint */\n  @Prop({ reflect: true }) spanLarge: number;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop({ reflect: true }) spanUltra: number;\n\n  /** Controlling how cells are positioned along a container's main axis */\n  @Prop({ reflect: true }) justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) items: Layout.Items = \"start\";\n\n  /** Utilities for controlling how rows are positioned in multi-row flex containers. */\n  @Prop({ reflect: true }) content: Layout.Justify = \"start\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-row\": true,\n            [`stzh-row--justify-${this.justify}`]: !!this.justify,\n            [`stzh-row--items-${this.items}`]: !!this.items,\n            [`stzh-row--content-${this.content}`]: !!this.content\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-row.entry.js","mappings":";;AAAA,MAAM,UAAU,GAAG,o8SAAo8S;;MCiB18S,OAAO;;;gBAEsB,EAAE;;;;;mBAWS,OAAO;iBAGX,OAAO;mBAGH,OAAO;;EAE1D,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,UAAU,EAAE,IAAI;QAChB,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;QACrD,CAAC,mBAAmB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;QAC/C,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;OACtD,IAED,eAAa,CACT,CACD,EACP;GACH;;;;;;","names":[],"sources":["src/components/stzh-row/stzh-row.scss?tag=stzh-row&encapsulation=shadow","src/components/stzh-row/stzh-row.tsx"],"sourcesContent":[":host {\n  width: 100%;\n\n  --row-gap: var(--stzh-row-row-gap, 0px);\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"])\n      ::slotted(stzh-cell:not([span-#{$breakpoint}])) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{100% / ($gridCells / $i)};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"])\n      ::slotted(stzh-cell:not([span])) {\n        --cell-width: #{100% / ($gridCells / $i)};\n      }\n    }\n  }\n}\n\n@include cellProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include cellProps($breakpoint);\n}\n\n.stzh-row {\n  display: flex;\n\tflex-wrap: wrap;\n\tjustify-content: flex-start;\n  row-gap: var(--row-gap);\n  margin-left: calc(#{$gridGutter} / -2);\n  margin-right: calc(#{$gridGutter} / -2);\n\n  @include mq($from: small) {\n    margin-left: calc(#{$gridGutterSmall} / -2);\n    margin-right: calc(#{$gridGutterSmall} / -2);\n  }\n\n  @include mq($from: medium) {\n    margin-left: calc(#{$gridGutterMedium} / -2);\n    margin-right: calc(#{$gridGutterMedium} / -2);\n  }\n\n  @include mq($from: large) {\n    margin-left: calc(#{$gridGutterLarge} / -2);\n    margin-right: calc(#{$gridGutterLarge} / -2);\n  }\n\n  @include mq($from: ultra) {\n    margin-left: calc(#{$gridGutterUltra} / -2);\n    margin-right: calc(#{$gridGutterUltra} / -2);\n  }\n\n  /* Justify content variants */\n\n  &--justify-end {\n    justify-content: flex-end;\n  }\n\n  &--justify-center {\n    justify-content: center;\n  }\n\n  &--justify-between {\n    justify-content: space-between;\n  }\n\n  &--justify-around {\n    justify-content: space-around;\n  }\n\n  &--justify-evenly {\n    justify-content: space-evenly;\n  }\n\n  /* Align items variants */\n\n  &--items-end {\n    align-items: flex-end;\n  }\n\n  &--items-center {\n    align-items: center;\n  }\n\n  &--items-baseline {\n    align-items: baseline;\n  }\n\n  &--items-stretch {\n    align-items: stretch;\n  }\n\n  /* Align content variants */\n\n  &--content-end {\n    align-content: flex-end;\n  }\n\n  &--content-center {\n    align-content: center;\n  }\n\n  &--content-between {\n    align-content: space-between;\n  }\n\n  &--content-around {\n    align-content: space-around;\n  }\n\n  &--content-evenly {\n    align-content: space-evenly;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for `stzh-cell` elements\n */\n@Component({\n  tag: \"stzh-row\",\n  styleUrl: \"stzh-row.scss\",\n  shadow: true\n})\nexport class StzhRow {\n  /** Default span of each cell */\n  @Prop({ reflect: true }) span: number = 12;\n  /** Default span of each cell above small breakpoint */\n  @Prop({ reflect: true }) spanSmall: number;\n  /** Default span of each cell above medium breakpoint */\n  @Prop({ reflect: true }) spanMedium: number;\n  /** Default span of each cell above large breakpoint */\n  @Prop({ reflect: true }) spanLarge: number;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop({ reflect: true }) spanUltra: number;\n\n  /** Controlling how cells are positioned along a container's main axis */\n  @Prop({ reflect: true }) justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) items: Layout.Items = \"start\";\n\n  /** Utilities for controlling how rows are positioned in multi-row flex containers. */\n  @Prop({ reflect: true }) content: Layout.Justify = \"start\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-row\": true,\n            [`stzh-row--justify-${this.justify}`]: !!this.justify,\n            [`stzh-row--items-${this.items}`]: !!this.items,\n            [`stzh-row--content-${this.content}`]: !!this.content\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/stzh-tooltip.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-e3050b18.js';
-import { c as computePosition, a as autoUpdate, A as Arrow, o as offset, f as flip, s as shift, b as arrow } from './arrow-fc956b24.js';
+import { c as computePosition, a as autoUpdate, A as Arrow, o as offset, f as flip, s as shift, b as arrow } from './arrow-8f47d7ea.js';
 import { c as createFocusTrap } from './focus-trap.esm-5ca3a3f7.js';
 import { i as isStzhElement } from './utils-4f9b3f37.js';
 import { w as waitForEvent } from './event-utils-d5f6817b.js';
@@ -139,6 +139,7 @@ const StzhTooltip = class {
         trigger.addEventListener("focusout", this.onBlurTrigger);
       }
     };
+    this.initializedTooltip = false;
     this.open = false;
     this.label = "";
     this.content = "";
@@ -247,7 +248,6 @@ const StzhTooltip = class {
     }
   }
   componentDidRender() {
-    this.computePosition();
     const isStzh = isStzhElement(this.triggerFirstElement);
     if (this.hasTrigger("click")) {
       this.triggerFirstElement.setAttribute(isStzh ? "a11y-expanded" : "aria-expanded", this.open ? "true" : "false");
@@ -275,23 +275,35 @@ const StzhTooltip = class {
     }
   }
   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();