@getflip/swirl-components 0.4.0 → 0.6.0

package/dist/esm/flip-pdf-reader.entry.js

@@ -0,0 +1,137 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-5a3b2828.js';
+import { A as A11yDialog } from './a11y-dialog.esm-d7a94c8c.js';
+import { d as disableBodyScroll, e as enableBodyScroll } from './bodyScrollLock.esm-ce6356d8.js';
+import { c as classnames } from './index-6d2e18c6.js';
+import { i as isMobileViewport } from './utils-39b2afe8.js';
+import './_commonjsHelpers-44457d8d.js';
+
+const flipPdfReaderCss = ":host{display:block}:host *{box-sizing:border-box}.pdf-reader{position:fixed;z-index:var(--s-z-40);background-color:var(--s-surface-raised-default);inset:0;touch-action:pan-x pan-y}.pdf-reader[aria-hidden=\"true\"]{display:none}.pdf-reader:not(.pdf-reader--closing) .pdf-reader__body{-webkit-animation:0.15s pdf-reader-fade-in;animation:0.15s pdf-reader-fade-in}@media (prefers-reduced-motion){.pdf-reader:not(.pdf-reader--closing) .pdf-reader__body{-webkit-animation:none;animation:none}}.pdf-reader--closing{-webkit-animation:0.15s pdf-reader-fade-out;animation:0.15s pdf-reader-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.pdf-reader--closing{-webkit-animation:none;animation:none}}.pdf-reader__body{position:relative;width:100%;height:100%}.pdf-reader__header{display:flex;height:4rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-8)}.pdf-reader__header-left,.pdf-reader__header-right{display:flex;flex-grow:1;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.pdf-reader__header-left,.pdf-reader__header-right{flex-basis:calc(100 / 3 * 1%);flex-grow:0}}.pdf-reader__header-right{justify-content:flex-end}.pdf-reader__header-center{display:none;flex-grow:1;justify-content:center;align-items:center;gap:var(--s-space-16)}@media (min-width: 768px){.pdf-reader__header-center{display:flex}}.pdf-reader__label{overflow:hidden;flex-grow:1;font-weight:var(--s-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis}.pdf-reader__zoom-button-container{display:flex;align-items:center;gap:var(--s-space-8)}.pdf-reader__zoom-button-container>*:not(:last-child){position:relative}.pdf-reader__zoom-button-container>*:not(:last-child):after{position:absolute;top:50%;right:calc(-1 * var(--s-space-4));width:var(--s-border-width-default);height:1.5rem;background-color:var(--s-border-default);content:\"\";transform:translate3d(50%, -50%, 0)}.pdf-reader__zoom-select-container{position:relative}.pdf-reader__zoom-select{display:inline-flex;height:2.5rem;padding-right:var(--s-space-12);padding-right:calc(var(--s-space-8) + 1.5rem + var(--s-space-12));padding-left:var(--s-space-12);justify-content:flex-start;align-items:center;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:var(--s-border-radius-sm);color:var(--s-interactive-neutral-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pdf-reader__zoom-select:focus{outline-color:var(--s-focus-default)}.pdf-reader__zoom-select-icon{position:absolute;top:50%;right:var(--s-space-8);display:inline-flex;transform:translateY(-50%);pointer-events:none}.pdf-reader__content{width:100%;height:calc(100% - 4rem)}.pdf-reader__mobile-zoom-controls{position:absolute;z-index:1;right:var(--s-space-16);bottom:var(--s-space-32);display:flex;padding-bottom:var(--s-space-4);flex-direction:column;gap:var(--s-space-8)}@media (min-width: 768px){.pdf-reader__mobile-zoom-controls{display:none}}.pdf-reader__mobile-zoom-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}.pdf-reader__mobile-zoom-button:disabled{cursor:default}@-webkit-keyframes pdf-reader-fade-in{from{opacity:0}to{opacity:1}}@keyframes pdf-reader-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes pdf-reader-fade-out{from{opacity:1}to{opacity:0}}@keyframes pdf-reader-fade-out{from{opacity:1}to{opacity:0}}";
+
+const FlipPdfReader = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.autoZoomLabel = "Full width";
+    this.closeButtonLabel = "Close PDF viewer";
+    this.downloadButtonLabel = "Download PDF";
+    this.printButtonLabel = "Print PDF";
+    this.zoomInButtonLabel = "Zoom in";
+    this.zoomOutButtonLabel = "Zoom out";
+    this.zoomSelectLabel = "Select zoom";
+    this.active = false;
+    this.closing = false;
+    this.downloading = false;
+    this.desktopZoomSteps = [0.5, 0.75, 1, 1.25, 1.5, 2, 3, 4];
+    this.mobileZoomSteps = [0.5, 0.75, 1, 1.25, 1.5];
+    this.onKeyDown = (event) => {
+      if (event.code === "Escape") {
+        this.close();
+      }
+    };
+    this.onActivate = (event) => {
+      this.pdfViewer = event.detail;
+      this.lockBodyScroll();
+    };
+    this.onCloseButtonClick = () => {
+      this.close();
+    };
+    this.onPrintButtonClick = () => {
+      this.pdfViewer.print();
+    };
+    this.onDownloadButtonClick = async () => {
+      this.downloading = true;
+      await this.viewer.download();
+      this.downloading = false;
+    };
+    this.onZoomInButtonClick = () => {
+      const currentZoomStepIndex = this.zoomSteps.indexOf(+this.zoom);
+      this.zoom =
+        currentZoomStepIndex === -1
+          ? 1
+          : this.zoomSteps[Math.min(this.zoomSteps.length - 1, currentZoomStepIndex + 1)];
+    };
+    this.onZoomOutButtonClick = () => {
+      const currentZoomStepIndex = this.zoomSteps.indexOf(+this.zoom);
+      this.zoom =
+        currentZoomStepIndex === -1
+          ? 1
+          : this.zoomSteps[Math.max(0, currentZoomStepIndex - 1)];
+    };
+    this.onZoomAutoButtonClick = () => {
+      this.zoom = this.zoom === "auto" ? 1 : "auto";
+    };
+    this.onZoomChange = (event) => {
+      const value = event.target.value;
+      this.zoom = value === "auto" ? value : +value;
+    };
+  }
+  componentWillLoad() {
+    this.updateZoomSteps();
+    this.zoom = isMobileViewport() ? "auto" : 1;
+  }
+  componentDidLoad() {
+    this.modal = new A11yDialog(this.modalEl);
+  }
+  disconnectedCallback() {
+    var _a;
+    this.unlockBodyScroll();
+    (_a = this.modal) === null || _a === void 0 ? void 0 : _a.destroy();
+  }
+  onWindowResize() {
+    if (!Boolean(this.pdfViewer)) {
+      return;
+    }
+    this.updateZoomSteps();
+    this.zoom = isMobileViewport() ? "auto" : 1;
+  }
+  /**
+   * Open the reader.
+   */
+  async open() {
+    this.modal.show();
+    this.active = true;
+  }
+  /**
+   * Close the reader.
+   */
+  async close() {
+    if (this.closing) {
+      return;
+    }
+    this.closing = true;
+    this.unlockBodyScroll();
+    setTimeout(() => {
+      this.modal.hide();
+      this.closing = false;
+      this.active = false;
+    }, 150);
+  }
+  lockBodyScroll() {
+    const scrollContainer = this.pdfViewer.shadowRoot.querySelector(".file-viewer-pdf__pages");
+    if (Boolean(scrollContainer)) {
+      disableBodyScroll(scrollContainer);
+    }
+  }
+  unlockBodyScroll() {
+    const scrollContainer = this.pdfViewer.shadowRoot.querySelector(".file-viewer-pdf__pages");
+    if (Boolean(scrollContainer)) {
+      enableBodyScroll(scrollContainer);
+    }
+  }
+  updateZoomSteps() {
+    this.zoomSteps = isMobileViewport()
+      ? this.mobileZoomSteps
+      : this.desktopZoomSteps;
+  }
+  render() {
+    const className = classnames("pdf-reader", {
+      "pdf-reader--closing": this.closing,
+    });
+    return (h(Host, null, h("section", { "aria-hidden": "true", "aria-label": this.label, class: className, id: "pdf-reader", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, h("div", { class: "pdf-reader__body", role: "document" }, h("header", { class: "pdf-reader__header" }, h("span", { class: "pdf-reader__header-left" }, h("flip-button", { class: "pdf-reader__close-button", hideLabel: true, icon: "<flip-icon-close></flip-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), h("span", { class: "pdf-reader__label" }, this.label)), h("span", { class: "pdf-reader__header-center" }, h("span", { class: "pdf-reader__zoom-button-container" }, h("flip-button", { class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[0], hideLabel: true, icon: "<flip-icon-remove></flip-icon-remove>", label: this.zoomOutButtonLabel, onClick: this.onZoomOutButtonClick }), h("flip-button", { class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], hideLabel: true, icon: "<flip-icon-add></flip-icon-add>", label: this.zoomInButtonLabel, onClick: this.onZoomInButtonClick })), h("span", { class: "pdf-reader__zoom-select-container" }, h("select", { "aria-label": this.zoomSelectLabel, class: "pdf-reader__zoom-select", name: "zoom-select", id: "zoom-select", onChange: this.onZoomChange }, h("option", { selected: this.zoom === "auto", value: "auto" }, this.autoZoomLabel), this.zoomSteps.map((zoom) => (h("option", { key: zoom, selected: this.zoom === zoom, value: zoom }, zoom * 100, "%")))), h("flip-icon-expand-more", { class: "pdf-reader__zoom-select-icon" }))), h("span", { class: "pdf-reader__header-right" }, h("flip-button", { class: "pdf-reader__print-button", hideLabel: true, icon: "<flip-icon-print></flip-icon-print>", label: this.printButtonLabel, onClick: this.onPrintButtonClick }), h("flip-button", { class: "pdf-reader__download-button", disabled: this.downloading, hideLabel: true, icon: !this.downloading
+        ? "<flip-icon-download></flip-icon-download>"
+        : '<flip-spinner size="s"></flip-spinner>', label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick }))), h("div", { class: "pdf-reader__content" }, h("flip-file-viewer", { active: this.active, file: this.file, onActivate: this.onActivate, ref: (el) => (this.viewer = el), type: "application/pdf", zoom: this.zoom }), h("div", { class: "pdf-reader__mobile-zoom-controls" }, h("button", { "aria-label": this.autoZoomLabel, class: "pdf-reader__mobile-zoom-button", onClick: this.onZoomAutoButtonClick, type: "button" }, this.zoom === "auto" ? (h("flip-icon-fullscreen-exit", null)) : (h("flip-icon-fullscreen", null))), h("button", { "aria-label": this.zoomInButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], onClick: this.onZoomInButtonClick, type: "button" }, h("flip-icon-add", null)), h("button", { "aria-label": this.zoomOutButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[0], onClick: this.onZoomOutButtonClick, type: "button" }, h("flip-icon-remove", null))))))));
+  }
+  get el() { return getElement(this); }
+};
+FlipPdfReader.style = flipPdfReaderCss;
+
+export { FlipPdfReader as flip_pdf_reader };

