@getflip/swirl-components 0.78.1 → 0.80.0

package/dist/components/file-manager.js

@@ -1,26 +1,27 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$t } from './swirl-app-layout2.js';
-import { d as defineCustomElement$s } from './swirl-box2.js';
-import { d as defineCustomElement$r } from './swirl-button2.js';
-import { d as defineCustomElement$q } from './swirl-empty-state2.js';
-import { d as defineCustomElement$p } from './swirl-file-viewer2.js';
-import { d as defineCustomElement$o } from './swirl-file-viewer-audio2.js';
-import { d as defineCustomElement$n } from './swirl-file-viewer-csv2.js';
-import { d as defineCustomElement$m } from './swirl-file-viewer-image2.js';
-import { d as defineCustomElement$l } from './swirl-file-viewer-pdf2.js';
-import { d as defineCustomElement$k } from './swirl-file-viewer-text2.js';
-import { d as defineCustomElement$j } from './swirl-file-viewer-video2.js';
-import { d as defineCustomElement$i } from './swirl-heading2.js';
-import { d as defineCustomElement$h } from './swirl-icon-check-small2.js';
-import { d as defineCustomElement$g } from './swirl-icon-check-strong2.js';
-import { d as defineCustomElement$f } from './swirl-icon-drag-handle2.js';
-import { d as defineCustomElement$e } from './swirl-icon-error2.js';
-import { d as defineCustomElement$d } from './swirl-icon-file2.js';
-import { d as defineCustomElement$c } from './swirl-icon-folder-shared2.js';
-import { d as defineCustomElement$b } from './swirl-inline-error2.js';
-import { d as defineCustomElement$a } from './swirl-option-list2.js';
-import { d as defineCustomElement$9 } from './swirl-option-list-item2.js';
-import { d as defineCustomElement$8 } from './swirl-popover2.js';
+import { d as defineCustomElement$u } from './swirl-app-layout2.js';
+import { d as defineCustomElement$t } from './swirl-box2.js';
+import { d as defineCustomElement$s } from './swirl-button2.js';
+import { d as defineCustomElement$r } from './swirl-empty-state2.js';
+import { d as defineCustomElement$q } from './swirl-file-viewer2.js';
+import { d as defineCustomElement$p } from './swirl-file-viewer-audio2.js';
+import { d as defineCustomElement$o } from './swirl-file-viewer-csv2.js';
+import { d as defineCustomElement$n } from './swirl-file-viewer-image2.js';
+import { d as defineCustomElement$m } from './swirl-file-viewer-pdf2.js';
+import { d as defineCustomElement$l } from './swirl-file-viewer-text2.js';
+import { d as defineCustomElement$k } from './swirl-file-viewer-video2.js';
+import { d as defineCustomElement$j } from './swirl-heading2.js';
+import { d as defineCustomElement$i } from './swirl-icon-check-small2.js';
+import { d as defineCustomElement$h } from './swirl-icon-check-strong2.js';
+import { d as defineCustomElement$g } from './swirl-icon-drag-handle2.js';
+import { d as defineCustomElement$f } from './swirl-icon-error2.js';
+import { d as defineCustomElement$e } from './swirl-icon-file2.js';
+import { d as defineCustomElement$d } from './swirl-icon-folder-shared2.js';
+import { d as defineCustomElement$c } from './swirl-inline-error2.js';
+import { d as defineCustomElement$b } from './swirl-option-list2.js';
+import { d as defineCustomElement$a } from './swirl-option-list-item2.js';
+import { d as defineCustomElement$9 } from './swirl-popover2.js';
+import { d as defineCustomElement$8 } from './swirl-popover-trigger2.js';
 import { d as defineCustomElement$7 } from './swirl-resource-list2.js';
 import { d as defineCustomElement$6 } from './swirl-resource-list-item2.js';
 import { d as defineCustomElement$5 } from './swirl-spinner2.js';
