@getflip/swirl-components 0.0.0-new-shell-20231128124118

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

@@ -0,0 +1,300 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const floatingUi_dom_esm = require('./floating-ui.dom.esm-39236b6a.js');
+const index$1 = require('./index-2ddd0598.js');
+const utils = require('./utils-2b6367e4.js');
+
+const swirlMenuCss = ":host{display:block}:host *{box-sizing:border-box}.menu{width:100%;--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)}.menu--mobile.menu--root{position:relative}.menu--mobile.menu--root .menu__menu{top:3.5rem;transition:left 0.2s}.menu--mobile.menu--active .menu__menu{display:block}.menu--mobile .menu__menu{position:absolute;top:0;left:0;display:none;width:100%}:not(.menu--mobile).menu--root{position:relative}:not(.menu--mobile).menu--root .menu__menu{position:relative;padding-top:0;padding-bottom:0}:not(.menu--mobile):not(.menu--root) .menu__menu{z-index:1;max-width:22.5rem;border-radius:var(--s-border-radius-sm);box-shadow:var(--s-shadow-level-1)}:not(.menu--mobile).menu--active .menu__menu{display:block}:not(.menu--mobile) .menu__menu{position:fixed;display:none}.menu__mobile-header{display:flex;height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);gap:var(--s-space-8)}.menu__mobile-header>*{display:inline-flex;flex-shrink:0}.menu__title{min-width:0;flex-grow:1;flex-shrink:1}.menu__title swirl-heading{min-width:0}.menu__done-button{margin-right:calc(-1 * var(--s-space-8))}.menu__menu{padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-surface-overlay-default)}";
+
+const SwirlMenu = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.done = index.createEvent(this, "done", 7);
+    this.valueChange = index.createEvent(this, "valueChange", 7);
+    this.mobileMediaQuery = window.matchMedia("(min-width: 768px)");
+    this.mediaQueryHandler = () => {
+      this.updateMobileState();
+    };
+    this.resetMenu = () => {
+      this.items.forEach((item) => {
+        item.tabIndex = -1;
+      });
+      if (this.level > 0) {
+        return;
+      }
+      // wait for animation
+      setTimeout(() => {
+        this.activeLevel = 0;
+        const subMenus = utils.querySelectorAllDeep(this.el, "swirl-menu");
+        // disable sub menus
+        subMenus.forEach((subMenu) => {
+          subMenu.active = false;
+          subMenu.parentElement.expanded = false;
+        });
+      }, this.mobile ? 200 : 60);
+    };
+    this.closeMenu = () => {
+      if (this.disableAutoUpdate) {
+        this.disableAutoUpdate();
+      }
+      this.popover.close();
+      this.resetMenu();
+    };
+    this.reposition = async () => {
+      if (this.mobile || this.level === 0) {
+        this.position = undefined;
+        return;
+      }
+      const trigger = this.el.parentElement;
+      if (!Boolean(trigger) || !Boolean(this.menuContainer)) {
+        return;
+      }
+      this.position = await floatingUi_dom_esm.computePosition(trigger, this.menuContainer, {
+        placement: "right-start",
+        strategy: "fixed",
+        middleware: [floatingUi_dom_esm.offset({ mainAxis: -10, crossAxis: 0 }), floatingUi_dom_esm.flip()],
+      });
+    };
+    this.onKeyDown = (event) => {
+      if (event.code === "ArrowDown") {
+        event.preventDefault();
+        event.stopPropagation();
+        this.focusNextItem();
+      }
+      else if (event.code === "ArrowUp") {
+        event.preventDefault();
+        event.stopPropagation();
+        this.focusPreviousItem();
+      }
+      else if (event.code === "ArrowLeft") {
+        event.preventDefault();
+        event.stopPropagation();
+        this.rootMenu.goBack();
+      }
+      else if (event.code === "ArrowRight") {
+        event.preventDefault();
+        const activeItem = utils.closestPassShadow(this.items[this.getActiveItemIndex()], "swirl-menu-item");
+        if (!Boolean(activeItem)) {
+          return;
+        }
+        this.rootMenu.activateMenuItem(activeItem);
+      }
+    };
+    this.onClose = () => {
+      this.closeMenu();
+    };
+    this.onDone = () => {
+      this.closeMenu();
+      this.done.emit();
+    };
+    this.onGoBack = () => {
+      this.rootMenu.goBack();
+    };
+    this.active = true;
+    this.label = undefined;
+    this.level = 0;
+    this.mobileBackButtonLabel = "Back";
+    this.mobileCloseMenuButtonLabel = "Close menu";
+    this.mobileDoneButtonLabel = "Done";
+    this.value = undefined;
+    this.variant = "action";
+    this.activeLevel = 0;
+    this.mobile = undefined;
+    this.position = undefined;
+  }
+  componentWillLoad() {
+    this.updateMobileState();
+    this.updateLevel();
+    this.observeSlotChanges();
+  }
+  componentDidLoad() {
+    this.mobileMediaQuery.onchange = this.mediaQueryHandler;
+    this.parentMenu = utils.closestPassShadow(this.el.parentElement, "swirl-menu");
+    this.popover = utils.closestPassShadow(this.el, "swirl-popover");
+    this.rootMenu = utils.parentsPassShadow(this.el, "swirl-menu").pop();
+    if (Boolean(this.parentMenu)) {
+      queueMicrotask(() => {
+        this.active = false;
+      });
+    }
+    this.popover.addEventListener("popoverClose", this.resetMenu);
+    this.updateItems();
+  }
+  disconnectedCallback() {
+    this.popover.removeEventListener("popoverClose", this.resetMenu);
+    this.mobileMediaQuery.removeEventListener?.("change", this.mediaQueryHandler);
+    this.observer?.disconnect();
+  }
+  watchActive() {
+    this.reposition();
+    if (this.disableAutoUpdate) {
+      this.disableAutoUpdate();
+    }
+    this.disableAutoUpdate = floatingUi_dom_esm.autoUpdate(this.el.parentElement, this.menuContainer, this.reposition);
+  }
+  /**
+   * Activate a menu item with a sub menu. Only callable on a root menu.
+   * @returns
+   */
+  async activateMenuItem(menuItem) {
+    if (Boolean(this.parentMenu)) {
+      return;
+    }
+    const parentMenu = await menuItem.getParentMenu();
+    // deactivate sub menus of parent menu
+    const subMenus = utils.querySelectorAllDeep(this.el, "swirl-menu").filter((subMenu) => subMenu.level >= parentMenu.level && subMenu !== parentMenu);
+    subMenus.forEach((subMenu) => {
+      subMenu.active = false;
+      subMenu.parentElement.expanded = false;
+    });
+    // activate sub menu
+    const subMenu = await menuItem.getSubMenu();
+    if (!Boolean(subMenu)) {
+      return;
+    }
+    menuItem.expanded = true;
+    subMenu.active = true;
+    this.activeLevel = subMenu.level;
+    // wait for animation to focus first item of sub menu
+    setTimeout(() => {
+      subMenu.focusFirstItem();
+    }, this.mobile ? 200 : 60);
+  }
+  /**
+   * Close and reset the menu. Only callable on a root menu.
+   * @returns
+   */
+  async close() {
+    this.closeMenu();
+  }
+  /**
+   * Collapse the currently active sub menu. Only callable on a root menu.
+   * @returns
+   */
+  async goBack() {
+    if (Boolean(this.parentMenu) || this.activeLevel === 0) {
+      return;
+    }
+    const currentlyActiveSubMenu = utils.querySelectorAllDeep(this.el, "swirl-menu").find((subMenu) => subMenu.level === this.activeLevel && subMenu.active) || this.rootMenu;
+    const deactivatedMenuItem = currentlyActiveSubMenu.parentElement;
+    deactivatedMenuItem.expanded = false;
+    this.activeLevel = Math.max(this.activeLevel - 1, 0);
+    const subMenus = utils.querySelectorAllDeep(this.el, "swirl-menu").filter((subMenu) => subMenu.level > this.activeLevel);
+    // disable sub menus of deactivated level(s)
+    subMenus.forEach((subMenu) => {
+      subMenu.active = false;
+    });
+    const activatedMenu = utils.querySelectorAllDeep(this.el, "swirl-menu").find((subMenu) => subMenu.level === this.activeLevel && subMenu.active) || this.rootMenu;
+    activatedMenu.focusItemAtIndex(Array.from(deactivatedMenuItem.parentElement.children).indexOf(deactivatedMenuItem));
+  }
+  /**
+   * Focus the first menu item.
+   * @returns
+   */
+  async focusFirstItem() {
+    this.focusItem(this.items[0]);
+  }
+  /**
+   * Focus the menu item at index.
+   * @returns
+   */
+  async focusItemAtIndex(index) {
+    this.focusItem(this.items[index]);
+  }
+  /**
+   * Update the selection of a menu with variant "selection".
+   * @returns
+   */
+  async updateSelection(item) {
+    this.valueChange.emit(item.value);
+  }
+  observeSlotChanges() {
+    this.observer = new MutationObserver(() => {
+      this.updateItems();
+    });
+    this.observer.observe(this.el, { childList: true });
+  }
+  updateMobileState() {
+    const mobile = utils.isMobileViewport();
+    if (mobile !== this.mobile) {
+      this.mobile = mobile;
+    }
+  }
+  updateItems() {
+    this.items = [
+      ...utils.querySelectorAllDeep(this.el, '[role="menuitem"]'),
+      ...utils.querySelectorAllDeep(this.el, '[role="menuitemradio"]'),
+    ].filter((item) => {
+      return utils.closestPassShadow(item, "swirl-menu") === this.el;
+    });
+  }
+  updateLevel() {
+    const parents = utils.parentsPassShadow(this.el.parentNode, "swirl-menu");
+    this.level = parents.length;
+  }
+  focusItem(item) {
+    const items = [
+      ...utils.querySelectorAllDeep(this.rootMenu, '[role="menuitem"]'),
+      ...utils.querySelectorAllDeep(this.rootMenu, '[role="menuitemradio"]'),
+    ];
+    items.forEach((item) => {
+      item.tabIndex = -1;
+    });
+    if (!Boolean(item)) {
+      return;
+    }
+    item.tabIndex = 0;
+    item.focus();
+  }
+  focusNextItem() {
+    const activeItemIndex = this.getActiveItemIndex();
+    const newIndex = (activeItemIndex + 1) % this.items.length;
+    const item = this.items[newIndex];
+    this.focusItem(item);
+  }
+  focusPreviousItem() {
+    const activeItemIndex = this.getActiveItemIndex();
+    const newIndex = activeItemIndex === 0 ? this.items.length - 1 : activeItemIndex - 1;
+    const item = this.items[newIndex];
+    this.focusItem(item);
+  }
+  getActiveItemIndex() {
+    const activeElement = utils.getActiveElement();
+    return this.items.findIndex((item) => item === activeElement ||
+      item === activeElement?.querySelector('[role="menuitem"]') ||
+      item === activeElement?.querySelector('[role="menuitemradio"]'));
+  }
+  render() {
+    const isTopLevelMenu = !Boolean(this.parentMenu);
+    const ariaLabel = isTopLevelMenu && this.mobile ? undefined : this.label;
+    const ariaLabelledby = isTopLevelMenu && this.mobile ? "menu-title" : undefined;
+    const role = isTopLevelMenu ? "menubar" : "menu";
+    const className = index$1.classnames("menu", `menu--level-${this.level}`, {
+      "menu--active": this.active,
+      "menu--mobile": this.mobile,
+      "menu--root": isTopLevelMenu,
+    });
+    return (index.h(index.Host, null, index.h("div", { class: className }, this.mobile && isTopLevelMenu && (index.h("div", { class: "menu__mobile-header" }, this.activeLevel === 0 && (index.h("swirl-button", { hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.mobileCloseMenuButtonLabel, onClick: this.onClose, variant: "plain" })), this.activeLevel > 0 && (index.h("swirl-button", { hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" })), index.h("span", { class: "menu__title", id: "menu-title" }, index.h("swirl-heading", { align: "center", as: "span", level: 4, text: this.label, truncate: true })), index.h("swirl-button", { class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone }))), index.h("div", { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-orientation": "vertical", class: "menu__menu", onKeyDown: this.onKeyDown, ref: (el) => (this.menuContainer = el), role: role, style: !this.mobile && this.level > 0
+        ? {
+          top: Boolean(this.position) ? `${this.position?.y}px` : "",
+          left: Boolean(this.position) ? `${this.position?.x}px` : "",
+        }
+        : this.mobile
+          ? {
+            left: isTopLevelMenu
+              ? `calc(-100% * ${this.activeLevel})`
+              : "100%",
+          }
+          : undefined }, index.h("slot", null)))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "active": ["watchActive"]
+  }; }
+};
+SwirlMenu.style = swirlMenuCss;
+
+exports.swirl_menu = SwirlMenu;

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

@@ -0,0 +1,190 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const bodyScrollLock_esm = require('./bodyScrollLock.esm-f29f1a77.js');
+const focusTrap_esm = require('./focus-trap.esm-21561e09.js');
+const index$1 = require('./index-2ddd0598.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;position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;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}}.modal--variant-drawer .modal__content{min-height:100%}@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;max-width:40rem;height:100vh;background-color:var(--s-surface-overlay-default);flex-direction:column}@media (min-width: 768px){.modal__body{width:90vw;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;min-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 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") {
+        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 = swirlModalCss;
+
+exports.swirl_modal = SwirlModal;

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

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.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 SwirlOptionListSection = class {
+  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 = swirlOptionListSectionCss;
+
+exports.swirl_option_list_section = SwirlOptionListSection;