@getflip/swirl-components 0.1.0 → 0.3.0

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

@@ -0,0 +1 @@
+{"file":"flip-tooltip.js","mappings":"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","names":["FlipTooltip"],"sources":["./src/components/flip-tooltip/flip-tooltip.css?tag=flip-tooltip&encapsulation=shadow","./src/components/flip-tooltip/flip-tooltip.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.tooltip {\n  display: inline-flex;\n}\n\n.tooltip .tooltip__reference {\n  display: inline-flex;\n}\n\n.tooltip__popper {\n  position: fixed;\n  z-index: var(--s-z-40);\n  max-width: 17.5rem;\n}\n\n.tooltip__bubble {\n  position: relative;\n  display: block;\n  padding-top: var(--s-space-8);\n  padding-right: var(--s-space-12);\n  padding-bottom: var(--s-space-8);\n  padding-left: var(--s-space-12);\n  border-radius: var(--s-border-radius-sm);\n  color: var(--s-text-on-status);\n  background-color: var(--s-surface-neutral-default);\n  line-height: var(--s-line-height-base);\n  animation: tooltip-fade-in 0.1s;\n  backgrund-color: red;\n}\n\n.tooltip__arrow {\n  position: absolute;\n  width: 0.5rem;\n  height: 0.5rem;\n  background-color: var(--s-surface-neutral-default);\n}\n\n@keyframes tooltip-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n","import {\n  computePosition,\n  ComputePositionConfig,\n  ComputePositionReturn,\n  flip,\n  offset,\n  shift,\n} from \"@floating-ui/dom\";\nimport { Component, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\";\n\nexport type FlipTooltipPosition = \"top\" | \"right\" | \"bottom\" | \"left\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-tooltip.css\",\n  tag: \"flip-tooltip\",\n})\nexport class FlipTooltip {\n  @Prop() content!: string;\n  @Prop() delay?: number = 300;\n  @Prop() position?: FlipTooltipPosition = \"top\";\n\n  @State() actualPosition: ComputePositionReturn;\n  @State() visible = false;\n\n  private showTimeout: NodeJS.Timeout;\n  private options: Partial<ComputePositionConfig>;\n  private popperEl: HTMLSpanElement;\n  private referenceEl: HTMLSpanElement;\n\n  @Watch(\"position\")\n  watchPosition() {\n    this.updateOptions();\n  }\n\n  @Listen(\"mouseenter\")\n  onMouseEnter() {\n    this.showWithDelay();\n  }\n\n  @Listen(\"mouseleave\")\n  onMouseLeave() {\n    this.hide();\n  }\n\n  @Listen(\"resize\", { target: \"window\" })\n  onWindowResize() {\n    this.reposition();\n  }\n\n  @Listen(\"scroll\", { target: \"window\" })\n  onWindowScroll() {\n    this.reposition();\n  }\n\n  componentWillLoad() {\n    this.reposition();\n  }\n\n  componentDidLoad() {\n    this.updateOptions();\n  }\n\n  private onKeydown = (event: KeyboardEvent) => {\n    if (event.code === \"Escape\") {\n      this.hide();\n    }\n  };\n\n  private reposition = async () => {\n    if (!Boolean(this.referenceEl) || !Boolean(this.popperEl)) {\n      return;\n    }\n\n    this.actualPosition = await computePosition(\n      this.referenceEl,\n      this.popperEl,\n      this.options\n    );\n  };\n\n  private show = () => {\n    this.visible = true;\n\n    requestAnimationFrame(() => {\n      this.reposition();\n    });\n  };\n\n  private showWithDelay = () => {\n    if (Boolean(this.showTimeout)) {\n      clearTimeout(this.showTimeout);\n      this.showTimeout = undefined;\n    }\n\n    this.showTimeout = setTimeout(() => {\n      this.show();\n    }, this.delay);\n  };\n\n  private hide = () => {\n    if (Boolean(this.showTimeout)) {\n      clearTimeout(this.showTimeout);\n      this.showTimeout = undefined;\n    }\n\n    this.visible = false;\n  };\n\n  private updateOptions = () => {\n    const margin =\n      +getComputedStyle(document.documentElement)\n        .getPropertyValue(\"--s-space-12\")\n        .replace(\"rem\", \"\") * 16;\n\n    this.options = {\n      middleware: [offset(margin), shift(), flip()],\n      placement: this.position,\n      strategy: \"fixed\",\n    };\n  };\n\n  private getArrowStyles = () => {\n    if (this.actualPosition?.placement === \"top\") {\n      return {\n        top: \"100%\",\n        left: \"50%\",\n        transform: \"translate3d(-50%, -50%, 0) rotate(45deg)\",\n      };\n    }\n\n    if (this.actualPosition?.placement === \"bottom\") {\n      return {\n        bottom: \"100%\",\n        left: \"50%\",\n        transform: \"translate3d(-50%, 50%, 0) rotate(45deg)\",\n      };\n    }\n\n    if (this.actualPosition?.placement === \"right\") {\n      return {\n        top: \"50%\",\n        right: \"100%\",\n        transform: \"translate3d(50%, -50%, 0) rotate(45deg)\",\n      };\n    }\n\n    if (this.actualPosition?.placement === \"left\") {\n      return {\n        top: \"50%\",\n        left: \"100%\",\n        transform: \"translate3d(-50%, -50%, 0) rotate(45deg)\",\n      };\n    }\n  };\n\n  render() {\n    const arrowStyles = this.getArrowStyles();\n\n    return (\n      <Host onKeydown={this.onKeydown}>\n        <span class=\"tooltip\">\n          <span\n            class=\"tooltip__reference\"\n            aria-describedby=\"tooltip\"\n            onBlur={this.hide}\n            onClick={this.hide}\n            onFocus={this.show}\n            ref={(el) => (this.referenceEl = el)}\n            tabIndex={0}\n          >\n            <slot></slot>\n          </span>\n          <span\n            class=\"tooltip__popper\"\n            ref={(el) => (this.popperEl = el)}\n            style={{\n              top: Boolean(this.actualPosition)\n                ? `${this.actualPosition?.y}px`\n                : \"\",\n              left: Boolean(this.actualPosition)\n                ? `${this.actualPosition?.x}px`\n                : \"\",\n            }}\n          >\n            {this.visible && (\n              <span class=\"tooltip__bubble\" id=\"tooltip\" role=\"tooltip\">\n                <span class=\"tooltip__content\" innerHTML={this.content}></span>\n                <span class=\"tooltip__arrow\" style={arrowStyles}></span>\n              </span>\n            )}\n          </span>\n        </span>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/flip-video-thumbnail.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface FlipVideoThumbnail extends Components.FlipVideoThumbnail, HTMLElement {}
+export const FlipVideoThumbnail: {
+  prototype: FlipVideoThumbnail;
+  new (): FlipVideoThumbnail;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/flip-video-thumbnail.js

@@ -0,0 +1,48 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './flip-visually-hidden2.js';
+
+const flipVideoThumbnailCss = ":host {\n  display: flex;\n  width: 100%;\n}\n\n  :host * {\n    box-sizing: border-box;\n  }\n\n.video-thumbnail {\n  position: relative;\n  display: inline-flex;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  container-type: inline-size;\n  container-name: video-thumbnail;\n}\n\n.video-thumbnail:after {\n    position: absolute;\n    background-color: rgba(0, 0, 0, 0.05);\n    content: \"\";\n    inset: 0;\n  }\n\n.video-thumbnail:focus {\n    outline-color: var(--s-focus-default);\n  }\n\n.video-thumbnail__image {\n  width: 100%;\n}\n\n.video-thumbnail__duration {\n  position: absolute;\n  bottom: var(--s-space-8);\n  left: var(--s-space-8);\n  padding: var(--s-space-2) var(--s-space-8);\n  border-radius: var(--s-border-radius-sm);\n  color: var(--s-text-on-image);\n  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),\n    rgba(255, 255, 255, 0.1);\n  font-size: var(--s-font-size-sm);\n  font-weight: var(--s-font-weight-medium);\n  line-height: var(--s-line-height-sm);\n  letter-spacing: var(--s-letter-spacing-tighter);\n}\n\n.video-thumbnail__play-icon {\n  position: absolute;\n  z-index: 1;\n  top: 50%;\n  left: 50%;\n  width: 2.5rem;\n  height: 2.5rem;\n  transform: translate3d(-50%, -50%, 0);\n}\n\n@container video-thumbnail (min-width: 448px) {\n  .video-thumbnail__play-icon {\n    width: 3.5rem;\n    height: 4.5rem;\n  }\n}\n";
+
+const FlipVideoThumbnail$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.durationLabel = "Duration";
+  }
+  render() {
+    return (h(Host, null, h("button", { "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { class: "video-thumbnail__duration", id: "duration" }, h("flip-visually-hidden", null, this.durationLabel), this.duration)), h("svg", { class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z", fill: "white", "fill-opacity": "0.95" })))));
+  }
+  static get style() { return flipVideoThumbnailCss; }
+}, [1, "flip-video-thumbnail", {
+    "durationLabel": [1, "duration-label"],
+    "duration": [1],
+    "label": [1],
+    "src": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-video-thumbnail", "flip-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-video-thumbnail":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipVideoThumbnail$1);
+      }
+      break;
+    case "flip-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipVideoThumbnail = FlipVideoThumbnail$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipVideoThumbnail, defineCustomElement };
+
+//# sourceMappingURL=flip-video-thumbnail.js.map

package/dist/components/flip-video-thumbnail.js.map

@@ -0,0 +1 @@
+{"file":"flip-video-thumbnail.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,66CAA66C;;MCO97CA,oBAAkB;EAL/B;;;;IAMU,kBAAa,GAAY,UAAU,CAAC;GA4C7C;EAvCC,MAAM;IACJ,QACE,EAAC,IAAI,QACH,kCAEI,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,UAAU,GAAG,SAAS,gBAE1C,IAAI,CAAC,KAAK,EACtB,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,QAAQ,IAEb,WACE,GAAG,EAAC,EAAE,EACN,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAC,MAAM,EACd,GAAG,EAAE,IAAI,CAAC,GAAG,GACb,EACD,IAAI,CAAC,QAAQ,KACZ,YAAM,KAAK,EAAC,2BAA2B,EAAC,EAAE,EAAC,UAAU,IACnD,gCAAuB,IAAI,CAAC,aAAa,CAAwB,EAChE,IAAI,CAAC,QAAQ,CACT,CACR,EACD,WACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,IAElC,YACE,CAAC,EAAC,20BAA20B,EAC70B,IAAI,EAAC,OAAO,kBACC,MAAM,GACnB,CACE,CACC,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["FlipVideoThumbnail"],"sources":["./src/components/flip-video-thumbnail/flip-video-thumbnail.css?tag=flip-video-thumbnail&encapsulation=shadow","./src/components/flip-video-thumbnail/flip-video-thumbnail.tsx"],"sourcesContent":[":host {\n  display: flex;\n  width: 100%;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.video-thumbnail {\n  position: relative;\n  display: inline-flex;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  container-type: inline-size;\n  container-name: video-thumbnail;\n\n  &:after {\n    position: absolute;\n    background-color: rgba(0, 0, 0, 0.05);\n    content: \"\";\n    inset: 0;\n  }\n\n  &:focus {\n    outline-color: var(--s-focus-default);\n  }\n}\n\n.video-thumbnail__image {\n  width: 100%;\n}\n\n.video-thumbnail__duration {\n  position: absolute;\n  bottom: var(--s-space-8);\n  left: var(--s-space-8);\n  padding: var(--s-space-2) var(--s-space-8);\n  border-radius: var(--s-border-radius-sm);\n  color: var(--s-text-on-image);\n  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),\n    rgba(255, 255, 255, 0.1);\n  font-size: var(--s-font-size-sm);\n  font-weight: var(--s-font-weight-medium);\n  line-height: var(--s-line-height-sm);\n  letter-spacing: var(--s-letter-spacing-tighter);\n}\n\n.video-thumbnail__play-icon {\n  position: absolute;\n  z-index: 1;\n  top: 50%;\n  left: 50%;\n  width: 2.5rem;\n  height: 2.5rem;\n  transform: translate3d(-50%, -50%, 0);\n}\n\n@container video-thumbnail (min-width: 448px) {\n  .video-thumbnail__play-icon {\n    width: 3.5rem;\n    height: 4.5rem;\n  }\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-video-thumbnail.css\",\n  tag: \"flip-video-thumbnail\",\n})\nexport class FlipVideoThumbnail {\n  @Prop() durationLabel?: string = \"Duration\";\n  @Prop() duration?: string;\n  @Prop() label!: string;\n  @Prop() src!: string;\n\n  render() {\n    return (\n      <Host>\n        <button\n          aria-describedby={\n            this.duration !== undefined ? \"duration\" : undefined\n          }\n          aria-label={this.label}\n          class=\"video-thumbnail\"\n          type=\"button\"\n        >\n          <img\n            alt=\"\"\n            class=\"video-thumbnail__image\"\n            loading=\"lazy\"\n            src={this.src}\n          />\n          {this.duration && (\n            <span class=\"video-thumbnail__duration\" id=\"duration\">\n              <flip-visually-hidden>{this.durationLabel}</flip-visually-hidden>\n              {this.duration}\n            </span>\n          )}\n          <svg\n            class=\"video-thumbnail__play-icon\"\n            fill=\"none\"\n            viewBox=\"0 0 40 40\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z\"\n              fill=\"white\"\n              fill-opacity=\"0.95\"\n            />\n          </svg>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/flip-visually-hidden.js

@@ -4,3 +4,5 @@ const FlipVisuallyHidden = FlipVisuallyHidden$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipVisuallyHidden, defineCustomElement };
+
+//# sourceMappingURL=flip-visually-hidden.js.map

package/dist/components/flip-visually-hidden.js.map

@@ -0,0 +1 @@
+{"file":"flip-visually-hidden.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/flip-visually-hidden2.js

@@ -29,3 +29,5 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { FlipVisuallyHidden as F, defineCustomElement as d };
+
+//# sourceMappingURL=flip-visually-hidden2.js.map

package/dist/components/flip-visually-hidden2.js.map

@@ -0,0 +1 @@
+{"file":"flip-visually-hidden2.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,uKAAuK;;MCOxL,kBAAkB;;;;;;EAC7B,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAQ,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/flip-visually-hidden/flip-visually-hidden.css?tag=flip-visually-hidden&encapsulation=shadow","./src/components/flip-visually-hidden/flip-visually-hidden.tsx"],"sourcesContent":[":host {\n  position: absolute;\n  display: inline;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  border: 0;\n  white-space: nowrap;\n  word-wrap: normal;\n  clip: rect(0, 0, 0, 0);\n}\n","import { Component, h, Host } from \"@stencil/core\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-visually-hidden.css\",\n  tag: \"flip-visually-hidden\",\n})\nexport class FlipVisuallyHidden {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/{cjs/flip-popover.cjs.entry.js → components/floating-ui.dom.esm.js}

@@ -1,11 +1,3 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-37fbfe64.js');
-const index$1 = require('./index-b9715722.js');
-const utils = require('./utils-a6e2e7da.js');
-
 function getSide(placement) {
   return placement.split('-')[0];
 }
@@ -429,6 +421,77 @@ const flip = function (options) {
   };
 };
 
+async function convertValueToCoords(middlewareArguments, value) {
+  const {
+    placement,
+    platform,
+    elements
+  } = middlewareArguments;
+  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
+  const side = getSide(placement);
+  const alignment = getAlignment(placement);
+  const isVertical = getMainAxisFromPlacement(placement) === 'x';
+  const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
+  const crossAxisMulti = rtl && isVertical ? -1 : 1;
+  const rawValue = typeof value === 'function' ? value(middlewareArguments) : value; // eslint-disable-next-line prefer-const
+
+  let {
+    mainAxis,
+    crossAxis,
+    alignmentAxis
+  } = typeof rawValue === 'number' ? {
+    mainAxis: rawValue,
+    crossAxis: 0,
+    alignmentAxis: null
+  } : {
+    mainAxis: 0,
+    crossAxis: 0,
+    alignmentAxis: null,
+    ...rawValue
+  };
+
+  if (alignment && typeof alignmentAxis === 'number') {
+    crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
+  }
+
+  return isVertical ? {
+    x: crossAxis * crossAxisMulti,
+    y: mainAxis * mainAxisMulti
+  } : {
+    x: mainAxis * mainAxisMulti,
+    y: crossAxis * crossAxisMulti
+  };
+}
+/**
+ * Displaces the floating element from its reference element.
+ * @see https://floating-ui.com/docs/offset
+ */
+
+const offset = function (value) {
+  if (value === void 0) {
+    value = 0;
+  }
+
+  return {
+    name: 'offset',
+    options: value,
+
+    async fn(middlewareArguments) {
+      const {
+        x,
+        y
+      } = middlewareArguments;
+      const diffCoords = await convertValueToCoords(middlewareArguments, value);
+      return {
+        x: x + diffCoords.x,
+        y: y + diffCoords.y,
+        data: diffCoords
+      };
+    }
+
+  };
+};
+
 function getCrossAxis(axis) {
   return axis === 'x' ? 'y' : 'x';
 }
@@ -1156,403 +1219,6 @@ const computePosition = (reference, floating, options) => computePosition$1(refe
   ...options
 });
 
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
-// Older browsers don't support event options, feature detect it.
-
-// Adopted and modified solution from Bohdan Didukh (2017)
-// https://stackoverflow.com/questions/41594997/ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-posi
-
-var hasPassiveEvents = false;
-if (typeof window !== 'undefined') {
-  var passiveTestOptions = {
-    get passive() {
-      hasPassiveEvents = true;
-      return undefined;
-    }
-  };
-  window.addEventListener('testPassive', null, passiveTestOptions);
-  window.removeEventListener('testPassive', null, passiveTestOptions);
-}
-
-var isIosDevice = typeof window !== 'undefined' && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === 'MacIntel' && window.navigator.maxTouchPoints > 1);
-
-
-var locks = [];
-var documentListenerAdded = false;
-var initialClientY = -1;
-var previousBodyOverflowSetting = void 0;
-var previousBodyPosition = void 0;
-var previousBodyPaddingRight = void 0;
-
-// returns true if `el` should be allowed to receive touchmove events.
-var allowTouchMove = function allowTouchMove(el) {
-  return locks.some(function (lock) {
-    if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) {
-      return true;
-    }
-
-    return false;
-  });
-};
-
-var preventDefault = function preventDefault(rawEvent) {
-  var e = rawEvent || window.event;
-
-  // For the case whereby consumers adds a touchmove event listener to document.
-  // Recall that we do document.addEventListener('touchmove', preventDefault, { passive: false })
-  // in disableBodyScroll - so if we provide this opportunity to allowTouchMove, then
-  // the touchmove event on document will break.
-  if (allowTouchMove(e.target)) {
-    return true;
-  }
-
-  // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom).
-  if (e.touches.length > 1) return true;
-
-  if (e.preventDefault) e.preventDefault();
-
-  return false;
-};
-
-var setOverflowHidden = function setOverflowHidden(options) {
-  // If previousBodyPaddingRight is already set, don't set it again.
-  if (previousBodyPaddingRight === undefined) {
-    var _reserveScrollBarGap = !!options && options.reserveScrollBarGap === true;
-    var scrollBarGap = window.innerWidth - document.documentElement.clientWidth;
-
-    if (_reserveScrollBarGap && scrollBarGap > 0) {
-      var computedBodyPaddingRight = parseInt(window.getComputedStyle(document.body).getPropertyValue('padding-right'), 10);
-      previousBodyPaddingRight = document.body.style.paddingRight;
-      document.body.style.paddingRight = computedBodyPaddingRight + scrollBarGap + 'px';
-    }
-  }
-
-  // If previousBodyOverflowSetting is already set, don't set it again.
-  if (previousBodyOverflowSetting === undefined) {
-    previousBodyOverflowSetting = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
-  }
-};
-
-var restoreOverflowSetting = function restoreOverflowSetting() {
-  if (previousBodyPaddingRight !== undefined) {
-    document.body.style.paddingRight = previousBodyPaddingRight;
-
-    // Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it
-    // can be set again.
-    previousBodyPaddingRight = undefined;
-  }
-
-  if (previousBodyOverflowSetting !== undefined) {
-    document.body.style.overflow = previousBodyOverflowSetting;
-
-    // Restore previousBodyOverflowSetting to undefined
-    // so setOverflowHidden knows it can be set again.
-    previousBodyOverflowSetting = undefined;
-  }
-};
-
-var setPositionFixed = function setPositionFixed() {
-  return window.requestAnimationFrame(function () {
-    // If previousBodyPosition is already set, don't set it again.
-    if (previousBodyPosition === undefined) {
-      previousBodyPosition = {
-        position: document.body.style.position,
-        top: document.body.style.top,
-        left: document.body.style.left
-      };
-
-      // Update the dom inside an animation frame 
-      var _window = window,
-          scrollY = _window.scrollY,
-          scrollX = _window.scrollX,
-          innerHeight = _window.innerHeight;
-
-      document.body.style.position = 'fixed';
-      document.body.style.top = -scrollY;
-      document.body.style.left = -scrollX;
-
-      setTimeout(function () {
-        return window.requestAnimationFrame(function () {
-          // Attempt to check if the bottom bar appeared due to the position change
-          var bottomBarHeight = innerHeight - window.innerHeight;
-          if (bottomBarHeight && scrollY >= innerHeight) {
-            // Move the content further up so that the bottom bar doesn't hide it
-            document.body.style.top = -(scrollY + bottomBarHeight);
-          }
-        });
-      }, 300);
-    }
-  });
-};
-
-var restorePositionSetting = function restorePositionSetting() {
-  if (previousBodyPosition !== undefined) {
-    // Convert the position from "px" to Int
-    var y = -parseInt(document.body.style.top, 10);
-    var x = -parseInt(document.body.style.left, 10);
-
-    // Restore styles
-    document.body.style.position = previousBodyPosition.position;
-    document.body.style.top = previousBodyPosition.top;
-    document.body.style.left = previousBodyPosition.left;
-
-    // Restore scroll
-    window.scrollTo(x, y);
-
-    previousBodyPosition = undefined;
-  }
-};
-
-// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions
-var isTargetElementTotallyScrolled = function isTargetElementTotallyScrolled(targetElement) {
-  return targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false;
-};
-
-var handleScroll = function handleScroll(event, targetElement) {
-  var clientY = event.targetTouches[0].clientY - initialClientY;
-
-  if (allowTouchMove(event.target)) {
-    return false;
-  }
-
-  if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {
-    // element is at the top of its scroll.
-    return preventDefault(event);
-  }
-
-  if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) {
-    // element is at the bottom of its scroll.
-    return preventDefault(event);
-  }
-
-  event.stopPropagation();
-  return true;
-};
-
-var disableBodyScroll = function disableBodyScroll(targetElement, options) {
-  // targetElement must be provided
-  if (!targetElement) {
-    // eslint-disable-next-line no-console
-    console.error('disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.');
-    return;
-  }
-
-  // disableBodyScroll must not have been called on this targetElement before
-  if (locks.some(function (lock) {
-    return lock.targetElement === targetElement;
-  })) {
-    return;
-  }
-
-  var lock = {
-    targetElement: targetElement,
-    options: options || {}
-  };
-
-  locks = [].concat(_toConsumableArray(locks), [lock]);
-
-  if (isIosDevice) {
-    setPositionFixed();
-  } else {
-    setOverflowHidden(options);
-  }
-
-  if (isIosDevice) {
-    targetElement.ontouchstart = function (event) {
-      if (event.targetTouches.length === 1) {
-        // detect single touch.
-        initialClientY = event.targetTouches[0].clientY;
-      }
-    };
-    targetElement.ontouchmove = function (event) {
-      if (event.targetTouches.length === 1) {
-        // detect single touch.
-        handleScroll(event, targetElement);
-      }
-    };
-
-    if (!documentListenerAdded) {
-      document.addEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
-      documentListenerAdded = true;
-    }
-  }
-};
-
-var enableBodyScroll = function enableBodyScroll(targetElement) {
-  if (!targetElement) {
-    // eslint-disable-next-line no-console
-    console.error('enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.');
-    return;
-  }
-
-  locks = locks.filter(function (lock) {
-    return lock.targetElement !== targetElement;
-  });
-
-  if (isIosDevice) {
-    targetElement.ontouchstart = null;
-    targetElement.ontouchmove = null;
-
-    if (documentListenerAdded && locks.length === 0) {
-      document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
-      documentListenerAdded = false;
-    }
-  }
-
-  if (isIosDevice) {
-    restorePositionSetting();
-  } else {
-    restoreOverflowSetting();
-  }
-};
-
-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:19rem;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 = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.active = false;
-    this.closing = false;
-    this.close = () => {
-      var _a;
-      if (this.closing) {
-        return;
-      }
-      if (this.disableAutoUpdate) {
-        this.disableAutoUpdate();
-      }
-      this.closing = true;
-      setTimeout(() => {
-        this.active = false;
-        this.closing = false;
-        this.updateTriggerAttributes();
-      }, 150);
-      this.unlockBodyScroll();
-      (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    this.open = () => {
-      this.active = true;
-      this.updateChildMenuItems();
-      this.updateTriggerAttributes();
-      requestAnimationFrame(async () => {
-        await this.reposition();
-        if (this.childMenuItems.length > 0) {
-          this.childMenuItems[0].focus();
-        }
-        else {
-          this.contentContainer.focus();
-        }
-        if (this.disableAutoUpdate) {
-          this.disableAutoUpdate();
-        }
-        this.disableAutoUpdate = autoUpdate(this.triggerEl, this.contentContainer, this.reposition);
-        this.scrollContainer.scrollTop = 0;
-        this.lockBodyScroll();
-      });
-    };
-    this.toggle = () => {
-      if (this.active) {
-        this.close();
-      }
-      else {
-        this.open();
-      }
-    };
-    this.onKeydown = (event) => {
-      if (event.code === "Escape" && this.active) {
-        this.close();
-      }
-    };
-    this.onContentClick = () => {
-      if (!this.active) {
-        return;
-      }
-      this.close();
-    };
-    this.reposition = async () => {
-      const mobile = !window.matchMedia("(min-width: 768px)").matches;
-      if (!Boolean(this.triggerEl) || !Boolean(this.contentContainer)) {
-        return;
-      }
-      if (mobile) {
-        this.position = undefined;
-        return;
-      }
-      this.position = await computePosition(this.triggerEl, this.contentContainer, {
-        middleware: [shift(), flip()],
-        placement: "bottom-start",
-        strategy: "fixed",
-      });
-    };
-  }
-  componentDidLoad() {
-    this.connectTrigger();
-    this.updateChildMenuItems();
-    this.updateTriggerAttributes();
-  }
-  disconnectedCallback() {
-    enableBodyScroll(this.scrollContainer);
-  }
-  onWindowFocusout(event) {
-    if (!this.active) {
-      return;
-    }
-    const target = event.relatedTarget;
-    const popoverLostFocus = target === null ||
-      (!this.el.contains(target) &&
-        !this.childMenuItems.some((item) => { var _a; return (_a = target.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(item); }));
-    if (popoverLostFocus) {
-      this.close();
-    }
-  }
-  connectTrigger() {
-    var _a;
-    const triggerComponent = document.querySelector(`#${this.trigger}`);
-    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);
-    if (!Boolean(this.triggerEl)) {
-      return;
-    }
-    this.triggerEl.addEventListener("click", this.toggle);
-  }
-  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");
-  }
-  updateChildMenuItems() {
-    this.childMenuItems = utils.querySelectorAllDeep(this.el, '[role="menuitem"]');
-  }
-  lockBodyScroll() {
-    const mobile = !window.matchMedia("(min-width: 768px)").matches;
-    if (!mobile) {
-      return;
-    }
-    disableBodyScroll(this.scrollContainer);
-  }
-  unlockBodyScroll() {
-    enableBodyScroll(this.scrollContainer);
-  }
-  render() {
-    var _a, _b;
-    const className = index$1.classnames("popover", {
-      "popover--closing": this.closing,
-      "popover--active": this.active,
-      "popover--inactive": !this.active,
-    });
-    return (index.h(index.Host, { id: this.popoverId }, index.h("div", { class: className, onKeyDown: this.onKeydown }, index.h("div", { "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", onClick: this.onContentClick, 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` : "",
-      } }, index.h("span", { class: "popover__handle" }), index.h("div", { class: "popover__scroll-container", ref: (el) => (this.scrollContainer = el) }, index.h("slot", null))), this.active && (index.h("div", { class: "popover__backdrop", onClick: this.close })))));
-  }
-  get el() { return index.getElement(this); }
-};
-FlipPopover.style = flipPopoverCss;
+export { autoUpdate as a, computePosition as c, flip as f, offset as o, shift as s };
 
-exports.flip_popover = FlipPopover;
+//# sourceMappingURL=floating-ui.dom.esm.js.map