@getflip/swirl-components 0.0.0-beta-20260114160010

package/dist/cjs/swirl-popover_2.cjs.entry.js

@@ -0,0 +1,493 @@
+'use strict';
+
+var index = require('./index-31zRgX-7.js');
+var floatingUi_dom_browser_min = require('./floating-ui.dom.browser.min-PA1q-Uql.js');
+var bodyScrollLock_esm = require('./bodyScrollLock.esm-DMDeaEpJ.js');
+var index$1 = require('./index-DcAhLZUH.js');
+var utils = require('./utils-UfZG-xPD.js');
+
+const swirlPopoverCss = ":host{position:relative;z-index:var(--s-z-40);display:contents}:host *{box-sizing:border-box}:host{--swirl-resource-list-item-background-default:var(\n    --s-surface-overlay-default\n  );--swirl-resource-list-item-background-hovered:var(\n    --s-surface-overlay-hovered\n  );--swirl-resource-list-item-background-pressed:var(\n    --s-surface-overlay-pressed\n  )}.popover{border:none;padding:0;margin:0}.popover::backdrop{display:none}.popover--active:not(.popover--closing) .popover__backdrop{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{animation:none}}.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{transform-origin:top left;animation:0.15s popover-fade-scale-in-xy}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--closing .popover__backdrop{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{animation:none}}.popover--closing .popover__content{animation:0.15s popover-slide-out forwards}@media (min-width: 768px){.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}}@media (prefers-reduced-motion){.popover--closing .popover__content{animation:none}}.popover--inactive .popover__content{display:none}@media (max-width: 767px){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:none}}.popover--fullscreen-bottom-sheet .popover__backdrop{display:none}.popover--fullscreen-bottom-sheet .popover__content{top:0;border-top-left-radius:0;border-top-right-radius:0}.popover--fullscreen-bottom-sheet .popover__scroll-container{height:100%;max-height:none;padding-top:0;padding-bottom:0}.popover--fullscreen-bottom-sheet .popover__handle{display:none}}@media (min-width: 768px){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-y}}@media (prefers-reduced-motion){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}}@media (prefers-reduced-motion){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--transparent .popover__content{background-color:transparent;box-shadow:none}}@media (min-width: 768px){.popover--transparent .popover__scroll-container{padding:0}}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{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-base);animation:none;box-shadow:var(--s-shadow-level-2)}}.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:0;padding-bottom:0}}@media (min-width: 768px){.popover--padded .popover__scroll-container{padding:var(--s-space-4)}}.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}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-scale-in-xy{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in-y{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}";
+
+const SwirlPopover = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.popoverClose = index.createEvent(this, "popoverClose", 7);
+        this.popoverOpen = index.createEvent(this, "popoverOpen", 7);
+        this.animation = "scale-in-xy";
+        this.enableFlip = true;
+        this.maxHeight = "22rem";
+        this.offset = 8;
+        this.padded = true;
+        this.placement = "bottom-start";
+        this.returnFocusToTrigger = true;
+        this.active = false;
+        this.closing = false;
+        this.togglePopover = (event) => {
+            event.stopPropagation();
+            if (this.active) {
+                this.close();
+            }
+            else {
+                this.open();
+            }
+        };
+        this.onKeydown = (event) => {
+            if (event.code === "Escape" && this.active) {
+                event.stopImmediatePropagation();
+                event.stopPropagation();
+                this.close();
+            }
+        };
+        this.reposition = async () => {
+            const mobile = utils.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 shiftPaddingX = utils.getPixelsFromRemToken("--s-space-16");
+            const shiftWithPadding = floatingUi_dom_browser_min.k({
+                padding: {
+                    left: shiftPaddingX,
+                    right: shiftPaddingX,
+                },
+            });
+            const middleware = this.enableFlip
+                ? [floatingUi_dom_browser_min.D(offsetOptions), shiftWithPadding, floatingUi_dom_browser_min.b()]
+                : [floatingUi_dom_browser_min.D(offsetOptions), shiftWithPadding];
+            this.position = await floatingUi_dom_browser_min.P(this.triggerEl, this.contentContainer, {
+                middleware,
+                placement: this.placement,
+                strategy: "fixed",
+            });
+        };
+        this.onCloseButtonClick = () => {
+            this.close();
+        };
+    }
+    componentDidLoad() {
+        this.connectTrigger();
+        this.updateTriggerAttributes();
+        if (Boolean(this.trigger)) {
+            console.warn('[Swirl] The "trigger" prop of swirl-popover is deprecated and will be removed with the next major release. Please use the swirl-popover-trigger component instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlpopovertrigger--docs');
+        }
+    }
+    disconnectedCallback() {
+        this.unlockBodyScroll();
+    }
+    onWindowFocusIn(event) {
+        if (!this.active) {
+            return;
+        }
+        const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+        const isWKWebView = "webkit" in window;
+        const isSafariOrWKWebView = isSafari || isWKWebView;
+        const target = event.target;
+        const relatedTarget = event.relatedTarget;
+        const activeElement = utils.getActiveElement();
+        const swirlComponentsExcludedFromAutoClosing = ["SWIRL-TAB"];
+        // Check if the focus has moved outside the popover or its trigger.
+        const focusIsOutsidePopover = !this.el.contains(target) && !this.el.contains(activeElement);
+        const focusIsNotOnTrigger = target !== this.triggerEl && !this.triggerEl?.contains(target);
+        const extraCheckForSafariOrWKWebView = isSafariOrWKWebView &&
+            !this.el.contains(relatedTarget || target) &&
+            relatedTarget !== this.el;
+        // Close the popover if the focus is outside and additional checks for Safari or WKWebView pass.
+        if (!swirlComponentsExcludedFromAutoClosing.includes(target.tagName) &&
+            focusIsOutsidePopover &&
+            focusIsNotOnTrigger &&
+            (!isSafariOrWKWebView || extraCheckForSafariOrWKWebView)) {
+            this.close();
+        }
+    }
+    onWindowBlur() {
+        if (!this.active || this.closing) {
+            return;
+        }
+        const activeElement = document.activeElement;
+        const elementsIncludedForAutoClosing = ["IFRAME"];
+        if (activeElement &&
+            elementsIncludedForAutoClosing.includes(activeElement.tagName)) {
+            this.close();
+        }
+    }
+    onWindowClick(event) {
+        if (!this.active || this.closing) {
+            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 = target === this.triggerEl ||
+            this.triggerEl.contains(target) ||
+            event.composedPath().includes(this.triggerEl);
+        if (!clickedChild && !clickedShadowChild && !clickedTrigger) {
+            this.close();
+        }
+    }
+    /**
+     * Close the popover.
+     * @returns
+     */
+    async close(disableFocus) {
+        if (this.closing || !this.active) {
+            return;
+        }
+        this.popoverClose.emit();
+        if (this.disableAutoUpdate) {
+            this.disableAutoUpdate();
+        }
+        this.closing = true;
+        setTimeout(() => {
+            this.popoverEl?.hidePopover();
+            this.active = false;
+            this.closing = false;
+            this.updateTriggerAttributes(this.openedVia);
+            this.openedVia = undefined;
+        }, 150);
+        this.unlockBodyScroll();
+        if (this.returnFocusToTrigger && !disableFocus) {
+            this.getNativeTriggerElement()?.focus();
+        }
+    }
+    /**
+     * Open the popover.
+     * @returns
+     */
+    async open(triggerEl, disableFocus, via) {
+        this.triggerEl = triggerEl || this.triggerEl;
+        if (this.active || !Boolean(this.triggerEl)) {
+            return;
+        }
+        this.adjustWidth();
+        this.active = true;
+        this.openedVia = via;
+        this.updateTriggerAttributes(via);
+        const focusableChildren = this.getFocusableChildren();
+        requestAnimationFrame(async () => {
+            this.popoverEl?.showPopover();
+            await this.reposition();
+            this.popoverOpen.emit({ position: this.position });
+            if (focusableChildren.length > 0 && !disableFocus) {
+                focusableChildren[0].focus();
+            }
+            else if (!disableFocus) {
+                this.contentContainer.focus();
+            }
+            if (this.disableAutoUpdate) {
+                this.disableAutoUpdate();
+            }
+            this.disableAutoUpdate = floatingUi_dom_browser_min.N(this.triggerEl, this.contentContainer, () => this.reposition());
+            this.scrollContainer.scrollTop = 0;
+            this.lockBodyScroll();
+        });
+    }
+    /**
+     * Return whether the popover is open.
+     * @returns Promise<boolean>
+     */
+    async isOpen() {
+        return this.active && !this.closing;
+    }
+    /**
+     * Toggles the popover.
+     */
+    async toggle(triggerEl, via) {
+        if (this.active) {
+            this.close();
+        }
+        else {
+            this.open(triggerEl, undefined, via);
+        }
+    }
+    connectTrigger() {
+        if (!Boolean(this.trigger)) {
+            this.triggerEl = undefined;
+            return;
+        }
+        this.triggerEl =
+            typeof this.trigger === "string"
+                ? utils.querySelectorAllDeep(this.triggerContainer || document.body, `#${this.trigger}`)[0]
+                : this.trigger;
+        if (!Boolean(this.triggerEl)) {
+            return;
+        }
+        this.triggerEl.addEventListener("click", (event) => {
+            this.togglePopover(event);
+        });
+    }
+    getNativeTriggerElement() {
+        return this.triggerEl?.tagName.startsWith("SWIRL-")
+            ? (this.triggerEl?.children[0] ||
+                this.triggerEl?.shadowRoot?.children[0] ||
+                this.triggerEl)
+            : this.triggerEl;
+    }
+    updateTriggerAttributes(controlledVia) {
+        if (!Boolean(this.triggerEl)) {
+            return;
+        }
+        const nativeTriggerEl = this.getNativeTriggerElement();
+        if (controlledVia !== "hover") {
+            nativeTriggerEl.setAttribute("aria-controls", this.el.id);
+            nativeTriggerEl.setAttribute("aria-expanded", String(this.active));
+        }
+        else {
+            nativeTriggerEl.removeAttribute("aria-controls");
+            nativeTriggerEl.removeAttribute("aria-expanded");
+        }
+        nativeTriggerEl.setAttribute("aria-haspopup", "dialog");
+    }
+    getFocusableChildren() {
+        return utils.querySelectorAllDeep(this.el, '[role="menuitem"], [role="menuitemradio"], [role="option"]');
+    }
+    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 = utils.isMobileViewport();
+        if (!mobile || this.disableScrollLock || !Boolean(this.scrollContainer)) {
+            return;
+        }
+        bodyScrollLock_esm.disableBodyScroll(this.scrollContainer);
+    }
+    unlockBodyScroll() {
+        const mobile = utils.isMobileViewport();
+        if (!mobile || this.disableScrollLock || !Boolean(this.scrollContainer)) {
+            return;
+        }
+        bodyScrollLock_esm.enableBodyScroll(this.scrollContainer);
+    }
+    render() {
+        const mobile = !window.matchMedia("(min-width: 768px)").matches;
+        const className = index$1.classnames("popover", `popover--animation-${this.animation}`, `popover--placement-${this.position?.placement}`, {
+            "popover--active": this.active,
+            "popover--closing": this.closing,
+            "popover--fullscreen-bottom-sheet": this.fullscreenBottomSheet,
+            "popover--inactive": !this.active,
+            "popover--transparent": this.transparent,
+            "popover--padded": this.padded,
+        });
+        return (index.h(index.Host, { key: '4905e6af07daf295378a0fc9b89b00dff6113e9a' }, index.h("div", { key: '90dca12d4090a352c8b4a77189e588073f90ea4e', popover: "manual", class: className, onKeyDown: this.onKeydown, ref: (el) => (this.popoverEl = el) }, index.h("div", { key: '411ac63ff804cec01f4e1f96e37e9696e5f6b055', "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
+                top: Boolean(this.position) ? `${this.position?.y}px` : "",
+                left: Boolean(this.position) ? `${this.position?.x}px` : "",
+            }, tabindex: "-1" }, index.h("span", { key: '3ee6965de6e4090f83a22e6844629c462c543d32', class: "popover__handle" }), index.h("div", { key: '948788c7fc7dc6eade8efab8bcb9eecafb22b838', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
+                maxHeight: !mobile && Boolean(this.maxHeight)
+                    ? this.maxHeight
+                    : undefined,
+            } }, index.h("slot", { key: '2c7d7b75b2bac8d359833bbc0fe00f3654c51bb7' }))), this.active && (index.h("div", { key: '0325a8fa6ac14c9b08884b36fb193cf09692ca5b', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
+    }
+    get el() { return index.getElement(this); }
+};
+SwirlPopover.style = swirlPopoverCss;
+
+const swirlPopoverTriggerCss = ".sc-swirl-popover-trigger-h{display:contents}";
+
+const SwirlPopoverTrigger = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.hidePopoverWhenInvisible = true;
+        this.setAriaAttributes = true;
+        this.triggerOnClick = true;
+        this.triggerOnHover = false;
+        this.triggerIsActive = false;
+        this.popoverMouseEnter = () => {
+            this.stopHoverLingerTimer();
+        };
+        this.popoverMouseLeave = () => {
+            if (this.triggerIsActive) {
+                this.mouseleaveHandler();
+            }
+        };
+        this.onMouseenter = () => {
+            if (!this.triggerOnHover)
+                return;
+            this.stopHoverLingerTimer();
+            this.triggerIsActive = true;
+            this.hoverDelayReference = setTimeout(() => {
+                this.hoverDelayReference = undefined;
+                if (this.triggerOnHover) {
+                    this.mouseenterHandler();
+                }
+            }, this.hoverDelay);
+        };
+        this.mouseenterHandler = () => {
+            const popoverEl = this.getPopoverEl();
+            const triggerEl = this.getTriggerEl();
+            popoverEl.open(triggerEl, true, "hover");
+            popoverEl.addEventListener("popoverOpen", () => {
+                this.updateTriggerElAriaAttributes(true);
+            }, { once: true });
+            popoverEl.addEventListener("popoverClose", () => {
+                this.updateTriggerElAriaAttributes(false);
+            }, { once: true });
+        };
+        this.onMouseleave = () => {
+            clearTimeout(this.hoverDelayReference);
+            this.mouseleaveHandler();
+        };
+        this.mouseleaveHandler = () => {
+            if (!this.triggerOnHover)
+                return;
+            this.startHoverLingerTimer();
+        };
+        this.onClick = () => {
+            if (!this.triggerOnClick)
+                return;
+            const popoverEl = this.getPopoverEl();
+            const triggerEl = this.getTriggerEl();
+            popoverEl.toggle(triggerEl, "click");
+            popoverEl.addEventListener("popoverOpen", () => {
+                this.updateTriggerElAriaAttributes(true);
+            }, { once: true });
+            popoverEl.addEventListener("popoverClose", () => {
+                this.updateTriggerElAriaAttributes(false);
+            }, { once: true });
+        };
+        this.updateTriggerElAriaAttributes = (open) => {
+            if (!this.setAriaAttributes) {
+                return;
+            }
+            const triggerEl = this.getTriggerEl();
+            if (!Boolean(triggerEl)) {
+                return;
+            }
+            const popoverId = this.getPopoverEl()?.id;
+            if (triggerEl.tagName.startsWith("SWIRL-")) {
+                if (!this.triggerOnHover) {
+                    triggerEl.setAttribute("swirl-aria-controls", popoverId);
+                    triggerEl.setAttribute("swirl-aria-expanded", String(open || "false"));
+                }
+                else {
+                    triggerEl.removeAttribute("swirl-aria-controls");
+                    triggerEl.removeAttribute("swirl-aria-expanded");
+                }
+                triggerEl.setAttribute("swirl-aria-haspopup", "dialog");
+            }
+            else {
+                if (!this.triggerOnHover) {
+                    triggerEl.setAttribute("aria-controls", popoverId);
+                    triggerEl.setAttribute("aria-expanded", String(open || "false"));
+                }
+                else {
+                    triggerEl.removeAttribute("aria-controls");
+                    triggerEl.removeAttribute("aria-expanded");
+                }
+                triggerEl.setAttribute("aria-haspopup", "dialog");
+            }
+        };
+    }
+    componentDidLoad() {
+        this.updateTriggerElAriaAttributes();
+        this.setupHoverListeners();
+        if (this.hidePopoverWhenInvisible) {
+            this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange.bind(this), {
+                root: this.parentScrollContainer,
+                threshold: 1,
+            });
+            const firstChild = this.el.querySelector("*");
+            if (!Boolean(firstChild)) {
+                return;
+            }
+            this.intersectionObserver.observe(firstChild);
+        }
+    }
+    disconnectedCallback() {
+        this.intersectionObserver?.disconnect();
+        const popoverEl = this.getPopoverEl();
+        if (Boolean(popoverEl)) {
+            popoverEl.removeEventListener("mouseenter", this.popoverMouseEnter);
+            popoverEl.removeEventListener("mouseleave", this.popoverMouseLeave);
+        }
+    }
+    watchPopover() {
+        this.updateTriggerElAriaAttributes();
+    }
+    watchHover() {
+        this.updateTriggerElAriaAttributes();
+        clearTimeout(this.hoverDelayReference);
+        clearTimeout(this.hoverLingerReference);
+    }
+    getPopoverEl() {
+        return typeof this.swirlPopover === "string"
+            ? document.querySelector(`#${this.swirlPopover}`)
+            : this.swirlPopover?.el ??
+                this.swirlPopover;
+    }
+    getTriggerEl() {
+        if (this.el.children.length !== 1) {
+            console.warn('[Swirl] The "swirl-popover-trigger" component expects exactly one child element.');
+        }
+        return this.el.children[0];
+    }
+    onVisibilityChange(entries) {
+        const triggerIsVisible = entries[0].isIntersecting;
+        if (!triggerIsVisible && this.isPopoverOpen()) {
+            this.getPopoverEl()?.close();
+        }
+    }
+    setupHoverListeners() {
+        const popoverEl = this.getPopoverEl();
+        if (Boolean(popoverEl)) {
+            popoverEl.addEventListener("mouseenter", this.popoverMouseEnter);
+            popoverEl.addEventListener("mouseleave", this.popoverMouseLeave);
+        }
+    }
+    startHoverLingerTimer() {
+        clearTimeout(this.hoverLingerReference);
+        this.hoverLingerReference = setTimeout(() => {
+            if (this.triggerIsActive && this.isPopoverOpen()) {
+                this.getPopoverEl().close(true);
+            }
+            this.triggerIsActive = false;
+        }, this.hoverLingerDuration);
+    }
+    stopHoverLingerTimer() {
+        clearTimeout(this.hoverLingerReference);
+    }
+    isPopoverOpen() {
+        const popover = this.getPopoverEl();
+        const isActive = popover?.shadowRoot.firstChild?.classList.contains("popover--active");
+        return isActive;
+    }
+    render() {
+        return (index.h(index.Host, { key: 'f47fa501d4706eb541c6d11cc93962339b1d3c59', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, index.h("slot", { key: 'e170ef35998bf793fd053dc0c5788c906a4e464b' })));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "swirlPopover": ["watchPopover"],
+        "triggerOnHover": ["watchHover"]
+    }; }
+};
+SwirlPopoverTrigger.style = swirlPopoverTriggerCss;
+
+exports.swirl_popover = SwirlPopover;
+exports.swirl_popover_trigger = SwirlPopoverTrigger;

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

