@oiz/stzh-components 2.4.0 → 2.5.0-alpha-carousel

package/dist/components/stzh-carousel.js

@@ -0,0 +1,568 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { i as isStzhElement } from './utils.js';
+import { f as fetchTranslations } from './translation-utils.js';
+import { a as addMediaChangeListener, r as removeMediaChangeListener, m as media } from './media-utils.js';
+
+const stzhCarouselCss = ".sc-stzh-carousel-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-carousel-h{display:none}.sc-stzh-carousel-h *.sc-stzh-carousel,.sc-stzh-carousel-h *.sc-stzh-carousel::before,.sc-stzh-carousel-h *.sc-stzh-carousel::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-carousel-h{--peek:calc(var(--peek-in, 0px) + var(--peek-out, 0px));--peek-out:1.25rem;--padding-top:0px;--padding-bottom:0px;--gutter:var(--stzh-space-xxxsmall);--snap-stop:always;--slides:1;--slide-size:calc((100% - (var(--slides) - 1) * var(--gutter)) / var(--slides))}@media screen and (min-width: 600px){.sc-stzh-carousel-h{--peek-out:0px}}[variant=cards].sc-stzh-carousel-h{--padding-top:0.25rem;--padding-bottom:0.25rem;--gutter:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){[variant=cards].sc-stzh-carousel-h{--peek-out:2rem}}@media screen and (min-width: 1024px){[variant=cards].sc-stzh-carousel-h{--peek-out:2.5rem;--gutter:var(--stzh-space-small)}}@media screen and (min-width: 1260px){[variant=cards].sc-stzh-carousel-h{--peek-out:5.5rem;--gutter:var(--stzh-space-medium)}}@media screen and (min-width: 1440px){[variant=cards].sc-stzh-carousel-h{--peek-out:calc((100vw - 78.75rem - var(--stzh-scrollbar-width, 0px)) / 2)}}.sc-stzh-carousel-h .sc-stzh-carousel-s>*{width:100%;height:100%;-ms-flex-negative:0;flex-shrink:0;scroll-snap-align:start;scroll-snap-stop:var(--snap-stop)}.sc-stzh-carousel-h .sc-stzh-carousel-s img{-webkit-user-drag:none;user-drag:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions]{position:absolute;top:0;left:0;z-index:1;pointer-events:none;padding:0 var(--peek)}.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions] stzh-text{width:auto}.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions] stzh-button{pointer-events:all}.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions] stzh-button[data-stzh-carousel-previous]{--border-radius:var(--stzh-button-border-radius) 0 0 var(--stzh-button-border-radius);--border-width:0.0625rem 0 0.0625rem 0.0625rem}.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions] stzh-button[data-stzh-carousel-next]{--border-radius:0 var(--stzh-button-border-radius) var(--stzh-button-border-radius) 0}.sc-stzh-carousel-h .sc-stzh-carousel-s>stzh-ratio[slot=actions] stzh-space,.sc-stzh-carousel-h .sc-stzh-carousel-s>stzh-ratio[slot=actions] stzh-hspace,.sc-stzh-carousel-h .sc-stzh-carousel-s>stzh-ratio[slot=actions] stzh-vspace{padding:var(--stzh-space-xsmall)}.sc-stzh-carousel-h .sc-stzh-carousel-s>stzh-ratio[slot=actions]{--background-color:transparent}.sc-stzh-carousel-h[variant=cards] .sc-stzh-carousel-s>[slot=actions]{position:relative;-ms-flex-order:1;order:1;margin-top:calc(var(--stzh-space-medium) - var(--padding-bottom))}.stzh-carousel.sc-stzh-carousel{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:calc(100% + var(--peek-out) * 2);margin-left:calc(var(--peek-out) / -1);margin-right:calc(var(--peek-out) / -1)}.stzh-carousel__vhidden.sc-stzh-carousel{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-carousel__scroll.sc-stzh-carousel{position:relative;grid-area:slides;display:grid;width:100%;height:100%;place-items:center;overflow-x:auto;overflow-y:visible;grid-auto-flow:column;grid-auto-columns:var(--slide-size);grid-auto-rows:100%;-moz-column-gap:var(--gutter);-webkit-column-gap:var(--gutter);column-gap:var(--gutter);-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;overscroll-behavior-x:contain;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scroll-padding:0 var(--peek);padding:var(--padding-top) var(--peek) var(--padding-bottom)}@media (prefers-reduced-motion: reduce){.stzh-carousel__scroll.sc-stzh-carousel{scroll-behavior:auto}}.stzh-carousel__scroll.sc-stzh-carousel::-webkit-scrollbar{display:none}.stzh-carousel--is-draggable.sc-stzh-carousel .stzh-carousel__scroll.sc-stzh-carousel{cursor:-webkit-grab;cursor:grab}.stzh-carousel--is-dragging.sc-stzh-carousel .stzh-carousel__scroll.sc-stzh-carousel{cursor:-webkit-grabbing;cursor:grabbing}.stzh-carousel--is-disabled.sc-stzh-carousel .stzh-carousel__scroll.sc-stzh-carousel{cursor:not-allowed;overflow:hidden}";
+
+const reducedMotionMedia = window.matchMedia("(prefers-reduced-motion: reduce)");
+let carouselCounter = 0;
+const StzhCarousel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.stzhSlideStart = createEvent(this, "stzhSlideStart", 7);
+    this.stzhSlidePassed = createEvent(this, "stzhSlidePassed", 7);
+    this.stzhSlideEnd = createEvent(this, "stzhSlideEnd", 7);
+    /** Current scroll position */
+    this.slideScrollLeft = 0;
+    /** Flag whether scrolling was done by user or not */
+    this.scrolledByAutoplay = false;
+    /** Timeout ID used to catch the end of scroll events */
+    this.scrollTimeoutId = null;
+    /** Last drag event position */
+    this.lastX = null;
+    /** Where the dragging started */
+    this.startX = null;
+    /** Where the dragging started scroll position */
+    this.startScrollLeft = null;
+    /** Timeout ID for a smooth drag release */
+    this.disableTimeoutId = null;
+    /** Whether user has just stopped dragging */
+    this.stoppedDragging = false;
+    this.onReducedMotionMediaChange = () => {
+      this.autoplayDisabledByMotionMedia = reducedMotionMedia.matches;
+    };
+    this.onMouseenter = () => {
+      this.autoplayDisabledByMouse = true;
+    };
+    this.onMouseleave = () => {
+      this.autoplayDisabledByMouse = false;
+    };
+    this.onFocusin = () => {
+      this.autoplayDisabledByFocus = true;
+    };
+    this.onFocusout = () => {
+      this.autoplayDisabledByFocus = false;
+    };
+    this.onPreviousClick = () => {
+      this.scrollToPreviousSnapPoint();
+    };
+    this.onNextClick = () => {
+      this.scrollToNextSnapPoint();
+    };
+    this.onSlideResize = () => {
+      if (this.scrollElement) {
+        this.itemSize = this.sizingMethod();
+      }
+    };
+    this.onMutation = () => {
+      if (!this.scrollElement) {
+        return;
+      }
+      this.slideElements = Array.from(this.scrollElement.children);
+      this.slideElements.forEach((slide, index) => {
+        slide.setAttribute("role", "group");
+        slide.setAttribute("aria-roledescription", "slide");
+        slide.setAttribute("aria-label", this.localization.slideLabel
+          .replace(/\{current\}/gi, (index + 1).toString())
+          .replace(/\{total\}/gi, this.slideElements.length.toString()));
+      });
+      this.previousElements = Array.from(this.element.querySelectorAll("[data-stzh-carousel-previous]"));
+      this.nextElements = Array.from(this.element.querySelectorAll("[data-stzh-carousel-next]"));
+      this.navigationTextElements = Array.from(this.element.querySelectorAll("[data-stzh-carousel-navigation-text]"));
+    };
+    this.onScroll = () => {
+      if (this.scrollTimeoutId === null) {
+        const direction = (this.scrollElement.scrollLeft > this.slideScrollLeft) ? 1 : -1;
+        this.scrolling = true;
+        if (!this.scrolledByAutoplay) {
+          this.autoplay = false;
+        }
+        this.stzhSlideStart.emit({
+          component: "stzh-carousel",
+          index: this.slide + direction
+        });
+      }
+      if (this.slide !== this.calculateSlide()) {
+        this.update();
+        this.stzhSlidePassed.emit({
+          component: "stzh-carousel",
+          index: this.slide
+        });
+      }
+      this.scrollTimeoutId && window.clearTimeout(this.scrollTimeoutId);
+      this.scrollTimeoutId = window.setTimeout(this.onScrollEnd, this.scrollTimeout);
+    };
+    this.onScrollEnd = () => {
+      this.scrollTimeoutId = null;
+      this.update();
+      this.scrolling = false;
+      this.scrolledByAutoplay = false;
+      if (this.stoppedDragging) {
+        this.stoppedDragging = false;
+        this.scrollElement.style.removeProperty("scroll-behavior");
+        this.scrollElement.style.removeProperty("scroll-snap-type");
+      }
+      if (this.tabThrough || this.variant === "cards") {
+        this.ariaLive = "";
+      }
+      else {
+        this.ariaLive = (this.currentSlides > 1 ? this.localization.slidesLabel : this.localization.slideLabel)
+          .replace(/\{(current|from)\}/gi, (this.slide + 1).toString())
+          .replace(/\{to\}/gi, (this.slide + this.currentSlides).toString())
+          .replace(/\{total\}/gi, this.slideElements.length.toString());
+      }
+      this.stzhSlideEnd.emit({
+        component: "stzh-carousel",
+        index: this.slide
+      });
+    };
+    this.onMediaChange = () => {
+      const ultra = media("ultra").matches;
+      const large = media("large").matches;
+      const medium = media("medium").matches;
+      const small = media("small").matches;
+      if (ultra && this.slidesUltra !== 0) {
+        this.currentSlides = this.slidesUltra;
+      }
+      else if (large && this.slidesLarge !== 0) {
+        this.currentSlides = this.slidesLarge;
+      }
+      else if (medium && this.slidesMedium !== 0) {
+        this.currentSlides = this.slidesMedium;
+      }
+      else if (small && this.slidesSmall !== 0) {
+        this.currentSlides = this.slidesSmall;
+      }
+      else {
+        this.currentSlides = this.slides;
+      }
+      // if (ultra && this.swipeSlidesUltra !== 0) {
+      //   this.currentSwipeSlides = this.swipeSlidesUltra;
+      // } else if (large && this.swipeSlidesLarge !== 0) {
+      //   this.currentSwipeSlides = this.swipeSlidesLarge;
+      // } else if (medium && this.swipeSlidesMedium !== 0) {
+      //   this.currentSwipeSlides = this.swipeSlidesMedium;
+      // } else if (small && this.swipeSlidesSmall !== 0) {
+      //   this.currentSwipeSlides = this.swipeSlidesSmall;
+      // } else {
+      //   this.currentSwipeSlides = this.swipeSlides;
+      // }
+      this.currentSwipeSlides = this.currentSlides;
+    };
+    /** Scroll the slider the appropriate amount of pixels and update the last event position */
+    this.mouseMove = (event) => {
+      const distance = this.lastX - event.clientX;
+      this.lastX = event.clientX;
+      this.scrollElement.scrollLeft += distance;
+    };
+    /** Clear disable timeout, set up variables and styles and attach the listener. */
+    this.startDragging = (event) => {
+      event.preventDefault();
+      this.disableTimeoutId && window.clearTimeout(this.disableTimeoutId);
+      this.disableTimeoutId = null;
+      this.startX = this.lastX = event.clientX;
+      this.startScrollLeft = this.scrollElement.scrollLeft;
+      this.scrollElement.style.setProperty("scroll-behavior", "auto");
+      this.scrollElement.style.setProperty("scroll-snap-type", "unset");
+      this.dragging = true;
+      this.autoplay = false;
+      window.addEventListener("mousemove", this.mouseMove);
+      window.addEventListener("mouseup", this.stopDragging, { capture: true });
+      window.addEventListener("click", this.checkClick, { capture: true });
+    };
+    /** User stopped dragging */
+    this.stopDragging = (event) => {
+      event.preventDefault();
+      const distance = Math.abs(this.startX - this.lastX);
+      const minimumReached = distance > this.distanceQuickSwipe;
+      const direction = (this.lastX > this.startX) ? 1 : -1;
+      this.dragging = false;
+      const endDraddingLeft = this.scrollElement.scrollLeft;
+      this.scrollElement.style.removeProperty("scroll-snap-type");
+      const finalLeft = this.scrollElement.scrollLeft;
+      this.scrollElement.style.setProperty("scroll-snap-type", "unset");
+      this.scrollElement.scrollTo({ left: endDraddingLeft, behavior: "auto" });
+      if (finalLeft !== this.startScrollLeft || !minimumReached) {
+        this.scrollElement.scrollTo({ left: finalLeft, behavior: reducedMotionMedia.matches ? "auto" : "smooth" });
+      }
+      else if (direction === 1) {
+        this.slideToPrevious();
+      }
+      else {
+        this.slideToNext();
+      }
+      window.removeEventListener("mousemove", this.mouseMove);
+      window.removeEventListener("mouseup", this.stopDragging, { capture: true });
+      this.stoppedDragging = true;
+    };
+    this.checkClick = (event) => {
+      const distance = Math.abs(this.startX - this.lastX);
+      const minimumReached = distance > this.distancePreventClick;
+      if (minimumReached) {
+        event.preventDefault();
+      }
+      this.lastX = null;
+      window.removeEventListener("click", this.checkClick, { capture: true });
+    };
+    this.autoplayInterval = () => {
+      this.scrolledByAutoplay = true;
+      if (this.hasReachedLastSlide()) {
+        this.slideTo(0);
+      }
+      else {
+        this.slideToNext();
+      }
+    };
+    this.localization = undefined;
+    this.variant = "default";
+    this.disabled = false;
+    this.slides = 1;
+    this.slidesSmall = 0;
+    this.slidesMedium = 0;
+    this.slidesLarge = 0;
+    this.slidesUltra = 0;
+    this.slide = 0;
+    this.autoplay = false;
+    this.tabThrough = false;
+    this.preventMouseDrag = false;
+    this.scrollTimeout = 100;
+    this.autoplayTimeout = 3000;
+    this.distanceQuickSwipe = 40;
+    this.distancePreventClick = 6;
+    this.autoplayRunning = false;
+    this.autoplayDisabledByMotionMedia = false;
+    this.autoplayDisabledByMouse = false;
+    this.autoplayDisabledByFocus = false;
+    this.dragging = false;
+    this.scrolling = false;
+    this.ariaLive = "";
+    this.currentSlides = 1;
+    this.currentSwipeSlides = 1;
+    this.slideElements = [];
+    this.previousElements = [];
+    this.nextElements = [];
+    this.navigationTextElements = [];
+  }
+  /** Scroll to a slide by index */
+  async slideTo(index, behaviour = "smooth") {
+    this.scrollToSlide(index, behaviour);
+  }
+  /** Scroll to previous snap point */
+  async slideToPrevious(behaviour = "smooth") {
+    this.scrollToPreviousSnapPoint(behaviour);
+  }
+  /** Scroll to next snap point */
+  async slideToNext(behaviour = "smooth") {
+    this.scrollToNextSnapPoint(behaviour);
+  }
+  disabledWatcher() {
+    if (this.disabled) {
+      this.scrollElement && this.scrollElement.removeEventListener("scroll", this.onScroll);
+      this.scrollTimeoutId && window.clearTimeout(this.scrollTimeoutId);
+      this.scrollTimeoutId = null;
+      this.element.removeEventListener("mouseenter", this.onMouseenter);
+      this.element.removeEventListener("mouseleave", this.onMouseleave);
+      this.element.removeEventListener("focusin", this.onFocusin);
+      this.element.removeEventListener("focusout", this.onFocusout);
+      this.onReducedMotionMediaChange();
+      reducedMotionMedia && reducedMotionMedia.removeEventListener("change", this.onReducedMotionMediaChange);
+    }
+    else {
+      this.scrollElement && this.scrollElement.addEventListener("scroll", this.onScroll, { passive: true });
+      this.element.addEventListener("mouseenter", this.onMouseenter);
+      this.element.addEventListener("mouseleave", this.onMouseleave);
+      this.element.addEventListener("focusin", this.onFocusin);
+      this.element.addEventListener("focusout", this.onFocusout);
+      reducedMotionMedia && reducedMotionMedia.addEventListener("change", this.onReducedMotionMediaChange);
+    }
+  }
+  preventMouseDragWatcher() {
+    if (this.preventMouseDrag || this.disabled) {
+      this.disableTimeoutId && window.clearTimeout(this.disableTimeoutId);
+      this.disableTimeoutId = null;
+      this.scrollElement && this.scrollElement.removeEventListener("mousedown", this.startDragging);
+      this.lastX = null;
+    }
+    else {
+      this.scrollElement && this.scrollElement.addEventListener("mousedown", this.startDragging);
+    }
+  }
+  autoplayRunningWatcher() {
+    if (!this.autoplay
+      || this.disabled
+      || this.autoplayDisabledByMotionMedia
+      || this.autoplayDisabledByMouse
+      || this.autoplayDisabledByFocus) {
+      this.autoplayIntervalId && window.clearInterval(this.autoplayIntervalId);
+      this.autoplayIntervalId = null;
+      this.autoplayRunning = false;
+    }
+    else {
+      this.autoplayIntervalId && window.clearInterval(this.autoplayIntervalId);
+      this.autoplayIntervalId = window.setInterval(this.autoplayInterval, this.autoplayTimeout);
+      this.autoplayRunning = true;
+    }
+  }
+  snapAlignWatcher() {
+    this.slideElements.forEach((slide, index) => {
+      const shouldSnap = (index - this.currentSwipeSlides) % this.currentSwipeSlides === 0;
+      if (shouldSnap) {
+        slide.style.removeProperty("scroll-snap-align");
+      }
+      else {
+        slide.style.setProperty("scroll-snap-align", "none");
+      }
+    });
+  }
+  inertWatcher() {
+    this.slideElements.forEach((slide, index) => {
+      const isActive = this.tabThrough
+        || this.variant === "cards"
+        || index >= this.slide && index < this.slide + this.currentSlides;
+      slide.inert = !isActive;
+      if (isActive) {
+        slide.removeAttribute("aria-hidden");
+      }
+      else {
+        slide.setAttribute("aria-hidden", isActive ? "false" : "true");
+      }
+    });
+  }
+  prevNextNavigationWatcher() {
+    const tabThrough = this.tabThrough || this.variant === "cards";
+    const setAriaAttributes = (element) => {
+      const isStzh = isStzhElement(element);
+      if (tabThrough) {
+        element.setAttribute("aria-hidden", "true");
+        element.setAttribute(isStzh ? "a11y-tabindex" : "tabindex", "-1");
+      }
+      else {
+        element.removeAttribute("aria-hidden");
+        element.removeAttribute(isStzh ? "a11y-tabindex" : "tabindex");
+      }
+    };
+    this.nextElements.forEach(setAriaAttributes);
+    this.previousElements.forEach(setAriaAttributes);
+  }
+  prevNextHiddenWatcher() {
+    const hideElements = this.slideElements.length <= this.currentSlides;
+    const setHiddenAttribute = (element) => {
+      if (hideElements) {
+        element.setAttribute("hidden", "");
+      }
+      else {
+        element.removeAttribute("hidden");
+      }
+    };
+    this.navigationTextElements.forEach(setHiddenAttribute);
+    this.nextElements.forEach(setHiddenAttribute);
+    this.previousElements.forEach(setHiddenAttribute);
+  }
+  nextPrevDisabledWatcher() {
+    if (!this.scrollElement) {
+      return;
+    }
+    const reachedFirstSlide = this.slide === 0;
+    const reachedLastSlide = this.hasReachedLastSlide();
+    this.nextElements.forEach((element) => {
+      const isStzh = isStzhElement(element);
+      element.setAttribute(isStzh ? "a11y-disabled" : "aria-disabled", reachedLastSlide ? "true" : "false");
+    });
+    this.previousElements.forEach((element) => {
+      const isStzh = isStzhElement(element);
+      element.setAttribute(isStzh ? "a11y-disabled" : "aria-disabled", reachedFirstSlide ? "true" : "false");
+    });
+  }
+  nextElementsWatcher() {
+    this.nextElements.forEach((nextElement) => {
+      const isStzh = isStzhElement(nextElement);
+      nextElement.addEventListener("click", this.onNextClick);
+      nextElement.setAttribute(isStzh ? "a11y-controls" : "aria-controls", `${this.carouselId}-scroll`);
+    });
+  }
+  previousElementsWatcher() {
+    this.previousElements.forEach((previousElement) => {
+      const isStzh = isStzhElement(previousElement);
+      previousElement.addEventListener("click", this.onPreviousClick);
+      previousElement.setAttribute(isStzh ? "a11y-controls" : "aria-controls", `${this.carouselId}-scroll`);
+    });
+  }
+  scrollToSlide(index, behaviour = "smooth") {
+    if (this.disabled) {
+      return;
+    }
+    this.scrollElement.scrollTo({
+      left: index * this.itemSize,
+      behavior: reducedMotionMedia.matches ? "auto" : behaviour
+    });
+  }
+  /** Width of a slide  */
+  sizingMethod() {
+    const css = window.getComputedStyle(this.scrollElement);
+    return this.scrollElement.firstElementChild.offsetWidth
+      + parseInt(css.getPropertyValue("column-gap"), 10);
+  }
+  /**
+   * Calculates the active slide.
+   * The scroll-snap-type property makes sure that the container snaps perfectly to integer multiples.
+   */
+  calculateSlide() {
+    // Math.round: Dispatch 'stzhSlidePassed' events around the center of each slide
+    // Math.ceil: Dispatch 'stzhSlidePassed' events as soon as the next one is visible
+    // Math.floor: Dispatch 'stzhSlidePassed' events only when the next one is fully visible
+    return Math.floor(this.scrollElement.scrollLeft / this.itemSize);
+  }
+  scrollToPreviousSnapPoint(behaviour = "smooth") {
+    if (this.disabled) {
+      return;
+    }
+    let previousIndex = this.slide;
+    let canSnap = false;
+    while (!canSnap && previousIndex > 0) {
+      previousIndex = previousIndex - 1;
+      canSnap = (previousIndex - this.currentSwipeSlides) % this.currentSwipeSlides === 0;
+    }
+    this.slideTo(previousIndex, behaviour);
+  }
+  scrollToNextSnapPoint(behaviour = "smooth") {
+    if (this.disabled) {
+      return;
+    }
+    this.slideTo(this.slide + this.currentSwipeSlides, behaviour);
+  }
+  update() {
+    this.slide = this.calculateSlide();
+    this.slideScrollLeft = this.slide * this.itemSize;
+    this.onMutation();
+  }
+  hasReachedLastSlide() {
+    const { scrollLeft, offsetWidth, scrollWidth } = this.scrollElement;
+    return Math.ceil(scrollLeft + offsetWidth) >= scrollWidth;
+  }
+  async componentWillLoad() {
+    this.carouselId = `stzh-carousel-${carouselCounter++}`;
+    this.onMediaChange();
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "carousel");
+    }
+  }
+  componentDidLoad() {
+    this.itemSize = this.sizingMethod();
+    this.update();
+    this.disabledWatcher();
+    this.preventMouseDragWatcher();
+    this.autoplayRunningWatcher();
+  }
+  connectedCallback() {
+    addMediaChangeListener(this.onMediaChange);
+    this.resizeObserver = new ResizeObserver(this.onSlideResize);
+    this.resizeObserver.observe(this.element);
+    this.mutationObserver = new MutationObserver(this.onMutation);
+    this.mutationObserver.observe(this.element, {
+      childList: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    this.scrollTimeoutId && window.clearTimeout(this.scrollTimeoutId);
+    this.scrollTimeoutId = null;
+    this.disabled = true;
+    removeMediaChangeListener(this.onMediaChange);
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+    }
+  }
+  render() {
+    const classes = {
+      "stzh-carousel": true,
+      "stzh-carousel--is-disabled": this.disabled,
+      "stzh-carousel--is-draggable": !this.preventMouseDrag,
+      "stzh-carousel--is-dragging": this.dragging,
+      "stzh-carousel--is-scrolling": this.scrolling,
+      "stzh-carousel--has-autoplay": this.autoplay,
+      "stzh-carousel--is-autoplay-running": this.autoplayRunning,
+      "stzh-carousel--is-autoplay-disabled-by-motion-media": this.autoplayDisabledByMotionMedia,
+      "stzh-carousel--is-autoplay-disabled-by-mouse": this.autoplayDisabledByMouse,
+      "stzh-carousel--is-autoplay-disabled-by-focus": this.autoplayDisabledByFocus
+    };
+    return (h(Host, { "aria-roledescription": "carousel", style: {
+        '--slides': this.currentSlides.toString()
+      } }, h("div", { class: classes }, h("slot", { name: "actions" }), h("div", { class: "stzh-carousel__vhidden", "aria-live": this.autoplayDisabledByFocus || this.autoplayDisabledByMouse ? "polite" : "off" }, this.ariaLive), h("div", { ref: (el) => (this.scrollElement = el), id: `${this.carouselId}-scroll`, class: "stzh-carousel__scroll" }, h("slot", null)))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "disabled": ["disabledWatcher", "preventMouseDragWatcher", "autoplayRunningWatcher"],
+    "preventMouseDrag": ["preventMouseDragWatcher"],
+    "autoplay": ["autoplayRunningWatcher"],
+    "autoplayDisabledByMotionMedia": ["autoplayRunningWatcher"],
+    "autoplayDisabledByMouse": ["autoplayRunningWatcher"],
+    "autoplayDisabledByFocus": ["autoplayRunningWatcher"],
+    "autoplayTimeout": ["autoplayRunningWatcher"],
+    "slideElements": ["snapAlignWatcher", "inertWatcher", "prevNextHiddenWatcher", "nextPrevDisabledWatcher"],
+    "currentSwipeSlides": ["snapAlignWatcher"],
+    "slide": ["inertWatcher", "nextPrevDisabledWatcher"],
+    "variant": ["inertWatcher", "prevNextNavigationWatcher"],
+    "currentSlides": ["inertWatcher", "prevNextHiddenWatcher", "nextPrevDisabledWatcher"],
+    "tabThrough": ["inertWatcher", "prevNextNavigationWatcher"],
+    "nextElements": ["prevNextNavigationWatcher", "prevNextHiddenWatcher", "nextPrevDisabledWatcher", "nextElementsWatcher"],
+    "previousElements": ["prevNextNavigationWatcher", "prevNextHiddenWatcher", "nextPrevDisabledWatcher", "previousElementsWatcher"],
+    "navigationTextElements": ["prevNextHiddenWatcher"]
+  }; }
+  static get style() { return stzhCarouselCss; }
+}, [6, "stzh-carousel", {
+    "localization": [16],
+    "variant": [513],
+    "disabled": [516],
+    "slides": [2],
+    "slidesSmall": [2, "slides-small"],
+    "slidesMedium": [2, "slides-medium"],
+    "slidesLarge": [2, "slides-large"],
+    "slidesUltra": [2, "slides-ultra"],
+    "slide": [2],
+    "autoplay": [1028],
+    "tabThrough": [4, "tab-through"],
+    "preventMouseDrag": [32],
+    "scrollTimeout": [32],
+    "autoplayTimeout": [32],
+    "distanceQuickSwipe": [32],
+    "distancePreventClick": [32],
+    "autoplayRunning": [32],
+    "autoplayDisabledByMotionMedia": [32],
+    "autoplayDisabledByMouse": [32],
+    "autoplayDisabledByFocus": [32],
+    "dragging": [32],
+    "scrolling": [32],
+    "ariaLive": [32],
+    "currentSlides": [32],
+    "currentSwipeSlides": [32],
+    "slideElements": [32],
+    "previousElements": [32],
+    "nextElements": [32],
+    "navigationTextElements": [32],
+    "slideTo": [64],
+    "slideToPrevious": [64],
+    "slideToNext": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-carousel"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-carousel":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhCarousel$1);
+      }
+      break;
+  } });
+}
+
+const StzhCarousel = StzhCarousel$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhCarousel, defineCustomElement };

