@getflip/swirl-components 0.81.3 → 0.82.0

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

@@ -91,22 +91,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 (index.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 (index.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 (index.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 = index$1.classnames("menu-item", {
       "menu-item--expanded": this.expanded,
     });
-    return (index.h(index.Host, null, index.h("div", { class: className }, ((_a = this.parentMenu) === null || _a === void 0 ? void 0 : _a.variant) === "selection"
+    return (index.h(index.Host, null, index.h("div", { class: className }, this.parentMenu?.variant === "selection"
       ? this.renderOptionListItem()
       : this.renderActionListItem(), index.h("slot", { onSlotchange: this.onSlotChange }))));
   }

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

@@ -124,10 +124,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();
@@ -265,11 +264,10 @@ const SwirlMenu = class {
   getActiveItemIndex() {
     const activeElement = utils.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;
@@ -281,8 +279,8 @@ const SwirlMenu = class {
     });
     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) ? `${(_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/cjs/swirl-modal.cjs.entry.js

@@ -1156,6 +1156,7 @@ const SwirlModal = class {
     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") {
@@ -1175,10 +1176,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;
       }
@@ -1189,6 +1189,7 @@ const SwirlModal = class {
         this.scrollable = scrollable;
       }
     };
+    this.closable = true;
     this.closeButtonLabel = "Close modal";
     this.hideCloseButton = undefined;
     this.hideLabel = undefined;
@@ -1236,6 +1237,7 @@ const SwirlModal = class {
       // wait for animation
       setTimeout(() => {
         this.focusTrap.activate();
+        this.handleAutoFocus();
       }, 200);
     }
     else {
@@ -1252,12 +1254,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(() => {
@@ -1275,6 +1281,9 @@ const SwirlModal = class {
   updateHeaderToolsStatus() {
     this.hasHeaderTools = Boolean(this.el.querySelector('[slot="header-tools"]'));
   }
+  handleAutoFocus() {
+    this.modalEl.querySelector("input[autofocus]")?.focus();
+  }
   lockBodyScroll() {
     bodyScrollLock_esm.disableBodyScroll(this.scrollContainer);
   }

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

@@ -29,7 +29,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(utils.closestPassShadow(composedTarget, '[role="option"]'));
       if (!Boolean(item) || !clickedOption) {
@@ -138,9 +138,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();
@@ -268,16 +267,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/cjs/swirl-pdf-reader.cjs.entry.js

@@ -74,9 +74,8 @@ const SwirlPdfReader = class {
       this.zoom = value === "auto" ? value : +value;
     };
     this.onThumbnailClick = (index) => () => {
-      var _a;
-      const page = (_a = utils.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 = utils.querySelectorAllDeep(this.el, `[data-page-number="${index + 1}"]`)?.[0];
+      page?.scrollIntoView();
     };
     this.autoZoomLabel = "Full width";
     this.closeButtonLabel = "Close PDF viewer";
@@ -112,9 +111,8 @@ const SwirlPdfReader = class {
     this.modal = new a11yDialog_esm.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/cjs/swirl-popover_2.cjs.entry.js

@@ -81,7 +81,6 @@ const SwirlPopover = class {
     this.unlockBodyScroll();
   }
   onWindowFocusIn(event) {
-    var _a;
     if (!this.active) {
       return;
     }
@@ -92,7 +91,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) &&
@@ -122,7 +121,6 @@ const SwirlPopover = class {
    * @returns
    */
   async close() {
-    var _a;
     if (this.closing || !this.active) {
       return;
     }
@@ -137,7 +135,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.
@@ -186,10 +184,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;
   }
@@ -242,17 +239,16 @@ const SwirlPopover = class {
     bodyScrollLock_esm.enableBodyScroll(this.scrollContainer);
   }
   render() {
-    var _a, _b, _c;
     const mobile = !window.matchMedia("(min-width: 768px)").matches;
-    const className = index$1.classnames("popover", `popover--animation-${this.animation}`, `popover--placement-${(_a = this.position) === null || _a === void 0 ? void 0 : _a.placement}`, {
+    const className = index$1.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 (index.h(index.Host, null, index.h("div", { class: className, onKeyDown: this.onKeydown }, index.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" }, index.h("span", { class: "popover__handle" }), index.h("div", { class: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
         maxHeight: !mobile && Boolean(this.maxHeight)
           ? this.maxHeight
@@ -294,12 +290,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/cjs/swirl-resource-list-file-item.cjs.entry.js

@@ -29,15 +29,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/cjs/swirl-search.cjs.entry.js

@@ -49,17 +49,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/cjs/swirl-select.cjs.entry.js

@@ -30,8 +30,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 = () => {
@@ -71,15 +70,16 @@ const SwirlSelect = class {
     this.options = utils.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 = index$1.classnames("select", `select--placement-${this.placement}`, {
@@ -87,9 +87,11 @@ const SwirlSelect = class {
       "select--inline": this.inline,
       "select--multi": this.multiSelect,
     });
-    return (index.h(index.Host, { onKeyDown: this.onKeyDown }, index.h("div", { class: className }, index.h("swirl-popover-trigger", { popover: this.popover, setAriaAttributes: false }, index.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 })), index.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) => (index.h("swirl-tag", { "aria-hidden": "true", label: option === null || option === void 0 ? void 0 : option.label,
+    return (index.h(index.Host, { onKeyDown: this.onKeyDown }, index.h("div", { class: className }, index.h("swirl-popover-trigger", { popover: this.popover, setAriaAttributes: false }, index.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 })), index.h("span", { class: "select__multi-select-values" }, this.value
+      ?.map((value) => this.options.find((option) => option.value === value))
+      ?.map((option) => (index.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 })))), index.h("span", { class: "select__indicator" }, this.open ? (index.h("swirl-icon-expand-less", null)) : (index.h("swirl-icon-expand-more", null))), index.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" }, index.h("swirl-option-list", { allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, value: this.value }, index.h("slot", { onSlotchange: this.onSlotChange }))))));
+      onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect })))), index.h("span", { class: "select__indicator" }, this.open ? (index.h("swirl-icon-expand-less", null)) : (index.h("swirl-icon-expand-more", null))), index.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" }, index.h("swirl-option-list", { allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, value: this.value }, index.h("slot", { onSlotchange: this.onSlotChange }))))));
   }
   get el() { return index.getElement(this); }
 };

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

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

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

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

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

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

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

@@ -210,9 +210,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/cjs/swirl-tabs.cjs.entry.js

@@ -52,8 +52,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() {
@@ -61,8 +60,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/cjs/swirl-tag.cjs.entry.js

@@ -12,8 +12,7 @@ const SwirlTag = class {
     index.registerInstance(this, hostRef);
     this.remove = index.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/cjs/swirl-text-input.cjs.entry.js

@@ -113,13 +113,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;
@@ -149,7 +154,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)
@@ -172,7 +176,7 @@ const SwirlTextInput = class {
       "text-input--inline": this.inline,
       "text-input--show-password": this.type === "password" && this.showPassword,
     });
-    return (index.h(index.Host, null, index.h("div", { class: className }, this.prefixLabel && (index.h("span", { class: "text-input__prefix" }, this.prefixLabel)), index.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 && (index.h("span", { class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (index.h("button", { "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, part: "text-input__clear-button", type: "button" }, index.h("swirl-icon-cancel", { size: this.iconSize }))), showPasswordToggle && (index.h("button", { "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (index.h("swirl-icon-visibility-off", { size: this.iconSize })) : (index.h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (index.h("span", { class: "text-input__stepper" }, index.h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, index.h("swirl-icon-expand-less", { size: this.iconSize })), index.h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, index.h("swirl-icon-expand-more", { size: this.iconSize })))), this.showCharacterCounter && (index.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 (index.h(index.Host, null, index.h("div", { class: className }, this.prefixLabel && (index.h("span", { class: "text-input__prefix" }, this.prefixLabel)), index.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 && (index.h("span", { class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (index.h("button", { "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, part: "text-input__clear-button", type: "button" }, index.h("swirl-icon-cancel", { size: this.iconSize }))), showPasswordToggle && (index.h("button", { "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (index.h("swirl-icon-visibility-off", { size: this.iconSize })) : (index.h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (index.h("span", { class: "text-input__stepper" }, index.h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, index.h("swirl-icon-expand-less", { size: this.iconSize })), index.h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, index.h("swirl-icon-expand-more", { size: this.iconSize })))), this.showCharacterCounter && (index.h("span", { class: "text-input__character-counter" }, this.value?.length || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
   }
 };
 SwirlTextInput.style = swirlTextInputCss;

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

@@ -296,8 +296,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)) {
@@ -336,8 +339,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;
@@ -353,7 +355,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]));
   }

package/dist/cjs/swirl-time-input.cjs.entry.js

@@ -81,11 +81,16 @@ const SwirlTimeInput = class {
     this.setupMask();
     this.updateIconSize(this.desktopMediaQuery.matches);
     this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+    // see https://stackoverflow.com/a/27314017
+    if (this.autoFocus) {
+      setTimeout(() => {
+        this.inputEl.focus();
+      });
+    }
   }
   disconnectedCallback() {
-    var _a, _b, _c;
-    (_a = this.mask) === null || _a === void 0 ? void 0 : _a.destroy();
-    (_c = (_b = this.desktopMediaQuery).removeEventListener) === null || _c === void 0 ? void 0 : _c.call(_b, "change", this.desktopMediaQueryHandler);
+    this.mask?.destroy();
+    this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
   }
   watchFormat() {
     this.setupMask();
@@ -100,8 +105,7 @@ const SwirlTimeInput = class {
     event.target.select();
   }
   setupMask() {
-    var _a;
-    (_a = this.mask) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.mask?.destroy();
     this.mask = maska.maska.create(`#${this.id}`, {
       mask: this.format.replace(/[Hhms]/g, "#"),
     });
@@ -119,7 +123,7 @@ const SwirlTimeInput = class {
     const className = index$1.classnames("time-input", {
       "time-input--inline": this.inline,
     });
-    return (index.h(index.Host, null, index.h("div", { class: className }, index.h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, required: this.required, type: "text", value: displayValue }), index.h("span", { class: "time-input__icon" }, index.h("swirl-icon-time-outlined", { size: this.iconSize })))));
+    return (index.h(index.Host, null, index.h("div", { class: className }, index.h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), index.h("span", { class: "time-input__icon" }, index.h("swirl-icon-time-outlined", { size: this.iconSize })))));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -45,14 +45,19 @@ const SwirlToastProvider = class {
     else if (this.globalDuration === 0) {
       duration = undefined;
     }
-    const newToastWithId = Object.assign(Object.assign({}, newToast), { createdAt: new Date(), duration, toastId: newToast.toastId || String(Math.round(Math.random() * 10000)) });
+    const newToastWithId = {
+      ...newToast,
+      createdAt: new Date(),
+      duration,
+      toastId: newToast.toastId || String(Math.round(Math.random() * 10000)),
+    };
     this.toasts = [...this.toasts, newToastWithId];
     return newToastWithId;
   }
   render() {
     return (index.h(index.Host, { role: "status" }, index.h("swirl-stack", { spacing: "12" }, this.toasts.map((toast) => {
-      const props = Object.assign(Object.assign({}, toast), { content: undefined });
-      return (index.h("swirl-toast", Object.assign({ key: toast.toastId, onDismiss: this.onDismiss }, props), toast.content));
+      const props = { ...toast, content: undefined };
+      return (index.h("swirl-toast", { key: toast.toastId, onDismiss: this.onDismiss, ...props }, toast.content));
     }))));
   }
 };

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

@@ -36,15 +36,13 @@ const SwirlToast = 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) {
-    var _a;
-    const icon = (_a = this.iconEl) === null || _a === void 0 ? void 0 : _a.children[0];
+    const icon = this.iconEl?.children[0];
     const dismissIcon = this.dismissIconEl;
-    icon === null || icon === void 0 ? void 0 : icon.setAttribute("size", smallIcon ? "20" : "24");
-    dismissIcon === null || dismissIcon === void 0 ? void 0 : dismissIcon.setAttribute("size", smallIcon ? "20" : "24");
+    icon?.setAttribute("size", smallIcon ? "20" : "24");
+    dismissIcon?.setAttribute("size", smallIcon ? "20" : "24");
   }
   startTimer() {
     this.clearTimer();