@@ -78,6 +79,7 @@ const FileManager$1 = /*@__PURE__*/ proxyCustomElement(class FileManager extends
     };
     this.selectedDirectory = undefined;
     this.selectedFile = undefined;
+    this.sortMenu = undefined;
   }
   renderNavigation() {
     const items = Boolean(this.selectedDirectory)
@@ -89,17 +91,18 @@ const FileManager$1 = /*@__PURE__*/ proxyCustomElement(class FileManager extends
   }
   render() {
     var _a, _b;
-    return (h(Host, null, h("swirl-app-layout", { appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<swirl-icon-add></swirl-icon-add>", ctaLabel: "Upload file", navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), transitionStyle: "dialog" }, h("swirl-resource-list", { label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-button", { id: "sort-button", label: "Sort items", slot: "navigation-controls" }), h("swirl-stack", { orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", null, h("swirl-heading", { as: "h2", level: 4, text: (_a = this.selectedFile) === null || _a === void 0 ? void 0 : _a.name }), h("swirl-text", { color: "subdued", truncate: true }, (_b = this.selectedFile) === null || _b === void 0 ? void 0 : _b.description))), Boolean(this.selectedFile) ? (h("swirl-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (h("swirl-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, h("swirl-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list."))), h("div", { slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { padding: "16", slot: "sidebar" }, h("swirl-text", { color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { label: "Sort items", popoverId: "sort-menu", trigger: "sort-button" }, h("swirl-option-list", { value: ["ascending"] }, h("swirl-option-list-item", { icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
+    return (h(Host, null, h("swirl-app-layout", { appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<swirl-icon-add></swirl-icon-add>", ctaLabel: "Upload file", navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), transitionStyle: "dialog" }, h("swirl-resource-list", { label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { popover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { label: "Sort items" })), h("swirl-stack", { orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", null, h("swirl-heading", { as: "h2", level: 4, text: (_a = this.selectedFile) === null || _a === void 0 ? void 0 : _a.name }), h("swirl-text", { color: "subdued", truncate: true }, (_b = this.selectedFile) === null || _b === void 0 ? void 0 : _b.description))), Boolean(this.selectedFile) ? (h("swirl-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (h("swirl-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, h("swirl-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list."))), h("div", { slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { padding: "16", slot: "sidebar" }, h("swirl-text", { color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { value: ["ascending"] }, h("swirl-option-list-item", { icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
   }
 }, [1, "file-manager", {
     "selectedDirectory": [32],
-    "selectedFile": [32]
+    "selectedFile": [32],
+    "sortMenu": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["file-manager", "swirl-app-layout", "swirl-box", "swirl-button", "swirl-empty-state", "swirl-file-viewer", "swirl-file-viewer-audio", "swirl-file-viewer-csv", "swirl-file-viewer-image", "swirl-file-viewer-pdf", "swirl-file-viewer-text", "swirl-file-viewer-video", "swirl-heading", "swirl-icon-check-small", "swirl-icon-check-strong", "swirl-icon-drag-handle", "swirl-icon-error", "swirl-icon-file", "swirl-icon-folder-shared", "swirl-inline-error", "swirl-option-list", "swirl-option-list-item", "swirl-popover", "swirl-resource-list", "swirl-resource-list-item", "swirl-spinner", "swirl-stack", "swirl-text", "swirl-visually-hidden"];
+  const components = ["file-manager", "swirl-app-layout", "swirl-box", "swirl-button", "swirl-empty-state", "swirl-file-viewer", "swirl-file-viewer-audio", "swirl-file-viewer-csv", "swirl-file-viewer-image", "swirl-file-viewer-pdf", "swirl-file-viewer-text", "swirl-file-viewer-video", "swirl-heading", "swirl-icon-check-small", "swirl-icon-check-strong", "swirl-icon-drag-handle", "swirl-icon-error", "swirl-icon-file", "swirl-icon-folder-shared", "swirl-inline-error", "swirl-option-list", "swirl-option-list-item", "swirl-popover", "swirl-popover-trigger", "swirl-resource-list", "swirl-resource-list-item", "swirl-spinner", "swirl-stack", "swirl-text", "swirl-visually-hidden"];
   components.forEach(tagName => { switch (tagName) {
     case "file-manager":
       if (!customElements.get(tagName)) {
@@ -108,110 +111,115 @@ function defineCustomElement$1() {
       break;
     case "swirl-app-layout":
       if (!customElements.get(tagName)) {
-        defineCustomElement$t();
+        defineCustomElement$u();
       }
       break;
     case "swirl-box":
       if (!customElements.get(tagName)) {
-        defineCustomElement$s();
+        defineCustomElement$t();
       }
       break;
     case "swirl-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$r();
+        defineCustomElement$s();
       }
       break;
     case "swirl-empty-state":
       if (!customElements.get(tagName)) {
-        defineCustomElement$q();
+        defineCustomElement$r();
       }
       break;
     case "swirl-file-viewer":
       if (!customElements.get(tagName)) {
-        defineCustomElement$p();
+        defineCustomElement$q();
       }
       break;
     case "swirl-file-viewer-audio":
       if (!customElements.get(tagName)) {
-        defineCustomElement$o();
+        defineCustomElement$p();
       }
       break;
     case "swirl-file-viewer-csv":
       if (!customElements.get(tagName)) {
-        defineCustomElement$n();
+        defineCustomElement$o();
       }
       break;
     case "swirl-file-viewer-image":
       if (!customElements.get(tagName)) {
-        defineCustomElement$m();
+        defineCustomElement$n();
       }
       break;
     case "swirl-file-viewer-pdf":
       if (!customElements.get(tagName)) {
-        defineCustomElement$l();
+        defineCustomElement$m();
       }
       break;
     case "swirl-file-viewer-text":
       if (!customElements.get(tagName)) {
-        defineCustomElement$k();
+        defineCustomElement$l();
       }
       break;
     case "swirl-file-viewer-video":
       if (!customElements.get(tagName)) {
-        defineCustomElement$j();
+        defineCustomElement$k();
       }
       break;
     case "swirl-heading":
       if (!customElements.get(tagName)) {
-        defineCustomElement$i();
+        defineCustomElement$j();
       }
       break;
     case "swirl-icon-check-small":
       if (!customElements.get(tagName)) {
-        defineCustomElement$h();
+        defineCustomElement$i();
       }
       break;
     case "swirl-icon-check-strong":
       if (!customElements.get(tagName)) {
-        defineCustomElement$g();
+        defineCustomElement$h();
       }
       break;
     case "swirl-icon-drag-handle":
       if (!customElements.get(tagName)) {
-        defineCustomElement$f();
+        defineCustomElement$g();
       }
       break;
     case "swirl-icon-error":
       if (!customElements.get(tagName)) {
-        defineCustomElement$e();
+        defineCustomElement$f();
       }
       break;
     case "swirl-icon-file":
       if (!customElements.get(tagName)) {
-        defineCustomElement$d();
+        defineCustomElement$e();
       }
       break;
     case "swirl-icon-folder-shared":
       if (!customElements.get(tagName)) {
-        defineCustomElement$c();
+        defineCustomElement$d();
       }
       break;
     case "swirl-inline-error":
       if (!customElements.get(tagName)) {
-        defineCustomElement$b();
+        defineCustomElement$c();
       }
       break;
     case "swirl-option-list":
       if (!customElements.get(tagName)) {
-        defineCustomElement$a();
+        defineCustomElement$b();
       }
       break;
     case "swirl-option-list-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$a();
       }
       break;
     case "swirl-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "swirl-popover-trigger":
       if (!customElements.get(tagName)) {
         defineCustomElement$8();
       }

package/dist/components/swirl-button2.js

@@ -14,8 +14,10 @@ const SwirlButton = /*@__PURE__*/ proxyCustomElement(class SwirlButton extends H
     };
     this.disabled = undefined;
     this.download = undefined;
+    this.swirlAriaControls = undefined;
     this.swirlAriaDescribedby = undefined;
     this.swirlAriaExpanded = undefined;
+    this.swirlAriaHaspopup = undefined;
     this.swirlAriaLabel = undefined;
     this.form = undefined;
     this.hideLabel = undefined;
@@ -69,14 +71,16 @@ const SwirlButton = /*@__PURE__*/ proxyCustomElement(class SwirlButton extends H
       "button--pill": this.pill,
     });
     const Tag = isLink ? "a" : "button";
-    return (h(Host, { style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-label": ariaLabel, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value }, this.icon && (h("span", { class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !hideLabel && h("span", { class: "button__label" }, this.label))));
+    return (h(Host, { style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": ariaLabel, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value }, this.icon && (h("span", { class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !hideLabel && h("span", { class: "button__label" }, this.label))));
   }
   static get style() { return swirlButtonCss; }
 }, [2, "swirl-button", {
     "disabled": [4],
     "download": [1],
+    "swirlAriaControls": [1, "swirl-aria-controls"],
     "swirlAriaDescribedby": [1, "swirl-aria-describedby"],
     "swirlAriaExpanded": [1, "swirl-aria-expanded"],
+    "swirlAriaHaspopup": [1, "swirl-aria-haspopup"],
     "swirlAriaLabel": [1, "swirl-aria-label"],
     "form": [1],
     "hideLabel": [4, "hide-label"],

package/dist/components/swirl-date-input.js

@@ -2,9 +2,10 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { c as classnames } from './index2.js';
 import { p as parse, i as isValid, f as format, m as maska } from './maska.js';
 import { g as getDesktopMediaQuery } from './utils.js';
-import { d as defineCustomElement$5 } from './swirl-date-picker2.js';
-import { d as defineCustomElement$4 } from './swirl-icon-today2.js';
-import { d as defineCustomElement$3 } from './swirl-popover2.js';
+import { d as defineCustomElement$6 } from './swirl-date-picker2.js';
+import { d as defineCustomElement$5 } from './swirl-icon-today2.js';
+import { d as defineCustomElement$4 } from './swirl-popover2.js';
+import { d as defineCustomElement$3 } from './swirl-popover-trigger2.js';
 import { d as defineCustomElement$2 } from './wc-datepicker2.js';
 
 const swirlDateInputCss = ".sc-swirl-date-input-h{display:flex;width:100%}.sc-swirl-date-input-h *.sc-swirl-date-input{box-sizing:border-box}.date-input.sc-swirl-date-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-sm)}.date-input--inline.sc-swirl-date-input .date-input__date-picker-button.sc-swirl-date-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input--inline.sc-swirl-date-input .date-input__date-picker-button.sc-swirl-date-input{top:0}}.date-input__input.sc-swirl-date-input{display:inline-flex;width:calc(100% - 1.25rem - var(--s-space-8));margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.date-input__input.sc-swirl-date-input:focus{outline:none}.date-input__input.sc-swirl-date-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input__input.sc-swirl-date-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.date-input__date-picker-button.sc-swirl-date-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.date-input__date-picker-button.sc-swirl-date-input:focus:not(:focus-visible){outline:none}.date-input__date-picker-button.sc-swirl-date-input:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-input__date-picker-button.sc-swirl-date-input:disabled{color:var(--s-icon-disabled);cursor:default}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input__date-picker-button.sc-swirl-date-input{top:-0.625rem}}";
@@ -112,7 +113,7 @@ const SwirlDateInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlDateInput e
     const className = classnames("date-input", {
       "date-input--inline": this.inline,
     });
-    return (h(Host, null, h("div", { class: className }, h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, id: this.id, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, required: this.required, type: "text", value: displayValue }), h("button", { "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, id: `${this.id}-trigger`, type: "button" }, h("swirl-icon-today", { size: this.iconSize }))), !this.disabled && (h("swirl-popover", { animation: "scale-in-y", label: this.datePickerLabel, placement: "bottom-end", popoverId: `popover-${this.id}`, ref: (el) => (this.pickerPopover = el), trigger: `${this.id}-trigger` }, h("swirl-date-picker", { labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue })))));
+    return (h(Host, null, h("div", { class: className }, h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, id: this.id, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, required: this.required, type: "text", value: displayValue }), h("swirl-popover-trigger", { popover: `popover-${this.id}` }, h("button", { "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { size: this.iconSize })))), !this.disabled && (h("swirl-popover", { animation: "scale-in-y", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue })))));
   }
   get el() { return this; }
   static get watchers() { return {
@@ -140,7 +141,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["swirl-date-input", "swirl-date-picker", "swirl-icon-today", "swirl-popover", "wc-datepicker"];
+  const components = ["swirl-date-input", "swirl-date-picker", "swirl-icon-today", "swirl-popover", "swirl-popover-trigger", "wc-datepicker"];
   components.forEach(tagName => { switch (tagName) {
     case "swirl-date-input":
       if (!customElements.get(tagName)) {
@@ -149,15 +150,20 @@ function defineCustomElement$1() {
       break;
     case "swirl-date-picker":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "swirl-icon-today":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "swirl-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "swirl-popover-trigger":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

package/dist/components/swirl-lightbox.js

@@ -3,13 +3,14 @@ import { A as A11yDialog } from './a11y-dialog.esm.js';
 import { d as disableBodyScroll, e as enableBodyScroll } from './bodyScrollLock.esm.js';
 import { c as classnames } from './index2.js';
 import { q as querySelectorAllDeep } from './utils.js';
-import { d as defineCustomElement$c } from './swirl-action-list2.js';
-import { d as defineCustomElement$b } from './swirl-action-list-item2.js';
-import { d as defineCustomElement$a } from './swirl-icon-arrow-left2.js';
-import { d as defineCustomElement$9 } from './swirl-icon-arrow-right2.js';
-import { d as defineCustomElement$8 } from './swirl-icon-close2.js';
-import { d as defineCustomElement$7 } from './swirl-icon-more-vertikal2.js';
-import { d as defineCustomElement$6 } from './swirl-popover2.js';
+import { d as defineCustomElement$d } from './swirl-action-list2.js';
+import { d as defineCustomElement$c } from './swirl-action-list-item2.js';
+import { d as defineCustomElement$b } from './swirl-icon-arrow-left2.js';
+import { d as defineCustomElement$a } from './swirl-icon-arrow-right2.js';
+import { d as defineCustomElement$9 } from './swirl-icon-close2.js';
+import { d as defineCustomElement$8 } from './swirl-icon-more-vertikal2.js';
+import { d as defineCustomElement$7 } from './swirl-popover2.js';
+import { d as defineCustomElement$6 } from './swirl-popover-trigger2.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';
@@ -243,7 +244,7 @@ const SwirlLightbox$1 = /*@__PURE__*/ proxyCustomElement(class SwirlLightbox ext
     const className = classnames("lightbox", {
       "lightbox--closing": this.closing,
     });
-    return (h(Host, null, h("section", { "aria-hidden": "true", "aria-label": this.label, class: className, id: "lightbox", onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onKeyDown: this.onKeyDown, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (el) => (this.modalEl = el) }, h("div", { class: "lightbox__body", role: "document" }, h("header", { class: "lightbox__header" }, h("button", { "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, h("swirl-icon-close", null)), h("button", { "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button", id: "slide-menu-trigger" }, h("swirl-icon-more-vertikal", null))), h("div", { "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, h("div", { "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides" }, h("slot", { onSlotchange: this.registerSlides }))), h("div", { class: "lightbox__controls" }, h("button", { "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, h("swirl-icon-arrow-left", null)), h("button", { "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, h("swirl-icon-arrow-right", null))), showPagination && (h("span", { class: "lightbox__pagination" }, h("span", { "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), h("swirl-popover", { animation: "scale-in-y", disableScrollLock: true, label: this.menuLabel, placement: "bottom-end", popoverId: "slide-menu", ref: (el) => (this.menu = el), trigger: "slide-menu-trigger" }, h("swirl-stack", null, h("div", { class: "lightbox__meta" }, currentThumbnailUrl && (h("div", { class: "lightbox__thumbnail" }, h("swirl-thumbnail", { alt: "", src: currentThumbnailUrl }))), h("div", { class: "lightbox__file-info" }, h("swirl-text", { truncate: true, weight: "semibold" }, currentFileName), h("swirl-text", { color: "subdued", size: "sm", truncate: true }, currentFileType))), h("swirl-separator", null), h("swirl-action-list", null, h("swirl-action-list-item", { icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick }), h("slot", { name: "menu-items" })))))));
+    return (h(Host, null, h("section", { "aria-hidden": "true", "aria-label": this.label, class: className, id: "lightbox", onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onKeyDown: this.onKeyDown, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (el) => (this.modalEl = el) }, h("div", { class: "lightbox__body", role: "document" }, h("header", { class: "lightbox__header" }, h("button", { "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, h("swirl-icon-close", null)), h("swirl-popover-trigger", { popover: this.menu }, h("button", { "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, h("swirl-icon-more-vertikal", null)))), h("div", { "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, h("div", { "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides" }, h("slot", { onSlotchange: this.registerSlides }))), h("div", { class: "lightbox__controls" }, h("button", { "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, h("swirl-icon-arrow-left", null)), h("button", { "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, h("swirl-icon-arrow-right", null))), showPagination && (h("span", { class: "lightbox__pagination" }, h("span", { "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), h("swirl-popover", { animation: "scale-in-y", disableScrollLock: true, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", null, h("div", { class: "lightbox__meta" }, currentThumbnailUrl && (h("div", { class: "lightbox__thumbnail" }, h("swirl-thumbnail", { alt: "", src: currentThumbnailUrl }))), h("div", { class: "lightbox__file-info" }, h("swirl-text", { truncate: true, weight: "semibold" }, currentFileName), h("swirl-text", { color: "subdued", size: "sm", truncate: true }, currentFileType))), h("swirl-separator", null), h("swirl-action-list", null, h("swirl-action-list-item", { icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick }), h("slot", { name: "menu-items" })))))));
   }
   get el() { return this; }
   static get style() { return swirlLightboxCss; }
@@ -266,7 +267,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["swirl-lightbox", "swirl-action-list", "swirl-action-list-item", "swirl-icon-arrow-left", "swirl-icon-arrow-right", "swirl-icon-close", "swirl-icon-more-vertikal", "swirl-popover", "swirl-separator", "swirl-stack", "swirl-text", "swirl-thumbnail"];
+  const components = ["swirl-lightbox", "swirl-action-list", "swirl-action-list-item", "swirl-icon-arrow-left", "swirl-icon-arrow-right", "swirl-icon-close", "swirl-icon-more-vertikal", "swirl-popover", "swirl-popover-trigger", "swirl-separator", "swirl-stack", "swirl-text", "swirl-thumbnail"];
   components.forEach(tagName => { switch (tagName) {
     case "swirl-lightbox":
       if (!customElements.get(tagName)) {
@@ -275,35 +276,40 @@ function defineCustomElement$1() {
       break;
     case "swirl-action-list":
       if (!customElements.get(tagName)) {
-        defineCustomElement$c();
+        defineCustomElement$d();
       }
       break;
     case "swirl-action-list-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$b();
+        defineCustomElement$c();
       }
       break;
     case "swirl-icon-arrow-left":
       if (!customElements.get(tagName)) {
-        defineCustomElement$a();
+        defineCustomElement$b();
       }
       break;
     case "swirl-icon-arrow-right":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$a();
       }
       break;
     case "swirl-icon-close":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$9();
       }
       break;
     case "swirl-icon-more-vertikal":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$8();
       }
       break;
     case "swirl-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "swirl-popover-trigger":
       if (!customElements.get(tagName)) {
         defineCustomElement$6();
       }