@getflip/swirl-components 0.455.0 → 0.456.1-beta-20260305113737

package/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-03-04T12:21:47",
+  "timestamp": "2026-03-05T11:36:26",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.1",

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

@@ -22,10 +22,22 @@ const SwirlDialog = class {
             this.dialogClose.emit();
         };
         this.onToggle = (event) => {
-            this.toggleDialog.emit({
+            const detail = {
                 newState: event.newState,
                 dialog: this.dialogEl,
-            });
+            };
+            if (this.el.isConnected) {
+                this.toggleDialog.emit(detail);
+            }
+            else {
+                // If the dialog is not connected to the DOM anymore, we dispatch
+                // a custom event to ensure the event is still emitted.
+                document.dispatchEvent(new CustomEvent("toggleDialog", {
+                    bubbles: true,
+                    composed: true,
+                    detail,
+                }));
+            }
         };
         this.onKeyDown = (event) => {
             if (event.code === "Escape") {
@@ -108,7 +120,7 @@ const SwirlDialog = class {
     render() {
         const className = index$1.classnames("dialog", { "dialog--closing": this.closing });
         const hasLeftControls = Boolean(this.el.querySelector('[slot="left-controls"]'));
-        return (index.h(index.Host, { key: '571edbc26fa392419b9d58c9359530fa547cb25f' }, index.h("dialog", { key: '2f5157af94fef074164f7dc8c173bcf9a6b5edfd', "aria-describedby": "content", "aria-labelledby": this.hideLabel ? undefined : "label", "aria-label": this.hideLabel ? this.label : undefined, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, role: "alertdialog", ref: (el) => (this.dialogEl = el) }, index.h("div", { key: '20004f16913befe6ef23713753124497be496cca', class: "dialog__backdrop", onClick: this.onBackdropClick }), index.h("div", { key: '6c8ad0d560e304a200514a0363bba9582b54d21d', class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (index.h("h2", { key: '5bd4db85613cfece30825b2b5badc825c2dac97e', class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), index.h("div", { key: 'c477f869d5f4184367511864e0a77ddcea594753', class: "dialog__content", part: "dialog__content", id: "content" }, index.h("slot", { key: 'bdceb83e1781efc5e632576829ea5a05c7c7528b' })), index.h("div", { key: '338e4e345effff0e6af26ab3a894ce73aff592f5', class: "dialog__controls" }, hasLeftControls && (index.h("div", { key: '14ec2bb227c05c568bab031d27f3ac083fac6189', class: "dialog__left_controls" }, index.h("slot", { key: '34ee744e09905cb911be48a825dacecd745dfb11', name: "left-controls" }))), this.secondaryActionLabel && (index.h("swirl-button", { key: '76ea7147f9b63149fb752c4feda367126953abf6', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (index.h("swirl-button", { key: '1b166f7e3cb99192022d5ca8c97b6e5c68f82752', intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))));
+        return (index.h(index.Host, { key: 'aed27fd60b073318b2bd447fbdea62b28a27b2bb' }, index.h("dialog", { key: '717b703063cc4f7dc4d6ebd0cb4e32cdd41fc6da', "aria-describedby": "content", "aria-labelledby": this.hideLabel ? undefined : "label", "aria-label": this.hideLabel ? this.label : undefined, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, role: "alertdialog", ref: (el) => (this.dialogEl = el) }, index.h("div", { key: '11cff9977346162bc0e379a2c6b12860efa9756e', class: "dialog__backdrop", onClick: this.onBackdropClick }), index.h("div", { key: 'c537c3eaeb2688e7829163f1bb855f803fbd22b2', class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (index.h("h2", { key: 'b673f936615fff1714137c5e3a0047e153103e2d', class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), index.h("div", { key: '6078b644042f60e89dfe55debeb8aad6a80bed34', class: "dialog__content", part: "dialog__content", id: "content" }, index.h("slot", { key: '708bb8495998e1b91cebf23c4aba27d6225bdbe6' })), index.h("div", { key: 'b47c30c0db1a42257dd198a985fd3c26bcad4094', class: "dialog__controls" }, hasLeftControls && (index.h("div", { key: 'bc4cdcd98a8e57faa1f182ff8a85b261e7757c22', class: "dialog__left_controls" }, index.h("slot", { key: 'c3fc5d235a740e1bbd5e8e5b19fb5901188f82d2', name: "left-controls" }))), this.secondaryActionLabel && (index.h("swirl-button", { key: 'f728634b91e50864b1179267da1d465efae28f2a', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (index.h("swirl-button", { key: '87f838d8b11dfa270ba12c02a981b855029cf69c', intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -50,10 +50,22 @@ const SwirlModal = class {
             this.modalClose.emit();
         };
         this.onToggle = (event) => {
-            this.toggleDialog.emit({
+            const detail = {
                 newState: event.newState,
                 dialog: this.modalEl,
-            });
+            };
+            if (this.el.isConnected) {
+                this.toggleDialog.emit(detail);
+            }
+            else {
+                // If the dialog is not connected to the DOM anymore, we dispatch
+                // a custom event to ensure the event is still emitted.
+                document.dispatchEvent(new CustomEvent("toggleDialog", {
+                    bubbles: true,
+                    composed: true,
+                    detail,
+                }));
+            }
         };
         this.onBackdropClick = () => {
             this.close();
@@ -281,29 +293,29 @@ const SwirlModal = class {
             "modal--sidebar-scrolled-down": this.sidebarScrolledDown,
             "modal--sidebar-scrollable": this.sidebarScrollable,
         });
-        return (index.h(index.Host, { key: 'ffca3ffde40ee2ce12c5bbae16cf666469e5cec8' }, index.h("dialog", { key: 'ecf5e73246420f8b8b01450e1c5765aaf42029b2', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, index.h("div", { key: '1fa3c62f075b0bfd6d3ca30774253a61c4934175', class: "modal__backdrop", onClick: this.onBackdropClick }), index.h("div", { key: '7f9796e4d8e8af5c0642c241b06dcf5fec6223ab', class: "modal__body", part: "modal__body", style: !this.isFullscreen
+        return (index.h(index.Host, { key: '5d7e303e02d067ed79ee08245beeb3505b23d0c8' }, index.h("dialog", { key: '499c2d3cf4d1db9c814fbd08de35103c653d8f53', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, index.h("div", { key: 'fdafa4289dc0e7b1c52f7aba9a78e59e5461b4c3', class: "modal__backdrop", onClick: this.onBackdropClick }), index.h("div", { key: 'd32e5cf93fd3527fa8959a07c489809bf3b5d524', class: "modal__body", part: "modal__body", style: !this.isFullscreen
                 ? {
                     "--swirl-modal-max-height": this.maxHeight,
                     "--swirl-modal-height": this.height,
                     minHeight: this.minHeight,
                     maxWidth: this.maxWidth,
                 }
-                : {} }, index.h("aside", { key: 'da6414275c53f69e0aa79143d9ef55c9aa1e1ce4', class: "modal__sidebar" }, this.sidebarLabel && (index.h("header", { key: '90594916619a30a8d3318497a66598294f748ce5', class: index$1.classnames("modal__sidebar-header", {
+                : {} }, index.h("aside", { key: 'e0d0d96518649aca453d6ae1859d63c7476d0a16', class: "modal__sidebar" }, this.sidebarLabel && (index.h("header", { key: '7ddd6756a831afdf032390da6252810050118818', class: index$1.classnames("modal__sidebar-header", {
                 "modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
-            }) }, this.hasSidebarCloseButton && (index.h("swirl-button", { key: 'ca826c3c1afc1e97159cbb8ec8943b450435abfe', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), index.h("swirl-heading", { key: 'e0ead4e5b5bf1c35c03c96b93498a103b3e634f0', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), index.h("div", { key: '5f2a7ed53bec01ffed40a3d131b64c2e03d83929', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, index.h("slot", { key: 'd42fb0ec47381a6cd6ec477850dc582a240598cb', name: "sidebar-content" })), index.h("div", { key: '268cccb52c4afe9de83e941176517d09cab3b306', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, index.h("slot", { key: 'ea18767a28bd3d8f821e34278e498c3403afa1be', name: "sidebar-footer" }))), index.h("div", { key: 'fbd5a891ba267af682054a898b30cd0fa1689c18', class: "modal__main-content" }, index.h("header", { key: '283ba37d75bf5e08b8b7d84a514d7a3c7c160adf', class: "modal__custom-header", part: "modal__custom-header" }, index.h("slot", { key: 'e444b9b98fd57062354667c46d465ff80bea19f8', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (index.h("header", { key: '65b824cc9c1251b0b943ed445f2e891aee96a847', class: "modal__header" }, index.h("div", { key: '5677c86d1514e5f9fceaad9af8e5c406ff9f900e', class: "modal__header-bar" }, !this.hideCloseButton && (index.h("swirl-button", { key: '753dc28b4f3534d9df68097fa7a9d263b387e8e4', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
+            }) }, this.hasSidebarCloseButton && (index.h("swirl-button", { key: '512cebb0e33e605045841149b23a20242f32cb1f', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), index.h("swirl-heading", { key: 'c644af6fa65c441cb5561dbaf524b52887132501', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), index.h("div", { key: '4195cc1058fc42910fbf2827fa62315391870d69', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, index.h("slot", { key: '621611853e79dd708997fbd79b2378a0e76f5560', name: "sidebar-content" })), index.h("div", { key: '8c2639486b76993821009975a0cffceb619ff665', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, index.h("slot", { key: '51bbc2dff3eebdd9ad2ffbd67c6f97f192d5a1b8', name: "sidebar-footer" }))), index.h("div", { key: '2ce672d9d91a657d900cb7b467c67d1141d25af2', class: "modal__main-content" }, index.h("header", { key: '1deb15b62f8d97fcfc2dcff227a1c4f7810e96c1', class: "modal__custom-header", part: "modal__custom-header" }, index.h("slot", { key: '971bab2b2bf9702423a0029e1377c92f27031216', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (index.h("header", { key: 'f79ba8354749823c6ecff8d16a69a0692bc91116', class: "modal__header" }, index.h("div", { key: '5a782f2522d504b3159ad4dd16169ba559985c4d', class: "modal__header-bar" }, !this.hideCloseButton && (index.h("swirl-button", { key: 'd5ce47698af572d9c496e57166d2fd7758ba2501', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
                 ? "<swirl-icon-close></swirl-icon-close>"
-                : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (index.h("swirl-button", { key: 'e0a43c835df0c35c10f36fd068a3152c1ab79677', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
+                : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (index.h("swirl-button", { key: '12158b9b8e9e198d50f9bfe1966d0647fc4c8d42', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
                 ? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>"
                 : "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen
                 ? this.fullscreenDisableButtonLabel
-                : this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (index.h("swirl-heading", { key: '1717002304eb94bf92d1642b75df8838701472ea', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), index.h("div", { key: 'b5c2a8e8c1fc583b3f4e2182b411654e9c386646', class: "modal__content-container", style: {
+                : this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (index.h("swirl-heading", { key: 'eb66384e6bdd0591720155f875d7c8113d47bf40', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), index.h("div", { key: 'cc0c0a5b1f8eadbf37e2ba0876481a68fbb213c2', class: "modal__content-container", style: {
                 gap: this.contentGap
                     ? `var(--s-space-${this.contentGap})`
                     : undefined,
-            } }, index.h("div", { key: '5c5f2a732234d756dbcf28f58cb8238c9487142b', class: "modal__primary-content", style: {
+            } }, index.h("div", { key: '4a540785ad16b194d2bf912c987854ef0aefaeb8', class: "modal__primary-content", style: {
                 maxWidth: this.primaryContentMaxWidth,
                 flex: this.primaryContentFlex,
-            } }, index.h("div", { key: '3901c89bda375d71d00ca6e24dee56f7f45c98a8', class: "modal__header-tools", part: "modal__header-tools" }, index.h("slot", { key: '8de5d5da42a3e007d6edae7a064d3df8f9fccd95', name: "header-tools" })), index.h("div", { key: '9c60ea7160de25efff272e5e18031a7ca0b0a57f', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, index.h("slot", { key: 'b68ea6b8779f3a307a140af6d9b7d7b67310b27c' }))), index.h("div", { key: '2fd76e1672b9689c257967947f5729ef93cee781', class: "modal__secondary-content", style: {
+            } }, index.h("div", { key: '95f7eb2354c5449b18f432a07c4912491ed701ab', class: "modal__header-tools", part: "modal__header-tools" }, index.h("slot", { key: '1d60b63d1000042a1448ee0244ccbd31d42bf8a2', name: "header-tools" })), index.h("div", { key: '4d16d27052062e70f03fa81bc01bbfea0c0805ba', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, index.h("slot", { key: '05d0c4d3a5430691ca9e5074db7ef3e3ad37e03d' }))), index.h("div", { key: '78deb8ecfbacb2577219ee0859a45a5da7f93d8b', class: "modal__secondary-content", style: {
                 maxWidth: this.secondaryContentMaxWidth,
                 flex: this.secondaryContentFlex,
                 padding: Boolean(this.secondaryContentPadding)
@@ -321,7 +333,7 @@ const SwirlModal = class {
                 paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
                     ? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
                     : undefined,
-            } }, index.h("slot", { key: '905cd5eadd346c30baa9599fd4af3736675a9fcc', name: "secondary-content" }))), index.h("div", { key: 'b08a927b677ee0ddfcd226d3d67360099f98fa48', class: "modal__custom-footer" }, index.h("slot", { key: '53e74812ea012fd42cfa679863381bc2f8428777', name: "custom-footer" })), showControls && (index.h("footer", { key: 'dc2b4cdf5d8001d1f58f39e617c17694e476f4c3', class: "modal__controls" }, index.h("swirl-button-group", { key: 'b4892f3291e0c11f493734f175349f282aad6093', wrap: true }, this.secondaryActionLabel && (index.h("swirl-button", { key: '99a31bbc0ea13d07588e24470e1153d7cbf09543', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (index.h("swirl-button", { key: '142fd942653ae6ab5cf1fc78bf38c2fc9fb1b319', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
+            } }, index.h("slot", { key: 'cd72bf9a5874503c9bc7b17733b6fbe84ce6cae4', name: "secondary-content" }))), index.h("div", { key: '0ca496f691300e9fbc4ee6a6b867b6501c1f292a', class: "modal__custom-footer" }, index.h("slot", { key: 'e428f004ed058339b520198f110064e625f8e03b', name: "custom-footer" })), showControls && (index.h("footer", { key: 'd457989e84d2e354abd444f27458dab14021cb8b', class: "modal__controls" }, index.h("swirl-button-group", { key: '74b3bba2bb32d70f080de8f7e212385805fc1a49', wrap: true }, this.secondaryActionLabel && (index.h("swirl-button", { key: '7fcfe9e269a81e0fcb9039a52071878c58951a78', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (index.h("swirl-button", { key: 'da1cb3c478d8f0d8bf41c4e6adfd76d2e16966ec', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-toast-provider.cjs.entry.js

@@ -111,6 +111,7 @@ const SwirlToastProvider = class {
      * This is necessary to allow toasts to be interactable when a dialog is open, otherwise the toasts would be inert.
      */
     ensureCorrectPosition() {
+        this.activeDialogStack = this.activeDialogStack.filter((dialog) => dialog.isConnected);
         const parent = this.activeDialogStack[this.activeDialogStack.length - 1] ||
             this.originalParent;
         if (this.el.parentElement !== parent) {
@@ -120,7 +121,7 @@ const SwirlToastProvider = class {
         this.popoverEl.showPopover();
     }
     render() {
-        return (index.h(index.Host, { key: '45be26d34ad00323d7ac8fa60d893b051ae5e73a', role: "status" }, index.h("swirl-stack", { key: '9b4a13d53d6cbf870fbcaf7bf79767529e40abc0', class: "toast-provider__stack", part: "toast-provider__stack", popover: "manual", spacing: "12", align: "center", ref: (el) => (this.popoverEl = el) }, this.toasts.map((toast) => {
+        return (index.h(index.Host, { key: 'b814bfac33e13fa660a10ec5d29f5f45fbac8f8d', role: "status" }, index.h("swirl-stack", { key: '03972a88936dfd3697335295381889095f6fb3a8', class: "toast-provider__stack", part: "toast-provider__stack", popover: "manual", spacing: "12", align: "center", ref: (el) => (this.popoverEl = el) }, this.toasts.map((toast) => {
             const props = {
                 ...toast,
                 content: undefined,

package/dist/collection/components/swirl-dialog/swirl-dialog.js

@@ -15,10 +15,22 @@ export class SwirlDialog {
             this.dialogClose.emit();
         };
         this.onToggle = (event) => {
-            this.toggleDialog.emit({
+            const detail = {
                 newState: event.newState,
                 dialog: this.dialogEl,
-            });
+            };
+            if (this.el.isConnected) {
+                this.toggleDialog.emit(detail);
+            }
+            else {
+                // If the dialog is not connected to the DOM anymore, we dispatch
+                // a custom event to ensure the event is still emitted.
+                document.dispatchEvent(new CustomEvent("toggleDialog", {
+                    bubbles: true,
+                    composed: true,
+                    detail,
+                }));
+            }
         };
         this.onKeyDown = (event) => {
             if (event.code === "Escape") {
@@ -101,7 +113,7 @@ export class SwirlDialog {
     render() {
         const className = classnames("dialog", { "dialog--closing": this.closing });
         const hasLeftControls = Boolean(this.el.querySelector('[slot="left-controls"]'));
-        return (h(Host, { key: '571edbc26fa392419b9d58c9359530fa547cb25f' }, h("dialog", { key: '2f5157af94fef074164f7dc8c173bcf9a6b5edfd', "aria-describedby": "content", "aria-labelledby": this.hideLabel ? undefined : "label", "aria-label": this.hideLabel ? this.label : undefined, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, role: "alertdialog", ref: (el) => (this.dialogEl = el) }, h("div", { key: '20004f16913befe6ef23713753124497be496cca', class: "dialog__backdrop", onClick: this.onBackdropClick }), h("div", { key: '6c8ad0d560e304a200514a0363bba9582b54d21d', class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (h("h2", { key: '5bd4db85613cfece30825b2b5badc825c2dac97e', class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), h("div", { key: 'c477f869d5f4184367511864e0a77ddcea594753', class: "dialog__content", part: "dialog__content", id: "content" }, h("slot", { key: 'bdceb83e1781efc5e632576829ea5a05c7c7528b' })), h("div", { key: '338e4e345effff0e6af26ab3a894ce73aff592f5', class: "dialog__controls" }, hasLeftControls && (h("div", { key: '14ec2bb227c05c568bab031d27f3ac083fac6189', class: "dialog__left_controls" }, h("slot", { key: '34ee744e09905cb911be48a825dacecd745dfb11', name: "left-controls" }))), this.secondaryActionLabel && (h("swirl-button", { key: '76ea7147f9b63149fb752c4feda367126953abf6', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '1b166f7e3cb99192022d5ca8c97b6e5c68f82752', intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))));
+        return (h(Host, { key: 'aed27fd60b073318b2bd447fbdea62b28a27b2bb' }, h("dialog", { key: '717b703063cc4f7dc4d6ebd0cb4e32cdd41fc6da', "aria-describedby": "content", "aria-labelledby": this.hideLabel ? undefined : "label", "aria-label": this.hideLabel ? this.label : undefined, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, role: "alertdialog", ref: (el) => (this.dialogEl = el) }, h("div", { key: '11cff9977346162bc0e379a2c6b12860efa9756e', class: "dialog__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'c537c3eaeb2688e7829163f1bb855f803fbd22b2', class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (h("h2", { key: 'b673f936615fff1714137c5e3a0047e153103e2d', class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), h("div", { key: '6078b644042f60e89dfe55debeb8aad6a80bed34', class: "dialog__content", part: "dialog__content", id: "content" }, h("slot", { key: '708bb8495998e1b91cebf23c4aba27d6225bdbe6' })), h("div", { key: 'b47c30c0db1a42257dd198a985fd3c26bcad4094', class: "dialog__controls" }, hasLeftControls && (h("div", { key: 'bc4cdcd98a8e57faa1f182ff8a85b261e7757c22', class: "dialog__left_controls" }, h("slot", { key: 'c3fc5d235a740e1bbd5e8e5b19fb5901188f82d2', name: "left-controls" }))), this.secondaryActionLabel && (h("swirl-button", { key: 'f728634b91e50864b1179267da1d465efae28f2a', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '87f838d8b11dfa270ba12c02a981b855029cf69c', intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))));
     }
     static get is() { return "swirl-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-modal/swirl-modal.js

@@ -45,10 +45,22 @@ export class SwirlModal {
             this.modalClose.emit();
         };
         this.onToggle = (event) => {
-            this.toggleDialog.emit({
+            const detail = {
                 newState: event.newState,
                 dialog: this.modalEl,
-            });
+            };
+            if (this.el.isConnected) {
+                this.toggleDialog.emit(detail);
+            }
+            else {
+                // If the dialog is not connected to the DOM anymore, we dispatch
+                // a custom event to ensure the event is still emitted.
+                document.dispatchEvent(new CustomEvent("toggleDialog", {
+                    bubbles: true,
+                    composed: true,
+                    detail,
+                }));
+            }
         };
         this.onBackdropClick = () => {
             this.close();
@@ -276,29 +288,29 @@ export class SwirlModal {
             "modal--sidebar-scrolled-down": this.sidebarScrolledDown,
             "modal--sidebar-scrollable": this.sidebarScrollable,
         });
-        return (h(Host, { key: 'ffca3ffde40ee2ce12c5bbae16cf666469e5cec8' }, h("dialog", { key: 'ecf5e73246420f8b8b01450e1c5765aaf42029b2', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, h("div", { key: '1fa3c62f075b0bfd6d3ca30774253a61c4934175', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: '7f9796e4d8e8af5c0642c241b06dcf5fec6223ab', class: "modal__body", part: "modal__body", style: !this.isFullscreen
+        return (h(Host, { key: '5d7e303e02d067ed79ee08245beeb3505b23d0c8' }, h("dialog", { key: '499c2d3cf4d1db9c814fbd08de35103c653d8f53', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, h("div", { key: 'fdafa4289dc0e7b1c52f7aba9a78e59e5461b4c3', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'd32e5cf93fd3527fa8959a07c489809bf3b5d524', class: "modal__body", part: "modal__body", style: !this.isFullscreen
                 ? {
                     "--swirl-modal-max-height": this.maxHeight,
                     "--swirl-modal-height": this.height,
                     minHeight: this.minHeight,
                     maxWidth: this.maxWidth,
                 }
-                : {} }, h("aside", { key: 'da6414275c53f69e0aa79143d9ef55c9aa1e1ce4', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: '90594916619a30a8d3318497a66598294f748ce5', class: classnames("modal__sidebar-header", {
+                : {} }, h("aside", { key: 'e0d0d96518649aca453d6ae1859d63c7476d0a16', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: '7ddd6756a831afdf032390da6252810050118818', class: classnames("modal__sidebar-header", {
                 "modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
-            }) }, this.hasSidebarCloseButton && (h("swirl-button", { key: 'ca826c3c1afc1e97159cbb8ec8943b450435abfe', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: 'e0ead4e5b5bf1c35c03c96b93498a103b3e634f0', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: '5f2a7ed53bec01ffed40a3d131b64c2e03d83929', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: 'd42fb0ec47381a6cd6ec477850dc582a240598cb', name: "sidebar-content" })), h("div", { key: '268cccb52c4afe9de83e941176517d09cab3b306', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, h("slot", { key: 'ea18767a28bd3d8f821e34278e498c3403afa1be', name: "sidebar-footer" }))), h("div", { key: 'fbd5a891ba267af682054a898b30cd0fa1689c18', class: "modal__main-content" }, h("header", { key: '283ba37d75bf5e08b8b7d84a514d7a3c7c160adf', class: "modal__custom-header", part: "modal__custom-header" }, h("slot", { key: 'e444b9b98fd57062354667c46d465ff80bea19f8', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '65b824cc9c1251b0b943ed445f2e891aee96a847', class: "modal__header" }, h("div", { key: '5677c86d1514e5f9fceaad9af8e5c406ff9f900e', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: '753dc28b4f3534d9df68097fa7a9d263b387e8e4', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
+            }) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '512cebb0e33e605045841149b23a20242f32cb1f', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: 'c644af6fa65c441cb5561dbaf524b52887132501', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: '4195cc1058fc42910fbf2827fa62315391870d69', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: '621611853e79dd708997fbd79b2378a0e76f5560', name: "sidebar-content" })), h("div", { key: '8c2639486b76993821009975a0cffceb619ff665', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, h("slot", { key: '51bbc2dff3eebdd9ad2ffbd67c6f97f192d5a1b8', name: "sidebar-footer" }))), h("div", { key: '2ce672d9d91a657d900cb7b467c67d1141d25af2', class: "modal__main-content" }, h("header", { key: '1deb15b62f8d97fcfc2dcff227a1c4f7810e96c1', class: "modal__custom-header", part: "modal__custom-header" }, h("slot", { key: '971bab2b2bf9702423a0029e1377c92f27031216', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: 'f79ba8354749823c6ecff8d16a69a0692bc91116', class: "modal__header" }, h("div", { key: '5a782f2522d504b3159ad4dd16169ba559985c4d', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: 'd5ce47698af572d9c496e57166d2fd7758ba2501', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
                 ? "<swirl-icon-close></swirl-icon-close>"
-                : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: 'e0a43c835df0c35c10f36fd068a3152c1ab79677', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
+                : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: '12158b9b8e9e198d50f9bfe1966d0647fc4c8d42', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
                 ? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>"
                 : "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen
                 ? this.fullscreenDisableButtonLabel
-                : this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '1717002304eb94bf92d1642b75df8838701472ea', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: 'b5c2a8e8c1fc583b3f4e2182b411654e9c386646', class: "modal__content-container", style: {
+                : this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: 'eb66384e6bdd0591720155f875d7c8113d47bf40', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: 'cc0c0a5b1f8eadbf37e2ba0876481a68fbb213c2', class: "modal__content-container", style: {
                 gap: this.contentGap
                     ? `var(--s-space-${this.contentGap})`
                     : undefined,
-            } }, h("div", { key: '5c5f2a732234d756dbcf28f58cb8238c9487142b', class: "modal__primary-content", style: {
+            } }, h("div", { key: '4a540785ad16b194d2bf912c987854ef0aefaeb8', class: "modal__primary-content", style: {
                 maxWidth: this.primaryContentMaxWidth,
                 flex: this.primaryContentFlex,
-            } }, h("div", { key: '3901c89bda375d71d00ca6e24dee56f7f45c98a8', class: "modal__header-tools", part: "modal__header-tools" }, h("slot", { key: '8de5d5da42a3e007d6edae7a064d3df8f9fccd95', name: "header-tools" })), h("div", { key: '9c60ea7160de25efff272e5e18031a7ca0b0a57f', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, h("slot", { key: 'b68ea6b8779f3a307a140af6d9b7d7b67310b27c' }))), h("div", { key: '2fd76e1672b9689c257967947f5729ef93cee781', class: "modal__secondary-content", style: {
+            } }, h("div", { key: '95f7eb2354c5449b18f432a07c4912491ed701ab', class: "modal__header-tools", part: "modal__header-tools" }, h("slot", { key: '1d60b63d1000042a1448ee0244ccbd31d42bf8a2', name: "header-tools" })), h("div", { key: '4d16d27052062e70f03fa81bc01bbfea0c0805ba', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, h("slot", { key: '05d0c4d3a5430691ca9e5074db7ef3e3ad37e03d' }))), h("div", { key: '78deb8ecfbacb2577219ee0859a45a5da7f93d8b', class: "modal__secondary-content", style: {
                 maxWidth: this.secondaryContentMaxWidth,
                 flex: this.secondaryContentFlex,
                 padding: Boolean(this.secondaryContentPadding)
@@ -316,7 +328,7 @@ export class SwirlModal {
                 paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
                     ? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
                     : undefined,
-            } }, h("slot", { key: '905cd5eadd346c30baa9599fd4af3736675a9fcc', name: "secondary-content" }))), h("div", { key: 'b08a927b677ee0ddfcd226d3d67360099f98fa48', class: "modal__custom-footer" }, h("slot", { key: '53e74812ea012fd42cfa679863381bc2f8428777', name: "custom-footer" })), showControls && (h("footer", { key: 'dc2b4cdf5d8001d1f58f39e617c17694e476f4c3', class: "modal__controls" }, h("swirl-button-group", { key: 'b4892f3291e0c11f493734f175349f282aad6093', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: '99a31bbc0ea13d07588e24470e1153d7cbf09543', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '142fd942653ae6ab5cf1fc78bf38c2fc9fb1b319', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
+            } }, h("slot", { key: 'cd72bf9a5874503c9bc7b17733b6fbe84ce6cae4', name: "secondary-content" }))), h("div", { key: '0ca496f691300e9fbc4ee6a6b867b6501c1f292a', class: "modal__custom-footer" }, h("slot", { key: 'e428f004ed058339b520198f110064e625f8e03b', name: "custom-footer" })), showControls && (h("footer", { key: 'd457989e84d2e354abd444f27458dab14021cb8b', class: "modal__controls" }, h("swirl-button-group", { key: '74b3bba2bb32d70f080de8f7e212385805fc1a49', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: '7fcfe9e269a81e0fcb9039a52071878c58951a78', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: 'da1cb3c478d8f0d8bf41c4e6adfd76d2e16966ec', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
     }
     static get is() { return "swirl-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-toast-provider/swirl-toast-provider.js

@@ -105,6 +105,7 @@ export class SwirlToastProvider {
      * This is necessary to allow toasts to be interactable when a dialog is open, otherwise the toasts would be inert.
      */
     ensureCorrectPosition() {
+        this.activeDialogStack = this.activeDialogStack.filter((dialog) => dialog.isConnected);
         const parent = this.activeDialogStack[this.activeDialogStack.length - 1] ||
             this.originalParent;
         if (this.el.parentElement !== parent) {
@@ -114,7 +115,7 @@ export class SwirlToastProvider {
         this.popoverEl.showPopover();
     }
     render() {
-        return (h(Host, { key: '45be26d34ad00323d7ac8fa60d893b051ae5e73a', role: "status" }, h("swirl-stack", { key: '9b4a13d53d6cbf870fbcaf7bf79767529e40abc0', class: "toast-provider__stack", part: "toast-provider__stack", popover: "manual", spacing: "12", align: "center", ref: (el) => (this.popoverEl = el) }, this.toasts.map((toast) => {
+        return (h(Host, { key: 'b814bfac33e13fa660a10ec5d29f5f45fbac8f8d', role: "status" }, h("swirl-stack", { key: '03972a88936dfd3697335295381889095f6fb3a8', class: "toast-provider__stack", part: "toast-provider__stack", popover: "manual", spacing: "12", align: "center", ref: (el) => (this.popoverEl = el) }, this.toasts.map((toast) => {
             const props = {
                 ...toast,
                 content: undefined,

package/dist/collection/index.js

@@ -1 +1 @@
-export {};
+export * from "./components";