@@ -0,0 +1,26 @@
+'use strict';
+
+var index = require('./index-31zRgX-7.js');
+var index$1 = require('./index-DcAhLZUH.js');
+
+const swirlProgressIndicatorCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}:host(.circle){display:inline-flex;width:auto}.progress-indicator--variant-bar{display:block;width:100%;height:0.25rem;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress-indicator--variant-bar::-webkit-progress-bar{border-radius:0.125rem;background-color:var(--s-surface-raised-default)}.progress-indicator--variant-bar::-webkit-progress-value{border-radius:0.125rem;background-color:var(--s-border-highlight);-webkit-transition:width 0.25s;transition:width 0.25s}.progress-indicator--variant-bar::-moz-progress-bar{height:0.25rem;border-radius:0.125rem;background-color:var(--s-border-highlight);-moz-transition:width 0.25s;transition:width 0.25s}@media (prefers-reduced-motion){.progress-indicator--variant-bar::-moz-progress-bar{-moz-transition:none;transition:none}}.progress-indicator--variant-bar.progress-indicator--size-s{height:0.125rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-bar{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-value{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-moz-progress-bar{height:0.125rem;border-radius:0.0625rem}.progress-indicator--variant-circle{position:relative;display:inline-flex;overflow:hidden;width:3rem;height:3rem}.progress-indicator--variant-circle.progress-indicator--size-s{width:1.5rem;height:1.5rem}.progress-indicator__circle{position:absolute;width:100%;height:100%;transform:rotate(-90deg);inset:0}.progress-indicator__circle-background{stroke:var(--s-border-default);stroke-linecap:round}.progress-indicator__circle-value{transition:stroke-dashoffset 0.25s;stroke:var(--s-interactive-primary-default);stroke-linecap:round}@media (prefers-reduced-motion){.progress-indicator__circle-value{transition:none}}";
+
+const SwirlProgressIndicator = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.size = "m";
+        this.value = 0;
+        this.variant = "bar";
+    }
+    render() {
+        const className = index$1.classnames("progress-indicator", `progress-indicator--size-${this.size}`, `progress-indicator--variant-${this.variant}`);
+        const strokeWidth = this.size === "m" ? 4 : 2;
+        const radius = this.size === "m" ? 20 : 10;
+        const circumference = Math.round(radius * 2 * Math.PI);
+        const dashOffset = Math.round(circumference * ((100 - this.value) / 100));
+        return (index.h(index.Host, { key: 'd76050eb18303a381648fcc81e0d697384a4a8be', class: this.variant }, this.variant === "bar" && (index.h("progress", { key: '1dafebe862bbb05b8c1114bd86d5f02d6fdacbff', "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className, max: 100, value: this.value })), this.variant === "circle" && (index.h("span", { key: 'd6d2fe1fb8172e0a6421680c281a2c12db288818', role: "progressbar", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className }, index.h("svg", { key: 'ad431537d9e9ec4c3ba97f5f36cd202afba690cc', class: "progress-indicator__circle", focusable: "false", viewBox: `0 0 ${(radius + strokeWidth) * 2} ${(radius + strokeWidth) * 2}` }, index.h("circle", { key: '0b0eee62eefde5c43e5b9ba040a8cd62f1515262', class: "progress-indicator__circle-background", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth }), index.h("circle", { key: '406fb2f982f14f7f3d447c4fb19c08c1a8aedb53', class: "progress-indicator__circle-value", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth, "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))))));
+    }
+};
+SwirlProgressIndicator.style = swirlProgressIndicatorCss;
+
+exports.swirl_progress_indicator = SwirlProgressIndicator;

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

@@ -0,0 +1,51 @@
+'use strict';
+
+var index = require('./index-31zRgX-7.js');
+
+const swirlRadioGroupCss = ".sc-swirl-radio-group-h{display:block}.sc-swirl-radio-group-h *.sc-swirl-radio-group{box-sizing:border-box}.radio-group.sc-swirl-radio-group{display:flex;flex-direction:column;gap:var(--s-space-12)}";
+
+const SwirlRadioGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChange = index.createEvent(this, "valueChange", 7);
+    }
+    componentDidLoad() {
+        this.radioButtons = Array.from(this.el.querySelectorAll("swirl-radio"));
+        this.initValue();
+        this.handleValueChanges();
+    }
+    initValue() {
+        if (this.value === undefined) {
+            return;
+        }
+        const radioWithValue = this.radioButtons.find((radio) => radio.value === this.value);
+        if (!Boolean(radioWithValue)) {
+            return;
+        }
+        radioWithValue.checked = true;
+    }
+    handleValueChanges() {
+        for (const [key, radio] of Object.entries(this.radioButtons)) {
+            radio.addEventListener("valueChange", (event) => {
+                event.stopPropagation();
+                if (radio.checked === true || radio.checked === "true") {
+                    this.value = radio.value;
+                    this.valueChange.emit(radio.value);
+                    this.radioButtons.forEach((r, k) => {
+                        if (String(k) === key) {
+                            return;
+                        }
+                        r.checked = false;
+                    });
+                }
+            });
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: 'c47233fd803c236e083edee33c7bfdbe415a2c06', "aria-describedby": this.swirlAriaDescribedby, role: "radiogroup" }, index.h("div", { key: '4959e9432ebe509a937a3e88b5bf02965acaf3c6', class: "radio-group" }, index.h("slot", { key: 'a51588006044b2770989f4d767511ffecd247eb4' }))));
+    }
+    get el() { return index.getElement(this); }
+};
+SwirlRadioGroup.style = swirlRadioGroupCss;
+
+exports.swirl_radio_group = SwirlRadioGroup;

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