package/dist/components/stzh-checkboxgroup.js

@@ -139,7 +139,9 @@ const StzhCheckboxgroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     });
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
   }
   render() {
     const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;

package/dist/components/stzh-chip-select2.js

@@ -1,13 +1,15 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { S as StzhInputDescription } from './stzh-input-description.js';
 import { f as fetchTranslations } from './translation-utils.js';
-import { d as defineCustomElement$5 } from './stzh-chip2.js';
-import { d as defineCustomElement$4 } from './stzh-clamp2.js';
-import { d as defineCustomElement$3 } from './stzh-dropdown2.js';
-import { d as defineCustomElement$2 } from './stzh-icon2.js';
+import { d as defineCustomElement$7 } from './stzh-badge2.js';
+import { d as defineCustomElement$6 } from './stzh-chip2.js';
+import { d as defineCustomElement$5 } from './stzh-clamp2.js';
+import { d as defineCustomElement$4 } from './stzh-dropdown2.js';
+import { d as defineCustomElement$3 } from './stzh-icon2.js';
+import { d as defineCustomElement$2 } from './stzh-link2.js';
 import { d as defineCustomElement$1 } from './stzh-popover2.js';
 
-const stzhChipSelectCss = ".sc-stzh-chip-select-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-chip-select-h{display:none}.sc-stzh-chip-select-h *.sc-stzh-chip-select,.sc-stzh-chip-select-h *.sc-stzh-chip-select::before,.sc-stzh-chip-select-h *.sc-stzh-chip-select::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-chip-select__marker-symbol.sc-stzh-chip-select{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-chip-select__marker-text.sc-stzh-chip-select{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-chip-select__description-wrapper.sc-stzh-chip-select{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-chip-select__error.sc-stzh-chip-select,.stzh-chip-select__description.sc-stzh-chip-select{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-chip-select__error.sc-stzh-chip-select{color:var(--stzh-color-error)}.stzh-chip-select__error-list.sc-stzh-chip-select{list-style:none;margin:0;padding:0}.stzh-chip-select__description.sc-stzh-chip-select{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-chip-select__description-long.sc-stzh-chip-select{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-chip-select__description-long-popover.sc-stzh-chip-select{--width:auto;--max-width:27.3125rem}.stzh-chip-select__description-long-popover[open].sc-stzh-chip-select:not([open=false]) .stzh-chip-select__description-long-button.sc-stzh-chip-select{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-chip-select__description-long-button.sc-stzh-chip-select{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-chip-select__description-long-button.sc-stzh-chip-select:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-chip-select.sc-stzh-chip-select stzh-icon.stzh-chip-select__description-long-icon.sc-stzh-chip-select{--size:var(--stzh-icon-size-xsmall)}.stzh-chip-select--has-error.sc-stzh-chip-select .stzh-chip-select__error.sc-stzh-chip-select,.stzh-chip-select--has-description.sc-stzh-chip-select .stzh-chip-select__description.sc-stzh-chip-select{margin-top:var(--stzh-space-xxsmall)}.stzh-chip-select__chips.sc-stzh-chip-select{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:calc(var(--stzh-space-small) / -2) calc(var(--stzh-space-xsmall) / -2);border-radius:var(--stzh-button-border-radius)}@media screen and (max-width: 1023px){.stzh-chip-select__chips.sc-stzh-chip-select{display:none}}.stzh-chip-select__chip.sc-stzh-chip-select{margin:calc(var(--stzh-space-small) / 2) calc(var(--stzh-space-xsmall) / 2)}.stzh-chip-select__chip.is-focused.sc-stzh-chip-select,.stzh-chip-select__chip.is-focused[active].sc-stzh-chip-select:not([active=false]){--border:0.0625rem solid var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-chip-select__chip.is-focused[active].sc-stzh-chip-select:not([active=false]){--background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}@media screen and (min-width: 1024px){.stzh-chip-select__dropdown.sc-stzh-chip-select{display:none}}@media screen and (max-width: 1023px){.stzh-chip-select__description-wrapper.sc-stzh-chip-select{display:none}}.stzh-chip-select--has-error.sc-stzh-chip-select .stzh-chip-select__error.sc-stzh-chip-select,.stzh-chip-select--has-description.sc-stzh-chip-select .stzh-chip-select__description.sc-stzh-chip-select{margin-top:var(--stzh-space-xsmall)}";
+const stzhChipSelectCss = ".sc-stzh-chip-select-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-chip-select-h{display:none}.sc-stzh-chip-select-h *.sc-stzh-chip-select,.sc-stzh-chip-select-h *.sc-stzh-chip-select::before,.sc-stzh-chip-select-h *.sc-stzh-chip-select::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-chip-select__marker-symbol.sc-stzh-chip-select{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-chip-select__marker-text.sc-stzh-chip-select{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-chip-select__description-wrapper.sc-stzh-chip-select{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-chip-select__error.sc-stzh-chip-select,.stzh-chip-select__description.sc-stzh-chip-select{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-chip-select__error.sc-stzh-chip-select{color:var(--stzh-color-error)}.stzh-chip-select__error-list.sc-stzh-chip-select{list-style:none;margin:0;padding:0}.stzh-chip-select__description.sc-stzh-chip-select{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-chip-select__description-long.sc-stzh-chip-select{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-chip-select__description-long-popover.sc-stzh-chip-select{--width:auto;--max-width:27.3125rem}.stzh-chip-select__description-long-popover[open].sc-stzh-chip-select:not([open=false]) .stzh-chip-select__description-long-button.sc-stzh-chip-select{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-chip-select__description-long-button.sc-stzh-chip-select{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-chip-select__description-long-button.sc-stzh-chip-select:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-chip-select.sc-stzh-chip-select stzh-icon.stzh-chip-select__description-long-icon.sc-stzh-chip-select{--size:var(--stzh-icon-size-xsmall)}.stzh-chip-select--has-error.sc-stzh-chip-select .stzh-chip-select__error.sc-stzh-chip-select,.stzh-chip-select--has-description.sc-stzh-chip-select .stzh-chip-select__description.sc-stzh-chip-select{margin-top:var(--stzh-space-xxsmall)}.stzh-chip-select__chips.sc-stzh-chip-select{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:calc(var(--stzh-space-small) / -2) calc(var(--stzh-space-xsmall) / -2);border-radius:var(--stzh-button-border-radius)}@media screen and (max-width: 1023px){.stzh-chip-select__chips.sc-stzh-chip-select{display:none}}.stzh-chip-select__chip.sc-stzh-chip-select{margin:calc(var(--stzh-space-small) / 2) calc(var(--stzh-space-xsmall) / 2)}.stzh-chip-select__chip.is-focused.sc-stzh-chip-select,.stzh-chip-select__chip.is-focused[active].sc-stzh-chip-select:not([active=false]){--border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-chip-select__chip.is-focused[active].sc-stzh-chip-select:not([active=false]){--background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}@media screen and (min-width: 1024px){.stzh-chip-select__dropdown.sc-stzh-chip-select{display:none}}@media screen and (max-width: 1023px){.stzh-chip-select__description-wrapper.sc-stzh-chip-select{display:none}}.stzh-chip-select--has-error.sc-stzh-chip-select .stzh-chip-select__error.sc-stzh-chip-select,.stzh-chip-select--has-description.sc-stzh-chip-select .stzh-chip-select__description.sc-stzh-chip-select{margin-top:var(--stzh-space-xsmall)}";
 
 let chipSelectCounter = 0;
 const StzhChipSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -161,29 +163,39 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["stzh-chip-select", "stzh-chip", "stzh-clamp", "stzh-dropdown", "stzh-icon", "stzh-popover"];
+  const components = ["stzh-chip-select", "stzh-badge", "stzh-chip", "stzh-clamp", "stzh-dropdown", "stzh-icon", "stzh-link", "stzh-popover"];
   components.forEach(tagName => { switch (tagName) {
     case "stzh-chip-select":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, StzhChipSelect);
       }
       break;
+    case "stzh-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
     case "stzh-chip":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "stzh-clamp":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "stzh-dropdown":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$4();
       }
       break;
     case "stzh-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "stzh-link":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }