@getflip/swirl-components 0.3.0 → 0.4.0

package/dist/components/flip-lightbox.js

@@ -0,0 +1,255 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { A as A11yDialog } from './a11y-dialog.esm.js';
+import { d as disableBodyScroll, e as enableBodyScroll } from './bodyScrollLock.esm.js';
+import { c as classnames } from './index2.js';
+import { q as querySelectorAllDeep } from './utils.js';
+import { d as defineCustomElement$5 } from './flip-icon-arrow-left2.js';
+import { d as defineCustomElement$4 } from './flip-icon-arrow-right2.js';
+import { d as defineCustomElement$3 } from './flip-icon-close2.js';
+import { d as defineCustomElement$2 } from './flip-icon-download2.js';
+
+const flipLightboxCss = ":host{display:block}:host *{box-sizing:border-box}.lightbox{position:fixed;z-index:var(--s-z-40);background-color:rgba(0, 0, 0, 1);inset:0}.lightbox[aria-hidden=\"true\"]{display:none}@media (min-width: 768px){.lightbox{background-color:rgba(0, 0, 0, 0.6)}}.lightbox:not(.lightbox--closing) .lightbox__body{-webkit-animation:0.15s lightbox-fade-in;animation:0.15s lightbox-fade-in}@media (prefers-reduced-motion){.lightbox:not(.lightbox--closing) .lightbox__body{-webkit-animation:none;animation:none}}.lightbox--closing{-webkit-animation:0.15s lightbox-fade-out;animation:0.15s lightbox-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.lightbox--closing{-webkit-animation:none;animation:none}}.lightbox__body{position:relative;width:100%;height:100%}.lightbox__header{position:absolute;z-index:1;top:0;right:0;left:0;display:flex;padding:var(--s-space-12) var(--s-space-16);justify-content:space-between;align-items:flex-start;pointer-events:none}.lightbox__controls{position:absolute;z-index:1;top:50%;right:0;left:0;display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:flex-start;pointer-events:none}@media (min-width: 768px){.lightbox__controls{display:flex}}.lightbox__close-button,.lightbox__download-button,.lightbox__previous-slide-button,.lightbox__next-slide-button{display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);cursor:pointer;transition:opacity 0.15s;pointer-events:auto}.lightbox__close-button:disabled,.lightbox__download-button:disabled,.lightbox__previous-slide-button:disabled,.lightbox__next-slide-button:disabled{pointer-events:none;opacity:0}.lightbox__content{overflow:hidden;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.lightbox__slides{display:flex;width:100%;height:100%}.lightbox__slides ::slotted(*){flex-basis:100%;flex-shrink:0;transition:transform 0.3s}@media (min-width: 768px){.lightbox__slides ::slotted(*){padding:4rem 5rem}}@media (prefers-reduced-motion){.lightbox__slides ::slotted(*){transition:none}}.lightbox__pagination{position:absolute;bottom:var(--s-space-32);left:50%;padding:var(--s-space-4) var(--s-space-12);border-radius:var(--s-border-radius-base);color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.6);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);transform:translateX(-50%);pointer-events:none}@media (min-width: 768px){.lightbox__pagination{display:none}}@-webkit-keyframes lightbox-fade-in{from{opacity:0}to{opacity:1}}@keyframes lightbox-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes lightbox-fade-out{from{opacity:1}to{opacity:0}}@keyframes lightbox-fade-out{from{opacity:1}to{opacity:0}}";
+
+const FlipLightbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.closeButtonLabel = "Close modal";
+    this.downloadButtonLabel = "Download active slide content";
+    this.nextSlideButtonLabel = "Next slide";
+    this.previousSlideButtonLabel = "Previous slide";
+    this.activeSlideIndex = 0;
+    this.closing = false;
+    this.dragging = false;
+    this.mediaPlayers = [];
+    this.onCloseButtonClick = () => {
+      this.close();
+    };
+    this.onDownloadButtonClick = () => {
+      var _a;
+      (_a = this.slides[this.activeSlideIndex]) === null || _a === void 0 ? void 0 : _a.download();
+    };
+    this.onKeyDown = (event) => {
+      if (event.code === "Escape") {
+        this.close();
+      }
+      else if (event.code === "ArrowLeft") {
+        this.onPreviousSlideClick();
+      }
+      else if (event.code === "ArrowRight") {
+        this.onNextSlideClick();
+      }
+    };
+    this.onNextSlideClick = () => {
+      this.activateSlide(Math.min(this.slides.length - 1, this.activeSlideIndex + 1));
+    };
+    this.onPreviousSlideClick = () => {
+      this.activateSlide(Math.max(0, this.activeSlideIndex - 1));
+    };
+    this.registerSlides = () => {
+      this.slides = Array.from(this.el.children);
+      this.setSlideAttributes();
+      this.updateMediaPlayers();
+    };
+    this.onPointerDown = (event) => {
+      event.preventDefault();
+      this.dragging = true;
+      this.dragStartPosition =
+        event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
+      this.slides.forEach((slide) => {
+        slide.style.transition = "none";
+      });
+    };
+    this.onPointerMove = (event) => {
+      if (this.dragging) {
+        event.preventDefault();
+        const deltaX = event instanceof MouseEvent
+          ? event.clientX - this.dragStartPosition
+          : event.touches[0].clientX - this.dragStartPosition;
+        this.slides.forEach((slide) => {
+          const pixelOffset = this.activeSlideIndex * slide.getBoundingClientRect().width;
+          this.dragDelta = deltaX;
+          slide.style.transform = `translate3d(${(-pixelOffset + this.dragDelta) / 16}rem, 0, 0)`;
+        });
+      }
+    };
+    this.onPointerUp = () => {
+      this.dragging = false;
+      this.dragStartPosition = undefined;
+      const dragRatio = this.dragDelta /
+        this.slides[this.activeSlideIndex].getBoundingClientRect().width;
+      this.dragDelta = 0;
+      const shouldMoveToPreviousSlide = dragRatio > 0.2;
+      const shouldMoveToNextSlide = dragRatio < -0.2;
+      this.slides.forEach((slide) => {
+        slide.style.transition = "";
+      });
+      if (shouldMoveToPreviousSlide) {
+        this.onPreviousSlideClick();
+      }
+      else if (shouldMoveToNextSlide) {
+        this.onNextSlideClick();
+      }
+      else {
+        this.resetSlidePositions();
+      }
+    };
+  }
+  componentWillLoad() {
+    this.registerSlides();
+  }
+  componentDidLoad() {
+    this.modal = new A11yDialog(this.modalEl);
+    this.activateSlide(0);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.modal) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.unlockBodyScroll();
+  }
+  /**
+   * Open the lightbox.
+   */
+  async open() {
+    this.modal.show();
+    this.lockBodyScroll();
+  }
+  /**
+   * Close the lightbox.
+   */
+  async close() {
+    if (this.closing) {
+      return;
+    }
+    this.closing = true;
+    this.unlockBodyScroll();
+    setTimeout(() => {
+      this.modal.hide();
+      this.closing = false;
+    }, 150);
+  }
+  /**
+   * Activate a slide.
+   * @param newActiveSlideIndex
+   */
+  async activateSlide(newActiveSlideIndex) {
+    this.dragging = false;
+    this.activeSlideIndex = newActiveSlideIndex;
+    this.slides.forEach((slide, index) => {
+      if (index === this.activeSlideIndex) {
+        slide.removeAttribute("aria-hidden");
+        slide.setAttribute("active", "true");
+      }
+      else if (index === this.activeSlideIndex - 1 ||
+        index === this.activeSlideIndex + 1) {
+        slide.setAttribute("aria-hidden", "true");
+        slide.setAttribute("active", "true");
+      }
+      else {
+        slide.setAttribute("aria-hidden", "true");
+      }
+      slide.style.transform = `translate3d(-${100 * this.activeSlideIndex}%, 0, 0)`;
+    });
+    // wait for slide animation before deactivating the slide
+    setTimeout(() => {
+      this.slides.forEach((slide, index) => {
+        if (index !== this.activeSlideIndex &&
+          index !== this.activeSlideIndex - 1 &&
+          index !== this.activeSlideIndex + 1) {
+          slide.setAttribute("active", "false");
+        }
+      });
+    }, 300);
+    this.stopAllMediaPlayers();
+    this.updateMediaPlayers();
+  }
+  setSlideAttributes() {
+    this.slides.forEach((slide) => {
+      slide.setAttribute("active", "false");
+      slide.setAttribute("aria-label", slide.file);
+      slide.setAttribute("aria-roledescription", "slide");
+      slide.setAttribute("role", "group");
+    });
+  }
+  resetSlidePositions() {
+    this.slides.forEach((slide) => {
+      slide.style.transform = `translate3d(-${100 * this.activeSlideIndex}%, 0, 0)`;
+    });
+  }
+  lockBodyScroll() {
+    disableBodyScroll(this.el);
+  }
+  unlockBodyScroll() {
+    enableBodyScroll(this.el);
+  }
+  updateMediaPlayers() {
+    const mediaPlayers = querySelectorAllDeep(this.el, "video");
+    this.mediaPlayers = mediaPlayers;
+  }
+  stopAllMediaPlayers() {
+    this.mediaPlayers.forEach((mediaPlayer) => mediaPlayer.pause());
+  }
+  render() {
+    const showPagination = this.slides.length > 1;
+    const className = classnames("lightbox", {
+      "lightbox--closing": this.closing,
+    });
+    return (h(Host, null, h("section", { "aria-hidden": "true", "aria-label": this.label, class: className, id: "lightbox", onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onKeyDown: this.onKeyDown, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (el) => (this.modalEl = el) }, h("div", { class: "lightbox__body", role: "document" }, h("header", { class: "lightbox__header" }, h("button", { "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, h("flip-icon-close", null)), h("button", { "aria-label": this.downloadButtonLabel, class: "lightbox__download-button", onClick: this.onDownloadButtonClick }, h("flip-icon-download", null))), h("div", { "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, h("div", { "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides" }, h("slot", { onSlotchange: this.registerSlides }))), h("div", { class: "lightbox__controls" }, h("button", { "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, h("flip-icon-arrow-left", null)), h("button", { "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, h("flip-icon-arrow-right", null))), showPagination && (h("span", { class: "lightbox__pagination" }, h("span", { "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))))));
+  }
+  get el() { return this; }
+  static get style() { return flipLightboxCss; }
+}, [1, "flip-lightbox", {
+    "closeButtonLabel": [1, "close-button-label"],
+    "downloadButtonLabel": [1, "download-button-label"],
+    "label": [1],
+    "nextSlideButtonLabel": [1, "next-slide-button-label"],
+    "previousSlideButtonLabel": [1, "previous-slide-button-label"],
+    "activeSlideIndex": [32],
+    "closing": [32],
+    "slides": [32],
+    "open": [64],
+    "close": [64],
+    "activateSlide": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-lightbox", "flip-icon-arrow-left", "flip-icon-arrow-right", "flip-icon-close", "flip-icon-download"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-lightbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipLightbox$1);
+      }
+      break;
+    case "flip-icon-arrow-left":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "flip-icon-arrow-right":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "flip-icon-close":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "flip-icon-download":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipLightbox = FlipLightbox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipLightbox, defineCustomElement };
+
+//# sourceMappingURL=flip-lightbox.js.map

package/dist/components/flip-lightbox.js.map

@@ -0,0 +1 @@
+{"file":"flip-lightbox.js","mappings":"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","names":["FlipLightbox"],"sources":["./src/components/flip-lightbox/flip-lightbox.css?tag=flip-lightbox&encapsulation=shadow","./src/components/flip-lightbox/flip-lightbox.tsx"],"sourcesContent":["@import \"../../styles/media-queries.css\";\n\n:host {\n  display: block;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.lightbox {\n  position: fixed;\n  z-index: var(--s-z-40);\n  background-color: rgba(0, 0, 0, 1);\n  inset: 0;\n\n  &[aria-hidden=\"true\"] {\n    display: none;\n  }\n\n  @media (--from-tablet) {\n    background-color: rgba(0, 0, 0, 0.6);\n  }\n}\n\n.lightbox:not(.lightbox--closing) {\n  & .lightbox__body {\n    animation: 0.15s lightbox-fade-in;\n\n    @media (prefers-reduced-motion) {\n      animation: none;\n    }\n  }\n}\n\n.lightbox--closing {\n  animation: 0.15s lightbox-fade-out;\n  animation-fill-mode: forwards;\n\n  @media (prefers-reduced-motion) {\n    animation: none;\n  }\n}\n\n.lightbox__body {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n.lightbox__header {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  left: 0;\n  display: flex;\n  padding: var(--s-space-12) var(--s-space-16);\n  justify-content: space-between;\n  align-items: flex-start;\n  pointer-events: none;\n}\n\n.lightbox__controls {\n  position: absolute;\n  z-index: 1;\n  top: 50%;\n  right: 0;\n  left: 0;\n  display: none;\n  padding-right: var(--s-space-16);\n  padding-left: var(--s-space-16);\n  justify-content: space-between;\n  align-items: flex-start;\n  pointer-events: none;\n\n  @media (--from-tablet) {\n    display: flex;\n  }\n}\n\n.lightbox__close-button,\n.lightbox__download-button,\n.lightbox__previous-slide-button,\n.lightbox__next-slide-button {\n  display: inline-flex;\n  width: 2.5rem;\n  height: 2.5rem;\n  justify-content: center;\n  align-items: center;\n  border: none;\n  border-radius: 50%;\n  color: var(--s-icon-on-image);\n  background-color: rgba(0, 0, 0, 0.6);\n  cursor: pointer;\n  transition: opacity 0.15s;\n  pointer-events: auto;\n\n  &:disabled {\n    pointer-events: none;\n    opacity: 0;\n  }\n}\n\n.lightbox__content {\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  user-select: none;\n}\n\n.lightbox__slides {\n  display: flex;\n  width: 100%;\n  height: 100%;\n\n  & ::slotted(*) {\n    flex-basis: 100%;\n    flex-shrink: 0;\n    transition: transform 0.3s;\n\n    @media (--from-tablet) {\n      padding: 4rem 5rem;\n    }\n\n    @media (prefers-reduced-motion) {\n      transition: none;\n    }\n  }\n}\n\n.lightbox__pagination {\n  position: absolute;\n  bottom: var(--s-space-32);\n  left: 50%;\n  padding: var(--s-space-4) var(--s-space-12);\n  border-radius: var(--s-border-radius-base);\n  color: var(--s-text-on-image);\n  background-color: rgba(0, 0, 0, 0.6);\n  font-weight: var(--s-font-weight-medium);\n  line-height: var(--s-line-height-base);\n  transform: translateX(-50%);\n  pointer-events: none;\n\n  @media (--from-tablet) {\n    display: none;\n  }\n}\n\n@keyframes lightbox-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes lightbox-fade-out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n","import {\n  Component,\n  Element,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport A11yDialog from \"a11y-dialog\";\nimport { disableBodyScroll, enableBodyScroll } from \"body-scroll-lock\";\nimport classnames from \"classnames\";\nimport { querySelectorAllDeep } from \"../../utils\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-lightbox.css\",\n  tag: \"flip-lightbox\",\n})\nexport class FlipLightbox {\n  @Element() el: HTMLElement;\n\n  @Prop() closeButtonLabel?: string = \"Close modal\";\n  @Prop() downloadButtonLabel?: string = \"Download active slide content\";\n  @Prop() label!: string;\n  @Prop() nextSlideButtonLabel?: string = \"Next slide\";\n  @Prop() previousSlideButtonLabel?: string = \"Previous slide\";\n\n  @State() activeSlideIndex: number = 0;\n  @State() closing = false;\n  @State() slides: HTMLFlipFileViewerElement[];\n\n  private dragging: boolean = false;\n  private dragStartPosition: number;\n  private dragDelta: number;\n  private modal: A11yDialog;\n  private modalEl: HTMLElement;\n  private mediaPlayers: (HTMLVideoElement | HTMLAudioElement)[] = [];\n\n  componentWillLoad() {\n    this.registerSlides();\n  }\n\n  componentDidLoad() {\n    this.modal = new A11yDialog(this.modalEl);\n    this.activateSlide(0);\n  }\n\n  disconnectedCallback() {\n    this.modal?.destroy();\n    this.unlockBodyScroll();\n  }\n\n  /**\n   * Open the lightbox.\n   */\n  @Method()\n  async open() {\n    this.modal.show();\n    this.lockBodyScroll();\n  }\n\n  /**\n   * Close the lightbox.\n   */\n  @Method()\n  async close() {\n    if (this.closing) {\n      return;\n    }\n\n    this.closing = true;\n    this.unlockBodyScroll();\n\n    setTimeout(() => {\n      this.modal.hide();\n      this.closing = false;\n    }, 150);\n  }\n\n  /**\n   * Activate a slide.\n   * @param newActiveSlideIndex\n   */\n  @Method()\n  async activateSlide(newActiveSlideIndex: number) {\n    this.dragging = false;\n    this.activeSlideIndex = newActiveSlideIndex;\n\n    this.slides.forEach((slide, index) => {\n      if (index === this.activeSlideIndex) {\n        slide.removeAttribute(\"aria-hidden\");\n        slide.setAttribute(\"active\", \"true\");\n      } else if (\n        index === this.activeSlideIndex - 1 ||\n        index === this.activeSlideIndex + 1\n      ) {\n        slide.setAttribute(\"aria-hidden\", \"true\");\n        slide.setAttribute(\"active\", \"true\");\n      } else {\n        slide.setAttribute(\"aria-hidden\", \"true\");\n      }\n\n      slide.style.transform = `translate3d(-${\n        100 * this.activeSlideIndex\n      }%, 0, 0)`;\n    });\n\n    // wait for slide animation before deactivating the slide\n    setTimeout(() => {\n      this.slides.forEach((slide, index) => {\n        if (\n          index !== this.activeSlideIndex &&\n          index !== this.activeSlideIndex - 1 &&\n          index !== this.activeSlideIndex + 1\n        ) {\n          slide.setAttribute(\"active\", \"false\");\n        }\n      });\n    }, 300);\n\n    this.stopAllMediaPlayers();\n    this.updateMediaPlayers();\n  }\n\n  private setSlideAttributes() {\n    this.slides.forEach((slide) => {\n      slide.setAttribute(\"active\", \"false\");\n      slide.setAttribute(\"aria-label\", slide.file);\n      slide.setAttribute(\"aria-roledescription\", \"slide\");\n      slide.setAttribute(\"role\", \"group\");\n    });\n  }\n\n  private resetSlidePositions() {\n    this.slides.forEach((slide) => {\n      slide.style.transform = `translate3d(-${\n        100 * this.activeSlideIndex\n      }%, 0, 0)`;\n    });\n  }\n\n  private lockBodyScroll() {\n    disableBodyScroll(this.el);\n  }\n\n  private unlockBodyScroll() {\n    enableBodyScroll(this.el);\n  }\n\n  private onCloseButtonClick = () => {\n    this.close();\n  };\n\n  private onDownloadButtonClick = () => {\n    this.slides[this.activeSlideIndex]?.download();\n  };\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"Escape\") {\n      this.close();\n    } else if (event.code === \"ArrowLeft\") {\n      this.onPreviousSlideClick();\n    } else if (event.code === \"ArrowRight\") {\n      this.onNextSlideClick();\n    }\n  };\n\n  private onNextSlideClick = () => {\n    this.activateSlide(\n      Math.min(this.slides.length - 1, this.activeSlideIndex + 1)\n    );\n  };\n\n  private onPreviousSlideClick = () => {\n    this.activateSlide(Math.max(0, this.activeSlideIndex - 1));\n  };\n\n  private registerSlides = () => {\n    this.slides = Array.from(this.el.children) as HTMLFlipFileViewerElement[];\n    this.setSlideAttributes();\n    this.updateMediaPlayers();\n  };\n\n  private updateMediaPlayers() {\n    const mediaPlayers = querySelectorAllDeep<\n      HTMLAudioElement | HTMLVideoElement\n    >(this.el, \"video\");\n\n    this.mediaPlayers = mediaPlayers;\n  }\n\n  private stopAllMediaPlayers() {\n    this.mediaPlayers.forEach((mediaPlayer) => mediaPlayer.pause());\n  }\n\n  private onPointerDown = (event: MouseEvent | TouchEvent) => {\n    event.preventDefault();\n\n    this.dragging = true;\n\n    this.dragStartPosition =\n      event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;\n\n    this.slides.forEach((slide) => {\n      slide.style.transition = \"none\";\n    });\n  };\n\n  private onPointerMove = (event: MouseEvent | TouchEvent) => {\n    if (this.dragging) {\n      event.preventDefault();\n\n      const deltaX =\n        event instanceof MouseEvent\n          ? event.clientX - this.dragStartPosition\n          : event.touches[0].clientX - this.dragStartPosition;\n\n      this.slides.forEach((slide) => {\n        const pixelOffset =\n          this.activeSlideIndex * slide.getBoundingClientRect().width;\n\n        this.dragDelta = deltaX;\n\n        slide.style.transform = `translate3d(${\n          (-pixelOffset + this.dragDelta) / 16\n        }rem, 0, 0)`;\n      });\n    }\n  };\n\n  private onPointerUp = () => {\n    this.dragging = false;\n    this.dragStartPosition = undefined;\n\n    const dragRatio =\n      this.dragDelta /\n      this.slides[this.activeSlideIndex].getBoundingClientRect().width;\n\n    this.dragDelta = 0;\n\n    const shouldMoveToPreviousSlide = dragRatio > 0.2;\n    const shouldMoveToNextSlide = dragRatio < -0.2;\n\n    this.slides.forEach((slide) => {\n      slide.style.transition = \"\";\n    });\n\n    if (shouldMoveToPreviousSlide) {\n      this.onPreviousSlideClick();\n    } else if (shouldMoveToNextSlide) {\n      this.onNextSlideClick();\n    } else {\n      this.resetSlidePositions();\n    }\n  };\n\n  render() {\n    const showPagination = this.slides.length > 1;\n\n    const className = classnames(\"lightbox\", {\n      \"lightbox--closing\": this.closing,\n    });\n\n    return (\n      <Host>\n        <section\n          aria-hidden=\"true\"\n          aria-label={this.label}\n          class={className}\n          id=\"lightbox\"\n          onMouseDown={this.onPointerDown}\n          onMouseMove={this.onPointerMove}\n          onMouseOut={this.onPointerUp}\n          onMouseUp={this.onPointerUp}\n          onKeyDown={this.onKeyDown}\n          onTouchEnd={this.onPointerUp}\n          onTouchMove={this.onPointerMove}\n          onTouchStart={this.onPointerDown}\n          ref={(el) => (this.modalEl = el)}\n        >\n          <div class=\"lightbox__body\" role=\"document\">\n            <header class=\"lightbox__header\">\n              <button\n                aria-label={this.closeButtonLabel}\n                class=\"lightbox__close-button\"\n                onClick={this.onCloseButtonClick}\n              >\n                <flip-icon-close></flip-icon-close>\n              </button>\n              <button\n                aria-label={this.downloadButtonLabel}\n                class=\"lightbox__download-button\"\n                onClick={this.onDownloadButtonClick}\n              >\n                <flip-icon-download></flip-icon-download>\n              </button>\n            </header>\n            <div\n              aria-roledescription=\"carousel\"\n              class=\"lightbox__content\"\n              role=\"group\"\n            >\n              <div\n                aria-atomic=\"false\"\n                aria-live=\"polite\"\n                class=\"lightbox__slides\"\n              >\n                <slot onSlotchange={this.registerSlides}></slot>\n              </div>\n            </div>\n            <div class=\"lightbox__controls\">\n              <button\n                aria-label={this.previousSlideButtonLabel}\n                class=\"lightbox__previous-slide-button\"\n                disabled={this.activeSlideIndex === 0}\n                onClick={this.onPreviousSlideClick}\n              >\n                <flip-icon-arrow-left></flip-icon-arrow-left>\n              </button>\n              <button\n                aria-label={this.nextSlideButtonLabel}\n                class=\"lightbox__next-slide-button\"\n                disabled={this.activeSlideIndex === this.slides.length - 1}\n                onClick={this.onNextSlideClick}\n              >\n                <flip-icon-arrow-right></flip-icon-arrow-right>\n              </button>\n            </div>\n            {showPagination && (\n              <span class=\"lightbox__pagination\">\n                <span aria-current=\"page\">{this.activeSlideIndex + 1}</span> /{\" \"}\n                {this.slides.length}\n              </span>\n            )}\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/flip-modal.js

@@ -7,7 +7,7 @@ import { d as defineCustomElement$4 } from './flip-button-group2.js';
 import { d as defineCustomElement$3 } from './flip-heading2.js';
 import { d as defineCustomElement$2 } from './flip-stack2.js';
 
-const flipModalCss = ":host{--flip-ghost-button-background-default:var(--s-surface-overlay-default);--flip-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--flip-ghost-button-background-pressed:var(--s-surface-overlay-pressed);display:block}:host *{box-sizing:border-box}.modal{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;inset:0}.modal[aria-hidden=\"true\"]{display:none}.modal:not(.modal--closing) .modal__backdrop{-webkit-animation:0.15s modal-backdrop-fade-in;animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal:not(.modal--closing) .modal__backdrop{-webkit-animation:none;animation:none}}.modal:not(.modal--closing) .modal__body{-webkit-animation:0.15s modal-scale-in;animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal:not(.modal--closing) .modal__body{-webkit-animation:none;animation:none}}.modal--closing{-webkit-animation:0.15s modal-fade-out;animation:0.15s modal-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--closing{-webkit-animation:none;animation:none}}@media (min-width: 768px){.modal--scrolled .modal__header{border-bottom:var(--s-border-width-default) solid var(--s-border-default)}}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal__body{position:relative;z-index:var(--s-z-40);display:flex;width:100vw;height:100vh;background-color:var(--s-surface-overlay-default);flex-direction:column}@media (min-width: 768px){.modal__body{width:90vw;max-width:33.75rem;height:auto;max-height:90vh;border-radius:var(--s-border-radius-xl);box-shadow:0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.14)}}.modal__close-button{position:absolute;top:var(--s-space-8);left:var(--s-space-8)}@media (min-width: 768px){.modal__close-button{top:var(--s-space-16);right:var(--s-space-16);left:auto}}.modal__header{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-8) + 2.5rem + var(--s-space-8));flex-shrink:0;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);gap:var(--s-space-16)}@media (min-width: 768px){.modal__header{padding-top:var(--s-space-24);padding-right:calc(var(--s-space-16) + 2.5rem + var(--s-space-8));padding-bottom:var(--s-space-16);padding-left:var(--s-space-24);border-bottom:none}}.modal__heading{overflow:hidden}.modal__heading::part(heading){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16);flex-grow:1;line-height:var(--s-line-height-base)}.modal__content ::slotted(*){margin:0}@media (min-width: 768px){.modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-32);padding-left:var(--s-space-24)}}.modal__controls{display:flex;padding-top:var(--s-space-16);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24);flex-shrink:0;justify-content:flex-end;border-top:var(--s-border-width-default) solid var(--s-border-default)}@-webkit-keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@-webkit-keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}";
+const flipModalCss = ":host{--flip-ghost-button-background-default:var(--s-surface-overlay-default);--flip-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--flip-ghost-button-background-pressed:var(--s-surface-overlay-pressed);display:block}:host *{box-sizing:border-box}.modal{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;inset:0}.modal[aria-hidden=\"true\"]{display:none}.modal:not(.modal--closing) .modal__backdrop{-webkit-animation:0.15s modal-backdrop-fade-in;animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal:not(.modal--closing) .modal__backdrop{-webkit-animation:none;animation:none}}.modal:not(.modal--closing) .modal__body{-webkit-animation:0.15s modal-scale-in;animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal:not(.modal--closing) .modal__body{-webkit-animation:none;animation:none}}.modal--closing{-webkit-animation:0.15s modal-fade-out;animation:0.15s modal-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--closing{-webkit-animation:none;animation:none}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal--scrolled .modal__header{border-bottom:var(--s-border-width-default) solid var(--s-border-default)}}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal__body{position:relative;z-index:var(--s-z-40);display:flex;width:100vw;height:100vh;background-color:var(--s-surface-overlay-default);flex-direction:column}@media (min-width: 768px){.modal__body{width:90vw;max-width:33.75rem;height:auto;max-height:90vh;border-radius:var(--s-border-radius-base);box-shadow:0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.14)}}.modal__close-button{position:absolute;top:var(--s-space-8);left:var(--s-space-8)}@media (min-width: 768px){.modal__close-button{top:var(--s-space-16);right:var(--s-space-16);left:auto}}.modal__header{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-8) + 2.5rem + var(--s-space-8));flex-shrink:0;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);gap:var(--s-space-16)}@media (min-width: 768px){.modal__header{height:4.125rem;padding-top:var(--s-space-24);padding-right:calc(var(--s-space-16) + 2.5rem + var(--s-space-8));padding-bottom:var(--s-space-16);padding-left:var(--s-space-24);border-bottom:none}}.modal__heading{overflow:hidden}.modal__heading::part(heading){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16);flex-grow:1;line-height:var(--s-line-height-base)}.modal__content ::slotted(*){margin:0}@media (min-width: 768px){.modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}.modal__controls{display:flex;padding-top:var(--s-space-16);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24);flex-shrink:0;justify-content:flex-end}@-webkit-keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@-webkit-keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}";
 
 const FlipModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -18,7 +18,9 @@ const FlipModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.secondaryAction = createEvent(this, "secondaryAction", 7);
     this.closeButtonLabel = "Close modal";
     this.closing = false;
+    this.scrollable = false;
     this.scrolled = false;
+    this.scrolledDown = false;
     this.onKeyDown = (event) => {
       if (event.code === "Escape") {
         this.close();
@@ -39,11 +41,19 @@ const FlipModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.close();
     };
     this.determineScrollStatus = () => {
-      var _a;
+      var _a, _b, _c, _d, _e, _f;
       const scrolled = ((_a = this.scrollContainer) === null || _a === void 0 ? void 0 : _a.scrollTop) > 0;
+      const scrolledDown = Math.ceil(((_b = this.scrollContainer) === null || _b === void 0 ? void 0 : _b.scrollTop) + ((_c = this.scrollContainer) === null || _c === void 0 ? void 0 : _c.offsetHeight)) >= ((_d = this.scrollContainer) === null || _d === void 0 ? void 0 : _d.scrollHeight);
+      const scrollable = ((_e = this.scrollContainer) === null || _e === void 0 ? void 0 : _e.scrollHeight) > ((_f = this.scrollContainer) === null || _f === void 0 ? void 0 : _f.offsetHeight);
       if (scrolled !== this.scrolled) {
         this.scrolled = scrolled;
       }
+      if (scrolledDown !== this.scrolledDown) {
+        this.scrolledDown = scrolledDown;
+      }
+      if (scrollable !== this.scrollable) {
+        this.scrollable = scrollable;
+      }
     };
   }
   componentDidLoad() {
@@ -89,7 +99,9 @@ const FlipModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   render() {
     const className = classnames("modal", {
       "modal--closing": this.closing,
+      "modal--scrollable": this.scrollable,
       "modal--scrolled": this.scrolled,
+      "modal--scrolled-down": this.scrolledDown,
     });
     return (h(Host, null, h("section", { "aria-hidden": "true", "aria-label": this.label, class: className, id: "modal", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, h("div", { class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { class: "modal__body", role: "document" }, h("flip-button", { class: "modal__close-button", hideLabel: true, icon: "<flip-icon-close></flip-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), h("header", { class: "modal__header" }, h("flip-heading", { as: "h2", class: "modal__heading", level: 3, text: this.label })), h("div", { class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", null)), h("footer", { class: "modal__controls" }, h("flip-button-group", { wrap: true }, this.secondaryActionLabel && (h("flip-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("flip-button", { intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))));
   }
@@ -100,7 +112,9 @@ const FlipModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "primaryActionLabel": [1, "primary-action-label"],
     "secondaryActionLabel": [1, "secondary-action-label"],
     "closing": [32],
+    "scrollable": [32],
     "scrolled": [32],
+    "scrolledDown": [32],
     "open": [64],
     "close": [64]
   }, [[9, "resize", "onWindowResize"]]]);

package/dist/components/flip-modal.js.map

@@ -1 +1 @@
-{"file":"flip-modal.js","mappings":"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","names":["FlipModal"],"sources":["./src/components/flip-modal/flip-modal.css?tag=flip-modal&encapsulation=shadow","./src/components/flip-modal/flip-modal.tsx"],"sourcesContent":["@import \"../../styles/media-queries.css\";\n\n:host {\n  --flip-ghost-button-background-default: var(--s-surface-overlay-default);\n  --flip-ghost-button-background-hovered: var(--s-surface-overlay-hovered);\n  --flip-ghost-button-background-pressed: var(--s-surface-overlay-pressed);\n\n  display: block;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.modal {\n  position: fixed;\n  z-index: var(--s-z-40);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  inset: 0;\n\n  &[aria-hidden=\"true\"] {\n    display: none;\n  }\n}\n\n.modal:not(.modal--closing) {\n  & .modal__backdrop {\n    animation: 0.15s modal-backdrop-fade-in;\n\n    @media (prefers-reduced-motion) {\n      animation: none;\n    }\n  }\n\n  & .modal__body {\n    animation: 0.15s modal-scale-in;\n\n    @media (prefers-reduced-motion) {\n      animation: none;\n    }\n  }\n}\n\n.modal--closing {\n  animation: 0.15s modal-fade-out;\n  animation-fill-mode: forwards;\n\n  @media (prefers-reduced-motion) {\n    animation: none;\n  }\n}\n\n.modal--scrolled {\n  @media (--from-tablet) {\n    & .modal__header {\n      border-bottom: var(--s-border-width-default) solid var(--s-border-default);\n    }\n  }\n}\n\n.modal__backdrop {\n  position: fixed;\n  background-color: rgba(0, 0, 0, 0.2);\n  inset: 0;\n}\n\n.modal__body {\n  position: relative;\n  z-index: var(--s-z-40);\n  display: flex;\n  width: 100vw;\n  height: 100vh;\n  background-color: var(--s-surface-overlay-default);\n  flex-direction: column;\n\n  @media (--from-tablet) {\n    width: 90vw;\n    max-width: 33.75rem;\n    height: auto;\n    max-height: 90vh;\n    border-radius: var(--s-border-radius-xl);\n    box-shadow: 0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.14);\n  }\n}\n\n.modal__close-button {\n  position: absolute;\n  top: var(--s-space-8);\n  left: var(--s-space-8);\n\n  @media (--from-tablet) {\n    top: var(--s-space-16);\n    right: var(--s-space-16);\n    left: auto;\n  }\n}\n\n.modal__header {\n  display: flex;\n  height: 3.5rem;\n  padding-top: var(--s-space-8);\n  padding-right: var(--s-space-16);\n  padding-bottom: var(--s-space-8);\n  padding-left: calc(var(--s-space-8) + 2.5rem + var(--s-space-8));\n  flex-shrink: 0;\n  align-items: center;\n  border-bottom: var(--s-border-width-default) solid var(--s-border-default);\n  gap: var(--s-space-16);\n\n  @media (--from-tablet) {\n    padding-top: var(--s-space-24);\n    padding-right: calc(var(--s-space-16) + 2.5rem + var(--s-space-8));\n    padding-bottom: var(--s-space-16);\n    padding-left: var(--s-space-24);\n    border-bottom: none;\n  }\n}\n\n.modal__heading {\n  overflow: hidden;\n\n  &::part(heading) {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n}\n\n.modal__content {\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-top: var(--s-space-24);\n  padding-right: var(--s-space-16);\n  padding-bottom: var(--s-space-24);\n  padding-left: var(--s-space-16);\n  flex-grow: 1;\n  line-height: var(--s-line-height-base);\n\n  & ::slotted(*) {\n    margin: 0;\n  }\n\n  @media (--from-tablet) {\n    padding-top: 0;\n    padding-right: var(--s-space-24);\n    padding-bottom: var(--s-space-32);\n    padding-left: var(--s-space-24);\n  }\n}\n\n.modal__controls {\n  display: flex;\n  padding-top: var(--s-space-16);\n  padding-right: var(--s-space-24);\n  padding-bottom: var(--s-space-16);\n  padding-left: var(--s-space-24);\n  flex-shrink: 0;\n  justify-content: flex-end;\n  border-top: var(--s-border-width-default) solid var(--s-border-default);\n}\n\n@keyframes modal-scale-in {\n  from {\n    transform: scale(0);\n  }\n  to {\n    transform: scale(1);\n  }\n}\n\n@keyframes modal-backdrop-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes modal-fade-out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport A11yDialog from \"a11y-dialog\";\nimport { disableBodyScroll, enableBodyScroll } from \"body-scroll-lock\";\nimport classnames from \"classnames\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-modal.css\",\n  tag: \"flip-modal\",\n})\nexport class FlipModal {\n  @Prop() closeButtonLabel?: string = \"Close modal\";\n  @Prop() label!: string;\n  @Prop() primaryActionLabel?: string;\n  @Prop() secondaryActionLabel?: string;\n\n  @Event() primaryAction: EventEmitter<MouseEvent>;\n  @Event() secondaryAction: EventEmitter<MouseEvent>;\n\n  @State() closing = false;\n  @State() scrolled = false;\n\n  private modal: A11yDialog;\n  private modalEl: HTMLElement;\n  private scrollContainer: HTMLElement;\n\n  componentDidLoad() {\n    this.modal = new A11yDialog(this.modalEl);\n    this.determineScrollStatus();\n  }\n\n  disconnectedCallback() {\n    this.modal?.destroy();\n    this.unlockBodyScroll();\n  }\n\n  @Listen(\"resize\", { target: \"window\" })\n  onWindowResize() {\n    this.determineScrollStatus();\n  }\n\n  /**\n   * Open the modal.\n   */\n  @Method()\n  async open() {\n    this.modal.show();\n    this.lockBodyScroll();\n    this.determineScrollStatus();\n  }\n\n  /**\n   * Close the modal.\n   */\n  @Method()\n  async close() {\n    if (this.closing) {\n      return;\n    }\n\n    this.closing = true;\n    this.unlockBodyScroll();\n\n    setTimeout(() => {\n      this.modal.hide();\n      this.closing = false;\n    }, 150);\n  }\n\n  onKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"Escape\") {\n      this.close();\n    }\n  };\n\n  private onBackdropClick = () => {\n    this.close();\n  };\n\n  private onCloseButtonClick = () => {\n    this.close();\n  };\n\n  private onPrimaryAction = (event: MouseEvent) => {\n    this.primaryAction.emit(event);\n    this.close();\n  };\n\n  private onSecondaryAction = (event: MouseEvent) => {\n    this.secondaryAction.emit(event);\n    this.close();\n  };\n\n  private determineScrollStatus = () => {\n    const scrolled = this.scrollContainer?.scrollTop > 0;\n\n    if (scrolled !== this.scrolled) {\n      this.scrolled = scrolled;\n    }\n  };\n\n  private lockBodyScroll() {\n    disableBodyScroll(this.scrollContainer);\n  }\n\n  private unlockBodyScroll() {\n    enableBodyScroll(this.scrollContainer);\n  }\n\n  render() {\n    const className = classnames(\"modal\", {\n      \"modal--closing\": this.closing,\n      \"modal--scrolled\": this.scrolled,\n    });\n\n    return (\n      <Host>\n        <section\n          aria-hidden=\"true\"\n          aria-label={this.label}\n          class={className}\n          id=\"modal\"\n          onKeyDown={this.onKeyDown}\n          ref={(el) => (this.modalEl = el)}\n        >\n          <div class=\"modal__backdrop\" onClick={this.onBackdropClick}></div>\n          <div class=\"modal__body\" role=\"document\">\n            <flip-button\n              class=\"modal__close-button\"\n              hideLabel\n              icon=\"<flip-icon-close></flip-icon-close>\"\n              label={this.closeButtonLabel}\n              onClick={this.onCloseButtonClick}\n            ></flip-button>\n            <header class=\"modal__header\">\n              <flip-heading\n                as=\"h2\"\n                class=\"modal__heading\"\n                level={3}\n                text={this.label}\n              ></flip-heading>\n            </header>\n            <div\n              class=\"modal__content\"\n              onScroll={this.determineScrollStatus}\n              ref={(el) => (this.scrollContainer = el)}\n            >\n              <slot></slot>\n            </div>\n            <footer class=\"modal__controls\">\n              <flip-button-group wrap>\n                {this.secondaryActionLabel && (\n                  <flip-button\n                    label={this.secondaryActionLabel}\n                    onClick={this.onSecondaryAction}\n                  ></flip-button>\n                )}\n                {this.primaryActionLabel && (\n                  <flip-button\n                    intent=\"primary\"\n                    label={this.primaryActionLabel}\n                    onClick={this.onPrimaryAction}\n                    variant=\"flat\"\n                  ></flip-button>\n                )}\n              </flip-button-group>\n            </footer>\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"flip-modal.js","mappings":"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","names":["FlipModal"],"sources":["./src/components/flip-modal/flip-modal.css?tag=flip-modal&encapsulation=shadow","./src/components/flip-modal/flip-modal.tsx"],"sourcesContent":["@import \"../../styles/media-queries.css\";\n\n:host {\n  --flip-ghost-button-background-default: var(--s-surface-overlay-default);\n  --flip-ghost-button-background-hovered: var(--s-surface-overlay-hovered);\n  --flip-ghost-button-background-pressed: var(--s-surface-overlay-pressed);\n\n  display: block;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.modal {\n  position: fixed;\n  z-index: var(--s-z-40);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  inset: 0;\n\n  &[aria-hidden=\"true\"] {\n    display: none;\n  }\n}\n\n.modal:not(.modal--closing) {\n  & .modal__backdrop {\n    animation: 0.15s modal-backdrop-fade-in;\n\n    @media (prefers-reduced-motion) {\n      animation: none;\n    }\n  }\n\n  & .modal__body {\n    animation: 0.15s modal-scale-in;\n\n    @media (prefers-reduced-motion) {\n      animation: none;\n    }\n  }\n}\n\n.modal--closing {\n  animation: 0.15s modal-fade-out;\n  animation-fill-mode: forwards;\n\n  @media (prefers-reduced-motion) {\n    animation: none;\n  }\n}\n\n.modal--scrollable {\n  & .modal__content {\n    @media (--from-tablet) {\n      padding-bottom: 0;\n    }\n  }\n\n  &:not(.modal--scrolled-down) {\n    & .modal__controls {\n      border-top: var(--s-border-width-default) solid var(--s-border-default);\n    }\n  }\n}\n\n.modal--scrolled {\n  @media (--from-tablet) {\n    & .modal__header {\n      border-bottom: var(--s-border-width-default) solid var(--s-border-default);\n    }\n  }\n}\n\n.modal__backdrop {\n  position: fixed;\n  background-color: rgba(0, 0, 0, 0.2);\n  inset: 0;\n}\n\n.modal__body {\n  position: relative;\n  z-index: var(--s-z-40);\n  display: flex;\n  width: 100vw;\n  height: 100vh;\n  background-color: var(--s-surface-overlay-default);\n  flex-direction: column;\n\n  @media (--from-tablet) {\n    width: 90vw;\n    max-width: 33.75rem;\n    height: auto;\n    max-height: 90vh;\n    border-radius: var(--s-border-radius-base);\n    box-shadow: 0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.14);\n  }\n}\n\n.modal__close-button {\n  position: absolute;\n  top: var(--s-space-8);\n  left: var(--s-space-8);\n\n  @media (--from-tablet) {\n    top: var(--s-space-16);\n    right: var(--s-space-16);\n    left: auto;\n  }\n}\n\n.modal__header {\n  display: flex;\n  height: 3.5rem;\n  padding-top: var(--s-space-8);\n  padding-right: var(--s-space-16);\n  padding-bottom: var(--s-space-8);\n  padding-left: calc(var(--s-space-8) + 2.5rem + var(--s-space-8));\n  flex-shrink: 0;\n  align-items: center;\n  border-bottom: var(--s-border-width-default) solid var(--s-border-default);\n  gap: var(--s-space-16);\n\n  @media (--from-tablet) {\n    height: 4.125rem;\n    padding-top: var(--s-space-24);\n    padding-right: calc(var(--s-space-16) + 2.5rem + var(--s-space-8));\n    padding-bottom: var(--s-space-16);\n    padding-left: var(--s-space-24);\n    border-bottom: none;\n  }\n}\n\n.modal__heading {\n  overflow: hidden;\n\n  &::part(heading) {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n}\n\n.modal__content {\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-top: var(--s-space-24);\n  padding-right: var(--s-space-16);\n  padding-bottom: var(--s-space-24);\n  padding-left: var(--s-space-16);\n  flex-grow: 1;\n  line-height: var(--s-line-height-base);\n\n  & ::slotted(*) {\n    margin: 0;\n  }\n\n  @media (--from-tablet) {\n    padding-top: 0;\n    padding-right: var(--s-space-24);\n    padding-bottom: var(--s-space-16);\n    padding-left: var(--s-space-24);\n  }\n}\n\n.modal__controls {\n  display: flex;\n  padding-top: var(--s-space-16);\n  padding-right: var(--s-space-24);\n  padding-bottom: var(--s-space-16);\n  padding-left: var(--s-space-24);\n  flex-shrink: 0;\n  justify-content: flex-end;\n}\n\n@keyframes modal-scale-in {\n  from {\n    transform: scale(0);\n  }\n  to {\n    transform: scale(1);\n  }\n}\n\n@keyframes modal-backdrop-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes modal-fade-out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport A11yDialog from \"a11y-dialog\";\nimport { disableBodyScroll, enableBodyScroll } from \"body-scroll-lock\";\nimport classnames from \"classnames\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-modal.css\",\n  tag: \"flip-modal\",\n})\nexport class FlipModal {\n  @Prop() closeButtonLabel?: string = \"Close modal\";\n  @Prop() label!: string;\n  @Prop() primaryActionLabel?: string;\n  @Prop() secondaryActionLabel?: string;\n\n  @Event() primaryAction: EventEmitter<MouseEvent>;\n  @Event() secondaryAction: EventEmitter<MouseEvent>;\n\n  @State() closing = false;\n  @State() scrollable = false;\n  @State() scrolled = false;\n  @State() scrolledDown = false;\n\n  private modal: A11yDialog;\n  private modalEl: HTMLElement;\n  private scrollContainer: HTMLElement;\n\n  componentDidLoad() {\n    this.modal = new A11yDialog(this.modalEl);\n    this.determineScrollStatus();\n  }\n\n  disconnectedCallback() {\n    this.modal?.destroy();\n    this.unlockBodyScroll();\n  }\n\n  @Listen(\"resize\", { target: \"window\" })\n  onWindowResize() {\n    this.determineScrollStatus();\n  }\n\n  /**\n   * Open the modal.\n   */\n  @Method()\n  async open() {\n    this.modal.show();\n    this.lockBodyScroll();\n    this.determineScrollStatus();\n  }\n\n  /**\n   * Close the modal.\n   */\n  @Method()\n  async close() {\n    if (this.closing) {\n      return;\n    }\n\n    this.closing = true;\n    this.unlockBodyScroll();\n\n    setTimeout(() => {\n      this.modal.hide();\n      this.closing = false;\n    }, 150);\n  }\n\n  onKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"Escape\") {\n      this.close();\n    }\n  };\n\n  private onBackdropClick = () => {\n    this.close();\n  };\n\n  private onCloseButtonClick = () => {\n    this.close();\n  };\n\n  private onPrimaryAction = (event: MouseEvent) => {\n    this.primaryAction.emit(event);\n    this.close();\n  };\n\n  private onSecondaryAction = (event: MouseEvent) => {\n    this.secondaryAction.emit(event);\n    this.close();\n  };\n\n  private determineScrollStatus = () => {\n    const scrolled = this.scrollContainer?.scrollTop > 0;\n\n    const scrolledDown =\n      Math.ceil(\n        this.scrollContainer?.scrollTop + this.scrollContainer?.offsetHeight\n      ) >= this.scrollContainer?.scrollHeight;\n\n    const scrollable =\n      this.scrollContainer?.scrollHeight > this.scrollContainer?.offsetHeight;\n\n    if (scrolled !== this.scrolled) {\n      this.scrolled = scrolled;\n    }\n\n    if (scrolledDown !== this.scrolledDown) {\n      this.scrolledDown = scrolledDown;\n    }\n\n    if (scrollable !== this.scrollable) {\n      this.scrollable = scrollable;\n    }\n  };\n\n  private lockBodyScroll() {\n    disableBodyScroll(this.scrollContainer);\n  }\n\n  private unlockBodyScroll() {\n    enableBodyScroll(this.scrollContainer);\n  }\n\n  render() {\n    const className = classnames(\"modal\", {\n      \"modal--closing\": this.closing,\n      \"modal--scrollable\": this.scrollable,\n      \"modal--scrolled\": this.scrolled,\n      \"modal--scrolled-down\": this.scrolledDown,\n    });\n\n    return (\n      <Host>\n        <section\n          aria-hidden=\"true\"\n          aria-label={this.label}\n          class={className}\n          id=\"modal\"\n          onKeyDown={this.onKeyDown}\n          ref={(el) => (this.modalEl = el)}\n        >\n          <div class=\"modal__backdrop\" onClick={this.onBackdropClick}></div>\n          <div class=\"modal__body\" role=\"document\">\n            <flip-button\n              class=\"modal__close-button\"\n              hideLabel\n              icon=\"<flip-icon-close></flip-icon-close>\"\n              label={this.closeButtonLabel}\n              onClick={this.onCloseButtonClick}\n            ></flip-button>\n            <header class=\"modal__header\">\n              <flip-heading\n                as=\"h2\"\n                class=\"modal__heading\"\n                level={3}\n                text={this.label}\n              ></flip-heading>\n            </header>\n            <div\n              class=\"modal__content\"\n              onScroll={this.determineScrollStatus}\n              ref={(el) => (this.scrollContainer = el)}\n            >\n              <slot></slot>\n            </div>\n            <footer class=\"modal__controls\">\n              <flip-button-group wrap>\n                {this.secondaryActionLabel && (\n                  <flip-button\n                    label={this.secondaryActionLabel}\n                    onClick={this.onSecondaryAction}\n                  ></flip-button>\n                )}\n                {this.primaryActionLabel && (\n                  <flip-button\n                    intent=\"primary\"\n                    label={this.primaryActionLabel}\n                    onClick={this.onPrimaryAction}\n                    variant=\"flat\"\n                  ></flip-button>\n                )}\n              </flip-button-group>\n            </footer>\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/flip-popover2.js

@@ -4,7 +4,7 @@ import { e as enableBodyScroll, d as disableBodyScroll } from './bodyScrollLock.
 import { c as classnames } from './index2.js';
 import { i as isMobileViewport, q as querySelectorAllDeep } from './utils.js';
 
-const flipPopoverCss = ":host{position:relative;z-index:var(--s-z-40);display:inline-flex}:host *{box-sizing:border-box}.popover--active:not(.popover--closing) .popover__backdrop{-webkit-animation:0.15s popover-fade-in;animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{-webkit-animation:none;animation:none}}.popover--active:not(.popover--closing) .popover__content{-webkit-animation:0.15s popover-slide-in;animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{transform-origin:top left;-webkit-animation:0.15s popover-fade-scale-in;animation:0.15s popover-fade-scale-in}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{-webkit-animation:none;animation:none}}.popover--closing .popover__backdrop{-webkit-animation:0.15s popover-fade-out;animation:0.15s popover-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{-webkit-animation:none;animation:none}}.popover--closing .popover__content{-webkit-animation:0.15s popover-slide-out;animation:0.15s popover-slide-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (min-width: 768px){.popover--closing .popover__content{-webkit-animation:0.15s popover-fade-out;animation:0.15s popover-fade-out}}@media (prefers-reduced-motion){.popover--closing .popover__content{-webkit-animation:none;animation:none}}.popover--inactive .popover__content{display:none}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);-webkit-animation:0.15s popover-backdrop-fade-in;animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{-webkit-animation:none;animation:none}}@media (min-width: 768px){.popover__backdrop{display:none}}.popover__content{position:fixed;z-index:2;right:0;bottom:0;left:0;overflow:hidden;border-top-left-radius:var(--s-border-radius-xl);border-top-right-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.popover__content{right:unset;bottom:unset;left:unset;max-width:22.5rem;border-radius:var(--s-border-radius-xl);-webkit-animation:none;animation:none;box-shadow:0.125rem 0.25rem 2.5rem rgba(0, 0, 0, 0.14)}}.popover__scroll-container{overflow-x:hidden;overflow-y:auto;width:100%;max-height:90vh;padding-top:var(--s-space-24);padding-bottom:var(--s-space-24);overscroll-behavior:contain}@media (min-width: 768px){.popover__scroll-container{max-height:22rem;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8)}}.popover__handle{position:absolute;top:var(--s-space-8);left:50%;width:2.5rem;height:0.375rem;border-radius:0.1875rem;background-color:var(--s-border-default);transform:translatex(-50%)}@media (min-width: 768px){.popover__handle{display:none}}@-webkit-keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@-webkit-keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@-webkit-keyframes popover-fade-scale-in{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}";
+const flipPopoverCss = ":host{position:relative;z-index:var(--s-z-40);display:inline-flex}:host *{box-sizing:border-box}.popover--active:not(.popover--closing) .popover__backdrop{-webkit-animation:0.15s popover-fade-in;animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{-webkit-animation:none;animation:none}}.popover--active:not(.popover--closing) .popover__content{-webkit-animation:0.15s popover-slide-in;animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{transform-origin:top left;-webkit-animation:0.15s popover-fade-scale-in;animation:0.15s popover-fade-scale-in}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{-webkit-animation:none;animation:none}}.popover--closing .popover__backdrop{-webkit-animation:0.15s popover-fade-out;animation:0.15s popover-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{-webkit-animation:none;animation:none}}.popover--closing .popover__content{-webkit-animation:0.15s popover-slide-out;animation:0.15s popover-slide-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (min-width: 768px){.popover--closing .popover__content{-webkit-animation:0.15s popover-fade-out;animation:0.15s popover-fade-out}}@media (prefers-reduced-motion){.popover--closing .popover__content{-webkit-animation:none;animation:none}}.popover--inactive .popover__content{display:none}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);-webkit-animation:0.15s popover-backdrop-fade-in;animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{-webkit-animation:none;animation:none}}@media (min-width: 768px){.popover__backdrop{display:none}}.popover__content{position:fixed;z-index:2;right:0;bottom:0;left:0;overflow:hidden;border-top-left-radius:var(--s-border-radius-xl);border-top-right-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.popover__content{right:unset;bottom:unset;left:unset;max-width:22.5rem;border-radius:var(--s-border-radius-sm);-webkit-animation:none;animation:none;box-shadow:0.125rem 0.25rem 2.5rem rgba(0, 0, 0, 0.14)}}.popover__scroll-container{overflow-x:hidden;overflow-y:auto;width:100%;max-height:90vh;padding-top:var(--s-space-24);padding-bottom:var(--s-space-24);overscroll-behavior:contain}@media (min-width: 768px){.popover__scroll-container{max-height:22rem;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8)}}.popover__handle{position:absolute;top:var(--s-space-8);left:50%;width:2.5rem;height:0.375rem;border-radius:0.1875rem;background-color:var(--s-border-default);transform:translatex(-50%)}@media (min-width: 768px){.popover__handle{display:none}}@-webkit-keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@-webkit-keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@-webkit-keyframes popover-fade-scale-in{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}";
 
 const FlipPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -53,6 +53,9 @@ const FlipPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         strategy: "fixed",
       });
     };
+    this.onCloseButtonClick = () => {
+      this.close();
+    };
   }
   componentDidLoad() {
     this.connectTrigger();
@@ -87,7 +90,7 @@ const FlipPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.updateTriggerAttributes();
     }, 150);
     this.unlockBodyScroll();
-    (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+    (_a = this.getNativeTriggerElement()) === null || _a === void 0 ? void 0 : _a.focus();
   }
   /**
    * Open the popover.
@@ -114,23 +117,28 @@ const FlipPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     });
   }
   connectTrigger() {
-    var _a;
-    const triggerComponent = querySelectorAllDeep(document.body, `#${this.trigger}`)[0];
-    this.triggerEl = ((triggerComponent === null || triggerComponent === void 0 ? void 0 : triggerComponent.children[0]) ||
-      ((_a = triggerComponent === null || triggerComponent === void 0 ? void 0 : triggerComponent.shadowRoot) === null || _a === void 0 ? void 0 : _a.children[0]) ||
-      triggerComponent);
+    this.triggerEl = querySelectorAllDeep(document.body, `#${this.trigger}`)[0];
     if (!Boolean(this.triggerEl)) {
       return;
     }
     this.triggerEl.addEventListener("click", this.toggle);
   }
+  getNativeTriggerElement() {
+    var _a, _b, _c;
+    return this.triggerEl.tagName.startsWith("FLIP-")
+      ? (((_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.children[0]) ||
+        ((_c = (_b = this.triggerEl) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.children[0]) ||
+        this.triggerEl)
+      : this.triggerEl;
+  }
   updateTriggerAttributes() {
     if (!Boolean(this.triggerEl)) {
       return;
     }
-    this.triggerEl.setAttribute("aria-controls", this.popoverId);
-    this.triggerEl.setAttribute("aria-expanded", String(this.active));
-    this.triggerEl.setAttribute("aria-haspopup", "dialog");
+    const nativeTriggerEl = this.getNativeTriggerElement();
+    nativeTriggerEl.setAttribute("aria-controls", this.popoverId);
+    nativeTriggerEl.setAttribute("aria-expanded", String(this.active));
+    nativeTriggerEl.setAttribute("aria-haspopup", "dialog");
   }
   updateChildMenuItems() {
     this.childMenuItems = querySelectorAllDeep(this.el, '[role="menuitem"]');
@@ -155,7 +163,7 @@ const FlipPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return (h(Host, { id: this.popoverId, onFocusout: this.onFocusOut }, h("div", { class: className, onKeyDown: this.onKeydown }, h("div", { "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", role: "dialog", tabindex: "-1", ref: (el) => (this.contentContainer = el), style: {
         top: Boolean(this.position) ? `${(_a = this.position) === null || _a === void 0 ? void 0 : _a.y}px` : "",
         left: Boolean(this.position) ? `${(_b = this.position) === null || _b === void 0 ? void 0 : _b.x}px` : "",
-      } }, h("span", { class: "popover__handle" }), h("div", { class: "popover__scroll-container", ref: (el) => (this.scrollContainer = el) }, h("slot", null))), this.active && (h("div", { class: "popover__backdrop", onClick: this.close })))));
+      } }, h("span", { class: "popover__handle" }), h("div", { class: "popover__scroll-container", ref: (el) => (this.scrollContainer = el) }, h("slot", null))), this.active && (h("div", { class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
   }
   get el() { return this; }
   static get style() { return flipPopoverCss; }

package/dist/components/flip-popover2.js.map

@@ -1 +1 @@
-{"file":"flip-popover2.js","mappings":"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","names":[],"sources":["./src/components/flip-popover/flip-popover.css?tag=flip-popover&encapsulation=shadow","./src/components/flip-popover/flip-popover.tsx"],"sourcesContent":["@import \"../../styles/media-queries.css\";\n\n:host {\n  position: relative;\n  z-index: var(--s-z-40);\n  display: inline-flex;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.popover--active:not(.popover--closing) {\n  & .popover__backdrop {\n    animation: 0.15s popover-fade-in;\n\n    @media (prefers-reduced-motion) {\n      animation: none;\n    }\n  }\n\n  & .popover__content {\n    animation: 0.15s popover-slide-in;\n\n    @media (--from-tablet) {\n      transform-origin: top left;\n      animation: 0.15s popover-fade-scale-in;\n    }\n\n    @media (prefers-reduced-motion) {\n      animation: none;\n    }\n  }\n}\n\n.popover--closing {\n  & .popover__backdrop {\n    animation: 0.15s popover-fade-out;\n    animation-fill-mode: forwards;\n\n    @media (prefers-reduced-motion) {\n      animation: none;\n    }\n  }\n\n  & .popover__content {\n    animation: 0.15s popover-slide-out;\n    animation-fill-mode: forwards;\n\n    @media (--from-tablet) {\n      animation: 0.15s popover-fade-out;\n    }\n\n    @media (prefers-reduced-motion) {\n      animation: none;\n    }\n  }\n}\n\n.popover--inactive {\n  & .popover__content {\n    display: none;\n  }\n}\n\n.popover__backdrop {\n  position: fixed;\n  z-index: 0;\n  background-color: rgba(0, 0, 0, 0.2);\n  animation: 0.15s popover-backdrop-fade-in;\n  inset: 0;\n\n  @media (prefers-reduced-motion) {\n    animation: none;\n  }\n\n  @media (--from-tablet) {\n    display: none;\n  }\n}\n\n.popover__content {\n  position: fixed;\n  z-index: 2;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  border-top-left-radius: var(--s-border-radius-xl);\n  border-top-right-radius: var(--s-border-radius-xl);\n  background-color: var(--s-surface-overlay-default);\n\n  @media (--from-tablet) {\n    right: unset;\n    bottom: unset;\n    left: unset;\n    max-width: 22.5rem;\n    border-radius: var(--s-border-radius-xl);\n    animation: none;\n    box-shadow: 0.125rem 0.25rem 2.5rem rgba(0, 0, 0, 0.14);\n  }\n}\n\n.popover__scroll-container {\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: 100%;\n  max-height: 90vh;\n  padding-top: var(--s-space-24);\n  padding-bottom: var(--s-space-24);\n  overscroll-behavior: contain;\n\n  @media (--from-tablet) {\n    max-height: 22rem;\n    padding-top: var(--s-space-8);\n    padding-bottom: var(--s-space-8);\n  }\n}\n\n.popover__handle {\n  position: absolute;\n  top: var(--s-space-8);\n  left: 50%;\n  width: 2.5rem;\n  height: 0.375rem;\n  border-radius: 0.1875rem;\n  background-color: var(--s-border-default);\n  transform: translatex(-50%);\n\n  @media (--from-tablet) {\n    display: none;\n  }\n}\n\n@keyframes popover-slide-in {\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes popover-slide-out {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(100%);\n  }\n}\n\n@keyframes popover-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes popover-fade-out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes popover-fade-scale-in {\n  from {\n    transform: scale(0);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n","import {\n  autoUpdate,\n  computePosition,\n  ComputePositionReturn,\n  flip,\n  Placement,\n  shift,\n} from \"@floating-ui/dom\";\nimport {\n  Component,\n  Element,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport { disableBodyScroll, enableBodyScroll } from \"body-scroll-lock\";\nimport classnames from \"classnames\";\nimport { isMobileViewport, querySelectorAllDeep } from \"../../utils\";\n\n/**\n * @slot slot - The popover content.\n */\n@Component({\n  shadow: true,\n  styleUrl: \"flip-popover.css\",\n  tag: \"flip-popover\",\n})\nexport class FlipPopover {\n  @Element() el: HTMLElement;\n\n  @Prop() label!: string;\n  @Prop() placement?: Placement = \"bottom-start\";\n  @Prop() popoverId!: string;\n  @Prop() trigger!: string;\n\n  @State() active = false;\n  @State() closing = false;\n  @State() position: ComputePositionReturn;\n\n  private childMenuItems: HTMLElement[];\n  private disableAutoUpdate: any;\n  private contentContainer: HTMLDivElement;\n  private scrollContainer: HTMLDivElement;\n  private triggerEl: HTMLElement;\n\n  componentDidLoad() {\n    this.connectTrigger();\n    this.updateChildMenuItems();\n    this.updateTriggerAttributes();\n  }\n\n  disconnectedCallback() {\n    enableBodyScroll(this.scrollContainer);\n  }\n\n  @Listen(\"click\", { target: \"window\" })\n  onWindowClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (!this.el.contains(target)) {\n      this.close();\n    }\n  }\n\n  onFocusOut = (event: FocusEvent) => {\n    if (!this.active) {\n      return;\n    }\n\n    const target =\n      (event.relatedTarget as HTMLElement) || (event.target as HTMLElement);\n\n    const popoverLostFocus = !this.el.contains(target);\n\n    if (popoverLostFocus) {\n      this.close();\n    }\n  };\n\n  /**\n   * Close the popover.\n   * @returns\n   */\n  @Method()\n  public async close() {\n    if (this.closing) {\n      return;\n    }\n\n    if (this.disableAutoUpdate) {\n      this.disableAutoUpdate();\n    }\n\n    this.closing = true;\n\n    setTimeout(() => {\n      this.active = false;\n      this.closing = false;\n      this.updateTriggerAttributes();\n    }, 150);\n\n    this.unlockBodyScroll();\n\n    this.triggerEl?.focus();\n  }\n\n  /**\n   * Open the popover.\n   * @returns\n   */\n  @Method()\n  public async open() {\n    this.active = true;\n\n    this.updateChildMenuItems();\n    this.updateTriggerAttributes();\n\n    requestAnimationFrame(async () => {\n      await this.reposition();\n\n      if (this.childMenuItems.length > 0) {\n        (this.childMenuItems[0] as HTMLElement).focus();\n      } else {\n        this.contentContainer.focus();\n      }\n\n      if (this.disableAutoUpdate) {\n        this.disableAutoUpdate();\n      }\n\n      this.disableAutoUpdate = autoUpdate(\n        this.triggerEl,\n        this.contentContainer,\n        this.reposition\n      );\n\n      this.scrollContainer.scrollTop = 0;\n\n      this.lockBodyScroll();\n    });\n  }\n\n  toggle = (event: Event) => {\n    event.stopPropagation();\n\n    if (this.active) {\n      this.close();\n    } else {\n      this.open();\n    }\n  };\n\n  private connectTrigger() {\n    const triggerComponent = querySelectorAllDeep(\n      document.body,\n      `#${this.trigger}`\n    )[0];\n\n    this.triggerEl = (triggerComponent?.children[0] ||\n      triggerComponent?.shadowRoot?.children[0] ||\n      triggerComponent) as HTMLElement;\n\n    if (!Boolean(this.triggerEl)) {\n      return;\n    }\n\n    this.triggerEl.addEventListener(\"click\", this.toggle);\n  }\n\n  private onKeydown = (event: KeyboardEvent) => {\n    if (event.code === \"Escape\" && this.active) {\n      this.close();\n    }\n  };\n\n  private updateTriggerAttributes() {\n    if (!Boolean(this.triggerEl)) {\n      return;\n    }\n\n    this.triggerEl.setAttribute(\"aria-controls\", this.popoverId);\n    this.triggerEl.setAttribute(\"aria-expanded\", String(this.active));\n    this.triggerEl.setAttribute(\"aria-haspopup\", \"dialog\");\n  }\n\n  private updateChildMenuItems() {\n    this.childMenuItems = querySelectorAllDeep(this.el, '[role=\"menuitem\"]');\n  }\n\n  private reposition = async () => {\n    const mobile = isMobileViewport();\n\n    if (!Boolean(this.triggerEl) || !Boolean(this.contentContainer)) {\n      return;\n    }\n\n    if (mobile) {\n      this.position = undefined;\n      return;\n    }\n\n    this.position = await computePosition(\n      this.triggerEl,\n      this.contentContainer,\n      {\n        middleware: [shift(), flip()],\n        placement: this.placement,\n        strategy: \"fixed\",\n      }\n    );\n  };\n\n  private lockBodyScroll() {\n    const mobile = isMobileViewport();\n\n    if (!mobile) {\n      return;\n    }\n\n    disableBodyScroll(this.scrollContainer);\n  }\n\n  private unlockBodyScroll() {\n    enableBodyScroll(this.scrollContainer);\n  }\n\n  render() {\n    const className = classnames(\"popover\", {\n      \"popover--closing\": this.closing,\n      \"popover--active\": this.active,\n      \"popover--inactive\": !this.active,\n    });\n\n    return (\n      <Host id={this.popoverId} onFocusout={this.onFocusOut}>\n        <div class={className} onKeyDown={this.onKeydown}>\n          <div\n            aria-hidden={!this.active ? \"true\" : \"false\"}\n            aria-label={this.label}\n            class=\"popover__content\"\n            role=\"dialog\"\n            tabindex=\"-1\"\n            ref={(el) => (this.contentContainer = el)}\n            style={{\n              top: Boolean(this.position) ? `${this.position?.y}px` : \"\",\n              left: Boolean(this.position) ? `${this.position?.x}px` : \"\",\n            }}\n          >\n            <span class=\"popover__handle\"></span>\n            <div\n              class=\"popover__scroll-container\"\n              ref={(el) => (this.scrollContainer = el)}\n            >\n              <slot></slot>\n            </div>\n          </div>\n          {this.active && (\n            <div class=\"popover__backdrop\" onClick={this.close}></div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"flip-popover2.js","mappings":"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","names":[],"sources":["./src/components/flip-popover/flip-popover.css?tag=flip-popover&encapsulation=shadow","./src/components/flip-popover/flip-popover.tsx"],"sourcesContent":["@import \"../../styles/media-queries.css\";\n\n:host {\n  position: relative;\n  z-index: var(--s-z-40);\n  display: inline-flex;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.popover--active:not(.popover--closing) {\n  & .popover__backdrop {\n    animation: 0.15s popover-fade-in;\n\n    @media (prefers-reduced-motion) {\n      animation: none;\n    }\n  }\n\n  & .popover__content {\n    animation: 0.15s popover-slide-in;\n\n    @media (--from-tablet) {\n      transform-origin: top left;\n      animation: 0.15s popover-fade-scale-in;\n    }\n\n    @media (prefers-reduced-motion) {\n      animation: none;\n    }\n  }\n}\n\n.popover--closing {\n  & .popover__backdrop {\n    animation: 0.15s popover-fade-out;\n    animation-fill-mode: forwards;\n\n    @media (prefers-reduced-motion) {\n      animation: none;\n    }\n  }\n\n  & .popover__content {\n    animation: 0.15s popover-slide-out;\n    animation-fill-mode: forwards;\n\n    @media (--from-tablet) {\n      animation: 0.15s popover-fade-out;\n    }\n\n    @media (prefers-reduced-motion) {\n      animation: none;\n    }\n  }\n}\n\n.popover--inactive {\n  & .popover__content {\n    display: none;\n  }\n}\n\n.popover__backdrop {\n  position: fixed;\n  z-index: 0;\n  background-color: rgba(0, 0, 0, 0.2);\n  animation: 0.15s popover-backdrop-fade-in;\n  inset: 0;\n\n  @media (prefers-reduced-motion) {\n    animation: none;\n  }\n\n  @media (--from-tablet) {\n    display: none;\n  }\n}\n\n.popover__content {\n  position: fixed;\n  z-index: 2;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  border-top-left-radius: var(--s-border-radius-xl);\n  border-top-right-radius: var(--s-border-radius-xl);\n  background-color: var(--s-surface-overlay-default);\n\n  @media (--from-tablet) {\n    right: unset;\n    bottom: unset;\n    left: unset;\n    max-width: 22.5rem;\n    border-radius: var(--s-border-radius-sm);\n    animation: none;\n    box-shadow: 0.125rem 0.25rem 2.5rem rgba(0, 0, 0, 0.14);\n  }\n}\n\n.popover__scroll-container {\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: 100%;\n  max-height: 90vh;\n  padding-top: var(--s-space-24);\n  padding-bottom: var(--s-space-24);\n  overscroll-behavior: contain;\n\n  @media (--from-tablet) {\n    max-height: 22rem;\n    padding-top: var(--s-space-8);\n    padding-bottom: var(--s-space-8);\n  }\n}\n\n.popover__handle {\n  position: absolute;\n  top: var(--s-space-8);\n  left: 50%;\n  width: 2.5rem;\n  height: 0.375rem;\n  border-radius: 0.1875rem;\n  background-color: var(--s-border-default);\n  transform: translatex(-50%);\n\n  @media (--from-tablet) {\n    display: none;\n  }\n}\n\n@keyframes popover-slide-in {\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes popover-slide-out {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(100%);\n  }\n}\n\n@keyframes popover-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes popover-fade-out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes popover-fade-scale-in {\n  from {\n    transform: scale(0);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n","import {\n  autoUpdate,\n  computePosition,\n  ComputePositionReturn,\n  flip,\n  Placement,\n  shift,\n} from \"@floating-ui/dom\";\nimport {\n  Component,\n  Element,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport { disableBodyScroll, enableBodyScroll } from \"body-scroll-lock\";\nimport classnames from \"classnames\";\nimport { isMobileViewport, querySelectorAllDeep } from \"../../utils\";\n\n/**\n * @slot slot - The popover content.\n */\n@Component({\n  shadow: true,\n  styleUrl: \"flip-popover.css\",\n  tag: \"flip-popover\",\n})\nexport class FlipPopover {\n  @Element() el: HTMLElement;\n\n  @Prop() label!: string;\n  @Prop() placement?: Placement = \"bottom-start\";\n  @Prop() popoverId!: string;\n  @Prop() trigger!: string;\n\n  @State() active = false;\n  @State() closing = false;\n  @State() position: ComputePositionReturn;\n\n  private childMenuItems: HTMLElement[];\n  private disableAutoUpdate: any;\n  private contentContainer: HTMLDivElement;\n  private scrollContainer: HTMLDivElement;\n  private triggerEl: HTMLElement;\n\n  componentDidLoad() {\n    this.connectTrigger();\n    this.updateChildMenuItems();\n    this.updateTriggerAttributes();\n  }\n\n  disconnectedCallback() {\n    enableBodyScroll(this.scrollContainer);\n  }\n\n  @Listen(\"click\", { target: \"window\" })\n  onWindowClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (!this.el.contains(target)) {\n      this.close();\n    }\n  }\n\n  onFocusOut = (event: FocusEvent) => {\n    if (!this.active) {\n      return;\n    }\n\n    const target =\n      (event.relatedTarget as HTMLElement) || (event.target as HTMLElement);\n\n    const popoverLostFocus = !this.el.contains(target);\n\n    if (popoverLostFocus) {\n      this.close();\n    }\n  };\n\n  /**\n   * Close the popover.\n   * @returns\n   */\n  @Method()\n  public async close() {\n    if (this.closing) {\n      return;\n    }\n\n    if (this.disableAutoUpdate) {\n      this.disableAutoUpdate();\n    }\n\n    this.closing = true;\n\n    setTimeout(() => {\n      this.active = false;\n      this.closing = false;\n      this.updateTriggerAttributes();\n    }, 150);\n\n    this.unlockBodyScroll();\n\n    this.getNativeTriggerElement()?.focus();\n  }\n\n  /**\n   * Open the popover.\n   * @returns\n   */\n  @Method()\n  public async open() {\n    this.active = true;\n\n    this.updateChildMenuItems();\n    this.updateTriggerAttributes();\n\n    requestAnimationFrame(async () => {\n      await this.reposition();\n\n      if (this.childMenuItems.length > 0) {\n        (this.childMenuItems[0] as HTMLElement).focus();\n      } else {\n        this.contentContainer.focus();\n      }\n\n      if (this.disableAutoUpdate) {\n        this.disableAutoUpdate();\n      }\n\n      this.disableAutoUpdate = autoUpdate(\n        this.triggerEl,\n        this.contentContainer,\n        this.reposition\n      );\n\n      this.scrollContainer.scrollTop = 0;\n\n      this.lockBodyScroll();\n    });\n  }\n\n  toggle = (event: Event) => {\n    event.stopPropagation();\n\n    if (this.active) {\n      this.close();\n    } else {\n      this.open();\n    }\n  };\n\n  private connectTrigger() {\n    this.triggerEl = querySelectorAllDeep(document.body, `#${this.trigger}`)[0];\n\n    if (!Boolean(this.triggerEl)) {\n      return;\n    }\n\n    this.triggerEl.addEventListener(\"click\", this.toggle);\n  }\n\n  private getNativeTriggerElement() {\n    return this.triggerEl.tagName.startsWith(\"FLIP-\")\n      ? ((this.triggerEl?.children[0] ||\n          this.triggerEl?.shadowRoot?.children[0] ||\n          this.triggerEl) as HTMLElement)\n      : this.triggerEl;\n  }\n\n  private onKeydown = (event: KeyboardEvent) => {\n    if (event.code === \"Escape\" && this.active) {\n      this.close();\n    }\n  };\n\n  private updateTriggerAttributes() {\n    if (!Boolean(this.triggerEl)) {\n      return;\n    }\n\n    const nativeTriggerEl = this.getNativeTriggerElement();\n\n    nativeTriggerEl.setAttribute(\"aria-controls\", this.popoverId);\n    nativeTriggerEl.setAttribute(\"aria-expanded\", String(this.active));\n    nativeTriggerEl.setAttribute(\"aria-haspopup\", \"dialog\");\n  }\n\n  private updateChildMenuItems() {\n    this.childMenuItems = querySelectorAllDeep(this.el, '[role=\"menuitem\"]');\n  }\n\n  private reposition = async () => {\n    const mobile = isMobileViewport();\n\n    if (!Boolean(this.triggerEl) || !Boolean(this.contentContainer)) {\n      return;\n    }\n\n    if (mobile) {\n      this.position = undefined;\n      return;\n    }\n\n    this.position = await computePosition(\n      this.triggerEl,\n      this.contentContainer,\n      {\n        middleware: [shift(), flip()],\n        placement: this.placement,\n        strategy: \"fixed\",\n      }\n    );\n  };\n\n  private lockBodyScroll() {\n    const mobile = isMobileViewport();\n\n    if (!mobile) {\n      return;\n    }\n\n    disableBodyScroll(this.scrollContainer);\n  }\n\n  private unlockBodyScroll() {\n    enableBodyScroll(this.scrollContainer);\n  }\n\n  private onCloseButtonClick = () => {\n    this.close();\n  };\n\n  render() {\n    const className = classnames(\"popover\", {\n      \"popover--closing\": this.closing,\n      \"popover--active\": this.active,\n      \"popover--inactive\": !this.active,\n    });\n\n    return (\n      <Host id={this.popoverId} onFocusout={this.onFocusOut}>\n        <div class={className} onKeyDown={this.onKeydown}>\n          <div\n            aria-hidden={!this.active ? \"true\" : \"false\"}\n            aria-label={this.label}\n            class=\"popover__content\"\n            role=\"dialog\"\n            tabindex=\"-1\"\n            ref={(el) => (this.contentContainer = el)}\n            style={{\n              top: Boolean(this.position) ? `${this.position?.y}px` : \"\",\n              left: Boolean(this.position) ? `${this.position?.x}px` : \"\",\n            }}\n          >\n            <span class=\"popover__handle\"></span>\n            <div\n              class=\"popover__scroll-container\"\n              ref={(el) => (this.scrollContainer = el)}\n            >\n              <slot></slot>\n            </div>\n          </div>\n          {this.active && (\n            <div\n              class=\"popover__backdrop\"\n              onClick={this.onCloseButtonClick}\n            ></div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/flip-radio-group.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const flipRadioGroupCss = ".sc-flip-radio-group-h{display:block}.sc-flip-radio-group-h *.sc-flip-radio-group{box-sizing:border-box}.radio-group.sc-flip-radio-group{display:flex;flex-direction:column;gap:var(--s-space-4)}";
+const flipRadioGroupCss = ".sc-flip-radio-group-h{display:block}.sc-flip-radio-group-h *.sc-flip-radio-group{box-sizing:border-box}.radio-group.sc-flip-radio-group{display:flex;flex-direction:column;gap:var(--s-space-12)}";
 
 const FlipRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {