@getflip/swirl-components 0.81.3 → 0.82.0

package/dist/esm/swirl-lightbox.entry.js

@@ -15,8 +15,7 @@ const SwirlLightbox = class {
       this.close();
     };
     this.onDownloadButtonClick = () => {
-      var _a;
-      (_a = this.slides[this.activeSlideIndex]) === null || _a === void 0 ? void 0 : _a.download();
+      this.slides[this.activeSlideIndex]?.download();
       this.menu.close();
     };
     this.onKeyDown = (event) => {
@@ -50,9 +49,8 @@ const SwirlLightbox = class {
       });
     };
     this.onPointerMove = async (event) => {
-      var _a, _b;
       const isMultiTouch = !(event instanceof MouseEvent) && event.touches.length > 1;
-      const imageViewer = (_b = (_a = this.slides[this.activeSlideIndex]) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("swirl-file-viewer-image");
+      const imageViewer = this.slides[this.activeSlideIndex]?.shadowRoot?.querySelector("swirl-file-viewer-image");
       const showsZoomedImage = Boolean(imageViewer)
         ? (await imageViewer.getZoom()) > 1
         : false;
@@ -111,8 +109,7 @@ const SwirlLightbox = class {
     this.activateSlide(0);
   }
   disconnectedCallback() {
-    var _a;
-    (_a = this.modal) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.modal?.destroy();
     this.unlockBodyScroll();
   }
   /**
@@ -143,8 +140,7 @@ const SwirlLightbox = class {
    * @param newActiveSlideIndex
    */
   async activateSlide(newActiveSlideIndex) {
-    var _a, _b;
-    (_b = (_a = this.menu) === null || _a === void 0 ? void 0 : _a.close) === null || _b === void 0 ? void 0 : _b.call(_a);
+    this.menu?.close?.();
     this.dragging = false;
     this.activeSlideIndex = newActiveSlideIndex;
     this.slides.forEach((slide, index) => {
@@ -190,16 +186,13 @@ const SwirlLightbox = class {
     });
   }
   getCurrentFileName() {
-    var _a, _b;
-    return (_b = (_a = this.slides[this.activeSlideIndex]) === null || _a === void 0 ? void 0 : _a.file) === null || _b === void 0 ? void 0 : _b.split("/").pop();
+    return this.slides[this.activeSlideIndex]?.file?.split("/").pop();
   }
   getCurrentFileType() {
-    var _a;
-    return (_a = this.slides[this.activeSlideIndex]) === null || _a === void 0 ? void 0 : _a.type;
+    return this.slides[this.activeSlideIndex]?.type;
   }
   getCurrentThumbnailUrl() {
-    var _a;
-    return (_a = this.slides[this.activeSlideIndex]) === null || _a === void 0 ? void 0 : _a.thumbnailUrl;
+    return this.slides[this.activeSlideIndex]?.thumbnailUrl;
   }
   lockBodyScroll() {
     disableBodyScroll(this.el);
@@ -216,8 +209,7 @@ const SwirlLightbox = class {
   }
   resetImageZoom() {
     this.slides.forEach((slide) => {
-      var _a;
-      const imageViewer = (_a = slide === null || slide === void 0 ? void 0 : slide.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("swirl-file-viewer-image");
+      const imageViewer = slide?.shadowRoot?.querySelector("swirl-file-viewer-image");
       if (Boolean(imageViewer)) {
         imageViewer.resetZoom();
       }

package/dist/esm/swirl-menu-item.entry.js

@@ -87,22 +87,19 @@ const SwirlMenuItem = class {
       : undefined;
   }
   renderActionListItem() {
-    var _a, _b, _c;
-    const badge = Boolean((_a = this.subMenu) === null || _a === void 0 ? void 0 : _a.value)
-      ? (_c = Array.from(((_b = this.subMenu) === null || _b === void 0 ? void 0 : _b.querySelectorAll("swirl-menu-item")) || []).find((item) => { var _a; return item.value === ((_a = this.subMenu) === null || _a === void 0 ? void 0 : _a.value); })) === null || _c === void 0 ? void 0 : _c.label
+    const badge = Boolean(this.subMenu?.value)
+      ? Array.from(this.subMenu?.querySelectorAll("swirl-menu-item") || []).find((item) => item.value === this.subMenu?.value)?.label
       : undefined;
     return (h("swirl-action-list-item", { badge: badge, description: this.description, disabled: this.disabled, icon: this.icon, intent: this.intent, label: this.label, onClick: this.onActionListItemClick, ref: (el) => (this.actionListItem = el) }));
   }
   renderOptionListItem() {
-    var _a;
-    return (h("swirl-option-list-item", { disabled: this.disabled, icon: this.icon, label: this.label, onClick: this.onOptionListItemClick, onKeyDown: this.onOptionListItemKeyDown, onKeyUp: this.onOptionListItemKeyUp, ref: (el) => (this.optionListItem = el), selected: ((_a = this.parentMenu) === null || _a === void 0 ? void 0 : _a.value) === this.value, swirlAriaRole: "menuitemradio", value: this.value }));
+    return (h("swirl-option-list-item", { disabled: this.disabled, icon: this.icon, label: this.label, onClick: this.onOptionListItemClick, onKeyDown: this.onOptionListItemKeyDown, onKeyUp: this.onOptionListItemKeyUp, ref: (el) => (this.optionListItem = el), selected: this.parentMenu?.value === this.value, swirlAriaRole: "menuitemradio", value: this.value }));
   }
   render() {
-    var _a;
     const className = classnames("menu-item", {
       "menu-item--expanded": this.expanded,
     });
-    return (h(Host, null, h("div", { class: className }, ((_a = this.parentMenu) === null || _a === void 0 ? void 0 : _a.variant) === "selection"
+    return (h(Host, null, h("div", { class: className }, this.parentMenu?.variant === "selection"
       ? this.renderOptionListItem()
       : this.renderActionListItem(), h("slot", { onSlotchange: this.onSlotChange }))));
   }

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

@@ -120,10 +120,9 @@ const SwirlMenu = class {
     this.updateItems();
   }
   disconnectedCallback() {
-    var _a, _b, _c;
     this.popover.removeEventListener("popoverClose", this.resetMenu);
-    (_b = (_a = this.mobileMediaQuery).removeEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.mediaQueryHandler);
-    (_c = this.observer) === null || _c === void 0 ? void 0 : _c.disconnect();
+    this.mobileMediaQuery.removeEventListener?.("change", this.mediaQueryHandler);
+    this.observer?.disconnect();
   }
   watchActive() {
     this.reposition();
@@ -261,11 +260,10 @@ const SwirlMenu = class {
   getActiveItemIndex() {
     const activeElement = getActiveElement();
     return this.items.findIndex((item) => item === activeElement ||
-      item === (activeElement === null || activeElement === void 0 ? void 0 : activeElement.querySelector('[role="menuitem"]')) ||
-      item === (activeElement === null || activeElement === void 0 ? void 0 : activeElement.querySelector('[role="menuitemradio"]')));
+      item === activeElement?.querySelector('[role="menuitem"]') ||
+      item === activeElement?.querySelector('[role="menuitemradio"]'));
   }
   render() {
-    var _a, _b;
     const isTopLevelMenu = !Boolean(this.parentMenu);
     const ariaLabel = isTopLevelMenu && this.mobile ? undefined : this.label;
     const ariaLabelledby = isTopLevelMenu && this.mobile ? "menu-title" : undefined;
@@ -277,8 +275,8 @@ const SwirlMenu = class {
     });
     return (h(Host, null, h("div", { class: className }, this.mobile && isTopLevelMenu && (h("div", { class: "menu__mobile-header" }, this.activeLevel === 0 && (h("swirl-button", { hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.mobileCloseMenuButtonLabel, onClick: this.onClose, variant: "plain" })), this.activeLevel > 0 && (h("swirl-button", { hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" })), h("span", { class: "menu__title", id: "menu-title" }, h("swirl-heading", { align: "center", as: "span", level: 4, text: this.label, truncate: true })), h("swirl-button", { class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone }))), 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) ? `${(_a = this.position) === null || _a === void 0 ? void 0 : _a.y}px` : "",
-          left: Boolean(this.position) ? `${(_b = this.position) === null || _b === void 0 ? void 0 : _b.x}px` : "",
+          top: Boolean(this.position) ? `${this.position?.y}px` : "",
+          left: Boolean(this.position) ? `${this.position?.x}px` : "",
         }
         : this.mobile
           ? {

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

@@ -1152,6 +1152,7 @@ const SwirlModal = class {
     this.modalClose = createEvent(this, "modalClose", 7);
     this.modalOpen = createEvent(this, "modalOpen", 7);
     this.primaryAction = createEvent(this, "primaryAction", 7);
+    this.requestModalClose = createEvent(this, "requestModalClose", 7);
     this.secondaryAction = createEvent(this, "secondaryAction", 7);
     this.onKeyDown = (event) => {
       if (event.code === "Escape") {
@@ -1171,10 +1172,9 @@ const SwirlModal = class {
       this.secondaryAction.emit(event);
     };
     this.determineScrollStatus = () => {
-      var _a, _b, _c, _d, _e, _f;
-      const scrolled = ((_a = this.scrollContainer) === null || _a === void 0 ? void 0 : _a.scrollTop) > 0;
-      const scrolledDown = Math.ceil(((_b = this.scrollContainer) === null || _b === void 0 ? void 0 : _b.scrollTop) + ((_c = this.scrollContainer) === null || _c === void 0 ? void 0 : _c.offsetHeight)) >= ((_d = this.scrollContainer) === null || _d === void 0 ? void 0 : _d.scrollHeight);
-      const scrollable = ((_e = this.scrollContainer) === null || _e === void 0 ? void 0 : _e.scrollHeight) > ((_f = this.scrollContainer) === null || _f === void 0 ? void 0 : _f.offsetHeight);
+      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;
       }
@@ -1185,6 +1185,7 @@ const SwirlModal = class {
         this.scrollable = scrollable;
       }
     };
+    this.closable = true;
     this.closeButtonLabel = "Close modal";
     this.hideCloseButton = undefined;
     this.hideLabel = undefined;
@@ -1232,6 +1233,7 @@ const SwirlModal = class {
       // wait for animation
       setTimeout(() => {
         this.focusTrap.activate();
+        this.handleAutoFocus();
       }, 200);
     }
     else {
@@ -1248,12 +1250,16 @@ const SwirlModal = class {
     this.determineScrollStatus();
   }
   /**
-   * Close the modal.
+   * Close the modal. Pass `true` to force close even if the modal is not closable.
    */
-  async close() {
+  async close(force) {
     if (this.closing) {
       return;
     }
+    this.requestModalClose.emit();
+    if (!this.closable && !force) {
+      return;
+    }
     this.closing = true;
     this.unlockBodyScroll();
     setTimeout(() => {
@@ -1271,6 +1277,9 @@ const SwirlModal = class {
   updateHeaderToolsStatus() {
     this.hasHeaderTools = Boolean(this.el.querySelector('[slot="header-tools"]'));
   }
+  handleAutoFocus() {
+    this.modalEl.querySelector("input[autofocus]")?.focus();
+  }
   lockBodyScroll() {
     disableBodyScroll(this.scrollContainer);
   }

package/dist/esm/swirl-option-list.entry.js

@@ -25,7 +25,7 @@ const SwirlOptionList = class {
     this.onClick = (event) => {
       event.preventDefault();
       const target = event.target;
-      const item = target === null || target === void 0 ? void 0 : target.closest("swirl-option-list-item");
+      const item = target?.closest("swirl-option-list-item");
       const composedTarget = event.composedPath()[0];
       const clickedOption = Boolean(closestPassShadow(composedTarget, '[role="option"]'));
       if (!Boolean(item) || !clickedOption) {
@@ -134,9 +134,8 @@ const SwirlOptionList = class {
     this.setupDragDrop();
   }
   disconnectedCallback() {
-    var _a, _b;
-    (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
-    (_b = this.sortable) === null || _b === void 0 ? void 0 : _b.destroy();
+    this.observer?.disconnect();
+    this.sortable?.destroy();
   }
   watchAllowDrag() {
     this.setItemAllowDragState();
@@ -264,16 +263,14 @@ const SwirlOptionList = class {
     }
   }
   syncItemsWithValue() {
-    var _a;
-    (_a = this.items) === null || _a === void 0 ? void 0 : _a.forEach((item) => (item.selected = this.value.includes(item.value)));
+    this.items?.forEach((item) => (item.selected = this.value.includes(item.value)));
   }
   focusItem(index) {
-    var _a;
     if (this.disabled) {
       return;
     }
     this.items.forEach((item) => item.querySelector('[role="option"]').removeAttribute("tabIndex"));
-    const item = (_a = this.items[index]) === null || _a === void 0 ? void 0 : _a.querySelector('[role="option"]');
+    const item = this.items[index]?.querySelector('[role="option"]');
     if (!Boolean(item)) {
       return;
     }

package/dist/esm/swirl-pdf-reader.entry.js

@@ -70,9 +70,8 @@ const SwirlPdfReader = class {
       this.zoom = value === "auto" ? value : +value;
     };
     this.onThumbnailClick = (index) => () => {
-      var _a;
-      const page = (_a = querySelectorAllDeep(this.el, `[data-page-number="${index + 1}"]`)) === null || _a === void 0 ? void 0 : _a[0];
-      page === null || page === void 0 ? void 0 : page.scrollIntoView();
+      const page = querySelectorAllDeep(this.el, `[data-page-number="${index + 1}"]`)?.[0];
+      page?.scrollIntoView();
     };
     this.autoZoomLabel = "Full width";
     this.closeButtonLabel = "Close PDF viewer";
@@ -108,9 +107,8 @@ const SwirlPdfReader = class {
     this.modal = new A11yDialog(this.modalEl);
   }
   disconnectedCallback() {
-    var _a;
     this.unlockBodyScroll();
-    (_a = this.modal) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.modal?.destroy();
   }
   onWindowResize() {
     if (!Boolean(this.pdfViewer)) {

package/dist/esm/swirl-popover_2.entry.js

@@ -77,7 +77,6 @@ const SwirlPopover = class {
     this.unlockBodyScroll();
   }
   onWindowFocusIn(event) {
-    var _a;
     if (!this.active) {
       return;
     }
@@ -88,7 +87,7 @@ const SwirlPopover = class {
     const popoverLostFocus = !this.el.contains(target) &&
       !this.el.contains(activeElement) &&
       target !== this.triggerEl &&
-      !((_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.contains(target)) &&
+      !this.triggerEl?.contains(target) &&
       (!isSafari ||
         (isSafari &&
           !this.el.contains(relatedTarget || target) &&
@@ -118,7 +117,6 @@ const SwirlPopover = class {
    * @returns
    */
   async close() {
-    var _a;
     if (this.closing || !this.active) {
       return;
     }
@@ -133,7 +131,7 @@ const SwirlPopover = class {
       this.updateTriggerAttributes();
     }, 150);
     this.unlockBodyScroll();
-    (_a = this.getNativeTriggerElement()) === null || _a === void 0 ? void 0 : _a.focus();
+    this.getNativeTriggerElement()?.focus();
   }
   /**
    * Open the popover.
@@ -182,10 +180,9 @@ const SwirlPopover = class {
     });
   }
   getNativeTriggerElement() {
-    var _a, _b, _c, _d;
-    return ((_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.tagName.startsWith("SWIRL-"))
-      ? (((_b = this.triggerEl) === null || _b === void 0 ? void 0 : _b.children[0]) ||
-        ((_d = (_c = this.triggerEl) === null || _c === void 0 ? void 0 : _c.shadowRoot) === null || _d === void 0 ? void 0 : _d.children[0]) ||
+    return this.triggerEl?.tagName.startsWith("SWIRL-")
+      ? (this.triggerEl?.children[0] ||
+        this.triggerEl?.shadowRoot?.children[0] ||
         this.triggerEl)
       : this.triggerEl;
   }
@@ -238,17 +235,16 @@ const SwirlPopover = class {
     enableBodyScroll(this.scrollContainer);
   }
   render() {
-    var _a, _b, _c;
     const mobile = !window.matchMedia("(min-width: 768px)").matches;
-    const className = classnames("popover", `popover--animation-${this.animation}`, `popover--placement-${(_a = this.position) === null || _a === void 0 ? void 0 : _a.placement}`, {
+    const className = classnames("popover", `popover--animation-${this.animation}`, `popover--placement-${this.position?.placement}`, {
       "popover--closing": this.closing,
       "popover--active": this.active,
       "popover--fullscreen-bottom-sheet": this.fullscreenBottomSheet,
       "popover--inactive": !this.active,
     });
     return (h(Host, null, h("div", { class: className, onKeyDown: this.onKeydown }, h("div", { "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
-        top: Boolean(this.position) ? `${(_b = this.position) === null || _b === void 0 ? void 0 : _b.y}px` : "",
-        left: Boolean(this.position) ? `${(_c = this.position) === null || _c === void 0 ? void 0 : _c.x}px` : "",
+        top: Boolean(this.position) ? `${this.position?.y}px` : "",
+        left: Boolean(this.position) ? `${this.position?.x}px` : "",
       }, tabindex: "-1" }, h("span", { class: "popover__handle" }), h("div", { class: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
         maxHeight: !mobile && Boolean(this.maxHeight)
           ? this.maxHeight
@@ -290,12 +286,11 @@ const SwirlPopoverTrigger = class {
       }, { once: true });
     };
     this.updateTriggerElAriaAttributes = (open) => {
-      var _a;
       if (!this.setAriaAttributes) {
         return;
       }
       const triggerEl = this.getTriggerEl();
-      const popoverId = typeof this.popover === "string" ? this.popover : (_a = this.popover) === null || _a === void 0 ? void 0 : _a.id;
+      const popoverId = typeof this.popover === "string" ? this.popover : this.popover?.id;
       if (triggerEl.tagName.startsWith("SWIRL-")) {
         triggerEl.setAttribute("swirl-aria-controls", popoverId);
         triggerEl.setAttribute("swirl-aria-expanded", String(open || "false"));

package/dist/esm/swirl-resource-list-file-item.entry.js

@@ -25,15 +25,14 @@ const SwirlResourceListFileItem = class {
     this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   disconnectedCallback() {
-    var _a, _b;
-    (_b = (_a = this.desktopMediaQuery).removeEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
   }
   forceIconProps(smallIcon) {
     if (!Boolean(this.iconEl)) {
       return;
     }
     const icon = this.iconEl.children[0];
-    icon === null || icon === void 0 ? void 0 : icon.setAttribute("size", smallIcon ? "20" : "24");
+    icon?.setAttribute("size", smallIcon ? "20" : "24");
   }
   render() {
     const showError = Boolean(this.errorMessage);

package/dist/esm/swirl-search.entry.js

@@ -45,17 +45,22 @@ const SwirlSearch = class {
   componentDidLoad() {
     this.forceIconProps(this.desktopMediaQuery.matches);
     this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+    // see https://stackoverflow.com/a/27314017
+    if (this.autoFocus) {
+      setTimeout(() => {
+        this.input.focus();
+      });
+    }
   }
   disconnectedCallback() {
-    var _a, _b;
-    (_b = (_a = this.desktopMediaQuery).removeEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
   }
   forceIconProps(smallIcon) {
     if (!Boolean(this.iconEl)) {
       return;
     }
     const icon = this.iconEl.children[0];
-    icon === null || icon === void 0 ? void 0 : icon.setAttribute("size", smallIcon ? "20" : "24");
+    icon?.setAttribute("size", smallIcon ? "20" : "24");
   }
   onKeyDown(event) {
     if ((event.code === "KeyK" || event.code === "Slash") &&

package/dist/esm/swirl-select.entry.js

@@ -26,8 +26,7 @@ const SwirlSelect = class {
       this.updateOptions();
     };
     this.onOpen = (event) => {
-      var _a;
-      this.placement = (_a = event.detail.position) === null || _a === void 0 ? void 0 : _a.placement;
+      this.placement = event.detail.position?.placement;
       this.open = true;
     };
     this.onClose = () => {
@@ -67,15 +66,16 @@ const SwirlSelect = class {
     this.options = querySelectorAllDeep(this.el, "swirl-option-list-item");
   }
   render() {
-    var _a, _b, _c;
     const label = Boolean(this.value)
-      ? (_a = this.value) === null || _a === void 0 ? void 0 : _a.map((value) => { var _a; return (_a = this.options.find((option) => option.value === value)) === null || _a === void 0 ? void 0 : _a.label; }).join(", ")
+      ? this.value
+        ?.map((value) => this.options.find((option) => option.value === value)?.label)
+        .join(", ")
       : "";
     const ariaInvalid = this.invalid === true || this.invalid === false
       ? String(this.invalid)
       : undefined;
     const formControl = this.el.closest("swirl-form-control");
-    const offset = (formControl === null || formControl === void 0 ? void 0 : formControl.inline) || (formControl === null || formControl === void 0 ? void 0 : formControl.labelPosition) === "outside"
+    const offset = formControl?.inline || formControl?.labelPosition === "outside"
       ? -12
       : -16;
     const className = classnames("select", `select--placement-${this.placement}`, {
@@ -83,9 +83,11 @@ const SwirlSelect = class {
       "select--inline": this.inline,
       "select--multi": this.multiSelect,
     });
-    return (h(Host, { onKeyDown: this.onKeyDown }, h("div", { class: className }, h("swirl-popover-trigger", { popover: this.popover, setAriaAttributes: false }, h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, type: "text", value: label })), h("span", { class: "select__multi-select-values" }, (_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.map((value) => this.options.find((option) => option.value === value))) === null || _c === void 0 ? void 0 : _c.map((option) => (h("swirl-tag", { "aria-hidden": "true", label: option === null || option === void 0 ? void 0 : option.label,
+    return (h(Host, { onKeyDown: this.onKeyDown }, h("div", { class: className }, h("swirl-popover-trigger", { popover: this.popover, setAriaAttributes: false }, h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, type: "text", value: label })), h("span", { class: "select__multi-select-values" }, this.value
+      ?.map((value) => this.options.find((option) => option.value === value))
+      ?.map((option) => (h("swirl-tag", { "aria-hidden": "true", label: option?.label,
       // eslint-disable-next-line react/jsx-no-bind
-      onRemove: () => this.unselectOption(option === null || option === void 0 ? void 0 : option.value), removable: !this.disabled && this.allowDeselect })))), h("span", { class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", null)) : (h("swirl-icon-expand-more", null))), h("swirl-popover", { animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: [0, offset], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.popover = el), useContainerWidth: "swirl-form-control" }, h("swirl-option-list", { allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, value: this.value }, h("slot", { onSlotchange: this.onSlotChange }))))));
+      onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect })))), h("span", { class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", null)) : (h("swirl-icon-expand-more", null))), h("swirl-popover", { animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: [0, offset], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.popover = el), useContainerWidth: "swirl-form-control" }, h("swirl-option-list", { allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, value: this.value }, h("slot", { onSlotchange: this.onSlotChange }))))));
   }
   get el() { return getElement(this); }
 };

package/dist/esm/swirl-shell-layout.entry.js

@@ -47,10 +47,9 @@ const SwirlShellLayout = class {
       }
     };
     this.onSidebarClick = () => {
-      var _a, _b;
       if (this.collapsedSidebar) {
-        (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
-        (_b = getActiveElement()) === null || _b === void 0 ? void 0 : _b.blur();
+        document.activeElement?.blur();
+        getActiveElement()?.blur();
       }
     };
     this.onSidebarMouseEnter = () => {

package/dist/esm/swirl-table-column.entry.js

@@ -15,7 +15,7 @@ const SwirlTableColumn = class {
   }
   componentDidRender() {
     const table = closestPassShadow(this.el, "swirl-table");
-    table === null || table === void 0 ? void 0 : table.rerender();
+    table?.rerender();
   }
   render() {
     const styles = {

package/dist/esm/swirl-table-row.entry.js

@@ -12,7 +12,7 @@ const SwirlTableRow = class {
   }
   componentDidLoad() {
     const table = closestPassShadow(this.el, "swirl-table");
-    table === null || table === void 0 ? void 0 : table.rerender();
+    table?.rerender();
   }
   render() {
     const className = classnames("table-row", {

package/dist/esm/swirl-table.entry.js

@@ -206,9 +206,8 @@ const SwirlTable = class {
     emptyRow.style.width = scrollWidth;
   }
   layoutRowGroups() {
-    var _a;
     const tableRowGroups = Array.from(this.el.querySelectorAll("swirl-table-row-group"));
-    const scrollWidth = `${(_a = this.el.shadowRoot.querySelector(".table__container")) === null || _a === void 0 ? void 0 : _a.scrollWidth}px`;
+    const scrollWidth = `${this.el.shadowRoot.querySelector(".table__container")?.scrollWidth}px`;
     tableRowGroups.forEach((tableRowGroup) => {
       const headerRow = tableRowGroup.shadowRoot.querySelector(".table-row-group__header-row");
       if (!Boolean(headerRow)) {

package/dist/esm/swirl-tabs.entry.js

@@ -48,8 +48,7 @@ const SwirlTabs = class {
     const nextIndex = Math.min(this.tabs.length - 1, currentIndex + 1);
     this.activateTab(this.tabs[nextIndex].tabId);
     requestAnimationFrame(() => {
-      var _a;
-      (_a = this.el.querySelector(".tabs__tab--active")) === null || _a === void 0 ? void 0 : _a.focus();
+      this.el.querySelector(".tabs__tab--active")?.focus();
     });
   }
   activatePreviousTab() {
@@ -57,8 +56,7 @@ const SwirlTabs = class {
     const previousIndex = Math.max(0, currentIndex - 1);
     this.activateTab(this.tabs[previousIndex].tabId);
     requestAnimationFrame(() => {
-      var _a;
-      (_a = this.el.querySelector(".tabs__tab--active")) === null || _a === void 0 ? void 0 : _a.focus();
+      this.el.querySelector(".tabs__tab--active")?.focus();
     });
   }
   collectTabs() {

package/dist/esm/swirl-tag.entry.js

@@ -8,8 +8,7 @@ const SwirlTag = class {
     registerInstance(this, hostRef);
     this.remove = createEvent(this, "remove", 7);
     this.onRemove = (event) => {
-      var _a;
-      (_a = this.remove) === null || _a === void 0 ? void 0 : _a.emit(event);
+      this.remove?.emit(event);
     };
     this.intent = "default";
     this.label = undefined;

package/dist/esm/swirl-text-input.entry.js

@@ -109,13 +109,18 @@ const SwirlTextInput = class {
   componentDidLoad() {
     this.updateIconSize(this.desktopMediaQuery.matches);
     this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+    // see https://stackoverflow.com/a/27314017
+    if (this.autoFocus) {
+      setTimeout(() => {
+        this.inputEl.focus();
+      });
+    }
   }
   componentDidRender() {
     this.adjustInputSize();
   }
   disconnectedCallback() {
-    var _a, _b;
-    (_b = (_a = this.desktopMediaQuery).removeEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
   }
   updateIconSize(smallIcon) {
     this.iconSize = smallIcon ? 20 : 24;
@@ -145,7 +150,6 @@ const SwirlTextInput = class {
     event.target.select();
   }
   render() {
-    var _a;
     const Tag = this.rows === 1 && !this.autoGrow ? "input" : "textarea";
     const ariaInvalid = this.invalid === true || this.invalid === false
       ? String(this.invalid)
@@ -168,7 +172,7 @@ const SwirlTextInput = class {
       "text-input--inline": this.inline,
       "text-input--show-password": this.type === "password" && this.showPassword,
     });
-    return (h(Host, null, h("div", { class: className }, this.prefixLabel && (h("span", { class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value }, this.rows > 1 && this.value), this.suffixLabel && (h("span", { class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, part: "text-input__clear-button", type: "button" }, h("swirl-icon-cancel", { size: this.iconSize }))), showPasswordToggle && (h("button", { "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (h("swirl-icon-visibility-off", { size: this.iconSize })) : (h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (h("span", { class: "text-input__stepper" }, h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-less", { size: this.iconSize })), h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-more", { size: this.iconSize })))), this.showCharacterCounter && (h("span", { class: "text-input__character-counter" }, ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
+    return (h(Host, null, h("div", { class: className }, this.prefixLabel && (h("span", { class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value }, this.rows > 1 && this.value), this.suffixLabel && (h("span", { class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, part: "text-input__clear-button", type: "button" }, h("swirl-icon-cancel", { size: this.iconSize }))), showPasswordToggle && (h("button", { "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (h("swirl-icon-visibility-off", { size: this.iconSize })) : (h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (h("span", { class: "text-input__stepper" }, h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-less", { size: this.iconSize })), h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-more", { size: this.iconSize })))), this.showCharacterCounter && (h("span", { class: "text-input__character-counter" }, this.value?.length || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
   }
 };
 SwirlTextInput.style = swirlTextInputCss;

package/dist/esm/swirl-theme-provider.entry.js

@@ -292,8 +292,11 @@ const SwirlThemeProvider = class {
     this.updateAppTheme();
   }
   resolveConfig() {
-    var _a, _b;
-    this.resolvedConfig = Object.assign(Object.assign({}, (this.config || {})), { rootElement: ((_a = this.config) === null || _a === void 0 ? void 0 : _a.rootElement) || document.documentElement, storage: ((_b = this.config) === null || _b === void 0 ? void 0 : _b.storage) || (window === null || window === void 0 ? void 0 : window.localStorage) });
+    this.resolvedConfig = {
+      ...(this.config || {}),
+      rootElement: this.config?.rootElement || document.documentElement,
+      storage: this.config?.storage || window?.localStorage,
+    };
   }
   determineOSTheme() {
     if (!Boolean(window.matchMedia)) {
@@ -332,8 +335,7 @@ const SwirlThemeProvider = class {
     }
   }
   updateTenantVariables() {
-    var _a;
-    const tenantTheme = (_a = this.resolvedConfig) === null || _a === void 0 ? void 0 : _a.tenantColors;
+    const tenantTheme = this.resolvedConfig?.tenantColors;
     if (!Boolean(tenantTheme)) {
       this.resetTenantVariables();
       return;
@@ -349,7 +351,15 @@ const SwirlThemeProvider = class {
     const secondaryPressed = toRgba(hsla(secondaryHsla[0], secondaryHsla[1], secondaryHsla[2] + 0.15, 1));
     const textHovered = toRgba(hsla(textHsla[0], textHsla[1] - 0.34, textHsla[2] + 0.1, 1));
     const textPressed = toRgba(hsla(textHsla[0], textHsla[1] - 0.48, textHsla[2] + 0.2, 1));
-    const tenantThemeWithGeneratedStateColors = Object.assign(Object.assign({}, tenantTheme), { primaryHovered: primaryHovered, primaryPressed: primaryPressed, secondaryHovered: secondaryHovered, secondaryPressed: secondaryPressed, textHovered: textHovered, textPressed: textPressed });
+    const tenantThemeWithGeneratedStateColors = {
+      ...tenantTheme,
+      primaryHovered: primaryHovered,
+      primaryPressed: primaryPressed,
+      secondaryHovered: secondaryHovered,
+      secondaryPressed: secondaryPressed,
+      textHovered: textHovered,
+      textPressed: textPressed,
+    };
     // set custom properties for tenant theme colors
     Object.entries(tenantColorMapping).forEach(([key, value]) => rootElement.style.setProperty(key, tenantThemeWithGeneratedStateColors[value]));
   }