package/dist/esm/flip-popover.entry.js

@@ -0,0 +1,222 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5a3b2828.js';
+import { o as offset, s as shift, f as flip, c as computePosition, a as autoUpdate } from './floating-ui.dom.esm-1a4e8b8a.js';
+import { e as enableBodyScroll, d as disableBodyScroll } from './bodyScrollLock.esm-ce6356d8.js';
+import { c as classnames } from './index-6d2e18c6.js';
+import { i as isMobileViewport, q as querySelectorAllDeep } from './utils-39b2afe8.js';
+import './_commonjsHelpers-44457d8d.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-xy;animation:0.15s popover-fade-scale-in-xy}}@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}@media (min-width: 768px){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{-webkit-animation:0.15s popover-fade-scale-in-y;animation:0.15s popover-fade-scale-in-y}}@media (prefers-reduced-motion){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{-webkit-animation:none;animation: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-xy{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in-xy{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@-webkit-keyframes popover-fade-scale-in-y{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}@keyframes popover-fade-scale-in-y{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}";
+
+const FlipPopover = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.popoverClose = createEvent(this, "popoverClose", 7);
+    this.popoverOpen = createEvent(this, "popoverOpen", 7);
+    this.animation = "scale-in-xy";
+    this.enableFlip = true;
+    this.offset = 8;
+    this.placement = "bottom-start";
+    this.active = false;
+    this.closing = false;
+    this.toggle = (event) => {
+      event.stopPropagation();
+      if (this.active) {
+        this.close();
+      }
+      else {
+        this.open();
+      }
+    };
+    this.onKeydown = (event) => {
+      if (event.code === "Escape" && this.active) {
+        this.close();
+      }
+    };
+    this.reposition = async () => {
+      const mobile = isMobileViewport();
+      if (!Boolean(this.triggerEl) || !Boolean(this.contentContainer)) {
+        return;
+      }
+      if (mobile) {
+        this.position = undefined;
+        return;
+      }
+      const offsetOptions = typeof this.offset === "number"
+        ? { mainAxis: this.offset, crossAxis: 0 }
+        : { mainAxis: this.offset[0], crossAxis: this.offset[1] };
+      const middleware = this.enableFlip
+        ? [offset(offsetOptions), shift(), flip()]
+        : [offset(offsetOptions), shift()];
+      this.position = await computePosition(this.triggerEl, this.contentContainer, {
+        middleware,
+        placement: this.placement,
+        strategy: "fixed",
+      });
+    };
+    this.onCloseButtonClick = () => {
+      this.close();
+    };
+  }
+  componentDidLoad() {
+    this.connectTrigger();
+    this.updateFocusableChildren();
+    this.updateTriggerAttributes();
+  }
+  disconnectedCallback() {
+    enableBodyScroll(this.scrollContainer);
+  }
+  onWindowFocusIn(event) {
+    if (!this.active) {
+      return;
+    }
+    const target = event.target;
+    const popoverLostFocus = !this.el.contains(target);
+    if (popoverLostFocus) {
+      this.close();
+    }
+  }
+  onWindowClick(event) {
+    if (!this.active) {
+      return;
+    }
+    const target = event.target;
+    const clickedChild = this.el.contains(target);
+    const clickedShadowChild = event
+      .composedPath()
+      .some((el) => Boolean(el) && el instanceof Node
+      ? this.el.contains(el)
+      : false);
+    const clickedTrigger = event.target === this.triggerEl;
+    if (!clickedChild && !clickedShadowChild && !clickedTrigger) {
+      this.close();
+    }
+  }
+  /**
+   * Close the popover.
+   * @returns
+   */
+  async close() {
+    var _a;
+    if (this.closing || !this.active) {
+      return;
+    }
+    this.popoverClose.emit();
+    if (this.disableAutoUpdate) {
+      this.disableAutoUpdate();
+    }
+    this.closing = true;
+    setTimeout(() => {
+      this.active = false;
+      this.closing = false;
+      this.updateTriggerAttributes();
+    }, 150);
+    this.unlockBodyScroll();
+    (_a = this.getNativeTriggerElement()) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  /**
+   * Open the popover.
+   * @returns
+   */
+  async open() {
+    if (this.active) {
+      return;
+    }
+    this.adjustWidth();
+    this.active = true;
+    this.popoverOpen.emit();
+    this.updateFocusableChildren();
+    this.updateTriggerAttributes();
+    requestAnimationFrame(async () => {
+      await this.reposition();
+      if (this.focusableChildren.length > 0) {
+        this.focusableChildren[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();
+    });
+  }
+  connectTrigger() {
+    this.triggerEl = querySelectorAllDeep(document.body, `#${this.trigger}`)[0];
+    if (!Boolean(this.triggerEl)) {
+      return;
+    }
+    this.triggerEl.addEventListener("click", (event) => {
+      this.toggle(event);
+    });
+  }
+  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;
+    }
+    const nativeTriggerEl = this.getNativeTriggerElement();
+    nativeTriggerEl.setAttribute("aria-controls", this.popoverId);
+    nativeTriggerEl.setAttribute("aria-expanded", String(this.active));
+    nativeTriggerEl.setAttribute("aria-haspopup", "dialog");
+  }
+  updateFocusableChildren() {
+    this.focusableChildren = querySelectorAllDeep(this.el, '[role="menuitem"], [role="listbox"]');
+  }
+  adjustWidth() {
+    let useContainerWidth = this.useContainerWidth;
+    if ([true, "true"].includes(this.useContainerWidth)) {
+      useContainerWidth = true;
+    }
+    else if ([false, "false"].includes(this.useContainerWidth)) {
+      useContainerWidth = false;
+    }
+    const mobile = !window.matchMedia("(min-width: 768px)").matches;
+    if (Boolean(useContainerWidth) && !mobile) {
+      const container = typeof useContainerWidth === "string"
+        ? this.el.closest(useContainerWidth) || this.el.parentElement
+        : this.el.parentElement;
+      this.contentContainer.style.maxWidth = "none";
+      this.contentContainer.style.width =
+        container.getBoundingClientRect().width + "px";
+    }
+    else {
+      this.contentContainer.style.maxWidth = "";
+      this.contentContainer.style.width = "";
+    }
+  }
+  lockBodyScroll() {
+    const mobile = isMobileViewport();
+    if (!mobile) {
+      return;
+    }
+    disableBodyScroll(this.scrollContainer);
+  }
+  unlockBodyScroll() {
+    enableBodyScroll(this.scrollContainer);
+  }
+  render() {
+    var _a, _b;
+    const className = classnames("popover", `popover--animation-${this.animation}`, {
+      "popover--closing": this.closing,
+      "popover--active": this.active,
+      "popover--inactive": !this.active,
+    });
+    return (h(Host, { id: this.popoverId }, h("div", { class: className, onKeyDown: this.onKeydown }, h("div", { "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", role: "dialog", 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` : "",
+      }, tabindex: "-1" }, 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 getElement(this); }
+};
+FlipPopover.style = flipPopoverCss;
+
+export { FlipPopover as flip_popover };

package/dist/esm/flip-progress-indicator.entry.js

@@ -23,5 +23,3 @@ const FlipProgressIndicator = class {
 FlipProgressIndicator.style = flipProgressIndicatorCss;
 
 export { FlipProgressIndicator as flip_progress_indicator };
-
-//# sourceMappingURL=flip-progress-indicator.entry.js.map

package/dist/esm/flip-radio-group.entry.js

@@ -46,5 +46,3 @@ const FlipRadioGroup = class {
 FlipRadioGroup.style = flipRadioGroupCss;
 
 export { FlipRadioGroup as flip_radio_group };
-
-//# sourceMappingURL=flip-radio-group.entry.js.map

package/dist/esm/flip-radio.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host } from './index-5
 import { c as classnames } from './index-6d2e18c6.js';
 import './_commonjsHelpers-44457d8d.js';
 
-const flipRadioCss = ".sc-flip-radio-h{display:inline-flex}.sc-flip-radio-h *.sc-flip-radio{box-sizing:border-box}.radio.sc-flip-radio{display:inline-flex;cursor:pointer;line-height:var(--s-line-height-base)}.radio.sc-flip-radio:focus-within .radio__box.sc-flip-radio{box-shadow:0 0 0 0.0625rem var(--s-background-default),\n      0 0 0 0.1875rem var(--s-focus-default)}.radio--checked.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.radio--checked.sc-flip-radio .radio__box.sc-flip-radio{position:relative;border-color:var(--s-icon-highlight);background-color:var(--s-icon-highlight)}.radio--checked.sc-flip-radio .radio__box.sc-flip-radio:after{position:absolute;top:50%;left:50%;width:0.5rem;height:0.5rem;border-radius:50%;background-color:var(--s-background-default);content:\"\";transform:translate3d(-50%, -50%, 0)}.radio--invalid.radio--checked.sc-flip-radio .radio__box.sc-flip-radio,.radio--invalid.radio--indeterminate.sc-flip-radio .radio__box.sc-flip-radio{background-color:var(--s-icon-critical)}.radio--invalid.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-critical)}.radio--disabled.sc-flip-radio{cursor:default}.radio--disabled.radio--checked.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);background-color:transparent}.radio--disabled.radio--checked.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);background-color:var(--s-background-default)}.radio--disabled.radio--checked.sc-flip-radio .radio__box.sc-flip-radio:after{background-color:var(--s-icon-disabled)}.radio--disabled.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{background-color:transparent}.radio--disabled.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);backround-color:var(--s-icon-disabled)}.radio--disabled.sc-flip-radio .radio__description.sc-flip-radio,.radio--disabled.sc-flip-radio .radio__label.sc-flip-radio{color:var(--s-text-disabled)}.radio__control.sc-flip-radio{position:relative;display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{background-color:var(--s-action-neutral-hovered)}.radio__box.sc-flip-radio{position:relative;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:50%}.radio__label-container.sc-flip-radio{display:inline-flex;margin-left:var(--s-space-8);padding-top:var(--s-space-2);flex-direction:column}.radio__label.sc-flip-radio{font-weight:var(--s-font-weight-medium)}.radio__description.sc-flip-radio{color:var(--s-text-subdued)}";
+const flipRadioCss = ".sc-flip-radio-h{display:inline-flex}.sc-flip-radio-h *.sc-flip-radio{box-sizing:border-box}.radio.sc-flip-radio{display:inline-flex;cursor:pointer;line-height:var(--s-line-height-base)}.radio.sc-flip-radio:focus-within .radio__box.sc-flip-radio{box-shadow:0 0 0 0.0625rem var(--s-background-default),\n      0 0 0 0.1875rem var(--s-focus-default)}.radio--checked.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.radio--checked.sc-flip-radio .radio__box.sc-flip-radio{position:relative;border-color:var(--s-icon-highlight);background-color:var(--s-icon-highlight)}.radio--checked.sc-flip-radio .radio__box.sc-flip-radio:after{position:absolute;top:50%;left:50%;width:0.5rem;height:0.5rem;border-radius:50%;background-color:var(--s-background-default);content:\"\";transform:translate3d(-50%, -50%, 0)}.radio--invalid.radio--checked.sc-flip-radio .radio__box.sc-flip-radio,.radio--invalid.radio--indeterminate.sc-flip-radio .radio__box.sc-flip-radio{background-color:var(--s-icon-critical)}.radio--invalid.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-critical)}.radio--disabled.sc-flip-radio{cursor:default}.radio--disabled.radio--checked.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);background-color:transparent}.radio--disabled.radio--checked.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);background-color:var(--s-background-default)}.radio--disabled.radio--checked.sc-flip-radio .radio__box.sc-flip-radio:after{background-color:var(--s-icon-disabled)}.radio--disabled.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{background-color:transparent}.radio--disabled.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled)}.radio--disabled.sc-flip-radio .radio__description.sc-flip-radio,.radio--disabled.sc-flip-radio .radio__label.sc-flip-radio{color:var(--s-text-disabled)}.radio__control.sc-flip-radio{position:relative;display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{background-color:var(--s-action-neutral-hovered)}.radio__box.sc-flip-radio{position:relative;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:50%}.radio__label-container.sc-flip-radio{display:inline-flex;margin-left:var(--s-space-8);padding-top:var(--s-space-2);flex-direction:column}.radio__label.sc-flip-radio{font-weight:var(--s-font-weight-medium)}.radio__description.sc-flip-radio{color:var(--s-text-subdued)}";
 
 const FlipRadio = class {
   constructor(hostRef) {
@@ -15,10 +15,19 @@ const FlipRadio = class {
       this.valueChange.emit(this.value);
     };
   }
+  getAriaCheckedLabel(checked, unchecked) {
+    if (checked) {
+      return "true";
+    }
+    else if (unchecked) {
+      return "false";
+    }
+    return "mixed";
+  }
   render() {
     const unchecked = this.checked === false || this.checked === "false";
     const checked = this.checked === true || this.checked === "true";
-    const ariaCheckedLabel = checked ? "true" : unchecked ? "false" : "mixed";
+    const ariaCheckedLabel = this.getAriaCheckedLabel(checked, unchecked);
     const ariaInvalid = this.invalid;
     const className = classnames("radio", {
       "radio--checked": checked,
@@ -32,5 +41,3 @@ const FlipRadio = class {
 FlipRadio.style = flipRadioCss;
 
 export { FlipRadio as flip_radio };
-
-//# sourceMappingURL=flip-radio.entry.js.map

package/dist/esm/flip-resource-list-file-item.entry.js

@@ -25,5 +25,3 @@ const FlipResourceListFileItem = class {
 FlipResourceListFileItem.style = flipResourceListFileItemCss;
 
 export { FlipResourceListFileItem as flip_resource_list_file_item };
-
-//# sourceMappingURL=flip-resource-list-file-item.entry.js.map

package/dist/esm/flip-search.entry.js

@@ -42,5 +42,3 @@ const FlipSearch = class {
 FlipSearch.style = flipSearchCss;
 
 export { FlipSearch as flip_search };
-
-//# sourceMappingURL=flip-search.entry.js.map

package/dist/esm/flip-select.entry.js

@@ -0,0 +1,67 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5a3b2828.js';
+import { c as classnames } from './index-6d2e18c6.js';
+import { q as querySelectorAllDeep } from './utils-39b2afe8.js';
+import './_commonjsHelpers-44457d8d.js';
+
+const flipSelectCss = ".sc-flip-select-h{display:block;width:100%}.sc-flip-select-h *.sc-flip-select{box-sizing:border-box}.select.sc-flip-select{position:relative;display:flex;width:100%}.select--disabled.sc-flip-select .select__label.sc-flip-select{color:var(--s-text-disabled)}.select--disabled.sc-flip-select .select__indicator.sc-flip-select{color:var(--s-icon-disabled)}.select__label.sc-flip-select{display:block;overflow:hidden;width:100%;height:1.375rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__label.sc-flip-select:focus{outline:none}.select__indicator.sc-flip-select{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;color:var(--s-icon-default)}";
+
+const FlipSelect = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.options = [];
+    this.select = (event) => {
+      this.value = event.detail;
+      this.valueChange.emit(this.value);
+      if (!this.multiSelect) {
+        this.popover.close();
+      }
+    };
+    this.onSlotChange = () => {
+      this.updateOptions();
+    };
+    this.onOpen = () => {
+      this.open = true;
+    };
+    this.onClose = () => {
+      this.open = false;
+    };
+    this.onKeyDown = (event) => {
+      if (event.code === "Space" || event.code === "Enter") {
+        event.preventDefault();
+        this.popover.open();
+      }
+    };
+  }
+  componentWillLoad() {
+    queueMicrotask(() => {
+      this.updateOptions();
+    });
+  }
+  onWindowFocusIn(event) {
+    if (event.target === this.el.querySelector("input")) {
+      event.stopImmediatePropagation();
+    }
+  }
+  updateOptions() {
+    this.options = querySelectorAllDeep(this.el, "flip-option-list-item");
+  }
+  render() {
+    const label = Boolean(this.value)
+      ? this.value
+        .map((value) => { var _a; return (_a = this.options.find((option) => option.value === value)) === null || _a === void 0 ? void 0 : _a.label; })
+        .join(", ")
+      : "";
+    const ariaInvalid = this.invalid === true || this.invalid === false
+      ? String(this.invalid)
+      : undefined;
+    const className = classnames("select", {
+      "select--disabled": this.disabled,
+    });
+    return (h(Host, { onKeyDown: this.onKeyDown }, h("div", { class: className }, h("input", { "aria-describedby": this.flipAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__label", disabled: this.disabled, id: "trigger", readOnly: true, type: "text", value: label }), h("span", { class: "select__indicator" }, this.open ? (h("flip-icon-expand-less", null)) : (h("flip-icon-expand-more", null))), h("flip-popover", { animation: "scale-in-y", class: "select__popover", enableFlip: false, label: this.label, offset: [16, -16], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, popoverId: "select-options", ref: (el) => (this.popover = el), trigger: "trigger", useContainerWidth: "flip-form-control" }, h("flip-option-list", { onValueChange: this.select, multiSelect: this.multiSelect, value: this.value }, h("slot", { onSlotchange: this.onSlotChange }))))));
+  }
+  get el() { return getElement(this); }
+};
+FlipSelect.style = flipSelectCss;
+
+export { FlipSelect as flip_select };

package/dist/esm/flip-stack.entry.js

@@ -23,5 +23,3 @@ const FlipStack = class {
 FlipStack.style = flipStackCss;
 
 export { FlipStack as flip_stack };
-
-//# sourceMappingURL=flip-stack.entry.js.map

package/dist/esm/flip-switch.entry.js

@@ -87,5 +87,3 @@ const FlipSwitch = class {
 FlipSwitch.style = flipSwitchCss;
 
 export { FlipSwitch as flip_switch };
-
-//# sourceMappingURL=flip-switch.entry.js.map

package/dist/esm/flip-tab.entry.js

@@ -16,5 +16,3 @@ const FlipTab = class {
 FlipTab.style = flipTabCss;
 
 export { FlipTab as flip_tab };
-
-//# sourceMappingURL=flip-tab.entry.js.map

package/dist/esm/flip-tabs.entry.js

@@ -82,5 +82,3 @@ const FlipTabs = class {
 FlipTabs.style = flipTabsCss;
 
 export { FlipTabs as flip_tabs };
-
-//# sourceMappingURL=flip-tabs.entry.js.map

package/dist/esm/flip-tag.entry.js

@@ -23,5 +23,3 @@ const FlipTag = class {
 FlipTag.style = flipTagCss;
 
 export { FlipTag as flip_tag };
-
-//# sourceMappingURL=flip-tag.entry.js.map