@getflip/swirl-components 0.81.3 → 0.82.0

package/dist/collection/components/swirl-menu-item/swirl-menu-item.js

@@ -83,22 +83,19 @@ export class SwirlMenuItem {
       : 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/collection/components/swirl-modal/swirl-modal.js

@@ -28,10 +28,9 @@ export class SwirlModal {
       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;
       }
@@ -42,6 +41,7 @@ export class SwirlModal {
         this.scrollable = scrollable;
       }
     };
+    this.closable = true;
     this.closeButtonLabel = "Close modal";
     this.hideCloseButton = undefined;
     this.hideLabel = undefined;
@@ -89,6 +89,7 @@ export class SwirlModal {
       // wait for animation
       setTimeout(() => {
         this.focusTrap.activate();
+        this.handleAutoFocus();
       }, 200);
     }
     else {
@@ -105,12 +106,16 @@ export class SwirlModal {
     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(() => {
@@ -128,6 +133,9 @@ export class SwirlModal {
   updateHeaderToolsStatus() {
     this.hasHeaderTools = Boolean(this.el.querySelector('[slot="header-tools"]'));
   }
+  handleAutoFocus() {
+    this.modalEl.querySelector("input[autofocus]")?.focus();
+  }
   lockBodyScroll() {
     disableBodyScroll(this.scrollContainer);
   }
@@ -164,6 +172,24 @@ export class SwirlModal {
   }
   static get properties() {
     return {
+      "closable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "closable",
+        "reflect": false,
+        "defaultValue": "true"
+      },
       "closeButtonLabel": {
         "type": "string",
         "mutable": false,
@@ -406,6 +432,21 @@ export class SwirlModal {
             }
           }
         }
+      }, {
+        "method": "requestModalClose",
+        "name": "requestModalClose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
       }, {
         "method": "secondaryAction",
         "name": "secondaryAction",
@@ -447,8 +488,11 @@ export class SwirlModal {
       },
       "close": {
         "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
+          "signature": "(force?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
           "references": {
             "Promise": {
               "location": "global"
@@ -457,7 +501,7 @@ export class SwirlModal {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Close the modal.",
+          "text": "Close the modal. Pass `true` to force close even if the modal is not closable.",
           "tags": []
         }
       }

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

@@ -50,7 +50,7 @@ const Template = (args) => {
     </swirl-text>
 
     <swirl-box padding-block-start="0" padding-block-end="16" slot="header-tools">
-      <swirl-search label="Search"></swirl-search>
+      <swirl-search auto-focus label="Search"></swirl-search>
     </div>
   `;
   container.append(trigger, element);

package/dist/collection/components/swirl-option-list/swirl-option-list.js

@@ -19,7 +19,7 @@ export class SwirlOptionList {
     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) {
@@ -128,9 +128,8 @@ export class SwirlOptionList {
     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();
@@ -258,16 +257,14 @@ export class SwirlOptionList {
     }
   }
   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/collection/components/swirl-option-list-item/swirl-option-list-item.js

@@ -33,13 +33,11 @@ export class SwirlOptionListItem {
     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];
-    icon === null || icon === void 0 ? void 0 : icon.setAttribute("size", smallIcon ? "20" : "24");
+    const icon = this.iconEl?.children[0];
+    icon?.setAttribute("size", smallIcon ? "20" : "24");
   }
   updateIconSize(smallIcon) {
     this.iconSize = smallIcon ? 20 : 24;

package/dist/collection/components/swirl-pdf-reader/swirl-pdf-reader.js

@@ -66,9 +66,8 @@ export class SwirlPdfReader {
       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";
@@ -104,9 +103,8 @@ export class SwirlPdfReader {
     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/collection/components/swirl-popover/swirl-popover.js

@@ -74,7 +74,6 @@ export class SwirlPopover {
     this.unlockBodyScroll();
   }
   onWindowFocusIn(event) {
-    var _a;
     if (!this.active) {
       return;
     }
@@ -85,7 +84,7 @@ export class SwirlPopover {
     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) &&
@@ -115,7 +114,6 @@ export class SwirlPopover {
    * @returns
    */
   async close() {
-    var _a;
     if (this.closing || !this.active) {
       return;
     }
@@ -130,7 +128,7 @@ export class SwirlPopover {
       this.updateTriggerAttributes();
     }, 150);
     this.unlockBodyScroll();
-    (_a = this.getNativeTriggerElement()) === null || _a === void 0 ? void 0 : _a.focus();
+    this.getNativeTriggerElement()?.focus();
   }
   /**
    * Open the popover.
@@ -179,10 +177,9 @@ export class SwirlPopover {
     });
   }
   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;
   }
@@ -235,17 +232,16 @@ export class SwirlPopover {
     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

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

@@ -60,7 +60,7 @@ const Template = (args) => {
   container.append("\n  ", trigger, "\n  ", element);
   element.addEventListener("click", (event) => {
     const target = event.target;
-    if ((target === null || target === void 0 ? void 0 : target.tagName) === "SWIRL-ACTION-LIST-ITEM") {
+    if (target?.tagName === "SWIRL-ACTION-LIST-ITEM") {
       element.close();
     }
   });

package/dist/collection/components/swirl-popover-trigger/swirl-popover-trigger.js

@@ -27,12 +27,11 @@ export class SwirlPopoverTrigger {
       }, { 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/collection/components/swirl-resource-list/swirl-resource-list.js

@@ -53,7 +53,7 @@ export class SwirlResourceList {
       else if (event.key === "Space" || event.key === "Enter") {
         const target = event.composedPath()[0];
         if (Boolean(this.dragging) &&
-          !(target === null || target === void 0 ? void 0 : target.classList.contains("resource-list-item__drag-handle"))) {
+          !target?.classList.contains("resource-list-item__drag-handle")) {
           event.preventDefault();
           this.stopDrag(this.dragging);
         }
@@ -81,9 +81,8 @@ export class SwirlResourceList {
     this.setupDragDrop();
   }
   disconnectedCallback() {
-    var _a, _b;
-    (_a = this.sortable) === null || _a === void 0 ? void 0 : _a.destroy();
-    (_b = this.observer) === null || _b === void 0 ? void 0 : _b.disconnect();
+    this.sortable?.destroy();
+    this.observer?.disconnect();
   }
   observeSlotChanges() {
     this.observer = new MutationObserver(() => {
@@ -106,10 +105,9 @@ export class SwirlResourceList {
     return this.items.map((i) => i).findIndex((i) => i === item);
   }
   removeItemsFromTabOrder() {
-    this.items.forEach((item) => {
-      var _a;
-      return (_a = item === null || item === void 0 ? void 0 : item.querySelector(".resource-list-item__content, .resource-list-file-item")) === null || _a === void 0 ? void 0 : _a.setAttribute("tabIndex", "-1");
-    });
+    this.items.forEach((item) => item
+      ?.querySelector(".resource-list-item__content, .resource-list-file-item")
+      ?.setAttribute("tabIndex", "-1"));
   }
   setItemAllowDragState() {
     if (this.allowDrag) {

package/dist/collection/components/swirl-resource-list-file-item/swirl-resource-list-file-item.js

@@ -20,15 +20,14 @@ export class SwirlResourceListFileItem {
     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/collection/components/swirl-resource-list-item/swirl-resource-list-item.js

@@ -62,13 +62,11 @@ export class SwirlResourceListItem {
     }
   }
   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];
-    icon === null || icon === void 0 ? void 0 : icon.setAttribute("size", smallIcon ? "20" : "24");
+    const icon = this.iconEl?.children[0];
+    icon?.setAttribute("size", smallIcon ? "20" : "24");
   }
   updateIconSize(smallIcon) {
     this.iconSize = smallIcon ? 20 : 24;

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

@@ -37,17 +37,22 @@ export class SwirlSearch {
   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/collection/components/swirl-select/swirl-select.js

@@ -21,8 +21,7 @@ export class SwirlSelect {
       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 = () => {
@@ -62,15 +61,16 @@ export class SwirlSelect {
     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}`, {
@@ -78,9 +78,11 @@ export class SwirlSelect {
       "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 }))))));
   }
   static get is() { return "swirl-select"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.js

@@ -51,10 +51,9 @@ export class SwirlShellLayout {
       }
     };
     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/collection/components/swirl-table/swirl-table.js

@@ -136,9 +136,8 @@ export class SwirlTable {
     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/collection/components/swirl-table-column/swirl-table-column.js

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

package/dist/collection/components/swirl-table-row/swirl-table-row.js

@@ -11,7 +11,7 @@ export class SwirlTableRow {
   }
   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/collection/components/swirl-tabs/swirl-tabs.js

@@ -43,8 +43,7 @@ export class SwirlTabs {
     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() {
@@ -52,8 +51,7 @@ export class SwirlTabs {
     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/collection/components/swirl-tag/swirl-tag.js

@@ -3,8 +3,7 @@ import classnames from "classnames";
 export class SwirlTag {
   constructor() {
     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/collection/components/swirl-text-input/swirl-text-input.js

@@ -102,13 +102,18 @@ export class SwirlTextInput {
   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;
@@ -138,7 +143,6 @@ export class SwirlTextInput {
     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)
@@ -161,7 +165,7 @@ export class SwirlTextInput {
       "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}` : "")))));
   }
   static get is() { return "swirl-text-input"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-text-input/swirl-text-input.spec.js

@@ -5,7 +5,6 @@ describe("swirl-text-input", () => {
     const page = await newSpecPage({
       components: [SwirlTextInput],
       html: `<swirl-text-input
-              auto-focus="true"
               disabled="true"
               swirl-aria-describedby="id"
               invalid="true"
@@ -17,8 +16,7 @@ describe("swirl-text-input", () => {
             </swirl-text-input>`,
     });
     expect(page.root).toEqualHtml(`
-      <swirl-text-input auto-focus="true"
-                      disabled="true"
+      <swirl-text-input disabled="true"
                       swirl-aria-describedby="id"
                       invalid="true"
                       mode="decimal"
@@ -31,7 +29,6 @@ describe("swirl-text-input", () => {
                  aria-disabled="true"
                  aria-invalid="true"
                  autocomplete="on"
-                 autofocus=""
                  class="text-input__input"
                  disabled=""
                  inputmode="decimal"