@getflip/swirl-components 0.190.0 → 0.192.0

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

@@ -2,191 +2,190 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f6326e3b.js');
+const index = require('./index-1de6abbd.js');
 const bodyScrollLock_esm = require('./bodyScrollLock.esm-f29f1a77.js');
-const index$1 = require('./index-9f94303c.js');
+const index$1 = require('./index-2ddd0598.js');
 const focusTrap_esm = require('./focus-trap.esm-a1e3774c.js');
 
 const swirlModalCss = ":host{display:block}:host *{box-sizing:border-box}.modal{--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed);--swirl-resource-list-item-background-default:var(\n    --s-surface-overlay-default\n  );--swirl-resource-list-item-background-hovered:var(\n    --s-surface-overlay-hovered\n  );--swirl-resource-list-item-background-pressed:var(\n    --s-surface-overlay-pressed\n  );--swirl-modal-height:auto;--swirl-modal-max-height:90vh;--swirl-modal-view-height:100vh;--swirl-modal-max-width:40rem}@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}.modal[aria-hidden=\"true\"]{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{animation:0.15s modal-drawer-slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing{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))}@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-top:var(--s-space-16);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}.modal--has-header-tools .modal__header{border-bottom-color:transparent}.modal--has-header-tools .modal__header-tools{display:block}.modal--has-secondary-content .modal__body{max-width:64rem}.modal--has-secondary-content:not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-header-tools .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-secondary-content:not(.modal--has-custom-footer) .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% - 24rem);max-height:none;flex-basis:calc(100% - 24rem)}}.modal--has-secondary-content .modal__secondary-content{display:block}@media (min-width: 768px){.modal--scrolled:not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--scrolled.modal--has-header-tools .modal__header-tools{border-bottom-color:var(--s-border-default)}}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.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);--swirl-accordion-item-toggle-default:var(--s-surface-overlay-default);--swirl-accordion-item-toggle-hovered:var(--s-surface-overlay-hovered);--swirl-accordion-item-toggle-pressed:var(--s-surface-overlay-pressed);position:relative;z-index:var(--s-z-40);display:flex;overflow:hidden;width:100vw;height:var(--swirl-modal-view-height);background-color:var(--s-surface-overlay-default);flex-direction:column}@media (min-width: 768px){.modal__body{width:90vw;max-width:var(--swirl-modal-max-width);max-height:var(--swirl-modal-max-height);border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 992px){.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:3.75rem;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;gap:var(--s-space-16)}}.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)}.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;flex-basis:100%;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;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:24rem;max-height:none;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:0;flex-basis:50%}}.modal__custom-footer{flex-shrink:0}.modal__controls{display:flex;padding-top:var(--s-space-16);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24);flex-shrink:0;justify-content:flex-end}@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)}}";
-const SwirlModalStyle0 = swirlModalCss;
 
 const SwirlModal = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.modalClose = index.createEvent(this, "modalClose", 7);
