@getflip/swirl-components 0.3.1 → 0.5.0

package/dist/cjs/flip-modal.cjs.entry.js

@@ -8,16 +8,20 @@ const bodyScrollLock_esm = require('./bodyScrollLock.esm-f29f1a77.js');
 const index$1 = require('./index-b8470262.js');
 require('./_commonjsHelpers-a5111d61.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 .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 = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.modalClose = index.createEvent(this, "modalClose", 7);
+    this.modalOpen = index.createEvent(this, "modalOpen", 7);
     this.primaryAction = index.createEvent(this, "primaryAction", 7);
     this.secondaryAction = index.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();
@@ -31,18 +35,24 @@ const FlipModal = class {
     };
     this.onPrimaryAction = (event) => {
       this.primaryAction.emit(event);
-      this.close();
     };
     this.onSecondaryAction = (event) => {
       this.secondaryAction.emit(event);
-      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() {
@@ -62,6 +72,7 @@ const FlipModal = class {
    */
   async open() {
     this.modal.show();
+    this.modalOpen.emit();
     this.lockBodyScroll();
     this.determineScrollStatus();
   }
@@ -76,6 +87,7 @@ const FlipModal = class {
     this.unlockBodyScroll();
     setTimeout(() => {
       this.modal.hide();
+      this.modalClose.emit();
       this.closing = false;
     }, 150);
   }
@@ -88,7 +100,9 @@ const FlipModal = class {
   render() {
     const className = index$1.classnames("modal", {
       "modal--closing": this.closing,
+      "modal--scrollable": this.scrollable,
       "modal--scrolled": this.scrolled,
+      "modal--scrolled-down": this.scrolledDown,
     });
     return (index.h(index.Host, null, index.h("section", { "aria-hidden": "true", "aria-label": this.label, class: className, id: "modal", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, index.h("div", { class: "modal__backdrop", onClick: this.onBackdropClick }), index.h("div", { class: "modal__body", role: "document" }, index.h("flip-button", { class: "modal__close-button", hideLabel: true, icon: "<flip-icon-close></flip-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), index.h("header", { class: "modal__header" }, index.h("flip-heading", { as: "h2", class: "modal__heading", level: 3, text: this.label })), index.h("div", { class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, index.h("slot", null)), index.h("footer", { class: "modal__controls" }, index.h("flip-button-group", { wrap: true }, this.secondaryActionLabel && (index.h("flip-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (index.h("flip-button", { intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))));
   }
@@ -96,5 +110,3 @@ const FlipModal = class {
 FlipModal.style = flipModalCss;
 
 exports.flip_modal = FlipModal;
-
-//# sourceMappingURL=flip-modal.cjs.entry.js.map

package/dist/cjs/flip-option-list-section.cjs.entry.js

@@ -17,5 +17,3 @@ const FlipOptionListSection = class {
 FlipOptionListSection.style = flipOptionListSectionCss;
 
 exports.flip_option_list_section = FlipOptionListSection;
-
-//# sourceMappingURL=flip-option-list-section.cjs.entry.js.map

package/dist/cjs/flip-pagination.cjs.entry.js

@@ -56,5 +56,3 @@ const FlipPagination = class {
 FlipPagination.style = flipPaginationCss;
 
 exports.flip_pagination = FlipPagination;
-
-//# sourceMappingURL=flip-pagination.cjs.entry.js.map

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

@@ -0,0 +1,141 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-72831c5f.js');
+const a11yDialog_esm = require('./a11y-dialog.esm-4a3287ed.js');
+const bodyScrollLock_esm = require('./bodyScrollLock.esm-f29f1a77.js');
+const index$1 = require('./index-b8470262.js');
+const utils = require('./utils-6b8d45f4.js');
+require('./_commonjsHelpers-a5111d61.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;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) {
+    index.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 = utils.isMobileViewport() ? "auto" : 1;
+  }
+  componentDidLoad() {
+    this.modal = new a11yDialog_esm.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 = utils.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)) {
+      bodyScrollLock_esm.disableBodyScroll(scrollContainer);
+    }
+  }
+  unlockBodyScroll() {
+    const scrollContainer = this.pdfViewer.shadowRoot.querySelector(".file-viewer-pdf__pages");
+    if (Boolean(scrollContainer)) {
+      bodyScrollLock_esm.enableBodyScroll(scrollContainer);
+    }
+  }
+  updateZoomSteps() {
+    this.zoomSteps = utils.isMobileViewport()
+      ? this.mobileZoomSteps
+      : this.desktopZoomSteps;
+  }
+  render() {
+    const className = index$1.classnames("pdf-reader", {
+      "pdf-reader--closing": this.closing,
+    });
+    return (index.h(index.Host, null, index.h("section", { "aria-hidden": "true", "aria-label": this.label, class: className, id: "pdf-reader", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, index.h("div", { class: "pdf-reader__body", role: "document" }, index.h("header", { class: "pdf-reader__header" }, index.h("span", { class: "pdf-reader__header-left" }, index.h("flip-button", { class: "pdf-reader__close-button", hideLabel: true, icon: "<flip-icon-close></flip-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), index.h("span", { class: "pdf-reader__label" }, this.label)), index.h("span", { class: "pdf-reader__header-center" }, index.h("span", { class: "pdf-reader__zoom-button-container" }, index.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 }), index.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 })), index.h("span", { class: "pdf-reader__zoom-select-container" }, index.h("select", { "aria-label": this.zoomSelectLabel, class: "pdf-reader__zoom-select", name: "zoom-select", id: "zoom-select", onChange: this.onZoomChange }, index.h("option", { selected: this.zoom === "auto", value: "auto" }, this.autoZoomLabel), this.zoomSteps.map((zoom) => (index.h("option", { key: zoom, selected: this.zoom === zoom, value: zoom }, zoom * 100, "%")))), index.h("flip-icon-expand-more", { class: "pdf-reader__zoom-select-icon" }))), index.h("span", { class: "pdf-reader__header-right" }, index.h("flip-button", { class: "pdf-reader__print-button", hideLabel: true, icon: "<flip-icon-print></flip-icon-print>", label: this.printButtonLabel, onClick: this.onPrintButtonClick }), index.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 }))), index.h("div", { class: "pdf-reader__content" }, index.h("flip-file-viewer", { active: this.active, file: this.file, onActivate: this.onActivate, ref: (el) => (this.viewer = el), type: "application/pdf", zoom: this.zoom }), index.h("div", { class: "pdf-reader__mobile-zoom-controls" }, index.h("button", { "aria-label": this.autoZoomLabel, class: "pdf-reader__mobile-zoom-button", onClick: this.onZoomAutoButtonClick, type: "button" }, this.zoom === "auto" ? (index.h("flip-icon-fullscreen-exit", null)) : (index.h("flip-icon-fullscreen", null))), index.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" }, index.h("flip-icon-add", null)), index.h("button", { "aria-label": this.zoomOutButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[0], onClick: this.onZoomOutButtonClick, type: "button" }, index.h("flip-icon-remove", null))))))));
+  }
+  get el() { return index.getElement(this); }
+};
+FlipPdfReader.style = flipPdfReaderCss;
+
+exports.flip_pdf_reader = FlipPdfReader;

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

@@ -0,0 +1,175 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-72831c5f.js');
+const floatingUi_dom_esm = require('./floating-ui.dom.esm-75453e4e.js');
+const bodyScrollLock_esm = require('./bodyScrollLock.esm-f29f1a77.js');
+const index$1 = require('./index-b8470262.js');
+const utils = require('./utils-6b8d45f4.js');
+require('./_commonjsHelpers-a5111d61.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-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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.placement = "bottom-start";
+    this.active = false;
+    this.closing = false;
+    this.onFocusOut = (event) => {
+      if (!this.active) {
+        return;
+      }
+      const target = event.relatedTarget || event.target;
+      const popoverLostFocus = !this.el.contains(target);
+      if (popoverLostFocus) {
+        this.close();
+      }
+    };
+    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 = utils.isMobileViewport();
+      if (!Boolean(this.triggerEl) || !Boolean(this.contentContainer)) {
+        return;
+      }
+      if (mobile) {
+        this.position = undefined;
+        return;
+      }
+      this.position = await floatingUi_dom_esm.computePosition(this.triggerEl, this.contentContainer, {
+        middleware: [floatingUi_dom_esm.shift(), floatingUi_dom_esm.flip()],
+        placement: this.placement,
+        strategy: "fixed",
+      });
+    };
+    this.onCloseButtonClick = () => {
+      this.close();
+    };
+  }
+  componentDidLoad() {
+    this.connectTrigger();
+    this.updateChildMenuItems();
+    this.updateTriggerAttributes();
+  }
+  disconnectedCallback() {
+    bodyScrollLock_esm.enableBodyScroll(this.scrollContainer);
+  }
+  onWindowClick(event) {
+    const target = event.target;
+    if (!this.el.contains(target)) {
+      this.close();
+    }
+  }
+  /**
+   * Close the popover.
+   * @returns
+   */
+  async close() {
+    var _a;
+    if (this.closing || !this.active) {
+      return;
+    }
+    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() {
+    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 = floatingUi_dom_esm.autoUpdate(this.triggerEl, this.contentContainer, this.reposition);
+      this.scrollContainer.scrollTop = 0;
+      this.lockBodyScroll();
+    });
+  }
+  connectTrigger() {
+    this.triggerEl = utils.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;
+    }
+    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 = utils.querySelectorAllDeep(this.el, '[role="menuitem"]');
+  }
+  lockBodyScroll() {
+    const mobile = utils.isMobileViewport();
+    if (!mobile) {
+      return;
+    }
+    bodyScrollLock_esm.disableBodyScroll(this.scrollContainer);
+  }
+  unlockBodyScroll() {
+    bodyScrollLock_esm.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, onFocusout: this.onFocusOut }, index.h("div", { class: className, onKeyDown: this.onKeydown }, index.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` : "",
+      } }, 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.onCloseButtonClick })))));
+  }
+  get el() { return index.getElement(this); }
+};
+FlipPopover.style = flipPopoverCss;
+
+exports.flip_popover = FlipPopover;

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

@@ -27,5 +27,3 @@ const FlipProgressIndicator = class {
 FlipProgressIndicator.style = flipProgressIndicatorCss;
 
 exports.flip_progress_indicator = FlipProgressIndicator;
-
-//# sourceMappingURL=flip-progress-indicator.cjs.entry.js.map

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-72831c5f.js');
 
-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 = class {
   constructor(hostRef) {
@@ -50,5 +50,3 @@ const FlipRadioGroup = class {
 FlipRadioGroup.style = flipRadioGroupCss;
 
 exports.flip_radio_group = FlipRadioGroup;
-
-//# sourceMappingURL=flip-radio-group.cjs.entry.js.map

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

@@ -6,7 +6,7 @@ const index = require('./index-72831c5f.js');
 const index$1 = require('./index-b8470262.js');
 require('./_commonjsHelpers-a5111d61.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-12);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);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 FlipRadio = class {
   constructor(hostRef) {
@@ -36,5 +36,3 @@ const FlipRadio = class {
 FlipRadio.style = flipRadioCss;
 
 exports.flip_radio = FlipRadio;
-
-//# sourceMappingURL=flip-radio.cjs.entry.js.map

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

@@ -29,5 +29,3 @@ const FlipResourceListFileItem = class {
 FlipResourceListFileItem.style = flipResourceListFileItemCss;
 
 exports.flip_resource_list_file_item = FlipResourceListFileItem;
-
-//# sourceMappingURL=flip-resource-list-file-item.cjs.entry.js.map

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

@@ -46,5 +46,3 @@ const FlipSearch = class {
 FlipSearch.style = flipSearchCss;
 
 exports.flip_search = FlipSearch;
-
-//# sourceMappingURL=flip-search.cjs.entry.js.map

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

@@ -27,5 +27,3 @@ const FlipStack = class {
 FlipStack.style = flipStackCss;
 
 exports.flip_stack = FlipStack;
-
-//# sourceMappingURL=flip-stack.cjs.entry.js.map

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

@@ -91,5 +91,3 @@ const FlipSwitch = class {
 FlipSwitch.style = flipSwitchCss;
 
 exports.flip_switch = FlipSwitch;
-
-//# sourceMappingURL=flip-switch.cjs.entry.js.map

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

@@ -20,5 +20,3 @@ const FlipTab = class {
 FlipTab.style = flipTabCss;
 
 exports.flip_tab = FlipTab;
-
-//# sourceMappingURL=flip-tab.cjs.entry.js.map

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

@@ -6,7 +6,7 @@ const index = require('./index-72831c5f.js');
 const index$1 = require('./index-b8470262.js');
 require('./_commonjsHelpers-a5111d61.js');
 
-const flipTabsCss = ".sc-flip-tabs-h{display:block;width:100%}.sc-flip-tabs-h *.sc-flip-tabs{box-sizing:border-box}.tabs.sc-flip-tabs{width:100%}.tabs__tab-bar.sc-flip-tabs{position:relative;display:flex;width:100%;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:flex-start;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (--from-tablet){.tabs__tab-bar.sc-flip-tabs{padding-right:0;padding-left:0}}.tabs__tab.sc-flip-tabs{display:block;min-width:0;margin:0;padding:var(--s-space-4) 0;border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);cursor:pointer}.tabs__tab.sc-flip-tabs:focus-visible{outline:none}.tabs__tab.sc-flip-tabs:focus-visible .tabs__tab-label.sc-flip-tabs{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tabs__tab.sc-flip-tabs:not(:first-of-type){padding-left:var(--s-space-8)}.tabs__tab.sc-flip-tabs:not(:last-of-type){padding-right:var(--s-space-8)}.tabs__tab-label.sc-flip-tabs{display:block;overflow:hidden;width:100%;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;text-overflow:ellipsis}.tabs__tab--active.sc-flip-tabs{color:var(--s-text-highlight)}.tabs__indicator.sc-flip-tabs{position:absolute;bottom:0;left:0;width:0;height:0.125rem;border-radius:0.0625rem;background-color:var(--s-border-highlight);transition:background-color 0.15s, transform 0.15s, width 0.15s;transform:translate3d(0, 0, 0);pointer-events:none}@media (prefers-reduced-motion){.tabs__indicator.sc-flip-tabs{transition:none}}";
+const flipTabsCss = ".sc-flip-tabs-h{display:block;width:100%}.sc-flip-tabs-h *.sc-flip-tabs{box-sizing:border-box}.tabs.sc-flip-tabs{width:100%}.tabs__tab-bar.sc-flip-tabs{position:relative;display:flex;width:100%;justify-content:flex-start;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.tabs__tab.sc-flip-tabs{position:relative;display:block;min-width:0;margin:0;padding:var(--s-space-4) var(--s-space-8);border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);cursor:pointer}.tabs__tab.sc-flip-tabs:focus-visible{outline:none}.tabs__tab.sc-flip-tabs:focus-visible .tabs__tab-label.sc-flip-tabs{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tabs__tab.sc-flip-tabs:not(.tabs__tab--active):hover:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-default);content:\"\";transform:translateX(-50%);pointer-events:none}.tabs__tab-label.sc-flip-tabs{display:block;overflow:hidden;width:100%;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;text-overflow:ellipsis}.tabs__tab--active.sc-flip-tabs{color:var(--s-text-highlight)}.tabs__tab--active.sc-flip-tabs:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-highlight);content:\"\";transform:translateX(-50%);pointer-events:none}";
 
 const FlipTabs = class {
   constructor(hostRef) {
@@ -23,27 +23,10 @@ const FlipTabs = class {
         this.activateNextTab();
       }
     };
-    this.onMouseEnter = (event, tab) => {
-      if (tab.tabId === this.activeTab) {
-        this.highlightedTab = undefined;
-        return;
-      }
-      this.highlightedTab =
-        event.target.closest(".tabs__tab") || undefined;
-    };
-    this.onMouseLeave = () => {
-      this.highlightedTab = undefined;
-    };
   }
   componentWillLoad() {
     this.collectTabs();
   }
-  componentDidRender() {
-    this.updateIndicatorPosition();
-  }
-  onWindowResize() {
-    this.updateIndicatorPosition();
-  }
   /**
    * Activate a tab.
    * @param tabId
@@ -58,7 +41,6 @@ const FlipTabs = class {
     if (!Boolean(tab)) {
       return;
     }
-    this.highlightedTab = undefined;
     tab.active = true;
     this.tabActivated.emit(tab);
   }
@@ -88,23 +70,6 @@ const FlipTabs = class {
     const initialTab = this.tabs.find((tab) => tab.tabId === this.initialTab);
     this.activateTab(Boolean(initialTab) ? initialTab.tabId : this.tabs[0].tabId);
   }
-  updateIndicatorPosition() {
-    const activeTab = this.tabs.find((tab) => tab.tabId === this.activeTab);
-    if (!Boolean(activeTab) && !Boolean(this.highlightedTab)) {
-      this.indicatorEl.style.width = "";
-      this.indicatorEl.style.transform = "";
-      this.indicatorEl.style.backgroundColor = "";
-      return;
-    }
-    const activeTabEl = this.highlightedTab ||
-      this.el.querySelector(`#tab-${activeTab.tabId}`);
-    const activeTabLabelEl = activeTabEl.querySelector(".tabs__tab-label");
-    this.indicatorEl.style.width = `${activeTabLabelEl.getBoundingClientRect().width / 16}rem`;
-    this.indicatorEl.style.transform = `translate3d(${activeTabLabelEl.offsetLeft / 16}rem, 0, 0)`;
-    this.indicatorEl.style.backgroundColor = Boolean(this.highlightedTab)
-      ? "var(--s-border-default)"
-      : "";
-  }
   render() {
     return (index.h(index.Host, null, index.h("div", { class: "tabs" }, index.h("div", { "aria-label": this.label, class: "tabs__tab-bar", onKeyDown: this.onKeyDown, role: "tablist" }, this.tabs.map((tab) => {
       const isActive = tab.tabId === this.activeTab;
@@ -113,15 +78,11 @@ const FlipTabs = class {
       });
       return (index.h("button", { "aria-controls": tab.tabId, "aria-selected": isActive ? "true" : "false", class: className, id: `tab-${tab.tabId}`, key: tab.tabId,
         // eslint-disable-next-line react/jsx-no-bind
-        onClick: () => this.activateTab(tab.tabId),
-        // eslint-disable-next-line react/jsx-no-bind
-        onMouseEnter: (event) => this.onMouseEnter(event, tab), onMouseLeave: this.onMouseLeave, role: "tab", tabIndex: isActive ? 0 : -1, type: "button" }, index.h("span", { class: "tabs__tab-label" }, tab.label)));
-    }), index.h("span", { class: "tabs__indicator", ref: (el) => (this.indicatorEl = el) })), index.h("slot", null))));
+        onClick: () => this.activateTab(tab.tabId), role: "tab", tabIndex: isActive ? 0 : -1, type: "button" }, index.h("span", { class: "tabs__tab-label" }, tab.label)));
+    })), index.h("slot", null))));
   }
   get el() { return index.getElement(this); }
 };
 FlipTabs.style = flipTabsCss;
 
 exports.flip_tabs = FlipTabs;
-
-//# sourceMappingURL=flip-tabs.cjs.entry.js.map

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

@@ -27,5 +27,3 @@ const FlipTag = class {
 FlipTag.style = flipTagCss;
 
 exports.flip_tag = FlipTag;
-
-//# sourceMappingURL=flip-tag.cjs.entry.js.map