@getflip/swirl-components 0.0.0-beta-20260114160010

package/dist/components/swirl-lightbox.js

@@ -0,0 +1,445 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as disableBodyScroll, e as enableBodyScroll } from './bodyScrollLock.esm.js';
+import { c as classNames } from './index2.js';
+import { c as createFocusTrap } from './focus-trap.esm.js';
+import { q as querySelectorAllDeep } from './utils.js';
+import { d as defineCustomElement$g } from './swirl-action-list2.js';
+import { d as defineCustomElement$f } from './swirl-action-list-item2.js';
+import { d as defineCustomElement$e } from './swirl-button2.js';
+import { d as defineCustomElement$d } from './swirl-button-group2.js';
+import { d as defineCustomElement$c } from './swirl-icon-arrow-left2.js';
+import { d as defineCustomElement$b } from './swirl-icon-arrow-right2.js';
+import { d as defineCustomElement$a } from './swirl-icon-close2.js';
+import { d as defineCustomElement$9 } from './swirl-icon-more-vertikal2.js';
+import { d as defineCustomElement$8 } from './swirl-popover2.js';
+import { d as defineCustomElement$7 } from './swirl-popover-trigger2.js';
+import { d as defineCustomElement$6 } from './swirl-progress-indicator2.js';
+import { d as defineCustomElement$5 } from './swirl-separator2.js';
+import { d as defineCustomElement$4 } from './swirl-stack2.js';
+import { d as defineCustomElement$3 } from './swirl-text2.js';
+import { d as defineCustomElement$2 } from './swirl-thumbnail2.js';
+
+const swirlLightboxCss = ":host{display:block}:host *{box-sizing:border-box}.lightbox{position:fixed;z-index:var(--s-z-40);background-color:rgba(0, 0, 0, 1);inset:0}.lightbox[aria-hidden=\"true\"]{display:none}@media (min-width: 768px){.lightbox{background-color:rgba(0, 0, 0, 0.8)}}.lightbox:not(.lightbox--closing) .lightbox__body{animation:0.15s lightbox-fade-in}@media (prefers-reduced-motion){.lightbox:not(.lightbox--closing) .lightbox__body{animation:none}}.lightbox--closing{animation:0.15s lightbox-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.lightbox--closing{animation:none}}.lightbox--hide-menu .lightbox__menu{display:none}.lightbox--hide-toolbar .lightbox__toolbar{display:none}.lightbox__body{position:relative;width:100%;height:100%}.lightbox__header{position:absolute;z-index:1;top:0;right:0;left:0;display:flex;padding:var(--s-space-12) var(--s-space-16);justify-content:space-between;align-items:flex-start;pointer-events:none}.lightbox__toolbar{pointer-events:auto}.lightbox__controls{position:absolute;z-index:1;top:50%;right:0;left:0;display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:flex-start;pointer-events:none}@media (min-width: 768px){.lightbox__controls{display:flex}}.lightbox__close-button,.lightbox__menu-button,.lightbox__previous-slide-button,.lightbox__next-slide-button{display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);cursor:pointer;transition:opacity 0.15s;pointer-events:auto}.lightbox__close-button:disabled,.lightbox__menu-button:disabled,.lightbox__previous-slide-button:disabled,.lightbox__next-slide-button:disabled{pointer-events:none;opacity:0}.lightbox__content{overflow:hidden;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.lightbox__slides{display:flex;width:100%;height:100%}.lightbox__slides ::slotted(*){flex-basis:100%;flex-shrink:0;transition:transform 0.3s}@media (min-width: 768px){.lightbox__slides ::slotted(*){padding:4rem 5rem}}@media (prefers-reduced-motion){.lightbox__slides ::slotted(*){transition:none}}.lightbox__pagination{position:absolute;bottom:var(--s-space-32);left:50%;padding:var(--s-space-4) var(--s-space-12);border-radius:var(--s-border-radius-base);color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.6);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);transform:translateX(-50%);pointer-events:none}@media (min-width: 768px){.lightbox__pagination{display:none}}.lightbox__meta{display:flex;padding-top:var(--s-space-4);padding-right:var(--s-space-16);padding-bottom:var(--s-space-4);padding-left:var(--s-space-16);align-items:center;gap:var(--s-space-12)}@media (min-width: 768px){.lightbox__meta{max-width:18rem}}.lightbox__thumbnail{display:inline-flex;flex-shrink:0}.lightbox__file-info{display:flex;min-width:0;flex-grow:1;flex-direction:column}@keyframes lightbox-fade-in{from{opacity:0}to{opacity:1}}@keyframes lightbox-fade-out{from{opacity:1}to{opacity:0}}";
+
+const SwirlLightbox$1 = /*@__PURE__*/ proxyCustomElement(class SwirlLightbox extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.activeSlideChange = createEvent(this, "activeSlideChange", 7);
+        this.lightboxClose = createEvent(this, "lightboxClose", 7);
+        this.closeButtonLabel = "Close modal";
+        this.downloadButtonEnabled = true;
+        this.downloadButtonLabel = "Download";
+        this.menuLabel = "Slide options";
+        this.menuTriggerLabel = "Open slide menu";
+        this.nextSlideButtonLabel = "Next slide";
+        this.previousSlideButtonLabel = "Previous slide";
+        this.activeSlideIndex = 0;
+        this.closing = false;
+        this.isOpen = false;
+        this.dragging = false;
+        this.onCloseButtonClick = () => {
+            this.close();
+        };
+        this.onDownloadButtonClick = () => {
+            this.slides[this.activeSlideIndex]?.download();
+            this.menu.close();
+        };
+        this.onNextSlideClick = () => {
+            this.activateSlide(Math.min(this.slides.length - 1, this.activeSlideIndex + 1));
+        };
+        this.onPreviousSlideClick = () => {
+            this.activateSlide(Math.max(0, this.activeSlideIndex - 1));
+        };
+        this.registerSlides = () => {
+            this.slides = Array.from(this.el.children).filter((el) => el.tagName === "SWIRL-FILE-VIEWER");
+            this.setSlideAttributes();
+        };
+        this.onPointerDown = (event) => {
+            if (this.slides.length <= 1) {
+                return;
+            }
+            this.dragging = true;
+            this.dragStartPosition =
+                event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
+            this.slides.forEach((slide) => {
+                slide.style.transition = "none";
+            });
+        };
+        this.onPointerMove = async (event) => {
+            if (!this.dragging) {
+                return;
+            }
+            const isMultiTouch = !(event instanceof MouseEvent) && event.touches.length > 1;
+            const imageViewer = this.slides[this.activeSlideIndex]?.shadowRoot?.querySelector("swirl-file-viewer-image");
+            const showsZoomedImage = Boolean(imageViewer)
+                ? (await imageViewer.getZoom()) > 1
+                : false;
+            if (isMultiTouch || showsZoomedImage) {
+                return;
+            }
+            event.preventDefault();
+            const deltaX = event instanceof MouseEvent
+                ? event.clientX - this.dragStartPosition
+                : event.touches[0].clientX - this.dragStartPosition;
+            this.slides.forEach((slide) => {
+                const pixelOffset = this.activeSlideIndex * slide.getBoundingClientRect().width;
+                this.dragDelta = deltaX;
+                slide.style.transform = `translate3d(${(-pixelOffset + this.dragDelta) / 16}rem, 0, 0)`;
+            });
+        };
+        this.onPointerUp = () => {
+            if (!this.dragging) {
+                return;
+            }
+            this.dragging = false;
+            this.dragStartPosition = undefined;
+            const dragRatio = this.dragDelta /
+                this.slides[this.activeSlideIndex].getBoundingClientRect().width;
+            this.dragDelta = 0;
+            const shouldMoveToPreviousSlide = dragRatio > 0.2;
+            const shouldMoveToNextSlide = dragRatio < -0.2;
+            this.slides.forEach((slide) => {
+                slide.style.transition = "";
+            });
+            if (shouldMoveToPreviousSlide) {
+                this.onPreviousSlideClick();
+            }
+            else if (shouldMoveToNextSlide) {
+                this.onNextSlideClick();
+            }
+            else {
+                this.resetSlidePositions();
+            }
+        };
+        this.onBackdropClick = (event) => {
+            if (event.target !== this.slidesContainer) {
+                return;
+            }
+            this.close();
+        };
+        this.onContextMenu = (event) => {
+            if (!this.downloadButtonEnabled) {
+                event.preventDefault();
+            }
+        };
+    }
+    componentWillLoad() {
+        this.registerSlides();
+    }
+    componentDidLoad() {
+        this.activateSlide(0);
+    }
+    componentDidRender() {
+        this.focusTrap?.updateContainerElements(this.modalEl);
+    }
+    disconnectedCallback() {
+        this.focusTrap?.deactivate();
+        this.unlockBodyScroll();
+        this.containerObserver?.disconnect();
+        if (this.activateSlideTimeout) {
+            clearTimeout(this.activateSlideTimeout);
+        }
+        if (this.closingTimeout) {
+            clearTimeout(this.closingTimeout);
+        }
+    }
+    watchActiveSlideIndex() {
+        this.activeSlideChange.emit(this.activeSlideIndex);
+    }
+    onKeyDown(event) {
+        if (!this.isOpen) {
+            return;
+        }
+        if (event.code === "Escape") {
+            event.stopImmediatePropagation();
+            this.close();
+        }
+        else if (event.code === "ArrowLeft") {
+            this.onPreviousSlideClick();
+        }
+        else if (event.code === "ArrowRight") {
+            this.onNextSlideClick();
+        }
+    }
+    /**
+     * Open the lightbox.
+     */
+    async open() {
+        this.isOpen = true;
+        this.lockBodyScroll();
+        this.activateSlide(this.activeSlideIndex || 0);
+        setTimeout(() => {
+            this.focusTrap = createFocusTrap(this.modalEl, {
+                allowOutsideClick: true,
+                checkCanFocusTrap: (containers) => {
+                    this.containerObserver?.disconnect();
+                    return new Promise((resolve) => {
+                        const container = containers[0];
+                        if (container.tabIndex !== -1) {
+                            resolve();
+                            return;
+                        }
+                        // wait for container to become focusable
+                        this.containerObserver = new MutationObserver(() => {
+                            if (container.tabIndex !== -1) {
+                                this.containerObserver.disconnect();
+                                resolve();
+                            }
+                        });
+                        this.containerObserver.observe(container, {
+                            attributes: true,
+                            attributeFilter: ["tabindex"],
+                        });
+                    });
+                },
+                tabbableOptions: {
+                    getShadowRoot: (node) => {
+                        return node.shadowRoot;
+                    },
+                },
+            });
+            this.focusTrap?.activate();
+        });
+    }
+    /**
+     * Close the lightbox.
+     */
+    async close() {
+        if (this.closing) {
+            return;
+        }
+        this.closing = true;
+        this.focusTrap?.deactivate();
+        this.unlockBodyScroll();
+        if (this.closingTimeout) {
+            clearTimeout(this.closingTimeout);
+            this.closingTimeout = undefined;
+        }
+        this.closingTimeout = setTimeout(() => {
+            this.isOpen = false;
+            this.resetImageZoom();
+            this.stopAllMediaPlayers();
+            this.closing = false;
+            this.lightboxClose.emit();
+        }, 150);
+    }
+    /**
+     * Activate a slide.
+     * @param newActiveSlideIndex
+     */
+    async activateSlide(newActiveSlideIndex) {
+        this.menu?.close?.();
+        this.dragging = false;
+        this.activeSlideIndex = newActiveSlideIndex;
+        this.slides.forEach((slide, index) => {
+            if (index === this.activeSlideIndex) {
+                slide.removeAttribute("aria-hidden");
+                slide.setAttribute("active", "true");
+            }
+            else if (index === this.activeSlideIndex - 1 ||
+                index === this.activeSlideIndex + 1) {
+                slide.setAttribute("aria-hidden", "true");
+                slide.setAttribute("active", "true");
+            }
+            else {
+                slide.setAttribute("aria-hidden", "true");
+            }
+            slide.style.transform = `translate3d(-${100 * this.activeSlideIndex}%, 0, 0)`;
+        });
+        if (this.activateSlideTimeout) {
+            clearTimeout(this.activateSlideTimeout);
+            this.activateSlideTimeout = undefined;
+        }
+        // wait for slide animation before deactivating the slide
+        this.activateSlideTimeout = setTimeout(() => {
+            this.slides.forEach((slide, index) => {
+                if (index !== this.activeSlideIndex &&
+                    index !== this.activeSlideIndex - 1 &&
+                    index !== this.activeSlideIndex + 1) {
+                    slide.setAttribute("active", "false");
+                }
+            });
+        }, 300);
+        this.stopAllMediaPlayers();
+        this.resetImageZoom();
+    }
+    setSlideAttributes() {
+        this.slides.forEach((slide) => {
+            slide.setAttribute("active", "false");
+            slide.setAttribute("aria-label", slide.file);
+            slide.setAttribute("aria-roledescription", "slide");
+            slide.setAttribute("role", "group");
+            slide.addEventListener("dragstart", (event) => event.preventDefault());
+        });
+    }
+    resetSlidePositions() {
+        this.slides.forEach((slide) => {
+            slide.style.transform = `translate3d(-${100 * this.activeSlideIndex}%, 0, 0)`;
+        });
+    }
+    getCurrentFileName() {
+        const activeSlide = this.slides[this.activeSlideIndex];
+        return activeSlide?.fileName || activeSlide?.file?.split("/").pop();
+    }
+    getCurrentFileType() {
+        return this.slides[this.activeSlideIndex]?.type;
+    }
+    getCurrentThumbnailUrl() {
+        return this.slides[this.activeSlideIndex]?.thumbnailUrl;
+    }
+    lockBodyScroll() {
+        disableBodyScroll(this.el);
+    }
+    unlockBodyScroll() {
+        enableBodyScroll(this.el);
+    }
+    getMediaPlayers() {
+        const mediaPlayers = querySelectorAllDeep(this.el, "video");
+        return mediaPlayers;
+    }
+    stopAllMediaPlayers() {
+        this.getMediaPlayers().forEach((mediaPlayer) => mediaPlayer.pause());
+    }
+    resetImageZoom() {
+        this.slides.forEach((slide) => {
+            const imageViewer = slide?.shadowRoot?.querySelector("swirl-file-viewer-image");
+            if (Boolean(imageViewer)) {
+                imageViewer.resetZoom();
+            }
+        });
+    }
+    render() {
+        const showPagination = this.slides.length > 1;
+        const currentFileName = this.getCurrentFileName();
+        const currentFileType = this.getCurrentFileType();
+        const currentThumbnailUrl = this.getCurrentThumbnailUrl();
+        const hasMenuItems = Boolean(this.el.querySelector("[slot='menu-items']")) ||
+            this.downloadButtonEnabled;
+        const hasToolbar = Boolean(this.el.querySelector("[slot='toolbar']"));
+        const className = classNames("lightbox", {
+            "lightbox--closing": this.closing,
+            "lightbox--hide-menu": !hasMenuItems,
+            "lightbox--hide-toolbar": !hasToolbar,
+        });
+        return (h(Host, { key: 'ef75b4eb3cc829becbd789742163f953cd83f5b7' }, h("section", { key: '1e365713f8e87f991e69c5b2da65042e4d3fb839', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, id: "lightbox", onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (el) => (this.modalEl = el), role: "dialog", tabIndex: this.isOpen ? 0 : -1 }, h("div", { key: '85ab681581a804cf881c7b931c043c01d9d4fe27', class: "lightbox__body", role: "document" }, h("header", { key: '10c85778490babd4087b1588febe701e2d580f64', class: "lightbox__header" }, h("button", { key: 'd5b371c036a20764b9f6de64c3f9fc35c2db8066', "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, h("swirl-icon-close", { key: '31c79feb2761ba63fbdd732a042897856ead188b' })), h("div", { key: 'f928cc5f01c029097f11f010fb41d152557bc6e2', class: "lightbox__toolbar" }, h("slot", { key: '7480fe40abb4fa98af04a1fd1f93713703c58560', name: "toolbar" })), !this.hideMenu && (h("swirl-popover-trigger", { key: '0c10d16ce0e499a81943c6413537d53eb0e6427e', swirlPopover: this.menu }, h("button", { key: '303cf79c04c7bdd410bc616ffaddc14b4260583f', "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, h("swirl-icon-more-vertikal", { key: 'c3c8c96fe9c55b6973f3750d0d220db0aecc9c48' }))))), h("div", { key: '8527ff9c195f804f7f0106a01c9c9241d9a6bf11', "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, h("div", { key: '50e3f4fa50aebfd5adb5c265324eb73a2431ff32', "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: '23255977f3c300956892070e575ef4195a8b25f2', onSlotchange: this.registerSlides }))), h("div", { key: '026576573ecb061047ff3f81611de3526c113dc3', class: "lightbox__controls" }, h("button", { key: '8242506d4556718850e73ee2099e3931fb24b2b4', "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, h("swirl-icon-arrow-left", { key: '420fd08f5d72ab799f96374d9226682362fbff36' })), h("button", { key: 'f6d46414dac0d0c2113417e01407762ef2806ec3', "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, h("swirl-icon-arrow-right", { key: '8b80217957846b81578ab48d91151032e85b4f30' }))), showPagination && (h("span", { key: '497de15959cf0077b53c586b63ba5db48127ddc2', class: "lightbox__pagination" }, h("span", { key: '6ec1a27ef9d8097b36521b8d522144dd91891977', "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), !this.hideMenu && (h("swirl-popover", { key: 'bf1b718717d5ab4bb87baef6ec6a3e3eb5cfea81', animation: "scale-in-y", disableScrollLock: true, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: 'c3499a938b69c684954d191b8b5a15931f295a45' }, h("div", { key: '6b0fb481a374a0c743c2d462ba57dadaf66d7bcc', class: "lightbox__meta" }, currentThumbnailUrl && (h("div", { key: 'b02e8225bd550bad76f431bcb46d5ba16de76e71', class: "lightbox__thumbnail" }, h("swirl-thumbnail", { key: 'd7cd6bead11798e6f4bedd5dd93a28a550172b42', alt: "", src: currentThumbnailUrl }))), h("div", { key: '0ab54284d44ec93766aa17cbee79ef98511ee443', class: "lightbox__file-info" }, h("swirl-text", { key: '723dd3e0c3ef505952c97b17a14b3710fadfbe1f', truncate: true, weight: "semibold" }, currentFileName), h("swirl-text", { key: '85fb49d317b4121989893051e7c72b024f5e6af0', color: "subdued", size: "sm", truncate: true }, currentFileType))), hasMenuItems && h("swirl-separator", { key: 'af46a4621eaac705e980b0cd5b6c301678eced52' }), h("swirl-action-list", { key: 'f1da71769d05c44b6d846b00549fc61c29c8b3cd' }, this.downloadButtonEnabled && (h("swirl-action-list-item", { key: '8a6011493fb89bdf9f9b2161101f50f5eaa715be', icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: '911995638aeabbd207609123112d99a3fb5ff818', name: "menu-items" }))))))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "activeSlideIndex": ["watchActiveSlideIndex"]
+    }; }
+    static get style() { return swirlLightboxCss; }
+}, [1, "swirl-lightbox", {
+        "closeButtonLabel": [1, "close-button-label"],
+        "downloadButtonEnabled": [4, "download-button-enabled"],
+        "downloadButtonLabel": [1, "download-button-label"],
+        "hideMenu": [4, "hide-menu"],
+        "label": [1],
+        "menuLabel": [1, "menu-label"],
+        "menuTriggerLabel": [1, "menu-trigger-label"],
+        "nextSlideButtonLabel": [1, "next-slide-button-label"],
+        "previousSlideButtonLabel": [1, "previous-slide-button-label"],
+        "activeSlideIndex": [32],
+        "closing": [32],
+        "isOpen": [32],
+        "slides": [32],
+        "open": [64],
+        "close": [64],
+        "activateSlide": [64]
+    }, [[8, "keydown", "onKeyDown"]], {
+        "activeSlideIndex": ["watchActiveSlideIndex"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["swirl-lightbox", "swirl-action-list", "swirl-action-list-item", "swirl-button", "swirl-button-group", "swirl-icon-arrow-left", "swirl-icon-arrow-right", "swirl-icon-close", "swirl-icon-more-vertikal", "swirl-popover", "swirl-popover-trigger", "swirl-progress-indicator", "swirl-separator", "swirl-stack", "swirl-text", "swirl-thumbnail"];
+    components.forEach(tagName => { switch (tagName) {
+        case "swirl-lightbox":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SwirlLightbox$1);
+            }
+            break;
+        case "swirl-action-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "swirl-action-list-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "swirl-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "swirl-button-group":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "swirl-icon-arrow-left":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "swirl-icon-arrow-right":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "swirl-icon-close":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "swirl-icon-more-vertikal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "swirl-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "swirl-popover-trigger":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "swirl-progress-indicator":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "swirl-separator":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "swirl-stack":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "swirl-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "swirl-thumbnail":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const SwirlLightbox = SwirlLightbox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlLightbox, defineCustomElement };

package/dist/components/swirl-link.d.ts

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

package/dist/components/swirl-link.js

@@ -0,0 +1,41 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classNames } from './index2.js';
+
+const swirlLinkCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.link{color:var(--s-interactive-primary-default);line-height:var(--s-line-height-base);text-underline-offset:var(--s-space-4)}.link:hover{color:var(--s-interactive-primary-hovered)}.link:active{color:var(--s-interactive-primary-pressed)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.link{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.link--color-subdued{color:var(--s-interactive-neutral-default);font-weight:var(--s-font-weight-medium);text-decoration:none}.link--color-subdued:hover{color:var(--s-interactive-neutral-hovered)}.link--color-subdued:active{color:var(--s-interactive-neutral-pressed)}";
+
+const SwirlLink$1 = /*@__PURE__*/ proxyCustomElement(class SwirlLink extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.color = "default";
+    }
+    render() {
+        const className = classNames("link", `link--color-${this.color}`);
+        return (h(Host, { key: '040ddaf3ab3c1c05fec6a4a39ffc4057c0014c0f' }, h("a", { key: 'f5b666c7d7e22871d44b1f30d67dd6bcb1933acf', class: className, href: this.href, part: "link", target: this.target }, this.label)));
+    }
+    static get style() { return swirlLinkCss; }
+}, [1, "swirl-link", {
+        "color": [1],
+        "href": [1],
+        "label": [1],
+        "target": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["swirl-link"];
+    components.forEach(tagName => { switch (tagName) {
+        case "swirl-link":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SwirlLink$1);
+            }
+            break;
+    } });
+}
+
+const SwirlLink = SwirlLink$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlLink, defineCustomElement };

package/dist/components/swirl-list.d.ts

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

package/dist/components/swirl-list.js

@@ -0,0 +1,38 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const swirlListCss = ":host{display:block}:host *{box-sizing:border-box}.swirl-list{line-height:var(--s-line-height-base)}.swirl-list ul,.swirl-list ol{margin:0;padding:0;list-style-position:outside;list-style-type:none}.swirl-list ul li{padding-left:1.5rem}.swirl-list ul li:before{display:inline-block;width:1.5rem;margin-left:-1.5rem;text-align:center;content:\"•\"}.swirl-list ol{counter-reset:item}.swirl-list ol ol{counter-reset:letter}.swirl-list ol ol li:before{content:counter(letter, lower-alpha) \".\";counter-increment:letter}.swirl-list ol li{padding-left:1.5rem}.swirl-list ol li:before{display:inline-block;min-width:1.5rem;margin-left:-1.5rem;padding-right:var(--s-space-8);text-align:right;content:counter(item) \".\";counter-increment:item;font-variant-numeric:tabular-nums}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.swirl-list{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
+
+const SwirlList$1 = /*@__PURE__*/ proxyCustomElement(class SwirlList extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    componentDidRender() {
+        const children = Array.from(this.containerEl.children);
+        if (children.some((child) => !["UL", "OL"].includes(child.tagName))) {
+            console.warn("[SwirlList] Only ul and ol elements are allowed as direct children of <swirl-list />.");
+        }
+    }
+    render() {
+        return (h(Host, { key: '1b05002f07257a19cb8b7dbe5146a75ca74dc35e' }, h("div", { key: '8572911881fe27c0984c185723cdf305800cf38d', class: "swirl-list", ref: (el) => (this.containerEl = el) }, h("slot", { key: '26b6336efe6b9c9adbf0fee1ff019c41b22c7198' }))));
+    }
+    static get style() { return swirlListCss; }
+}, [4, "swirl-list"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["swirl-list"];
+    components.forEach(tagName => { switch (tagName) {
+        case "swirl-list":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SwirlList$1);
+            }
+            break;
+    } });
+}
+
+const SwirlList = SwirlList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlList, defineCustomElement };

package/dist/components/swirl-menu-item.d.ts

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