-        this.modalOpen = index.createEvent(this, "modalOpen", 7);
-        this.primaryAction = index.createEvent(this, "primaryAction", 7);
-        this.requestModalClose = index.createEvent(this, "requestModalClose", 7);
-        this.secondaryAction = index.createEvent(this, "secondaryAction", 7);
-        this.onKeyDown = (event) => {
-            if (event.code === "Escape") {
-                event.stopImmediatePropagation();
-                this.close();
-            }
-        };
-        this.onBackdropClick = () => {
-            this.close();
-        };
-        this.onCloseButtonClick = () => {
-            this.close();
-        };
-        this.onPrimaryAction = (event) => {
-            this.primaryAction.emit(event);
-        };
-        this.onSecondaryAction = (event) => {
-            this.secondaryAction.emit(event);
-        };
-        this.determineScrollStatus = () => {
-            const scrolled = this.scrollContainer?.scrollTop > 0;
-            const scrolledDown = Math.ceil(this.scrollContainer?.scrollTop + this.scrollContainer?.offsetHeight) >= this.scrollContainer?.scrollHeight;
-            const scrollable = this.scrollContainer?.scrollHeight > this.scrollContainer?.offsetHeight;
-            if (scrolled !== this.scrolled) {
-                this.scrolled = scrolled;
-            }
-            if (scrolledDown !== this.scrolledDown) {
-                this.scrolledDown = scrolledDown;
-            }
-            if (scrollable !== this.scrollable) {
-                this.scrollable = scrollable;
-            }
-        };
-        this.closable = true;
-        this.closeButtonLabel = "Close modal";
-        this.height = undefined;
-        this.hideCloseButton = undefined;
-        this.hideLabel = undefined;
-        this.label = undefined;
-        this.maxHeight = undefined;
-        this.maxWidth = undefined;
-        this.padded = true;
-        this.primaryActionLabel = undefined;
-        this.secondaryActionLabel = undefined;
-        this.variant = "default";
-        this.isOpen = false;
-        this.closing = false;
-        this.hasCustomHeader = undefined;
-        this.hasCustomFooter = undefined;
-        this.hasHeaderTools = undefined;
-        this.hasSecondaryContent = undefined;
-        this.scrollable = false;
-        this.scrolled = false;
-        this.scrolledDown = false;
-    }
-    componentDidLoad() {
-        this.focusTrap = focusTrap_esm.createFocusTrap(this.modalEl, {
-            allowOutsideClick: true,
-            tabbableOptions: {
-                getShadowRoot: (node) => {
-                    return node.shadowRoot;
-                },
-            },
-        });
-        this.determineScrollStatus();
-        queueMicrotask(() => {
-            this.updateCustomFooterStatus();
-            this.updateCustomHeaderStatus();
-            this.updateHeaderToolsStatus();
-            this.updateSecondaryContentStatus();
-        });
-    }
-    componentDidRender() {
-        this.focusTrap?.updateContainerElements(this.modalEl);
-    }
-    disconnectedCallback() {
-        this.focusTrap?.deactivate();
-        this.unlockBodyScroll();
-    }
-    onWindowResize() {
-        this.determineScrollStatus();
-    }
-    watchIsOpen() {
-        if (this.isOpen) {
-            // wait for animation
-            setTimeout(() => {
-                this.focusTrap.activate();
-                this.handleAutoFocus();
-            }, 200);
-        }
-        else {
-            this.focusTrap.deactivate();
-        }
-    }
-    /**
-     * Open the modal.
-     */
-    async open() {
-        this.isOpen = true;
-        this.modalOpen.emit();
-        this.lockBodyScroll();
-        this.determineScrollStatus();
-    }
-    /**
-     * Close the modal. Pass `true` to force close even if the modal is not closable.
-     */
-    async close(force) {
-        if (this.closing) {
-            return;
-        }
-        this.requestModalClose.emit();
-        if (!this.closable && !force) {
-            return;
-        }
-        this.closing = true;
-        this.unlockBodyScroll();
-        setTimeout(() => {
-            this.isOpen = false;
-            this.modalClose.emit();
-            this.closing = false;
-        }, 150);
-    }
-    updateCustomFooterStatus() {
-        this.hasCustomFooter = Boolean(this.el.querySelector('[slot="custom-footer"]'));
-    }
-    updateCustomHeaderStatus() {
-        this.hasCustomHeader = Boolean(this.el.querySelector('[slot="custom-header"]'));
-    }
-    updateHeaderToolsStatus() {
-        this.hasHeaderTools = Boolean(this.el.querySelector('[slot="header-tools"]'));
-    }
-    updateSecondaryContentStatus() {
-        this.hasSecondaryContent = Boolean(this.el.querySelector('[slot="secondary-content"]'));
-    }
-    handleAutoFocus() {
-        this.modalEl.querySelector("input[autofocus]")?.focus();
-    }
-    lockBodyScroll() {
-        bodyScrollLock_esm.disableBodyScroll(this.scrollContainer);
-    }
-    unlockBodyScroll() {
-        bodyScrollLock_esm.enableBodyScroll(this.scrollContainer);
-    }
-    render() {
-        const showControls = Boolean(this.primaryActionLabel) || Boolean(this.secondaryActionLabel);
-        const className = index$1.classnames("modal", `modal--variant-${this.variant}`, {
-            "modal--closing": this.closing,
-            "modal--has-custom-footer": this.hasCustomFooter,
-            "modal--has-custom-header": this.hasCustomHeader,
-            "modal--has-header-tools": this.hasHeaderTools,
-            "modal--has-secondary-content": this.hasSecondaryContent,
-            "modal--hide-label": this.hideLabel,
-            "modal--padded": this.padded,
-            "modal--scrollable": this.scrollable,
-            "modal--scrolled": this.scrolled,
-            "modal--scrolled-down": this.scrolledDown,
-        });
-        return (index.h(index.Host, { key: 'cec5539985a77edb3cebceeffd1cddcf565f9dcf' }, index.h("section", { key: 'd537c22802d992ea60194a54cd8ad6ee2925c69a', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, index.h("div", { key: 'a099f72638246c82bef4295c0ff347b5ae589c45', class: "modal__backdrop", onClick: this.onBackdropClick }), index.h("div", { key: 'b839806406baa08c2a517d5e0026bb57701a29ed', class: "modal__body", style: {
-                "--swirl-modal-max-height": this.maxHeight,
-                "--swirl-modal-height": this.height,
-                maxWidth: this.maxWidth,
-            } }, index.h("header", { key: '960cc321a21a42a685c2ab2b59f7d0c54a18dec7', class: "modal__custom-header" }, index.h("slot", { key: '4f552129d947c0a7fb3028b00cbf5572f77db3c7', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (index.h("header", { key: '008c9eeaa4c2bf5942861101935642432e901bd5', class: "modal__header" }, index.h("div", { key: 'bab4776996c19ca67360b69d83603d3ba4820db8', class: "modal__header-bar" }, !this.hideCloseButton && (index.h("swirl-button", { key: '5be5c72d7fa2363387d60e2a11df815ddbf1d0ec', 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.hideLabel && (index.h("swirl-heading", { key: '93c9af5d1b7c660d848b0877980c5cb99e6d4828', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), index.h("div", { key: '7234d4ea9f0836910404be84880cf9e578873b6e', class: "modal__content-container" }, index.h("div", { key: '4e31e4dce0b2ae0a75360489d5d17671e07901e0', class: "modal__primary-content" }, index.h("div", { key: '5aa7ffb00b599cfdac0957b353a29fd7815a5451', class: "modal__header-tools" }, index.h("slot", { key: '38b17e739978fbb359151c6a50021293bbdc8ab7', name: "header-tools" })), index.h("div", { key: 'e28344bab5a640970bbc6ed985297a038f4ba778', class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, index.h("slot", { key: '017a76a0fc300173f2ef994f90d76abda2b6c1f9' }))), index.h("div", { key: '262f866556653baec29cedc155987a21ef7c2ac2', class: "modal__secondary-content" }, index.h("slot", { key: '5cbc0dce1b0b6371280b42b422a5461cb6593f01', name: "secondary-content" }))), index.h("div", { key: '0019bb9bb6837017651498d6e1a52eef16d28ccc', class: "modal__custom-footer" }, index.h("slot", { key: '0d69ff81feff1786aaa3a2b66cf04924aff8550a', name: "custom-footer" })), showControls && (index.h("footer", { key: '09ad652007ff4b677ea8ecc67c6cbe70ff736649', class: "modal__controls" }, index.h("swirl-button-group", { key: '419dcc059fa42e955ff8c5f3cde3b0d24ab39949', wrap: true }, this.secondaryActionLabel && (index.h("swirl-button", { key: 'e4ec00f318f86a660de0b0d207de1c510136bbb0', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (index.h("swirl-button", { key: 'fabf1eaa4f9e9583d4d2cf5fbce181e0057dced9', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))))));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "isOpen": ["watchIsOpen"]
-    }; }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.modalClose = index.createEvent(this, "modalClose", 7);
+    this.modalOpen = index.createEvent(this, "modalOpen", 7);
+    this.primaryAction = index.createEvent(this, "primaryAction", 7);
+    this.requestModalClose = index.createEvent(this, "requestModalClose", 7);
+    this.secondaryAction = index.createEvent(this, "secondaryAction", 7);
+    this.onKeyDown = (event) => {
+      if (event.code === "Escape") {
+        event.stopImmediatePropagation();
+        this.close();
+      }
+    };
+    this.onBackdropClick = () => {
+      this.close();
+    };
+    this.onCloseButtonClick = () => {
+      this.close();
+    };
+    this.onPrimaryAction = (event) => {
+      this.primaryAction.emit(event);
+    };
+    this.onSecondaryAction = (event) => {
+      this.secondaryAction.emit(event);
+    };
+    this.determineScrollStatus = () => {
+      const scrolled = this.scrollContainer?.scrollTop > 0;
+      const scrolledDown = Math.ceil(this.scrollContainer?.scrollTop + this.scrollContainer?.offsetHeight) >= this.scrollContainer?.scrollHeight;
+      const scrollable = this.scrollContainer?.scrollHeight > this.scrollContainer?.offsetHeight;
+      if (scrolled !== this.scrolled) {
+        this.scrolled = scrolled;
+      }
+      if (scrolledDown !== this.scrolledDown) {
+        this.scrolledDown = scrolledDown;
+      }
+      if (scrollable !== this.scrollable) {
+        this.scrollable = scrollable;
+      }
+    };
+    this.closable = true;
+    this.closeButtonLabel = "Close modal";
+    this.height = undefined;
+    this.hideCloseButton = undefined;
+    this.hideLabel = undefined;
+    this.label = undefined;
+    this.maxHeight = undefined;
+    this.maxWidth = undefined;
+    this.padded = true;
+    this.primaryActionLabel = undefined;
+    this.secondaryActionLabel = undefined;
+    this.variant = "default";
+    this.isOpen = false;
+    this.closing = false;
+    this.hasCustomHeader = undefined;
+    this.hasCustomFooter = undefined;
+    this.hasHeaderTools = undefined;
+    this.hasSecondaryContent = undefined;
+    this.scrollable = false;
+    this.scrolled = false;
+    this.scrolledDown = false;
+  }
+  componentDidLoad() {
+    this.focusTrap = focusTrap_esm.createFocusTrap(this.modalEl, {
+      allowOutsideClick: true,
+      tabbableOptions: {
+        getShadowRoot: (node) => {
+          return node.shadowRoot;
+        },
+      },
+    });
+    this.determineScrollStatus();
+    queueMicrotask(() => {
+      this.updateCustomFooterStatus();
+      this.updateCustomHeaderStatus();
+      this.updateHeaderToolsStatus();
+      this.updateSecondaryContentStatus();
+    });
+  }
+  componentDidRender() {
+    this.focusTrap?.updateContainerElements(this.modalEl);
+  }
+  disconnectedCallback() {
+    this.focusTrap?.deactivate();
+    this.unlockBodyScroll();
+  }
+  onWindowResize() {
+    this.determineScrollStatus();
+  }
+  watchIsOpen() {
+    if (this.isOpen) {
+      // wait for animation
+      setTimeout(() => {
+        this.focusTrap.activate();
+        this.handleAutoFocus();
+      }, 200);
+    }
+    else {
+      this.focusTrap.deactivate();
+    }
+  }
+  /**
+   * Open the modal.
+   */
+  async open() {
+    this.isOpen = true;
+    this.modalOpen.emit();
+    this.lockBodyScroll();
+    this.determineScrollStatus();
+  }
+  /**
+   * Close the modal. Pass `true` to force close even if the modal is not closable.
+   */
+  async close(force) {
+    if (this.closing) {
+      return;
+    }
+    this.requestModalClose.emit();
+    if (!this.closable && !force) {
+      return;
+    }
+    this.closing = true;
+    this.unlockBodyScroll();
+    setTimeout(() => {
+      this.isOpen = false;
+      this.modalClose.emit();
+      this.closing = false;
+    }, 150);
+  }
+  updateCustomFooterStatus() {
+    this.hasCustomFooter = Boolean(this.el.querySelector('[slot="custom-footer"]'));
+  }
+  updateCustomHeaderStatus() {
+    this.hasCustomHeader = Boolean(this.el.querySelector('[slot="custom-header"]'));
+  }
+  updateHeaderToolsStatus() {
+    this.hasHeaderTools = Boolean(this.el.querySelector('[slot="header-tools"]'));
+  }
+  updateSecondaryContentStatus() {
+    this.hasSecondaryContent = Boolean(this.el.querySelector('[slot="secondary-content"]'));
+  }
+  handleAutoFocus() {
+    this.modalEl.querySelector("input[autofocus]")?.focus();
+  }
+  lockBodyScroll() {
+    bodyScrollLock_esm.disableBodyScroll(this.scrollContainer);
+  }
+  unlockBodyScroll() {
+    bodyScrollLock_esm.enableBodyScroll(this.scrollContainer);
+  }
+  render() {
+    const showControls = Boolean(this.primaryActionLabel) || Boolean(this.secondaryActionLabel);
+    const className = index$1.classnames("modal", `modal--variant-${this.variant}`, {
+      "modal--closing": this.closing,
+      "modal--has-custom-footer": this.hasCustomFooter,
+      "modal--has-custom-header": this.hasCustomHeader,
+      "modal--has-header-tools": this.hasHeaderTools,
+      "modal--has-secondary-content": this.hasSecondaryContent,
+      "modal--hide-label": this.hideLabel,
+      "modal--padded": this.padded,
+      "modal--scrollable": this.scrollable,
+      "modal--scrolled": this.scrolled,
+      "modal--scrolled-down": this.scrolledDown,
+    });
+    return (index.h(index.Host, null, index.h("section", { "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, index.h("div", { class: "modal__backdrop", onClick: this.onBackdropClick }), index.h("div", { class: "modal__body", style: {
+        "--swirl-modal-max-height": this.maxHeight,
+        "--swirl-modal-height": this.height,
+        maxWidth: this.maxWidth,
+      } }, index.h("header", { class: "modal__custom-header" }, index.h("slot", { name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (index.h("header", { class: "modal__header" }, index.h("div", { class: "modal__header-bar" }, !this.hideCloseButton && (index.h("swirl-button", { 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.hideLabel && (index.h("swirl-heading", { as: "h2", class: "modal__heading", level: 3, text: this.label }))))), index.h("div", { class: "modal__content-container" }, index.h("div", { class: "modal__primary-content" }, index.h("div", { class: "modal__header-tools" }, index.h("slot", { name: "header-tools" })), index.h("div", { class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, index.h("slot", null))), index.h("div", { class: "modal__secondary-content" }, index.h("slot", { name: "secondary-content" }))), index.h("div", { class: "modal__custom-footer" }, index.h("slot", { name: "custom-footer" })), showControls && (index.h("footer", { class: "modal__controls" }, index.h("swirl-button-group", { wrap: true }, this.secondaryActionLabel && (index.h("swirl-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (index.h("swirl-button", { intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "isOpen": ["watchIsOpen"]
+  }; }
 };
-SwirlModal.style = SwirlModalStyle0;
+SwirlModal.style = swirlModalCss;
 
 exports.swirl_modal = SwirlModal;

package/dist/cjs/swirl-option-list-section.cjs.entry.js

@@ -2,20 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f6326e3b.js');
+const index = require('./index-1de6abbd.js');
 
 const swirlOptionListSectionCss = ":host{display:block}:host *{box-sizing:border-box}.option-list-section{background-color:var(--s-surface-overlay-default)}.option-list-section__label{display:block;width:100%;padding:var(--s-space-8) var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-section__label{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
-const SwirlOptionListSectionStyle0 = swirlOptionListSectionCss;
 
 const SwirlOptionListSection = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.label = undefined;
-    }
-    render() {
-        return (index.h(index.Host, { key: '8df052cb1de523f3c7bf027f479f4a6c48c27b31' }, index.h("div", { key: '99a17c9c2d0b04d8e2791d029de3fbbce94f6373', "aria-labelledby": "label", class: "option-list-section", role: "group" }, index.h("span", { key: '64cfad6251534335c3281be93a1e10ad13d6946a', class: "option-list-section__label", id: "label", part: "option-list-section__label" }, this.label), index.h("div", { key: 'd11aadc2bf4be9159a2ebbbe55dbaa8efd4ffbbe', class: "option-list-section__items" }, index.h("slot", { key: '9bfd7f628677463463950e32a20488b5060772c5' })))));
-    }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.label = undefined;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { "aria-labelledby": "label", class: "option-list-section", role: "group" }, index.h("span", { class: "option-list-section__label", id: "label", part: "option-list-section__label" }, this.label), index.h("div", { class: "option-list-section__items" }, index.h("slot", null)))));
+  }
 };
-SwirlOptionListSection.style = SwirlOptionListSectionStyle0;
+SwirlOptionListSection.style = swirlOptionListSectionCss;
 
 exports.swirl_option_list_section = SwirlOptionListSection;