@getflip/swirl-components 0.525.0 → 0.526.0

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

@@ -68,6 +68,9 @@ const SwirlModal = class {
             }
         };
         this.onBackdropClick = () => {
+            if (this.disableBackdropClose) {
+                return;
+            }
             this.close();
         };
         this.onCloseButtonClick = () => {
@@ -295,29 +298,29 @@ const SwirlModal = class {
             "modal--show-backdrop": this.showBackdrop === true,
             "modal--hide-backdrop": this.showBackdrop === false,
         });
-        return (index.h(index.Host, { key: '4e7d148841ef6a533400bbede74b50cb71f3ad95' }, index.h("dialog", { key: '117d80bda8001b13e3a35fe4b0fc4aca44032c26', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, index.h("div", { key: 'e80adc0ff71799033240a098096229fa5f2cd37b', class: "modal__backdrop", onClick: this.onBackdropClick }), index.h("div", { key: '3c7527fae9645d1c8c0a49eebce3b0ea33211614', class: "modal__body", part: "modal__body", style: !this.isFullscreen
+        return (index.h(index.Host, { key: '23fc47450954cdec1465b6cacc87665b74392b40' }, index.h("dialog", { key: 'bdee3e6f0b8903e63341b93e73525387d4878229', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, index.h("div", { key: '3b880ae4075a3249f2a56a424db3269183cc160d', class: "modal__backdrop", onClick: this.onBackdropClick }), index.h("div", { key: 'df55123f4afffde7862c80f99166d4dcc28c227e', 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: 'd9923d714020bed94e559ed4b68ee6bcff00e5cb', class: "modal__sidebar" }, this.sidebarLabel && (index.h("header", { key: '76440a2b5e964f40ab0eb5afa6edd18e208dd679', class: index$1.classnames("modal__sidebar-header", {
+                : {} }, index.h("aside", { key: 'f3b77cc6ef02ffe087f7e6701deb79c6edc0d45e', class: "modal__sidebar" }, this.sidebarLabel && (index.h("header", { key: 'ed35b62a6ec6d77a9360ffa80b9effab505c4f4e', class: index$1.classnames("modal__sidebar-header", {
                 "modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
-            }) }, this.hasSidebarCloseButton && (index.h("swirl-button", { key: 'e27400cdbb0315cb2d0ba510025ed914572986b1', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), index.h("swirl-heading", { key: 'db4c6bf78e90bddbc592c48c924e2ad6bea770f7', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), index.h("div", { key: '2b63ca9c7708ffbe33349ac086551c2bcec2d04b', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, index.h("slot", { key: '8747fb0b5aa6e5d17c076132d2d507d2afef8483', name: "sidebar-content", onSlotchange: this.updateSidebarContentStatus })), index.h("div", { key: '164bdc171bbb160aeb3762718107898eec7b4777', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, index.h("slot", { key: 'aca17fa682d3ca52fa4024186ad5fc679a576c9b', name: "sidebar-footer", onSlotchange: this.updateSidebarFooterStatus }))), index.h("div", { key: '78e294b5db70eb997700c05eb20132e490ec7882', class: "modal__main-content" }, index.h("header", { key: '5ebbee3cdc7f4376031388a103111e7922283bd5', class: "modal__custom-header", part: "modal__custom-header" }, index.h("slot", { key: '27af848ae5c3d8cefe16e503b0a006c8c45b5e0b', name: "custom-header", onSlotchange: this.updateCustomHeaderStatus })), (!this.hideLabel || !this.hideCloseButton) && (index.h("header", { key: '9bdc985e51b557a3aac74b28008411a902ded6d9', class: "modal__header" }, index.h("div", { key: '39f297feadbe3e0c41dc54b7531a0229d31988d5', class: "modal__header-bar" }, !this.hideCloseButton && (index.h("swirl-button", { key: 'f9a0c0c7aa2586bdd86606f3051ee92a800ff41a', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
+            }) }, this.hasSidebarCloseButton && (index.h("swirl-button", { key: 'd73cb3f8b8d032245a4efbb4fba158bde22e19d2', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), index.h("swirl-heading", { key: '9529520318f4ee7ace2adb71927f2587c22c01b4', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), index.h("div", { key: 'b9893e1d9193c99c53a33c02773e96d4611b3040', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, index.h("slot", { key: '6086f942484525006d1de352ced3693f2afac73c', name: "sidebar-content", onSlotchange: this.updateSidebarContentStatus })), index.h("div", { key: '7911c4c01757dc9157a611558d7830997891032a', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, index.h("slot", { key: '4154270c217c274954ae83060fc31069e2696c2e', name: "sidebar-footer", onSlotchange: this.updateSidebarFooterStatus }))), index.h("div", { key: '5e78d1d3053ff0f54331ec072878084720b31110', class: "modal__main-content" }, index.h("header", { key: '84bf917f205c56a871e13fbcb749690bba1cbb06', class: "modal__custom-header", part: "modal__custom-header" }, index.h("slot", { key: '5fd2bb6788938d18f9e40cfe42eaa8b36379e6ad', name: "custom-header", onSlotchange: this.updateCustomHeaderStatus })), (!this.hideLabel || !this.hideCloseButton) && (index.h("header", { key: 'c6c03d149d8e1c15e491e1ed7071821348b76c1f', class: "modal__header" }, index.h("div", { key: '45235c736ee6686599513f1f80bff3b68c0a100e', class: "modal__header-bar" }, !this.hideCloseButton && (index.h("swirl-button", { key: '2c6edcc7f1bcd33fcf880fa48567f6eddc067afd', 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: 'a117081f4d8cf882f6ee95b9afbb8b700bcd6406', 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: '673043a824362619f11c54f31a15fa9477117883', 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: '0c438ba220ace21998b87eff745c913a07e01d51', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), index.h("div", { key: '3786ea1e0ae43a58d76b68b408559628c7eb5ab0', class: "modal__content-container", style: {
+                : this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (index.h("swirl-heading", { key: '1719c5b97263cf10c305770607eb1ea7145acb51', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), index.h("div", { key: 'c32ad1be58ce0bfd733a059fabc88411a810de30', class: "modal__content-container", style: {
                 gap: this.contentGap
                     ? `var(--s-space-${this.contentGap})`
                     : undefined,
-            } }, index.h("div", { key: '9e5365c39d9a99e0711068e05da3686dbed3b38e', class: "modal__primary-content", style: {
+            } }, index.h("div", { key: '8d7a796fc546b0b7bebfa213f831c628393f9dfe', class: "modal__primary-content", style: {
                 maxWidth: this.primaryContentMaxWidth,
                 flex: this.primaryContentFlex,
-            } }, index.h("div", { key: '04f6735c47d4c302db8b8669f7528db2f44042bd', class: "modal__header-tools", part: "modal__header-tools" }, index.h("slot", { key: '4e5d113031801f529d1e27cdde88adcb110ecf14', name: "header-tools", onSlotchange: this.updateHeaderToolsStatus })), index.h("div", { key: '79792a34197b1f47aa94e39e2152f6565cee5630', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, index.h("slot", { key: 'f0a0e5cc2cfae741d02d7dc081ec499acb94e11f' }))), index.h("div", { key: 'ccbdd483db514d93c74a70a64747b697f7f0e32d', class: "modal__secondary-content", style: {
+            } }, index.h("div", { key: '7299870c633ed4456d08d22dc1eb750e4898b41c', class: "modal__header-tools", part: "modal__header-tools" }, index.h("slot", { key: '27b39b1bbceb3890fd3f2dea32642a901c87c076', name: "header-tools", onSlotchange: this.updateHeaderToolsStatus })), index.h("div", { key: 'f8336f9a3638c1e9285d94900764f09293aa6c30', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, index.h("slot", { key: '57fad6f717f5256c938b0142b88c42d59dc968e3' }))), index.h("div", { key: '05ab11a1b5ff7804a6b56041fdfcf4230f414ba4', class: "modal__secondary-content", style: {
                 maxWidth: this.secondaryContentMaxWidth,
                 flex: this.secondaryContentFlex,
                 padding: Boolean(this.secondaryContentPadding)
@@ -335,7 +338,7 @@ const SwirlModal = class {
                 paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
                     ? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
                     : undefined,
-            } }, index.h("slot", { key: '7fa5754d3fd68ee34d452016b7afa090ef1904fc', name: "secondary-content", onSlotchange: this.updateSecondaryContentStatus }))), index.h("div", { key: 'b33405ae01b437498d738b9312a27debb8adb8f1', class: "modal__custom-footer" }, index.h("slot", { key: 'bdfcc495ab4d4dd7beb5df3c06822eb3a46d449e', name: "custom-footer", onSlotchange: this.updateCustomFooterStatus })), showControls && (index.h("footer", { key: 'afb432d444d64beaf85bfadae7169687e173f4cc', class: "modal__controls" }, index.h("swirl-button-group", { key: '19bcf388f329faddd7ae4fd9d5c2b0851231a1a9', wrap: true }, this.secondaryActionLabel && (index.h("swirl-button", { key: '92787acfda759009792de450e51e60829c2bd6c5', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (index.h("swirl-button", { key: '69a0e33d545983354e4004a46ea8ac5c643dad74', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
+            } }, index.h("slot", { key: '6602b580cc959944932c42bfe74f838fa7dc37a4', name: "secondary-content", onSlotchange: this.updateSecondaryContentStatus }))), index.h("div", { key: '17afe035cebb37925f6cf912448a29db22359ee6', class: "modal__custom-footer" }, index.h("slot", { key: '44c6d8340fc1b9c32521cc61ed0b5b4cee37ec50', name: "custom-footer", onSlotchange: this.updateCustomFooterStatus })), showControls && (index.h("footer", { key: '6e7732616ce97db76e752bdd8c3e540d380c3fe7', class: "modal__controls" }, index.h("swirl-button-group", { key: '146060354a8cd62c236d025b576ef48a357be7f2', wrap: true }, this.secondaryActionLabel && (index.h("swirl-button", { key: 'eabd37aa403ab8b87fc6edb76821f3ccb25e8f7d', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (index.h("swirl-button", { key: '6988e29d8e1caf2faa8dfbbce0ef454e4552fdee', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.css

@@ -91,25 +91,9 @@
     display: none;
   }
 
-.avatar-group--centered-2 ::slotted(:nth-child(1)) {
-    z-index: 2;
-    box-shadow: var(--s-shadow-level-2);
-  }
-
-.avatar-group--centered-2 ::slotted(:nth-child(2)) {
-    z-index: 1;
-    transform: scale(0.833333);
-    margin-right: calc(var(--swirl-avatar-size) * -0.083333);
-    margin-left: calc(var(--swirl-avatar-size) * -0.333333);
-  }
-
-.avatar-group--centered-2 ::slotted(:nth-child(n + 3)) {
-    display: none;
-  }
-
 /* centre */
 
-.avatar-group--centered-3 ::slotted(:nth-child(1)) {
+.avatar-group--centered-2 ::slotted(:nth-child(1)), .avatar-group--centered-3 ::slotted(:nth-child(1)) {
     z-index: 2;
     order: 2;
     margin-left: calc(var(--swirl-avatar-size) * -0.333333);
@@ -118,7 +102,7 @@
 
 /* right */
 
-.avatar-group--centered-3 ::slotted(:nth-child(2)) {
+.avatar-group--centered-2 ::slotted(:nth-child(2)), .avatar-group--centered-3 ::slotted(:nth-child(2)) {
     z-index: 1;
     order: 3;
     transform: scale(0.833333);
@@ -126,6 +110,14 @@
     margin-left: calc(var(--swirl-avatar-size) * -0.333333);
   }
 
+.avatar-group--centered-2 ::slotted(:nth-child(1)) {
+    margin-left: calc(var(--swirl-avatar-size) * 0.583334);
+  }
+
+.avatar-group--centered-2 ::slotted(:nth-child(n + 3)) {
+    display: none;
+  }
+
 /* left */
 
 .avatar-group--centered-3 ::slotted(:nth-child(3)) {
@@ -141,7 +133,7 @@
 
 /* centre */
 
-.avatar-group--centered-5 ::slotted(:nth-child(1)) {
+.avatar-group--centered-4 ::slotted(:nth-child(1)), .avatar-group--centered-5 ::slotted(:nth-child(1)) {
     z-index: 3;
     order: 3;
     margin-left: calc(var(--swirl-avatar-size) * -0.333333);
@@ -150,7 +142,7 @@
 
 /* inner right */
 
-.avatar-group--centered-5 ::slotted(:nth-child(2)) {
+.avatar-group--centered-4 ::slotted(:nth-child(2)), .avatar-group--centered-5 ::slotted(:nth-child(2)) {
     z-index: 2;
     order: 4;
     transform: scale(0.833333);
@@ -159,7 +151,7 @@
 
 /* inner left */
 
-.avatar-group--centered-5 ::slotted(:nth-child(3)) {
+.avatar-group--centered-4 ::slotted(:nth-child(3)), .avatar-group--centered-5 ::slotted(:nth-child(3)) {
     z-index: 2;
     order: 2;
     transform: scale(0.833333);
@@ -168,7 +160,7 @@
 
 /* outer right */
 
-.avatar-group--centered-5 ::slotted(:nth-child(4)) {
+.avatar-group--centered-4 ::slotted(:nth-child(4)), .avatar-group--centered-5 ::slotted(:nth-child(4)) {
     z-index: 1;
     order: 5;
     transform: scale(0.666667);
@@ -176,6 +168,14 @@
     margin-left: calc(var(--swirl-avatar-size) * -0.5);
   }
 
+.avatar-group--centered-4 ::slotted(:nth-child(3)) {
+    margin-left: calc(var(--swirl-avatar-size) * 0.333333);
+  }
+
+.avatar-group--centered-4 ::slotted(:nth-child(n + 5)) {
+    display: none;
+  }
+
 /* outer left */
 
 .avatar-group--centered-5 ::slotted(:nth-child(5)) {

package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.js

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
 import classnames from "classnames";
-const centeredLayoutArrangements = [1, 2, 3, 5];
+const maxCenteredLayoutAvatars = 5;
 /**
  * @slot slot - Your avatar components
  */
@@ -42,10 +42,7 @@ export class SwirlAvatarGroup {
         }
     }
     getCenteredArrangement() {
-        const fittingArrangements = centeredLayoutArrangements.filter((arrangement) => arrangement <= this.avatars.length);
-        return fittingArrangements.length > 0
-            ? fittingArrangements[fittingArrangements.length - 1]
-            : centeredLayoutArrangements[0];
+        return Math.min(Math.max(this.avatars.length, 1), maxCenteredLayoutAvatars);
     }
     render() {
         const className = classnames("avatar-group", `avatar-group--${this.layout}-stack`, {
@@ -53,7 +50,7 @@ export class SwirlAvatarGroup {
             [`avatar-group--centered-${this.getCenteredArrangement()}`]: this.layout === "centered",
         });
         const badgeClassName = classnames("avatar-group__badge");
-        return (h(Host, { key: 'd380083e116cf7e25e1fc258bd9618d85f82468a' }, h("div", { key: 'f0e4360cf381bb5b8fe34f1856b48216aba95ae1', "aria-label": this.label, class: className, role: this.semantics }, h("slot", { key: 'ca53eed3ef6fd319c453633042137591779070f5', onSlotchange: this.onSlotChange }), this.badge && (h("span", { key: '142d895678c99d05ee9ad90e041d5d30a4d33a1c', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
+        return (h(Host, { key: '43c20e73e894ae03d53b90d95dcd16db43e50ccd' }, h("div", { key: '8b7bdf46aab2a02702bcdbd5b3544b1fa27f7779', "aria-label": this.label, class: className, role: this.semantics }, h("slot", { key: 'e5ace98ce81e1519916e5a79158c48c56b2f19ab', onSlotchange: this.onSlotChange }), this.badge && (h("span", { key: '6f229b7a50e9d02487f662952a168c9202e26c38', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
     }
     static get is() { return "swirl-avatar-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.stories.js

@@ -60,18 +60,23 @@ export const WithSquareAvatars = TemplateWithSquareAvatars.bind({});
 WithSquareAvatars.args = {
     layout: "horizontal",
 };
-const TemplateWithCenteredLayout = (args) => {
+const centeredLayoutAvatarMarkup = [
+    `<swirl-avatar label="Jane Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=a" size="l" variant="square"></swirl-avatar>`,
+    `<swirl-avatar label="John Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=b" size="l" variant="square"></swirl-avatar>`,
+    `<swirl-avatar label="Jane Roe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=c" size="l" variant="square"></swirl-avatar>`,
+    `<swirl-avatar label="John Roe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=d" size="l" variant="square"></swirl-avatar>`,
+    `<swirl-avatar label="Jane Smith" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=e" size="l" variant="square"></swirl-avatar>`,
+];
+const createCenteredLayoutTemplate = (count) => (args) => {
     const element = generateStoryElement("swirl-avatar-group", args);
-    element.innerHTML = `
-    <swirl-avatar label="Jane Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=a" size="l" variant="square"></swirl-avatar>
-    <swirl-avatar label="John Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=b" size="l" variant="square"></swirl-avatar>
-    <swirl-avatar label="Jane Roe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=c" size="l" variant="square"></swirl-avatar>
-    <swirl-avatar label="John Roe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=d" size="l" variant="square"></swirl-avatar>
-    <swirl-avatar label="Jane Smith" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=e" size="l" variant="square"></swirl-avatar>
-  `;
+    element.innerHTML = centeredLayoutAvatarMarkup.slice(0, count).join("\n");
     return element;
 };
-export const WithCenteredLayout = TemplateWithCenteredLayout.bind({});
+export const WithCenteredLayout = createCenteredLayoutTemplate(5).bind({});
 WithCenteredLayout.args = {
     layout: "centered",
 };
+export const WithCenteredLayoutTwoAvatars = createCenteredLayoutTemplate(2).bind({});
+WithCenteredLayoutTwoAvatars.args = {
+    layout: "centered",
+};

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

@@ -63,6 +63,9 @@ export class SwirlModal {
             }
         };
         this.onBackdropClick = () => {
+            if (this.disableBackdropClose) {
+                return;
+            }
             this.close();
         };
         this.onCloseButtonClick = () => {
@@ -290,29 +293,29 @@ export class SwirlModal {
             "modal--show-backdrop": this.showBackdrop === true,
             "modal--hide-backdrop": this.showBackdrop === false,
         });
-        return (h(Host, { key: '4e7d148841ef6a533400bbede74b50cb71f3ad95' }, h("dialog", { key: '117d80bda8001b13e3a35fe4b0fc4aca44032c26', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, h("div", { key: 'e80adc0ff71799033240a098096229fa5f2cd37b', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: '3c7527fae9645d1c8c0a49eebce3b0ea33211614', class: "modal__body", part: "modal__body", style: !this.isFullscreen
+        return (h(Host, { key: '23fc47450954cdec1465b6cacc87665b74392b40' }, h("dialog", { key: 'bdee3e6f0b8903e63341b93e73525387d4878229', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, h("div", { key: '3b880ae4075a3249f2a56a424db3269183cc160d', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'df55123f4afffde7862c80f99166d4dcc28c227e', 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: 'd9923d714020bed94e559ed4b68ee6bcff00e5cb', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: '76440a2b5e964f40ab0eb5afa6edd18e208dd679', class: classnames("modal__sidebar-header", {
+                : {} }, h("aside", { key: 'f3b77cc6ef02ffe087f7e6701deb79c6edc0d45e', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: 'ed35b62a6ec6d77a9360ffa80b9effab505c4f4e', class: classnames("modal__sidebar-header", {
                 "modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
-            }) }, this.hasSidebarCloseButton && (h("swirl-button", { key: 'e27400cdbb0315cb2d0ba510025ed914572986b1', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: 'db4c6bf78e90bddbc592c48c924e2ad6bea770f7', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: '2b63ca9c7708ffbe33349ac086551c2bcec2d04b', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: '8747fb0b5aa6e5d17c076132d2d507d2afef8483', name: "sidebar-content", onSlotchange: this.updateSidebarContentStatus })), h("div", { key: '164bdc171bbb160aeb3762718107898eec7b4777', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, h("slot", { key: 'aca17fa682d3ca52fa4024186ad5fc679a576c9b', name: "sidebar-footer", onSlotchange: this.updateSidebarFooterStatus }))), h("div", { key: '78e294b5db70eb997700c05eb20132e490ec7882', class: "modal__main-content" }, h("header", { key: '5ebbee3cdc7f4376031388a103111e7922283bd5', class: "modal__custom-header", part: "modal__custom-header" }, h("slot", { key: '27af848ae5c3d8cefe16e503b0a006c8c45b5e0b', name: "custom-header", onSlotchange: this.updateCustomHeaderStatus })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '9bdc985e51b557a3aac74b28008411a902ded6d9', class: "modal__header" }, h("div", { key: '39f297feadbe3e0c41dc54b7531a0229d31988d5', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: 'f9a0c0c7aa2586bdd86606f3051ee92a800ff41a', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
+            }) }, this.hasSidebarCloseButton && (h("swirl-button", { key: 'd73cb3f8b8d032245a4efbb4fba158bde22e19d2', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: '9529520318f4ee7ace2adb71927f2587c22c01b4', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: 'b9893e1d9193c99c53a33c02773e96d4611b3040', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: '6086f942484525006d1de352ced3693f2afac73c', name: "sidebar-content", onSlotchange: this.updateSidebarContentStatus })), h("div", { key: '7911c4c01757dc9157a611558d7830997891032a', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, h("slot", { key: '4154270c217c274954ae83060fc31069e2696c2e', name: "sidebar-footer", onSlotchange: this.updateSidebarFooterStatus }))), h("div", { key: '5e78d1d3053ff0f54331ec072878084720b31110', class: "modal__main-content" }, h("header", { key: '84bf917f205c56a871e13fbcb749690bba1cbb06', class: "modal__custom-header", part: "modal__custom-header" }, h("slot", { key: '5fd2bb6788938d18f9e40cfe42eaa8b36379e6ad', name: "custom-header", onSlotchange: this.updateCustomHeaderStatus })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: 'c6c03d149d8e1c15e491e1ed7071821348b76c1f', class: "modal__header" }, h("div", { key: '45235c736ee6686599513f1f80bff3b68c0a100e', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: '2c6edcc7f1bcd33fcf880fa48567f6eddc067afd', 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: 'a117081f4d8cf882f6ee95b9afbb8b700bcd6406', 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: '673043a824362619f11c54f31a15fa9477117883', 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: '0c438ba220ace21998b87eff745c913a07e01d51', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: '3786ea1e0ae43a58d76b68b408559628c7eb5ab0', class: "modal__content-container", style: {
+                : this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '1719c5b97263cf10c305770607eb1ea7145acb51', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: 'c32ad1be58ce0bfd733a059fabc88411a810de30', class: "modal__content-container", style: {
                 gap: this.contentGap
                     ? `var(--s-space-${this.contentGap})`
                     : undefined,
-            } }, h("div", { key: '9e5365c39d9a99e0711068e05da3686dbed3b38e', class: "modal__primary-content", style: {
+            } }, h("div", { key: '8d7a796fc546b0b7bebfa213f831c628393f9dfe', class: "modal__primary-content", style: {
                 maxWidth: this.primaryContentMaxWidth,
                 flex: this.primaryContentFlex,
-            } }, h("div", { key: '04f6735c47d4c302db8b8669f7528db2f44042bd', class: "modal__header-tools", part: "modal__header-tools" }, h("slot", { key: '4e5d113031801f529d1e27cdde88adcb110ecf14', name: "header-tools", onSlotchange: this.updateHeaderToolsStatus })), h("div", { key: '79792a34197b1f47aa94e39e2152f6565cee5630', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, h("slot", { key: 'f0a0e5cc2cfae741d02d7dc081ec499acb94e11f' }))), h("div", { key: 'ccbdd483db514d93c74a70a64747b697f7f0e32d', class: "modal__secondary-content", style: {
+            } }, h("div", { key: '7299870c633ed4456d08d22dc1eb750e4898b41c', class: "modal__header-tools", part: "modal__header-tools" }, h("slot", { key: '27b39b1bbceb3890fd3f2dea32642a901c87c076', name: "header-tools", onSlotchange: this.updateHeaderToolsStatus })), h("div", { key: 'f8336f9a3638c1e9285d94900764f09293aa6c30', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, h("slot", { key: '57fad6f717f5256c938b0142b88c42d59dc968e3' }))), h("div", { key: '05ab11a1b5ff7804a6b56041fdfcf4230f414ba4', class: "modal__secondary-content", style: {
                 maxWidth: this.secondaryContentMaxWidth,
                 flex: this.secondaryContentFlex,
                 padding: Boolean(this.secondaryContentPadding)
@@ -330,7 +333,7 @@ export class SwirlModal {
                 paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
                     ? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
                     : undefined,
-            } }, h("slot", { key: '7fa5754d3fd68ee34d452016b7afa090ef1904fc', name: "secondary-content", onSlotchange: this.updateSecondaryContentStatus }))), h("div", { key: 'b33405ae01b437498d738b9312a27debb8adb8f1', class: "modal__custom-footer" }, h("slot", { key: 'bdfcc495ab4d4dd7beb5df3c06822eb3a46d449e', name: "custom-footer", onSlotchange: this.updateCustomFooterStatus })), showControls && (h("footer", { key: 'afb432d444d64beaf85bfadae7169687e173f4cc', class: "modal__controls" }, h("swirl-button-group", { key: '19bcf388f329faddd7ae4fd9d5c2b0851231a1a9', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: '92787acfda759009792de450e51e60829c2bd6c5', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '69a0e33d545983354e4004a46ea8ac5c643dad74', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
+            } }, h("slot", { key: '6602b580cc959944932c42bfe74f838fa7dc37a4', name: "secondary-content", onSlotchange: this.updateSecondaryContentStatus }))), h("div", { key: '17afe035cebb37925f6cf912448a29db22359ee6', class: "modal__custom-footer" }, h("slot", { key: '44c6d8340fc1b9c32521cc61ed0b5b4cee37ec50', name: "custom-footer", onSlotchange: this.updateCustomFooterStatus })), showControls && (h("footer", { key: '6e7732616ce97db76e752bdd8c3e540d380c3fe7', class: "modal__controls" }, h("swirl-button-group", { key: '146060354a8cd62c236d025b576ef48a357be7f2', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: 'eabd37aa403ab8b87fc6edb76821f3ccb25e8f7d', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '6988e29d8e1caf2faa8dfbbce0ef454e4552fdee', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
     }
     static get is() { return "swirl-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -386,6 +389,25 @@ export class SwirlModal {
                 "attribute": "close-button-label",
                 "defaultValue": "\"Close modal\""
             },
+            "disableBackdropClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disable-backdrop-close"
+            },
             "fullscreenEnableButtonLabel": {
                 "type": "string",
                 "mutable": false,

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

@@ -2,6 +2,9 @@ import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-modal.mdx";
 export default {
     argTypes: {
+        disableBackdropClose: {
+            description: "Prevents the modal from closing when the backdrop is clicked.",
+        },
         returnFocusTo: {
             control: "text",
             description: "Use when modal trigger element is unmounted before the modal is closed.",

package/dist/components/swirl-avatar-group.js

@@ -1 +1 @@
-import{proxyCustomElement as a,HTMLElement as r,h as e,Host as t,transformTag as s}from"@stencil/core/internal/client";import{c as i}from"./index2.js";const o=[1,2,3,5],l=a(class extends r{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.layout="diagonal",this.semantics="group",this.avatars=[],this.onSlotChange=a=>{this.avatars=a.target.assignedElements(),this.layOutAvatars()}}componentDidLoad(){this.forceBadgeProps()}forceBadgeProps(){if(!this.badge)return;const a=this.badgeEl.querySelector("swirl-badge"),r=a?.getAttribute("size");r||a?.setAttribute("size","s")}layOutAvatars(){this.avatars.forEach("horizontal"===this.layout?(a,r)=>{a.style.position="relative",a.style.zIndex=this.avatars.length-r+""}:a=>{a.style.position="",a.style.zIndex=""})}getCenteredArrangement(){const a=o.filter((a=>a<=this.avatars.length));return a.length>0?a[a.length-1]:o[0]}render(){const a=i("avatar-group",`avatar-group--${this.layout}-stack`,{"avatar-group--has-badge":!!this.badge,["avatar-group--centered-"+this.getCenteredArrangement()]:"centered"===this.layout}),r=i("avatar-group__badge");return e(t,{key:"d380083e116cf7e25e1fc258bd9618d85f82468a"},e("div",{key:"f0e4360cf381bb5b8fe34f1856b48216aba95ae1","aria-label":this.label,class:a,role:this.semantics},e("slot",{key:"ca53eed3ef6fd319c453633042137591779070f5",onSlotchange:this.onSlotChange}),this.badge&&e("span",{key:"142d895678c99d05ee9ad90e041d5d30a4d33a1c",class:r,innerHTML:this.badge,ref:a=>this.badgeEl=a})))}static get style(){return":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group{position:relative}.avatar-group--diagonal-stack{display:inline-grid;grid-template-rows:repeat(9, 1fr);grid-template-columns:repeat(9, 1fr)}.avatar-group--diagonal-stack ::slotted(*:first-child){z-index:1;display:inline-flex;border-radius:var(--swirl-avatar-radius, 50%);box-shadow:0 0 0 0.25rem var(--swirl-avatar-group-border-color);background-color:var(--swirl-avatar-group-border-color);grid-column-start:1;grid-column-end:7;grid-row-start:4;grid-row-end:10}.avatar-group--diagonal-stack ::slotted(*:nth-child(2)){z-index:0;display:inline-flex;border-radius:var(--swirl-avatar-radius, 50%);grid-column-start:4;grid-column-end:10;grid-row-start:1;grid-row-end:7}.avatar-group--diagonal-stack ::slotted(*:nth-child(n+3)){display:none}.avatar-group--diagonal-stack .avatar-group__badge{position:absolute;right:calc(-1 * var(--s-space-4));bottom:calc(-1 * var(--s-space-4))}.avatar-group--horizontal-stack{display:inline-flex}.avatar-group--horizontal-stack .avatar-group__badge{display:none}.avatar-group--horizontal-stack ::slotted(*){z-index:1;display:inline-flex;border-radius:var(--swirl-avatar-radius, 50%);box-shadow:0 0 0 0.125rem var(--swirl-avatar-group-border-color);background-color:var(--swirl-avatar-group-border-color)}.avatar-group--horizontal-stack ::slotted(*:not(:first-child)){margin-left:calc(-1 * var(--s-space-4))}.avatar-group--centered-stack{display:inline-flex;align-items:center}.avatar-group--centered-stack .avatar-group__badge{display:none}.avatar-group--centered-stack ::slotted(*){display:inline-flex;border-radius:var(--swirl-avatar-radius);box-shadow:var(--s-shadow-level-1)}.avatar-group--centered-1 ::slotted(:nth-child(1)){box-shadow:var(--s-shadow-level-2)}.avatar-group--centered-1 ::slotted(:nth-child(n+2)){display:none}.avatar-group--centered-2 ::slotted(:nth-child(1)){z-index:2;box-shadow:var(--s-shadow-level-2)}.avatar-group--centered-2 ::slotted(:nth-child(2)){z-index:1;transform:scale(0.833333);margin-right:calc(var(--swirl-avatar-size) * -0.083333);margin-left:calc(var(--swirl-avatar-size) * -0.333333)}.avatar-group--centered-2 ::slotted(:nth-child(n+3)){display:none}.avatar-group--centered-3 ::slotted(:nth-child(1)){z-index:2;order:2;margin-left:calc(var(--swirl-avatar-size) * -0.333333);box-shadow:var(--s-shadow-level-2)}.avatar-group--centered-3 ::slotted(:nth-child(2)){z-index:1;order:3;transform:scale(0.833333);margin-right:calc(var(--swirl-avatar-size) * -0.083333);margin-left:calc(var(--swirl-avatar-size) * -0.333333)}.avatar-group--centered-3 ::slotted(:nth-child(3)){z-index:1;order:1;transform:scale(0.833333);margin-left:calc(var(--swirl-avatar-size) * -0.083333)}.avatar-group--centered-3 ::slotted(:nth-child(n+4)){display:none}.avatar-group--centered-5 ::slotted(:nth-child(1)){z-index:3;order:3;margin-left:calc(var(--swirl-avatar-size) * -0.333333);box-shadow:var(--s-shadow-level-2)}.avatar-group--centered-5 ::slotted(:nth-child(2)){z-index:2;order:4;transform:scale(0.833333);margin-left:calc(var(--swirl-avatar-size) * -0.333333)}.avatar-group--centered-5 ::slotted(:nth-child(3)){z-index:2;order:2;transform:scale(0.833333);margin-left:calc(var(--swirl-avatar-size) * -0.5)}.avatar-group--centered-5 ::slotted(:nth-child(4)){z-index:1;order:5;transform:scale(0.666667);margin-right:calc(var(--swirl-avatar-size) * -0.166667);margin-left:calc(var(--swirl-avatar-size) * -0.5)}.avatar-group--centered-5 ::slotted(:nth-child(5)){z-index:1;order:1;transform:scale(0.666667);margin-left:calc(var(--swirl-avatar-size) * -0.166667)}.avatar-group--centered-5 ::slotted(:nth-child(n+6)){display:none}.avatar-group__badge{z-index:3;display:inline-flex;width:1.5rem;height:1.5rem}.avatar-group__badge ::part(badge){box-shadow:0 0 0 0.25rem var(--swirl-badge-border-color)}"}},[257,"swirl-avatar-group",{badge:[1],label:[1],layout:[1],semantics:[1],avatars:[32]}]),d=l,n=function(){"undefined"!=typeof customElements&&["swirl-avatar-group"].forEach((a=>{"swirl-avatar-group"===a&&(customElements.get(s(a))||customElements.define(s(a),l))}))};export{d as SwirlAvatarGroup,n as defineCustomElement}
+import{proxyCustomElement as a,HTMLElement as r,h as t,Host as e,transformTag as i}from"@stencil/core/internal/client";import{c as o}from"./index2.js";const s=a(class extends r{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.layout="diagonal",this.semantics="group",this.avatars=[],this.onSlotChange=a=>{this.avatars=a.target.assignedElements(),this.layOutAvatars()}}componentDidLoad(){this.forceBadgeProps()}forceBadgeProps(){if(!this.badge)return;const a=this.badgeEl.querySelector("swirl-badge"),r=a?.getAttribute("size");r||a?.setAttribute("size","s")}layOutAvatars(){this.avatars.forEach("horizontal"===this.layout?(a,r)=>{a.style.position="relative",a.style.zIndex=this.avatars.length-r+""}:a=>{a.style.position="",a.style.zIndex=""})}getCenteredArrangement(){return Math.min(Math.max(this.avatars.length,1),5)}render(){const a=o("avatar-group",`avatar-group--${this.layout}-stack`,{"avatar-group--has-badge":!!this.badge,["avatar-group--centered-"+this.getCenteredArrangement()]:"centered"===this.layout}),r=o("avatar-group__badge");return t(e,{key:"43c20e73e894ae03d53b90d95dcd16db43e50ccd"},t("div",{key:"8b7bdf46aab2a02702bcdbd5b3544b1fa27f7779","aria-label":this.label,class:a,role:this.semantics},t("slot",{key:"e5ace98ce81e1519916e5a79158c48c56b2f19ab",onSlotchange:this.onSlotChange}),this.badge&&t("span",{key:"6f229b7a50e9d02487f662952a168c9202e26c38",class:r,innerHTML:this.badge,ref:a=>this.badgeEl=a})))}static get style(){return":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group{position:relative}.avatar-group--diagonal-stack{display:inline-grid;grid-template-rows:repeat(9, 1fr);grid-template-columns:repeat(9, 1fr)}.avatar-group--diagonal-stack ::slotted(*:first-child){z-index:1;display:inline-flex;border-radius:var(--swirl-avatar-radius, 50%);box-shadow:0 0 0 0.25rem var(--swirl-avatar-group-border-color);background-color:var(--swirl-avatar-group-border-color);grid-column-start:1;grid-column-end:7;grid-row-start:4;grid-row-end:10}.avatar-group--diagonal-stack ::slotted(*:nth-child(2)){z-index:0;display:inline-flex;border-radius:var(--swirl-avatar-radius, 50%);grid-column-start:4;grid-column-end:10;grid-row-start:1;grid-row-end:7}.avatar-group--diagonal-stack ::slotted(*:nth-child(n+3)){display:none}.avatar-group--diagonal-stack .avatar-group__badge{position:absolute;right:calc(-1 * var(--s-space-4));bottom:calc(-1 * var(--s-space-4))}.avatar-group--horizontal-stack{display:inline-flex}.avatar-group--horizontal-stack .avatar-group__badge{display:none}.avatar-group--horizontal-stack ::slotted(*){z-index:1;display:inline-flex;border-radius:var(--swirl-avatar-radius, 50%);box-shadow:0 0 0 0.125rem var(--swirl-avatar-group-border-color);background-color:var(--swirl-avatar-group-border-color)}.avatar-group--horizontal-stack ::slotted(*:not(:first-child)){margin-left:calc(-1 * var(--s-space-4))}.avatar-group--centered-stack{display:inline-flex;align-items:center}.avatar-group--centered-stack .avatar-group__badge{display:none}.avatar-group--centered-stack ::slotted(*){display:inline-flex;border-radius:var(--swirl-avatar-radius);box-shadow:var(--s-shadow-level-1)}.avatar-group--centered-1 ::slotted(:nth-child(1)){box-shadow:var(--s-shadow-level-2)}.avatar-group--centered-1 ::slotted(:nth-child(n+2)){display:none}.avatar-group--centered-2 ::slotted(:nth-child(1)),.avatar-group--centered-3 ::slotted(:nth-child(1)){z-index:2;order:2;margin-left:calc(var(--swirl-avatar-size) * -0.333333);box-shadow:var(--s-shadow-level-2)}.avatar-group--centered-2 ::slotted(:nth-child(2)),.avatar-group--centered-3 ::slotted(:nth-child(2)){z-index:1;order:3;transform:scale(0.833333);margin-right:calc(var(--swirl-avatar-size) * -0.083333);margin-left:calc(var(--swirl-avatar-size) * -0.333333)}.avatar-group--centered-2 ::slotted(:nth-child(1)){margin-left:calc(var(--swirl-avatar-size) * 0.583334)}.avatar-group--centered-2 ::slotted(:nth-child(n+3)){display:none}.avatar-group--centered-3 ::slotted(:nth-child(3)){z-index:1;order:1;transform:scale(0.833333);margin-left:calc(var(--swirl-avatar-size) * -0.083333)}.avatar-group--centered-3 ::slotted(:nth-child(n+4)){display:none}.avatar-group--centered-4 ::slotted(:nth-child(1)),.avatar-group--centered-5 ::slotted(:nth-child(1)){z-index:3;order:3;margin-left:calc(var(--swirl-avatar-size) * -0.333333);box-shadow:var(--s-shadow-level-2)}.avatar-group--centered-4 ::slotted(:nth-child(2)),.avatar-group--centered-5 ::slotted(:nth-child(2)){z-index:2;order:4;transform:scale(0.833333);margin-left:calc(var(--swirl-avatar-size) * -0.333333)}.avatar-group--centered-4 ::slotted(:nth-child(3)),.avatar-group--centered-5 ::slotted(:nth-child(3)){z-index:2;order:2;transform:scale(0.833333);margin-left:calc(var(--swirl-avatar-size) * -0.5)}.avatar-group--centered-4 ::slotted(:nth-child(4)),.avatar-group--centered-5 ::slotted(:nth-child(4)){z-index:1;order:5;transform:scale(0.666667);margin-right:calc(var(--swirl-avatar-size) * -0.166667);margin-left:calc(var(--swirl-avatar-size) * -0.5)}.avatar-group--centered-4 ::slotted(:nth-child(3)){margin-left:calc(var(--swirl-avatar-size) * 0.333333)}.avatar-group--centered-4 ::slotted(:nth-child(n+5)){display:none}.avatar-group--centered-5 ::slotted(:nth-child(5)){z-index:1;order:1;transform:scale(0.666667);margin-left:calc(var(--swirl-avatar-size) * -0.166667)}.avatar-group--centered-5 ::slotted(:nth-child(n+6)){display:none}.avatar-group__badge{z-index:3;display:inline-flex;width:1.5rem;height:1.5rem}.avatar-group__badge ::part(badge){box-shadow:0 0 0 0.25rem var(--swirl-badge-border-color)}"}},[257,"swirl-avatar-group",{badge:[1],label:[1],layout:[1],semantics:[1],avatars:[32]}]),d=s,l=function(){"undefined"!=typeof customElements&&["swirl-avatar-group"].forEach((a=>{"swirl-avatar-group"===a&&(customElements.get(i(a))||customElements.define(i(a),s))}))};export{d as SwirlAvatarGroup,l as defineCustomElement}

package/dist/components/swirl-modal.js

@@ -1 +1 @@
-import{proxyCustomElement as a,HTMLElement as e,createEvent as o,h as d,Host as t,transformTag as s}from"@stencil/core/internal/client";import{c as i}from"./index2.js";import{t as r}from"./index.esm.js";import{d as l,e as n}from"./body-scroll-lock.js";import{d as m}from"./swirl-button2.js";import{d as h}from"./swirl-button-group2.js";import{d as c}from"./swirl-heading2.js";import{d as b}from"./swirl-stack2.js";const f=a(class extends e{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.toggleFullscreen=o(this,"toggleFullscreen",3),this.modalClose=o(this,"modalClose",3),this.modalOpen=o(this,"modalOpen",3),this.primaryAction=o(this,"primaryAction",3),this.requestModalClose=o(this,"requestModalClose",3),this.secondaryAction=o(this,"secondaryAction",3),this.sidebarClose=o(this,"sidebarClose",3),this.toggleDialog=o(this,"toggleDialog",7),this.closable=!0,this.closeButtonLabel="Close modal",this.fullscreenEnableButtonLabel="Full screen",this.fullscreenDisableButtonLabel="Exit full screen",this.padded=!0,this.variant="default",this.sidebarPadded=!0,this.sidebarFooterPadded=!0,this.sidebarCloseButtonLabel="Close sidebar",this.opening=!1,this.isFullscreen=!1,this.isFullscreenTransitioning=!1,this.closing=!1,this.scrollable=!1,this.scrolled=!1,this.scrolledDown=!1,this.sidebarScrolled=!1,this.sidebarScrolledDown=!1,this.sidebarScrollable=!1,this.onKeyDown=a=>{"Escape"===a.code&&(a.stopImmediatePropagation(),a.preventDefault(),this.close())},this.onClose=()=>{this.closing=!1,this.unlockBodyScroll(),this.modalClose.emit()},this.onToggle=a=>{const e={newState:a.newState,dialog:this.modalEl};this.el.isConnected?this.toggleDialog.emit(e):document.dispatchEvent(new CustomEvent("toggleDialog",{bubbles:!0,composed:!0,detail:e}))},this.onBackdropClick=()=>{this.close()},this.onCloseButtonClick=()=>{this.close()},this.onFullscreenButtonClick=()=>{this.setFullscreen(!this.isFullscreen)},this.onSidebarCloseButtonClick=()=>{this.hideSidebarContent=!0,this.sidebarClose.emit()},this.onPrimaryAction=a=>{this.primaryAction.emit(a)},this.onSecondaryAction=a=>{this.secondaryAction.emit(a)},this.updateCustomFooterStatus=()=>{this.hasCustomFooter=!!this.el.querySelector(':scope > [slot="custom-footer"]')},this.updateCustomHeaderStatus=()=>{this.hasCustomHeader=!!this.el.querySelector(':scope > [slot="custom-header"]')},this.updateHeaderToolsStatus=()=>{this.hasHeaderTools=!!this.el.querySelector(':scope > [slot="header-tools"]')},this.updateSecondaryContentStatus=()=>{this.hasSecondaryContent=!!this.el.querySelector(':scope > [slot="secondary-content"]')},this.updateSidebarContentStatus=()=>{this.hasSidebarContent=!!this.el.querySelector(':scope > [slot="sidebar-content"]')},this.updateSidebarFooterStatus=()=>{this.hasSidebarFooter=!!this.el.querySelector(':scope > [slot="sidebar-footer"]')},this.determineScrollStatus=()=>{this.determineMainScrollStatus(),this.determineSidebarScrollStatus()},this.determineMainScrollStatus=()=>{const a=this.scrollContainer?.scrollTop>0,e=Math.ceil(this.scrollContainer?.scrollTop+this.scrollContainer?.offsetHeight)>=this.scrollContainer?.scrollHeight,o=this.scrollContainer?.scrollHeight>this.scrollContainer?.offsetHeight;a!==this.scrolled&&(this.scrolled=a),e!==this.scrolledDown&&(this.scrolledDown=e),o!==this.scrollable&&(this.scrollable=o)},this.determineSidebarScrollStatus=()=>{const a=this.sidebarScrollContainer?.scrollTop>0,e=Math.ceil(this.sidebarScrollContainer?.scrollTop+this.sidebarScrollContainer?.offsetHeight)>=this.sidebarScrollContainer?.scrollHeight,o=this.sidebarScrollContainer?.scrollHeight>this.sidebarScrollContainer?.offsetHeight;a!==this.sidebarScrolled&&(this.sidebarScrolled=a),e!==this.sidebarScrolledDown&&(this.sidebarScrolledDown=e),o!==this.sidebarScrollable&&(this.sidebarScrollable=o)}}componentDidLoad(){this.ensureOpening(),this.setDialogCustomProps(),this.determineScrollStatus(),this.updateCustomFooterStatus(),this.updateCustomHeaderStatus(),this.updateHeaderToolsStatus(),this.updateSecondaryContentStatus(),this.updateSidebarContentStatus(),this.updateSidebarFooterStatus()}disconnectedCallback(){this.mutationObserver?.disconnect(),this.modalEl?.open&&this.modalEl.close(),this.unlockBodyScroll()}onWindowResize(){this.determineScrollStatus()}async open(a){this.opening=!0,this.temporaryReturnFocusTo=a,this.modalEl&&(this.setupMutationObserver(),this.modalEl.showModal(),this.modalOpen.emit(),this.mutationObserver.observe(this.modalEl,{subtree:!0,childList:!0}),this.lockBodyScroll(),this.determineScrollStatus(),setTimeout((()=>{this.handleAutoFocus()}),200))}async close(a){this.closing||(a||this.requestModalClose.emit(),(this.closable||a)&&(this.closing=!0,this.unlockBodyScroll(),setTimeout((()=>{this.mutationObserver?.disconnect(),this.modalEl.close(),this.customFocusReturn()}),150)))}async setFullscreen(a){this.isFullscreen!==a&&(this.isFullscreenTransitioning=!0,this.isFullscreen=a,this.toggleFullscreen.emit(this.isFullscreen),setTimeout((()=>this.isFullscreenTransitioning=!1),150))}async getScrollContainer(){return this.scrollContainer}handleAutoFocus(){this.el.querySelector("input[autofocus]")?.focus()}lockBodyScroll(){l(this.scrollContainer),l(this.sidebarScrollContainer)}setupMutationObserver(){this.mutationObserver=new MutationObserver((()=>{this.modalEl?.open&&document.activeElement===document.body&&r(this.modalEl).at(0)?.focus()}))}unlockBodyScroll(){this.scrollContainer&&n(this.scrollContainer),this.sidebarScrollContainer&&n(this.sidebarScrollContainer)}ensureOpening(){this.opening&&!this.modalEl?.open&&this.open()}setDialogCustomProps(){this.modalEl.setAttribute("closedby","none")}customFocusReturn(){const a=this.temporaryReturnFocusTo??this.returnFocusTo;if(!a)return;const e="string"==typeof a?document.querySelector(a):a,o=r(e,{includeContainer:!0,getShadowRoot:!0});o.length>0&&o[0].focus(),this.temporaryReturnFocusTo=void 0}render(){const a=!!this.primaryActionLabel||!!this.secondaryActionLabel,e=i("modal","modal--variant-"+this.variant,{"modal--closing":this.closing,"modal--fullscreen":this.isFullscreen,"modal--fullscreen-transitioning":this.isFullscreenTransitioning,"modal--has-custom-footer":this.hasCustomFooter,"modal--has-custom-header":this.hasCustomHeader,"modal--has-header-tools":this.hasHeaderTools,"modal--has-secondary-content":this.hasSecondaryContent&&!this.hideSecondaryContent,"modal--hide-label":this.hideLabel,"modal--padded":this.padded,"modal--scrollable":this.scrollable,"modal--scrolled":this.scrolled,"modal--hide-scrolled-header-border":this.hideScrolledHeaderBorder,"modal--scrolled-down":this.scrolledDown,"modal--hide-secondary-content-borders":this.hideSecondaryContentBorders,"modal--has-sidebar-content":this.hasSidebarContent&&!this.hideSidebarContent,"modal--sidebar-padded":this.sidebarPadded,"modal--has-sidebar-footer":this.hasSidebarFooter&&this.hasSidebarContent&&!this.hideSidebarContent,"modal--sidebar-footer-padded":this.sidebarFooterPadded,"modal--sidebar-scrolled":this.sidebarScrolled,"modal--sidebar-scrolled-down":this.sidebarScrolledDown,"modal--sidebar-scrollable":this.sidebarScrollable,"modal--show-backdrop":!0===this.showBackdrop,"modal--hide-backdrop":!1===this.showBackdrop});return d(t,{key:"4e7d148841ef6a533400bbede74b50cb71f3ad95"},d("dialog",{key:"117d80bda8001b13e3a35fe4b0fc4aca44032c26","aria-label":this.label,class:e,onClose:this.onClose,onKeyDown:this.onKeyDown,onToggle:this.onToggle,ref:a=>this.modalEl=a},d("div",{key:"e80adc0ff71799033240a098096229fa5f2cd37b",class:"modal__backdrop",onClick:this.onBackdropClick}),d("div",{key:"3c7527fae9645d1c8c0a49eebce3b0ea33211614",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}},d("aside",{key:"d9923d714020bed94e559ed4b68ee6bcff00e5cb",class:"modal__sidebar"},this.sidebarLabel&&d("header",{key:"76440a2b5e964f40ab0eb5afa6edd18e208dd679",class:i("modal__sidebar-header",{"modal__sidebar-header--has-close-button":this.hasSidebarCloseButton})},this.hasSidebarCloseButton&&d("swirl-button",{key:"e27400cdbb0315cb2d0ba510025ed914572986b1",hideLabel:!0,icon:"<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>",label:this.sidebarCloseButtonLabel,onClick:this.onSidebarCloseButtonClick}),d("swirl-heading",{key:"db4c6bf78e90bddbc592c48c924e2ad6bea770f7",as:"h3",class:"modal__sidebar-heading",level:5,text:this.sidebarLabel})),d("div",{key:"2b63ca9c7708ffbe33349ac086551c2bcec2d04b",class:"modal__sidebar-content",onScroll:this.determineSidebarScrollStatus,ref:a=>this.sidebarScrollContainer=a},d("slot",{key:"8747fb0b5aa6e5d17c076132d2d507d2afef8483",name:"sidebar-content",onSlotchange:this.updateSidebarContentStatus})),d("div",{key:"164bdc171bbb160aeb3762718107898eec7b4777",class:"modal__sidebar-footer",part:"modal__sidebar-footer"},d("slot",{key:"aca17fa682d3ca52fa4024186ad5fc679a576c9b",name:"sidebar-footer",onSlotchange:this.updateSidebarFooterStatus}))),d("div",{key:"78e294b5db70eb997700c05eb20132e490ec7882",class:"modal__main-content"},d("header",{key:"5ebbee3cdc7f4376031388a103111e7922283bd5",class:"modal__custom-header",part:"modal__custom-header"},d("slot",{key:"27af848ae5c3d8cefe16e503b0a006c8c45b5e0b",name:"custom-header",onSlotchange:this.updateCustomHeaderStatus})),(!this.hideLabel||!this.hideCloseButton)&&d("header",{key:"9bdc985e51b557a3aac74b28008411a902ded6d9",class:"modal__header"},d("div",{key:"39f297feadbe3e0c41dc54b7531a0229d31988d5",class:"modal__header-bar"},!this.hideCloseButton&&d("swirl-button",{key:"f9a0c0c7aa2586bdd86606f3051ee92a800ff41a",class:"modal__close-button",hideLabel:!0,icon:"default"===this.variant?"<swirl-icon-close></swirl-icon-close>":"<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>",label:this.closeButtonLabel,onClick:this.onCloseButtonClick}),this.showFullscreenButton&&d("swirl-button",{key:"a117081f4d8cf882f6ee95b9afbb8b700bcd6406",class:"modal__fullscreen-button",hideLabel:!0,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&&d("swirl-heading",{key:"0c438ba220ace21998b87eff745c913a07e01d51",as:"h2",class:"modal__heading",level:3,text:this.label}))),d("div",{key:"3786ea1e0ae43a58d76b68b408559628c7eb5ab0",class:"modal__content-container",style:{gap:this.contentGap?`var(--s-space-${this.contentGap})`:void 0}},d("div",{key:"9e5365c39d9a99e0711068e05da3686dbed3b38e",class:"modal__primary-content",style:{maxWidth:this.primaryContentMaxWidth,flex:this.primaryContentFlex}},d("div",{key:"04f6735c47d4c302db8b8669f7528db2f44042bd",class:"modal__header-tools",part:"modal__header-tools"},d("slot",{key:"4e5d113031801f529d1e27cdde88adcb110ecf14",name:"header-tools",onSlotchange:this.updateHeaderToolsStatus})),d("div",{key:"79792a34197b1f47aa94e39e2152f6565cee5630",class:"modal__content",onScroll:this.determineMainScrollStatus,part:"modal__content",ref:a=>this.scrollContainer=a},d("slot",{key:"f0a0e5cc2cfae741d02d7dc081ec499acb94e11f"}))),d("div",{key:"ccbdd483db514d93c74a70a64747b697f7f0e32d",class:"modal__secondary-content",style:{maxWidth:this.secondaryContentMaxWidth,flex:this.secondaryContentFlex,padding:this.secondaryContentPadding?`var(--s-space-${this.secondaryContentPadding})`:void 0,paddingBlockEnd:this.secondaryContentPaddingBlockEnd?`var(--s-space-${this.secondaryContentPaddingBlockEnd})`:void 0,paddingBlockStart:this.secondaryContentPaddingBlockStart?`var(--s-space-${this.secondaryContentPaddingBlockStart})`:void 0,paddingInlineEnd:this.secondaryContentPaddingInlineEnd?`var(--s-space-${this.secondaryContentPaddingInlineEnd})`:void 0,paddingInlineStart:this.secondaryContentPaddingInlineStart?`var(--s-space-${this.secondaryContentPaddingInlineStart})`:void 0}},d("slot",{key:"7fa5754d3fd68ee34d452016b7afa090ef1904fc",name:"secondary-content",onSlotchange:this.updateSecondaryContentStatus}))),d("div",{key:"b33405ae01b437498d738b9312a27debb8adb8f1",class:"modal__custom-footer"},d("slot",{key:"bdfcc495ab4d4dd7beb5df3c06822eb3a46d449e",name:"custom-footer",onSlotchange:this.updateCustomFooterStatus})),a&&d("footer",{key:"afb432d444d64beaf85bfadae7169687e173f4cc",class:"modal__controls"},d("swirl-button-group",{key:"19bcf388f329faddd7ae4fd9d5c2b0851231a1a9",wrap:!0},this.secondaryActionLabel&&d("swirl-button",{key:"92787acfda759009792de450e51e60829c2bd6c5",label:this.secondaryActionLabel,onClick:this.onSecondaryAction}),this.primaryActionLabel&&d("swirl-button",{key:"69a0e33d545983354e4004a46ea8ac5c643dad74",intent:"primary",label:this.primaryActionLabel,onClick:this.onPrimaryAction,variant:"flat"})))))))}get el(){return this}static get style(){return":host{display:block}:host *{box-sizing:border-box}.modal{--swirl-modal-height:auto;--swirl-modal-max-height:90vh;--swirl-modal-view-height:100vh;--swirl-modal-header-height:3.75rem;--swirl-modal-max-width:40rem;--swirl-modal-sidebar-width:25rem;--swirl-modal-max-secondary-content-width:24rem;--swirl-modal-footer-padding-small:var(--s-space-12) var(--s-space-16)     max(env(safe-area-inset-bottom), var(--s-space-12)) var(--s-space-16);--swirl-modal-footer-padding-large:var(--s-space-16) var(--s-space-24)     max(env(safe-area-inset-bottom), var(--s-space-16)) var(--s-space-24)}@supports (height: 100dvh){.modal{--swirl-modal-max-height:90dvh;--swirl-modal-view-height:100dvh}}.modal{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;height:var(--swirl-modal-view-height);inset:0;border:none;padding:0;width:auto;background:transparent;max-width:none;max-height:none;overflow:visible}.modal::backdrop{display:none}.modal:not([open]){display:none}.modal--variant-default.modal--closing{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-default.modal--closing{animation:none}}.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:none}}.modal--variant-default:not(.modal--closing) .modal__body{animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__body{animation:none}}.modal--variant-drawer{justify-content:end;align-items:stretch}.modal--variant-drawer.modal--closing .modal__body{animation:0.15s modal-drawer-slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing .modal__body{animation:none}}.modal--variant-drawer.modal--closing .modal__backdrop{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing .modal__backdrop{animation:none}}@media (min-width: 768px){.modal--variant-drawer.modal--hide-label .modal__header-bar{height:auto;padding-top:var(--s-space-4);padding-bottom:var(--s-space-4)}}.modal--variant-drawer .modal__backdrop{background-color:transparent;animation:none}.modal--variant-drawer .modal__body{height:100%;max-height:none;border-radius:0;animation:0.15s modal-drawer-slide-in;box-shadow:var(--s-shadow-level-3)}@media (prefers-reduced-motion){.modal--variant-drawer .modal__body{animation:none}}.modal--variant-drawer .modal__header-bar{background-color:var(--s-surface-overlay-default)}.modal--variant-drawer .modal__header-bar .modal__close-button{margin-left:calc(-1 * var(--s-space-8))}.modal--variant-drawer .modal__header-bar .modal__fullscreen-button{display:none}@media (min-width: 768px){.modal--variant-drawer .modal__header-bar{flex-direction:row}}@media (min-width: 768px){.modal--variant-drawer.modal--padded .modal__content{padding-top:var(--s-space-8)}}.modal--padded .modal__content{padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal--padded .modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down).modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--scrollable:not(.modal--scrolled-down):not(.modal--has-custom-footer) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-custom-header .modal__custom-header{display:block}.modal--has-custom-header .modal__content{padding-top:var(--s-space-16)}.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-header-tools .modal__header{border-bottom-color:transparent}.modal--has-header-tools .modal__header-tools{display:block}.modal--has-secondary-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,.modal--has-secondary-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body{max-width:calc(       var(--swirl-modal-max-width) +         var(--swirl-modal-max-secondary-content-width)     )}.modal--has-secondary-content:not(.modal--has-header-tools):not(.modal--hide-secondary-content-borders) .modal__header{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-header-tools:not(.modal--hide-secondary-content-borders) .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-custom-footer:not(.modal--hide-secondary-content-borders) .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-secondary-content:not(.modal--has-custom-footer):not(.modal--hide-secondary-content-borders) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 992px){.modal--has-secondary-content .modal__header-tools,.modal--has-secondary-content .modal__content{padding-right:0}}.modal--has-secondary-content .modal__primary-content{overflow:visible;max-height:60%;flex-basis:auto}@media (min-width: 992px){.modal--has-secondary-content .modal__primary-content{max-width:calc(100% - var(--swirl-modal-max-secondary-content-width));max-height:none;flex-basis:calc(100% - var(--swirl-modal-max-secondary-content-width))}}.modal--has-secondary-content .modal__secondary-content{display:block}.modal__main-content{display:flex;flex-direction:column;overflow-y:auto;flex-grow:1}.modal__sidebar{display:none}.modal.modal--has-sidebar-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,.modal.modal--has-sidebar-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body{max-width:calc(       var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width)     )}@media (min-width: 768px){.modal.modal--has-sidebar-content .modal__sidebar{display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;width:var(--swirl-modal-sidebar-width);border-right:var(--s-border-width-default) solid var(--s-border-default)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header{border-bottom:var(--s-border-width-default) solid transparent;display:flex;align-items:center;gap:var(--s-space-8);padding-right:var(--s-space-24);padding-left:var(--s-space-24)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header.modal__sidebar-header--has-close-button{padding-left:var(--s-space-16)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header .modal__sidebar-heading{display:flex;align-items:center;height:var(--swirl-modal-header-height)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-content{display:block;flex-grow:1;overflow-y:auto}}@media (min-width: 992px){.modal.modal--has-sidebar-content .modal__primary-content{flex-basis:calc(100% - 20rem)}}.modal--sidebar-padded .modal__sidebar .modal__sidebar-content{padding-left:var(--s-space-24);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.modal--scrolled:not(.modal--hide-scrolled-header-border):not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--scrolled:not(.modal--hide-scrolled-header-border).modal--has-header-tools .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--scrolled:not(.modal--hide-scrolled-header-border) .modal__custom-header{border-bottom-color:var(--s-border-default)}}@media (min-width: 768px){.modal--sidebar-scrolled .modal__sidebar .modal__sidebar-header{border-bottom-color:var(--s-border-default)}}.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-large)}}@media (min-width: 768px){.modal--sidebar-scrollable .modal__sidebar-content{padding-bottom:0 !important}}.modal--sidebar-scrollable:not(.modal--sidebar-scrolled-down).modal--has-sidebar-footer .modal__sidebar-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal.modal--show-backdrop .modal__backdrop{background-color:rgba(0, 0, 0, 0.2)}.modal.modal--show-backdrop:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal.modal--show-backdrop:not(.modal--closing) .modal__backdrop{animation:none}}.modal.modal--hide-backdrop .modal__backdrop{background-color:transparent;animation:none}.modal__body{--swirl-card-background-default:var(--s-surface-overlay-default);--swirl-card-background-hovered:var(--s-surface-overlay-hovered);--swirl-card-background-pressed:var(--s-surface-overlay-pressed);position:relative;z-index:var(--s-z-40);display:flex;flex-direction:row;overflow:hidden;width:100vw;max-width:100vw;height:var(--swirl-modal-view-height);max-height:var(--swirl-modal-view-height);padding-top:env(safe-area-inset-top, 0);background-color:var(--s-surface-overlay-default)}.modal--fullscreen .modal__body{min-height:var(--swirl-modal-view-height)}.modal--fullscreen-transitioning .modal__body{transition:width 0.15s ease-out, max-width 0.15s ease-out,     max-height 0.15s ease-out, min-height 0.15s ease-out}@media (min-width: 768px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{width:90vw;max-width:var(--swirl-modal-max-width);max-height:var(--swirl-modal-max-height);min-height:0;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 992px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{height:var(--swirl-modal-height)}}.modal__header{border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header{border-bottom:var(--s-border-width-default) solid transparent}}.modal__header-bar{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-shrink:0;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.modal__header-bar{height:var(--swirl-modal-header-height);padding-top:var(--s-space-12);padding-right:var(--s-space-24);padding-bottom:var(--s-space-12);padding-left:var(--s-space-24);flex-direction:row-reverse}}.modal__fullscreen-button{display:none}@media (min-width: 768px){.modal__fullscreen-button{display:block}}.modal__header-tools{display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header-tools{padding-right:var(--s-space-24);padding-left:var(--s-space-24);border-bottom-color:transparent}}.modal__custom-header{display:none;flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__custom-header{border-bottom-color:transparent}}.modal__heading{overflow:hidden}.modal__heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content-container{display:flex;overflow:hidden;flex-grow:1;flex-direction:column;gap:var(--s-space-24)}@media (min-width: 992px){.modal__content-container{flex-direction:row}}.modal__primary-content{display:flex;overflow:hidden;overflow-y:auto;min-width:0;flex-basis:100%;flex-grow:1;flex-direction:column}.modal__content{overflow-x:hidden;overflow-y:auto;height:100%}.modal__content ::slotted(*){margin:0}.modal__secondary-content{display:none;overflow:visible;overflow-x:hidden;overflow-y:auto;min-width:0;max-width:none;max-height:40%;padding-right:var(--s-space-16);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal__secondary-content{padding-left:var(--s-space-24)}}@media (min-width: 992px){.modal__secondary-content{overflow-x:hidden;overflow-y:auto;max-width:var(--swirl-modal-max-secondary-content-width);max-height:none;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:0;flex-basis:50%;flex-grow:1}}.modal__custom-footer{flex-shrink:0;padding-bottom:env(safe-area-inset-bottom)}.modal__controls{display:flex;padding:var(--swirl-modal-footer-padding-small);flex-shrink:0;justify-content:flex-end}@media (min-width: 768px){.modal__controls{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-secondary-content.modal--has-sidebar-content:not(.modal--fullscreen) .modal__body{max-width:calc(       var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width) +         var(--swirl-modal-max-secondary-content-width)     )}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-drawer-slide-in{from{transform:translate3d(100%, 0, 0)}to{transform:translate3d(0, 0, 0)}}@keyframes modal-drawer-slide-out{from{transform:translate3d(0, 0, 0)}to{transform:translate3d(100%, 0, 0)}}"}},[257,"swirl-modal",{closable:[4],closeButtonLabel:[1,"close-button-label"],fullscreenEnableButtonLabel:[1,"fullscreen-enable-button-label"],fullscreenDisableButtonLabel:[1,"fullscreen-disable-button-label"],height:[1],hideCloseButton:[4,"hide-close-button"],hideLabel:[4,"hide-label"],label:[1],maxHeight:[1,"max-height"],minHeight:[1,"min-height"],maxWidth:[1,"max-width"],padded:[4],primaryActionLabel:[1,"primary-action-label"],secondaryActionLabel:[1,"secondary-action-label"],showBackdrop:[4,"show-backdrop"],variant:[1],contentGap:[1,"content-gap"],hideSecondaryContent:[4,"hide-secondary-content"],primaryContentMaxWidth:[1,"primary-content-max-width"],secondaryContentMaxWidth:[1,"secondary-content-max-width"],primaryContentFlex:[1,"primary-content-flex"],secondaryContentFlex:[1,"secondary-content-flex"],hideSecondaryContentBorders:[4,"hide-secondary-content-borders"],returnFocusTo:[1,"return-focus-to"],secondaryContentPadding:[1,"secondary-content-padding"],secondaryContentPaddingBlockEnd:[1,"secondary-content-padding-block-end"],secondaryContentPaddingBlockStart:[1,"secondary-content-padding-block-start"],secondaryContentPaddingInlineEnd:[1,"secondary-content-padding-inline-end"],secondaryContentPaddingInlineStart:[1,"secondary-content-padding-inline-start"],showFullscreenButton:[4,"show-fullscreen-button"],sidebarLabel:[1,"sidebar-label"],sidebarPadded:[4,"sidebar-padded"],sidebarFooterPadded:[4,"sidebar-footer-padded"],hideSidebarContent:[1028,"hide-sidebar-content"],hasSidebarCloseButton:[4,"has-sidebar-close-button"],sidebarCloseButtonLabel:[1,"sidebar-close-button-label"],hideScrolledHeaderBorder:[4,"hide-scrolled-header-border"],opening:[32],isFullscreen:[32],isFullscreenTransitioning:[32],closing:[32],hasCustomHeader:[32],hasCustomFooter:[32],hasHeaderTools:[32],hasSecondaryContent:[32],scrollable:[32],scrolled:[32],scrolledDown:[32],hasSidebarContent:[32],hasSidebarFooter:[32],sidebarScrolled:[32],sidebarScrolledDown:[32],sidebarScrollable:[32],open:[64],close:[64],setFullscreen:[64],getScrollContainer:[64]},[[9,"resize","onWindowResize"]]]),p=f,_=function(){"undefined"!=typeof customElements&&["swirl-modal","swirl-button","swirl-button-group","swirl-heading","swirl-stack"].forEach((a=>{switch(a){case"swirl-modal":customElements.get(s(a))||customElements.define(s(a),f);break;case"swirl-button":customElements.get(s(a))||m();break;case"swirl-button-group":customElements.get(s(a))||h();break;case"swirl-heading":customElements.get(s(a))||c();break;case"swirl-stack":customElements.get(s(a))||b()}}))};export{p as SwirlModal,_ as defineCustomElement}
+import{proxyCustomElement as a,HTMLElement as o,createEvent as e,h as d,Host as t,transformTag as s}from"@stencil/core/internal/client";import{c as i}from"./index2.js";import{t as r}from"./index.esm.js";import{d as l,e as n}from"./body-scroll-lock.js";import{d as c}from"./swirl-button2.js";import{d as m}from"./swirl-button-group2.js";import{d as h}from"./swirl-heading2.js";import{d as b}from"./swirl-stack2.js";const f=a(class extends o{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.toggleFullscreen=e(this,"toggleFullscreen",3),this.modalClose=e(this,"modalClose",3),this.modalOpen=e(this,"modalOpen",3),this.primaryAction=e(this,"primaryAction",3),this.requestModalClose=e(this,"requestModalClose",3),this.secondaryAction=e(this,"secondaryAction",3),this.sidebarClose=e(this,"sidebarClose",3),this.toggleDialog=e(this,"toggleDialog",7),this.closable=!0,this.closeButtonLabel="Close modal",this.fullscreenEnableButtonLabel="Full screen",this.fullscreenDisableButtonLabel="Exit full screen",this.padded=!0,this.variant="default",this.sidebarPadded=!0,this.sidebarFooterPadded=!0,this.sidebarCloseButtonLabel="Close sidebar",this.opening=!1,this.isFullscreen=!1,this.isFullscreenTransitioning=!1,this.closing=!1,this.scrollable=!1,this.scrolled=!1,this.scrolledDown=!1,this.sidebarScrolled=!1,this.sidebarScrolledDown=!1,this.sidebarScrollable=!1,this.onKeyDown=a=>{"Escape"===a.code&&(a.stopImmediatePropagation(),a.preventDefault(),this.close())},this.onClose=()=>{this.closing=!1,this.unlockBodyScroll(),this.modalClose.emit()},this.onToggle=a=>{const o={newState:a.newState,dialog:this.modalEl};this.el.isConnected?this.toggleDialog.emit(o):document.dispatchEvent(new CustomEvent("toggleDialog",{bubbles:!0,composed:!0,detail:o}))},this.onBackdropClick=()=>{this.disableBackdropClose||this.close()},this.onCloseButtonClick=()=>{this.close()},this.onFullscreenButtonClick=()=>{this.setFullscreen(!this.isFullscreen)},this.onSidebarCloseButtonClick=()=>{this.hideSidebarContent=!0,this.sidebarClose.emit()},this.onPrimaryAction=a=>{this.primaryAction.emit(a)},this.onSecondaryAction=a=>{this.secondaryAction.emit(a)},this.updateCustomFooterStatus=()=>{this.hasCustomFooter=!!this.el.querySelector(':scope > [slot="custom-footer"]')},this.updateCustomHeaderStatus=()=>{this.hasCustomHeader=!!this.el.querySelector(':scope > [slot="custom-header"]')},this.updateHeaderToolsStatus=()=>{this.hasHeaderTools=!!this.el.querySelector(':scope > [slot="header-tools"]')},this.updateSecondaryContentStatus=()=>{this.hasSecondaryContent=!!this.el.querySelector(':scope > [slot="secondary-content"]')},this.updateSidebarContentStatus=()=>{this.hasSidebarContent=!!this.el.querySelector(':scope > [slot="sidebar-content"]')},this.updateSidebarFooterStatus=()=>{this.hasSidebarFooter=!!this.el.querySelector(':scope > [slot="sidebar-footer"]')},this.determineScrollStatus=()=>{this.determineMainScrollStatus(),this.determineSidebarScrollStatus()},this.determineMainScrollStatus=()=>{const a=this.scrollContainer?.scrollTop>0,o=Math.ceil(this.scrollContainer?.scrollTop+this.scrollContainer?.offsetHeight)>=this.scrollContainer?.scrollHeight,e=this.scrollContainer?.scrollHeight>this.scrollContainer?.offsetHeight;a!==this.scrolled&&(this.scrolled=a),o!==this.scrolledDown&&(this.scrolledDown=o),e!==this.scrollable&&(this.scrollable=e)},this.determineSidebarScrollStatus=()=>{const a=this.sidebarScrollContainer?.scrollTop>0,o=Math.ceil(this.sidebarScrollContainer?.scrollTop+this.sidebarScrollContainer?.offsetHeight)>=this.sidebarScrollContainer?.scrollHeight,e=this.sidebarScrollContainer?.scrollHeight>this.sidebarScrollContainer?.offsetHeight;a!==this.sidebarScrolled&&(this.sidebarScrolled=a),o!==this.sidebarScrolledDown&&(this.sidebarScrolledDown=o),e!==this.sidebarScrollable&&(this.sidebarScrollable=e)}}componentDidLoad(){this.ensureOpening(),this.setDialogCustomProps(),this.determineScrollStatus(),this.updateCustomFooterStatus(),this.updateCustomHeaderStatus(),this.updateHeaderToolsStatus(),this.updateSecondaryContentStatus(),this.updateSidebarContentStatus(),this.updateSidebarFooterStatus()}disconnectedCallback(){this.mutationObserver?.disconnect(),this.modalEl?.open&&this.modalEl.close(),this.unlockBodyScroll()}onWindowResize(){this.determineScrollStatus()}async open(a){this.opening=!0,this.temporaryReturnFocusTo=a,this.modalEl&&(this.setupMutationObserver(),this.modalEl.showModal(),this.modalOpen.emit(),this.mutationObserver.observe(this.modalEl,{subtree:!0,childList:!0}),this.lockBodyScroll(),this.determineScrollStatus(),setTimeout((()=>{this.handleAutoFocus()}),200))}async close(a){this.closing||(a||this.requestModalClose.emit(),(this.closable||a)&&(this.closing=!0,this.unlockBodyScroll(),setTimeout((()=>{this.mutationObserver?.disconnect(),this.modalEl.close(),this.customFocusReturn()}),150)))}async setFullscreen(a){this.isFullscreen!==a&&(this.isFullscreenTransitioning=!0,this.isFullscreen=a,this.toggleFullscreen.emit(this.isFullscreen),setTimeout((()=>this.isFullscreenTransitioning=!1),150))}async getScrollContainer(){return this.scrollContainer}handleAutoFocus(){this.el.querySelector("input[autofocus]")?.focus()}lockBodyScroll(){l(this.scrollContainer),l(this.sidebarScrollContainer)}setupMutationObserver(){this.mutationObserver=new MutationObserver((()=>{this.modalEl?.open&&document.activeElement===document.body&&r(this.modalEl).at(0)?.focus()}))}unlockBodyScroll(){this.scrollContainer&&n(this.scrollContainer),this.sidebarScrollContainer&&n(this.sidebarScrollContainer)}ensureOpening(){this.opening&&!this.modalEl?.open&&this.open()}setDialogCustomProps(){this.modalEl.setAttribute("closedby","none")}customFocusReturn(){const a=this.temporaryReturnFocusTo??this.returnFocusTo;if(!a)return;const o="string"==typeof a?document.querySelector(a):a,e=r(o,{includeContainer:!0,getShadowRoot:!0});e.length>0&&e[0].focus(),this.temporaryReturnFocusTo=void 0}render(){const a=!!this.primaryActionLabel||!!this.secondaryActionLabel,o=i("modal","modal--variant-"+this.variant,{"modal--closing":this.closing,"modal--fullscreen":this.isFullscreen,"modal--fullscreen-transitioning":this.isFullscreenTransitioning,"modal--has-custom-footer":this.hasCustomFooter,"modal--has-custom-header":this.hasCustomHeader,"modal--has-header-tools":this.hasHeaderTools,"modal--has-secondary-content":this.hasSecondaryContent&&!this.hideSecondaryContent,"modal--hide-label":this.hideLabel,"modal--padded":this.padded,"modal--scrollable":this.scrollable,"modal--scrolled":this.scrolled,"modal--hide-scrolled-header-border":this.hideScrolledHeaderBorder,"modal--scrolled-down":this.scrolledDown,"modal--hide-secondary-content-borders":this.hideSecondaryContentBorders,"modal--has-sidebar-content":this.hasSidebarContent&&!this.hideSidebarContent,"modal--sidebar-padded":this.sidebarPadded,"modal--has-sidebar-footer":this.hasSidebarFooter&&this.hasSidebarContent&&!this.hideSidebarContent,"modal--sidebar-footer-padded":this.sidebarFooterPadded,"modal--sidebar-scrolled":this.sidebarScrolled,"modal--sidebar-scrolled-down":this.sidebarScrolledDown,"modal--sidebar-scrollable":this.sidebarScrollable,"modal--show-backdrop":!0===this.showBackdrop,"modal--hide-backdrop":!1===this.showBackdrop});return d(t,{key:"23fc47450954cdec1465b6cacc87665b74392b40"},d("dialog",{key:"bdee3e6f0b8903e63341b93e73525387d4878229","aria-label":this.label,class:o,onClose:this.onClose,onKeyDown:this.onKeyDown,onToggle:this.onToggle,ref:a=>this.modalEl=a},d("div",{key:"3b880ae4075a3249f2a56a424db3269183cc160d",class:"modal__backdrop",onClick:this.onBackdropClick}),d("div",{key:"df55123f4afffde7862c80f99166d4dcc28c227e",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}},d("aside",{key:"f3b77cc6ef02ffe087f7e6701deb79c6edc0d45e",class:"modal__sidebar"},this.sidebarLabel&&d("header",{key:"ed35b62a6ec6d77a9360ffa80b9effab505c4f4e",class:i("modal__sidebar-header",{"modal__sidebar-header--has-close-button":this.hasSidebarCloseButton})},this.hasSidebarCloseButton&&d("swirl-button",{key:"d73cb3f8b8d032245a4efbb4fba158bde22e19d2",hideLabel:!0,icon:"<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>",label:this.sidebarCloseButtonLabel,onClick:this.onSidebarCloseButtonClick}),d("swirl-heading",{key:"9529520318f4ee7ace2adb71927f2587c22c01b4",as:"h3",class:"modal__sidebar-heading",level:5,text:this.sidebarLabel})),d("div",{key:"b9893e1d9193c99c53a33c02773e96d4611b3040",class:"modal__sidebar-content",onScroll:this.determineSidebarScrollStatus,ref:a=>this.sidebarScrollContainer=a},d("slot",{key:"6086f942484525006d1de352ced3693f2afac73c",name:"sidebar-content",onSlotchange:this.updateSidebarContentStatus})),d("div",{key:"7911c4c01757dc9157a611558d7830997891032a",class:"modal__sidebar-footer",part:"modal__sidebar-footer"},d("slot",{key:"4154270c217c274954ae83060fc31069e2696c2e",name:"sidebar-footer",onSlotchange:this.updateSidebarFooterStatus}))),d("div",{key:"5e78d1d3053ff0f54331ec072878084720b31110",class:"modal__main-content"},d("header",{key:"84bf917f205c56a871e13fbcb749690bba1cbb06",class:"modal__custom-header",part:"modal__custom-header"},d("slot",{key:"5fd2bb6788938d18f9e40cfe42eaa8b36379e6ad",name:"custom-header",onSlotchange:this.updateCustomHeaderStatus})),(!this.hideLabel||!this.hideCloseButton)&&d("header",{key:"c6c03d149d8e1c15e491e1ed7071821348b76c1f",class:"modal__header"},d("div",{key:"45235c736ee6686599513f1f80bff3b68c0a100e",class:"modal__header-bar"},!this.hideCloseButton&&d("swirl-button",{key:"2c6edcc7f1bcd33fcf880fa48567f6eddc067afd",class:"modal__close-button",hideLabel:!0,icon:"default"===this.variant?"<swirl-icon-close></swirl-icon-close>":"<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>",label:this.closeButtonLabel,onClick:this.onCloseButtonClick}),this.showFullscreenButton&&d("swirl-button",{key:"673043a824362619f11c54f31a15fa9477117883",class:"modal__fullscreen-button",hideLabel:!0,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&&d("swirl-heading",{key:"1719c5b97263cf10c305770607eb1ea7145acb51",as:"h2",class:"modal__heading",level:3,text:this.label}))),d("div",{key:"c32ad1be58ce0bfd733a059fabc88411a810de30",class:"modal__content-container",style:{gap:this.contentGap?`var(--s-space-${this.contentGap})`:void 0}},d("div",{key:"8d7a796fc546b0b7bebfa213f831c628393f9dfe",class:"modal__primary-content",style:{maxWidth:this.primaryContentMaxWidth,flex:this.primaryContentFlex}},d("div",{key:"7299870c633ed4456d08d22dc1eb750e4898b41c",class:"modal__header-tools",part:"modal__header-tools"},d("slot",{key:"27b39b1bbceb3890fd3f2dea32642a901c87c076",name:"header-tools",onSlotchange:this.updateHeaderToolsStatus})),d("div",{key:"f8336f9a3638c1e9285d94900764f09293aa6c30",class:"modal__content",onScroll:this.determineMainScrollStatus,part:"modal__content",ref:a=>this.scrollContainer=a},d("slot",{key:"57fad6f717f5256c938b0142b88c42d59dc968e3"}))),d("div",{key:"05ab11a1b5ff7804a6b56041fdfcf4230f414ba4",class:"modal__secondary-content",style:{maxWidth:this.secondaryContentMaxWidth,flex:this.secondaryContentFlex,padding:this.secondaryContentPadding?`var(--s-space-${this.secondaryContentPadding})`:void 0,paddingBlockEnd:this.secondaryContentPaddingBlockEnd?`var(--s-space-${this.secondaryContentPaddingBlockEnd})`:void 0,paddingBlockStart:this.secondaryContentPaddingBlockStart?`var(--s-space-${this.secondaryContentPaddingBlockStart})`:void 0,paddingInlineEnd:this.secondaryContentPaddingInlineEnd?`var(--s-space-${this.secondaryContentPaddingInlineEnd})`:void 0,paddingInlineStart:this.secondaryContentPaddingInlineStart?`var(--s-space-${this.secondaryContentPaddingInlineStart})`:void 0}},d("slot",{key:"6602b580cc959944932c42bfe74f838fa7dc37a4",name:"secondary-content",onSlotchange:this.updateSecondaryContentStatus}))),d("div",{key:"17afe035cebb37925f6cf912448a29db22359ee6",class:"modal__custom-footer"},d("slot",{key:"44c6d8340fc1b9c32521cc61ed0b5b4cee37ec50",name:"custom-footer",onSlotchange:this.updateCustomFooterStatus})),a&&d("footer",{key:"6e7732616ce97db76e752bdd8c3e540d380c3fe7",class:"modal__controls"},d("swirl-button-group",{key:"146060354a8cd62c236d025b576ef48a357be7f2",wrap:!0},this.secondaryActionLabel&&d("swirl-button",{key:"eabd37aa403ab8b87fc6edb76821f3ccb25e8f7d",label:this.secondaryActionLabel,onClick:this.onSecondaryAction}),this.primaryActionLabel&&d("swirl-button",{key:"6988e29d8e1caf2faa8dfbbce0ef454e4552fdee",intent:"primary",label:this.primaryActionLabel,onClick:this.onPrimaryAction,variant:"flat"})))))))}get el(){return this}static get style(){return":host{display:block}:host *{box-sizing:border-box}.modal{--swirl-modal-height:auto;--swirl-modal-max-height:90vh;--swirl-modal-view-height:100vh;--swirl-modal-header-height:3.75rem;--swirl-modal-max-width:40rem;--swirl-modal-sidebar-width:25rem;--swirl-modal-max-secondary-content-width:24rem;--swirl-modal-footer-padding-small:var(--s-space-12) var(--s-space-16)     max(env(safe-area-inset-bottom), var(--s-space-12)) var(--s-space-16);--swirl-modal-footer-padding-large:var(--s-space-16) var(--s-space-24)     max(env(safe-area-inset-bottom), var(--s-space-16)) var(--s-space-24)}@supports (height: 100dvh){.modal{--swirl-modal-max-height:90dvh;--swirl-modal-view-height:100dvh}}.modal{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;height:var(--swirl-modal-view-height);inset:0;border:none;padding:0;width:auto;background:transparent;max-width:none;max-height:none;overflow:visible}.modal::backdrop{display:none}.modal:not([open]){display:none}.modal--variant-default.modal--closing{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-default.modal--closing{animation:none}}.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:none}}.modal--variant-default:not(.modal--closing) .modal__body{animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__body{animation:none}}.modal--variant-drawer{justify-content:end;align-items:stretch}.modal--variant-drawer.modal--closing .modal__body{animation:0.15s modal-drawer-slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing .modal__body{animation:none}}.modal--variant-drawer.modal--closing .modal__backdrop{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing .modal__backdrop{animation:none}}@media (min-width: 768px){.modal--variant-drawer.modal--hide-label .modal__header-bar{height:auto;padding-top:var(--s-space-4);padding-bottom:var(--s-space-4)}}.modal--variant-drawer .modal__backdrop{background-color:transparent;animation:none}.modal--variant-drawer .modal__body{height:100%;max-height:none;border-radius:0;animation:0.15s modal-drawer-slide-in;box-shadow:var(--s-shadow-level-3)}@media (prefers-reduced-motion){.modal--variant-drawer .modal__body{animation:none}}.modal--variant-drawer .modal__header-bar{background-color:var(--s-surface-overlay-default)}.modal--variant-drawer .modal__header-bar .modal__close-button{margin-left:calc(-1 * var(--s-space-8))}.modal--variant-drawer .modal__header-bar .modal__fullscreen-button{display:none}@media (min-width: 768px){.modal--variant-drawer .modal__header-bar{flex-direction:row}}@media (min-width: 768px){.modal--variant-drawer.modal--padded .modal__content{padding-top:var(--s-space-8)}}.modal--padded .modal__content{padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal--padded .modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down).modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--scrollable:not(.modal--scrolled-down):not(.modal--has-custom-footer) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-custom-header .modal__custom-header{display:block}.modal--has-custom-header .modal__content{padding-top:var(--s-space-16)}.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-header-tools .modal__header{border-bottom-color:transparent}.modal--has-header-tools .modal__header-tools{display:block}.modal--has-secondary-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,.modal--has-secondary-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body{max-width:calc(       var(--swirl-modal-max-width) +         var(--swirl-modal-max-secondary-content-width)     )}.modal--has-secondary-content:not(.modal--has-header-tools):not(.modal--hide-secondary-content-borders) .modal__header{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-header-tools:not(.modal--hide-secondary-content-borders) .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-custom-footer:not(.modal--hide-secondary-content-borders) .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-secondary-content:not(.modal--has-custom-footer):not(.modal--hide-secondary-content-borders) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 992px){.modal--has-secondary-content .modal__header-tools,.modal--has-secondary-content .modal__content{padding-right:0}}.modal--has-secondary-content .modal__primary-content{overflow:visible;max-height:60%;flex-basis:auto}@media (min-width: 992px){.modal--has-secondary-content .modal__primary-content{max-width:calc(100% - var(--swirl-modal-max-secondary-content-width));max-height:none;flex-basis:calc(100% - var(--swirl-modal-max-secondary-content-width))}}.modal--has-secondary-content .modal__secondary-content{display:block}.modal__main-content{display:flex;flex-direction:column;overflow-y:auto;flex-grow:1}.modal__sidebar{display:none}.modal.modal--has-sidebar-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,.modal.modal--has-sidebar-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body{max-width:calc(       var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width)     )}@media (min-width: 768px){.modal.modal--has-sidebar-content .modal__sidebar{display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;width:var(--swirl-modal-sidebar-width);border-right:var(--s-border-width-default) solid var(--s-border-default)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header{border-bottom:var(--s-border-width-default) solid transparent;display:flex;align-items:center;gap:var(--s-space-8);padding-right:var(--s-space-24);padding-left:var(--s-space-24)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header.modal__sidebar-header--has-close-button{padding-left:var(--s-space-16)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header .modal__sidebar-heading{display:flex;align-items:center;height:var(--swirl-modal-header-height)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-content{display:block;flex-grow:1;overflow-y:auto}}@media (min-width: 992px){.modal.modal--has-sidebar-content .modal__primary-content{flex-basis:calc(100% - 20rem)}}.modal--sidebar-padded .modal__sidebar .modal__sidebar-content{padding-left:var(--s-space-24);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.modal--scrolled:not(.modal--hide-scrolled-header-border):not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--scrolled:not(.modal--hide-scrolled-header-border).modal--has-header-tools .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--scrolled:not(.modal--hide-scrolled-header-border) .modal__custom-header{border-bottom-color:var(--s-border-default)}}@media (min-width: 768px){.modal--sidebar-scrolled .modal__sidebar .modal__sidebar-header{border-bottom-color:var(--s-border-default)}}.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-large)}}@media (min-width: 768px){.modal--sidebar-scrollable .modal__sidebar-content{padding-bottom:0 !important}}.modal--sidebar-scrollable:not(.modal--sidebar-scrolled-down).modal--has-sidebar-footer .modal__sidebar-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal.modal--show-backdrop .modal__backdrop{background-color:rgba(0, 0, 0, 0.2)}.modal.modal--show-backdrop:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal.modal--show-backdrop:not(.modal--closing) .modal__backdrop{animation:none}}.modal.modal--hide-backdrop .modal__backdrop{background-color:transparent;animation:none}.modal__body{--swirl-card-background-default:var(--s-surface-overlay-default);--swirl-card-background-hovered:var(--s-surface-overlay-hovered);--swirl-card-background-pressed:var(--s-surface-overlay-pressed);position:relative;z-index:var(--s-z-40);display:flex;flex-direction:row;overflow:hidden;width:100vw;max-width:100vw;height:var(--swirl-modal-view-height);max-height:var(--swirl-modal-view-height);padding-top:env(safe-area-inset-top, 0);background-color:var(--s-surface-overlay-default)}.modal--fullscreen .modal__body{min-height:var(--swirl-modal-view-height)}.modal--fullscreen-transitioning .modal__body{transition:width 0.15s ease-out, max-width 0.15s ease-out,     max-height 0.15s ease-out, min-height 0.15s ease-out}@media (min-width: 768px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{width:90vw;max-width:var(--swirl-modal-max-width);max-height:var(--swirl-modal-max-height);min-height:0;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 992px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{height:var(--swirl-modal-height)}}.modal__header{border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header{border-bottom:var(--s-border-width-default) solid transparent}}.modal__header-bar{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-shrink:0;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.modal__header-bar{height:var(--swirl-modal-header-height);padding-top:var(--s-space-12);padding-right:var(--s-space-24);padding-bottom:var(--s-space-12);padding-left:var(--s-space-24);flex-direction:row-reverse}}.modal__fullscreen-button{display:none}@media (min-width: 768px){.modal__fullscreen-button{display:block}}.modal__header-tools{display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header-tools{padding-right:var(--s-space-24);padding-left:var(--s-space-24);border-bottom-color:transparent}}.modal__custom-header{display:none;flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__custom-header{border-bottom-color:transparent}}.modal__heading{overflow:hidden}.modal__heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content-container{display:flex;overflow:hidden;flex-grow:1;flex-direction:column;gap:var(--s-space-24)}@media (min-width: 992px){.modal__content-container{flex-direction:row}}.modal__primary-content{display:flex;overflow:hidden;overflow-y:auto;min-width:0;flex-basis:100%;flex-grow:1;flex-direction:column}.modal__content{overflow-x:hidden;overflow-y:auto;height:100%}.modal__content ::slotted(*){margin:0}.modal__secondary-content{display:none;overflow:visible;overflow-x:hidden;overflow-y:auto;min-width:0;max-width:none;max-height:40%;padding-right:var(--s-space-16);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal__secondary-content{padding-left:var(--s-space-24)}}@media (min-width: 992px){.modal__secondary-content{overflow-x:hidden;overflow-y:auto;max-width:var(--swirl-modal-max-secondary-content-width);max-height:none;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:0;flex-basis:50%;flex-grow:1}}.modal__custom-footer{flex-shrink:0;padding-bottom:env(safe-area-inset-bottom)}.modal__controls{display:flex;padding:var(--swirl-modal-footer-padding-small);flex-shrink:0;justify-content:flex-end}@media (min-width: 768px){.modal__controls{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-secondary-content.modal--has-sidebar-content:not(.modal--fullscreen) .modal__body{max-width:calc(       var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width) +         var(--swirl-modal-max-secondary-content-width)     )}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-drawer-slide-in{from{transform:translate3d(100%, 0, 0)}to{transform:translate3d(0, 0, 0)}}@keyframes modal-drawer-slide-out{from{transform:translate3d(0, 0, 0)}to{transform:translate3d(100%, 0, 0)}}"}},[257,"swirl-modal",{closable:[4],closeButtonLabel:[1,"close-button-label"],disableBackdropClose:[4,"disable-backdrop-close"],fullscreenEnableButtonLabel:[1,"fullscreen-enable-button-label"],fullscreenDisableButtonLabel:[1,"fullscreen-disable-button-label"],height:[1],hideCloseButton:[4,"hide-close-button"],hideLabel:[4,"hide-label"],label:[1],maxHeight:[1,"max-height"],minHeight:[1,"min-height"],maxWidth:[1,"max-width"],padded:[4],primaryActionLabel:[1,"primary-action-label"],secondaryActionLabel:[1,"secondary-action-label"],showBackdrop:[4,"show-backdrop"],variant:[1],contentGap:[1,"content-gap"],hideSecondaryContent:[4,"hide-secondary-content"],primaryContentMaxWidth:[1,"primary-content-max-width"],secondaryContentMaxWidth:[1,"secondary-content-max-width"],primaryContentFlex:[1,"primary-content-flex"],secondaryContentFlex:[1,"secondary-content-flex"],hideSecondaryContentBorders:[4,"hide-secondary-content-borders"],returnFocusTo:[1,"return-focus-to"],secondaryContentPadding:[1,"secondary-content-padding"],secondaryContentPaddingBlockEnd:[1,"secondary-content-padding-block-end"],secondaryContentPaddingBlockStart:[1,"secondary-content-padding-block-start"],secondaryContentPaddingInlineEnd:[1,"secondary-content-padding-inline-end"],secondaryContentPaddingInlineStart:[1,"secondary-content-padding-inline-start"],showFullscreenButton:[4,"show-fullscreen-button"],sidebarLabel:[1,"sidebar-label"],sidebarPadded:[4,"sidebar-padded"],sidebarFooterPadded:[4,"sidebar-footer-padded"],hideSidebarContent:[1028,"hide-sidebar-content"],hasSidebarCloseButton:[4,"has-sidebar-close-button"],sidebarCloseButtonLabel:[1,"sidebar-close-button-label"],hideScrolledHeaderBorder:[4,"hide-scrolled-header-border"],opening:[32],isFullscreen:[32],isFullscreenTransitioning:[32],closing:[32],hasCustomHeader:[32],hasCustomFooter:[32],hasHeaderTools:[32],hasSecondaryContent:[32],scrollable:[32],scrolled:[32],scrolledDown:[32],hasSidebarContent:[32],hasSidebarFooter:[32],sidebarScrolled:[32],sidebarScrolledDown:[32],sidebarScrollable:[32],open:[64],close:[64],setFullscreen:[64],getScrollContainer:[64]},[[9,"resize","onWindowResize"]]]),p=f,_=function(){"undefined"!=typeof customElements&&["swirl-modal","swirl-button","swirl-button-group","swirl-heading","swirl-stack"].forEach((a=>{switch(a){case"swirl-modal":customElements.get(s(a))||customElements.define(s(a),f);break;case"swirl-button":customElements.get(s(a))||c();break;case"swirl-button-group":customElements.get(s(a))||m();break;case"swirl-heading":customElements.get(s(a))||h();break;case"swirl-stack":customElements.get(s(a))||b()}}))};export{p as SwirlModal,_ as defineCustomElement}