@@ -0,0 +1,45 @@
+'use strict';
+
+var index = require('./index-31zRgX-7.js');
+var index$1 = require('./index-DcAhLZUH.js');
+
+const swirlRadioCss = ".sc-swirl-radio-h{display:inline-flex}.sc-swirl-radio-h *.sc-swirl-radio{box-sizing:border-box}.radio.sc-swirl-radio{display:inline-flex;line-height:var(--s-line-height-base);cursor:pointer}.radio.sc-swirl-radio:focus-within .radio__box.sc-swirl-radio{box-shadow:0 0 0 0.0625rem var(--s-background-default),\n      0 0 0 0.1875rem var(--s-focus-default)}.radio--variant-card.sc-swirl-radio{width:100%;padding:var(--s-space-16);border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-sm);background-color:var(--s-surface)}.radio--variant-card.sc-swirl-radio:focus-within{box-shadow:0 0 0 0.125rem var(--s-background-default),\n      0 0 0 0.25rem var(--s-focus-default)}.radio--variant-card.sc-swirl-radio:focus-within .radio__box.sc-swirl-radio{box-shadow:none}.radio--variant-card.sc-swirl-radio:hover:not(.radio--disabled){background-color:var(--s-surface-hovered)}.radio--variant-card.sc-swirl-radio:active:not(.radio--disabled){background-color:var(--s-surface-pressed)}.radio--variant-card.radio--checked.sc-swirl-radio:not(.radio--disabled){border-color:var(--s-border-highlight)}.radio--variant-card.radio--invalid.sc-swirl-radio:not(.radio--disabled){border-color:var(--s-border-critical)}.radio--checked.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio{position:relative;border-color:var(--s-icon-highlight);background-color:var(--s-icon-highlight)}.radio--checked.sc-swirl-radio .radio__box.sc-swirl-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-swirl-radio .radio__box.sc-swirl-radio,.radio--invalid.radio--indeterminate.sc-swirl-radio .radio__box.sc-swirl-radio{background-color:var(--s-icon-critical)}.radio--invalid.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-critical)}.radio--disabled.sc-swirl-radio{cursor:default}.radio--disabled.radio--checked.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled);background-color:transparent}.radio--disabled.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled);background-color:var(--s-background-default)}.radio--disabled.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio:after{background-color:var(--s-icon-disabled)}.radio--disabled.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{background-color:transparent}.radio--disabled.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled)}.radio--disabled.sc-swirl-radio .radio__description.sc-swirl-radio,.radio--disabled.sc-swirl-radio .radio__label.sc-swirl-radio{color:var(--s-text-disabled)}.radio__control.sc-swirl-radio{position:relative;display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{background-color:var(--s-action-neutral-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__control.sc-swirl-radio{width:1.375rem;height:1.375rem}}.radio__box.sc-swirl-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-swirl-radio{display:inline-flex;margin-left:var(--s-space-8);padding-top:var(--s-space-2);flex-direction:column}.radio__label.sc-swirl-radio{display:flex;align-items:center;font-weight:var(--s-font-weight-medium);gap:var(--s-space-8)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__label.sc-swirl-radio{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.radio__description.sc-swirl-radio{color:var(--s-text-subdued)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__description.sc-swirl-radio{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
+
+const SwirlRadio = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChange = index.createEvent(this, "valueChange", 7);
+        this.checked = false;
+        this.disabled = false;
+        this.variant = "default";
+        this.onChange = () => {
+            this.checked = true;
+            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 = this.getAriaCheckedLabel(checked, unchecked);
+        const ariaInvalid = this.invalid;
+        const className = index$1.classnames("radio", `radio--variant-${this.variant}`, {
+            "radio--checked": checked,
+            "radio--disabled": this.disabled,
+            "radio--invalid": this.invalid,
+            "radio--unchecked": unchecked,
+        });
+        return (index.h(index.Host, { key: '86182d620dee4e0e47db4968e88f8f0cae8d0868', style: { width: this.variant === "card" ? "100%" : undefined } }, index.h("label", { key: '16e54bcaef3b8167996ba6122bfe2d8a6eae06c7', class: className, htmlFor: this.inputId }, index.h("span", { key: '64a0ca1e3e2d3e7ebace9fc86d452968b19bda03', class: "radio__control" }, index.h("swirl-visually-hidden", { key: 'f74d2bc407cb611a44d23abe55472d605a30b897' }, index.h("input", { key: 'e3a2692e01bb4de45922171295ad6fa693a59874', "aria-checked": ariaCheckedLabel, "aria-invalid": ariaInvalid, checked: checked, class: "radio__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, type: "radio", value: this.value })), index.h("span", { key: 'fadca0e725c39f99a3ede3aebf8fead3aedb52da', "aria-hidden": "true", class: "radio__box" })), index.h("span", { key: '58b41ca22ac6afd7fb6974741bd4a16b875d8fe8', class: "radio__label-container" }, this.label && (index.h("span", { key: '9a4fb8ab685bdfcdaadd390017744fd5d6c1b1c2', class: "radio__label" }, this.label, this.tooltip && (index.h("swirl-tooltip", { key: 'f64e9d4749746971c56d46339aed2dd66113499a', content: this.tooltip, position: "top" }, index.h("swirl-icon-help", { key: '75ec51689903e4d337672fccb6a529f5be8350ca', color: "default", size: 20, tabIndex: 0 }))))), this.description && (index.h("span", { key: '22c0edac96ff31475033dbb56dee80a95a0843b5', class: "radio__description", innerHTML: this.description }))))));
+    }
+};
+SwirlRadio.style = swirlRadioCss;
+
+exports.swirl_radio = SwirlRadio;