@getflip/swirl-components 0.459.1 → 0.459.2-beta-20260316104125

package/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-03-13T11:57:06",
+  "timestamp": "2026-03-16T10:40:39",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.1",

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

@@ -16,7 +16,7 @@ const SwirlAccordion = class {
             }
         };
     }
-    componentDidLoad() {
+    connectedCallback() {
         this.el.addEventListener("expansionChange", this.onExpansionChange);
     }
     disconnectedCallback() {
@@ -53,7 +53,7 @@ const SwirlAccordion = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'a055c9792756a0cf248d0fea251e255800cd7960' }, index.h("slot", { key: '7da8b05b3664f55cca7e04db4127cbeecf134eeb' })));
+        return (index.h(index.Host, { key: '1f6137c28a45e18096736147c4d0b09daf963bc9' }, index.h("slot", { key: '946dd241ee4b9375853ba7f3197f02ca484f431e' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-form-control.cjs.entry.js

@@ -40,8 +40,11 @@ const SwirlFormControl = class {
             }
         };
     }
-    componentWillLoad() {
+    connectedCallback() {
         this.inputEl = this.el.firstElementChild;
+        this.listenToInputValueChanges();
+    }
+    componentWillLoad() {
         this.associateDescriptionWithInputElement();
         this.associateLabelWithInputElement();
         this.setInputElementDisabledState();
@@ -50,7 +53,6 @@ const SwirlFormControl = class {
         this.setInputElementInvalidState();
         this.setInputElementLabel();
         this.checkInputValue();
-        this.listenToInputValueChanges();
     }
     componentDidRender() {
         this.checkInputValue();
@@ -184,7 +186,7 @@ const SwirlFormControl = class {
             "form-control--is-select": isSelect,
         });
         const LabelTag = hasContenteditableControl ? "div" : "label";
-        return (index.h(index.Host, { key: '8de41acd28cfee7913f3ff81ba810ed7f4bbb164', onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, index.h("div", { key: 'c78df1a568504cec48ef392dc23607d4c020b231', class: className, role: "group" }, index.h("span", { key: '14d484fbf10c70d737a319c435f6fe6be0c02fc8', class: "form-control__controls" }, index.h("span", { key: '2ca49b4a96c77762358ac5afe9de4fd4e5ac14f8', class: "form-control__prefix" }, index.h("slot", { key: '06be44723833cb8f42f93146a9ceb3cfc632e4c6', name: "prefix" })), index.h(LabelTag, { key: '0caa27d086ee16ad40f8dab57694b15a9e27f7cf', class: "form-control__label", onClick: this.onLabelClick }, hasIcon && (index.h("span", { key: 'f901d2fc81babbfd96bc9e89c32a3fb583557d1f', class: "form-control__icon" }, index.h("swirl-icon", { key: '5891f45d595ca34b1d10fa61622fc87843b0ceb1', glyph: this.icon, size: 20 }))), index.h("span", { key: '2f7a5dc77fac79ea2ccbdf4213c57e83a754e418', class: "form-control__label-text", id: this.labelId }, this.label, this.secondaryLabel && this.labelPosition === "outside" && (index.h("span", { key: '5088427ccf543a28db24e652c61bde008e740bec', class: "form-control__secondary-label" }, this.secondaryLabel)), this.tooltip && (index.h("span", { key: '3bbfae595ef50ad0d77a760362c1f018294d30a2', class: "form-control__tooltip" }, index.h("swirl-tooltip", { key: 'b60a8f8634d6ac4bfae2fdd4f5ffc8c24454d97a', content: this.tooltip, position: "top" }, index.h("swirl-icon-help", { key: '63247aca671669a2cc47eba4e4fa2d87fa452db3', size: 16, tabindex: "0" }))))), index.h("span", { key: '0791c8c0a9e4f4877a3f6963bf520375485728e1', class: "form-control__input" }, index.h("slot", { key: '8768b5848fb197a619022411463b1c50164b580d' }), index.h("span", { key: '34c6d013f9f681a2a394a42e25b533c86c094365', class: "form-control__bottom" }, index.h("slot", { key: 'cdc3c91cca7de3d0c36314f0916d7a6863f96ae9', name: "bottom" }))))), showDescription && (index.h("span", { key: '9c8bd265e155d25cee456c51d1ae5ed4dc653848', class: "form-control__description", id: this.descriptionId }, this.description)), index.h("span", { key: '93185768874312feb48558fd1e1e7a085bdbc1ef', "aria-live": "polite" }, showErrorMessage && (index.h("span", { key: '02b681d9ee0cc99611373de1eceb1948a6ebfc70', class: "form-control__error-message", id: this.descriptionId }, index.h("swirl-inline-error", { key: '19b7443c2b694f55b006d5a6b4415a2ed8d59e8e', message: this.errorMessage, size: "s" })))))));
+        return (index.h(index.Host, { key: '6915a563e238b5301eec46a0e419d64ceffcdba4', onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, index.h("div", { key: 'ea2bbf01a71ec9d044479659b369629993cf6ecc', class: className, role: "group" }, index.h("span", { key: '8e1b4ad354ae02007231f4875a174b2e5cf7f2c0', class: "form-control__controls" }, index.h("span", { key: '1f7554dc19d9cd77bd7434261e0b28a8dd1da519', class: "form-control__prefix" }, index.h("slot", { key: '2e80b1680d0647b36f9a9e2ef1f169d59009a315', name: "prefix" })), index.h(LabelTag, { key: 'c7d0c330cb17be854abc0bfdecb6df1207c05574', class: "form-control__label", onClick: this.onLabelClick }, hasIcon && (index.h("span", { key: 'c144e2c24605112ffe728caf84282058f5e253d4', class: "form-control__icon" }, index.h("swirl-icon", { key: '29f17ec92c2d0c83f052659cd0465125c67651a1', glyph: this.icon, size: 20 }))), index.h("span", { key: 'd3f55b1b5dbc1e8a84dae5a1c2b8c63085679c61', class: "form-control__label-text", id: this.labelId }, this.label, this.secondaryLabel && this.labelPosition === "outside" && (index.h("span", { key: '621ad4301acc7716a14c3f41b2077123742897d8', class: "form-control__secondary-label" }, this.secondaryLabel)), this.tooltip && (index.h("span", { key: 'fff38bec9521273b202b4d6c30fe3673e5363460', class: "form-control__tooltip" }, index.h("swirl-tooltip", { key: '5e19071975fdd95f6562e32b3bc509c68d294fb9', content: this.tooltip, position: "top" }, index.h("swirl-icon-help", { key: '0d7026620a38276a4b46e7a27e13f088dda60bb4', size: 16, tabindex: "0" }))))), index.h("span", { key: 'b5f7cdcb12dc5fe585b9e05f8209b4c1f29a373f', class: "form-control__input" }, index.h("slot", { key: '1069cced3e9943fcac7937398102de05bc5880fd' }), index.h("span", { key: 'f5844abbe3f4e8137df79c3138883ecad311badd', class: "form-control__bottom" }, index.h("slot", { key: 'f279db84c9dcdd958f20486d034cc25be619ab29', name: "bottom" }))))), showDescription && (index.h("span", { key: '20697b04f91cfa4e8b6d8e0f6011f21c475d3ee6', class: "form-control__description", id: this.descriptionId }, this.description)), index.h("span", { key: 'f14ac6afa9bb8bac5834527134a21fc8a5ea2071', "aria-live": "polite" }, showErrorMessage && (index.h("span", { key: 'df3148dff898088dc6c4dbcc184a51baf7a02dea', class: "form-control__error-message", id: this.descriptionId }, index.h("swirl-inline-error", { key: '0e3ca419be23aee94adcbdc0a856de1b0afa39d8', message: this.errorMessage, size: "s" })))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -140,7 +140,7 @@ const SwirlLightbox = class {
             }
         };
     }
-    componentWillLoad() {
+    connectedCallback() {
         this.registerSlides();
     }
     componentDidLoad() {

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

@@ -19,6 +19,7 @@ const SwirlOptionList = class {
         this.selectAllLabel = "Select all";
         this.value = [];
         this.selectAllState = false;
+        this.componentLoaded = false;
         this.selectAllValue = v4.v4();
         this.onClick = (event) => {
             event.preventDefault();
@@ -155,6 +156,13 @@ const SwirlOptionList = class {
             this.focusItem(newIndex);
         };
     }
+    connectedCallback() {
+        if (this.componentLoaded) {
+            this.observeSlotChanges();
+            this.subscribeToSwirlPopover();
+            this.setItemAllowDragState();
+        }
+    }
     componentDidLoad() {
         this.updateItems();
         this.observeSlotChanges();
@@ -166,6 +174,7 @@ const SwirlOptionList = class {
         this.setSectionSeparator();
         this.setSelectAllState();
         this.subscribeToSwirlPopover();
+        this.componentLoaded = true;
     }
     componentDidRender() {
         this.setupDragDrop();
@@ -442,7 +451,7 @@ const SwirlOptionList = class {
         const ariaMultiselectable = this.multiSelect ? "true" : undefined;
         const tabIndex = Boolean(this.dragging) ? 0 : undefined;
         const showSelectAll = this.multiSelect && this.showSelectAll;
-        return (index.h(index.Host, { key: '8080599bf5de76632f659d6b7c7509d865909ec3' }, index.h("swirl-visually-hidden", { key: '65a835e8b329828b2f23fae5be33e0b2eb6155f5', role: "alert" }, this.assistiveText), index.h("div", { key: '66c0b43da9305cccfe484d7179d97f28d601d453', "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", id: this.optionListId, onClick: this.onClick, onKeyDown: this.onKeyDown, ref: (el) => (this.listboxEl = el), role: "listbox", tabIndex: tabIndex }, showSelectAll && (index.h("swirl-option-list-item", { key: '21e486ef9d9eeeea08b4f8d69df5c435953306be', ref: (el) => (this.selectAllEl = el), label: this.selectAllLabel, disabled: this.disabled, context: "multi-select", selected: this.selectAllState === true, indeterminate: this.selectAllState === "indeterminate", value: this.selectAllValue })), index.h("slot", { key: 'c34a7c44299962381c5a5d5812d39169382d22ec', onSlotchange: this.setSectionSeparator }))));
+        return (index.h(index.Host, { key: 'ccde136da1bd0cc0217da24507a6c59954533bbd' }, index.h("swirl-visually-hidden", { key: 'c34905445208114685344f415572858ac91e7cc1', role: "alert" }, this.assistiveText), index.h("div", { key: '22d3f09f10f9bbdfce4455ad00383ceaa6bd2378', "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", id: this.optionListId, onClick: this.onClick, onKeyDown: this.onKeyDown, ref: (el) => (this.listboxEl = el), role: "listbox", tabIndex: tabIndex }, showSelectAll && (index.h("swirl-option-list-item", { key: 'd7890cd65febc6249561f12be58e128965a5f246', ref: (el) => (this.selectAllEl = el), label: this.selectAllLabel, disabled: this.disabled, context: "multi-select", selected: this.selectAllState === true, indeterminate: this.selectAllState === "indeterminate", value: this.selectAllValue })), index.h("slot", { key: '4d334f92999da727c34dc4d09d803698e6a3df20', onSlotchange: this.setSectionSeparator }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -73,8 +73,10 @@ const SwirlPopover = class {
             this.close();
         };
     }
-    componentDidLoad() {
+    connectedCallback() {
         this.connectTrigger();
+    }
+    componentDidLoad() {
         this.updateTriggerAttributes();
         if (Boolean(this.trigger)) {
             console.warn('[Swirl] The "trigger" prop of swirl-popover is deprecated and will be removed with the next major release. Please use the swirl-popover-trigger component instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlpopovertrigger--docs');
@@ -308,16 +310,16 @@ const SwirlPopover = class {
             "popover--transparent": this.transparent,
             "popover--padded": this.padded,
         });
-        return (index.h(index.Host, { key: 'f415f0f3489fa984ec57af318bd1adc9c33cb0b3' }, index.h("div", { key: '7061cd077de88e09645f0f011f76b4550eca92d4', popover: "manual", class: className, onKeyDown: this.onKeydown, ref: (el) => (this.popoverEl = el) }, index.h("div", { key: 'd87e049c3e5c68ce5e1c9fdf4813e04147c23fe1', "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: {
+        return (index.h(index.Host, { key: 'e13802f20876c880190d801e6f1ef92384594223' }, index.h("div", { key: 'df4ed0a350c388200d932a3ef28b0e34a4de477c', popover: "manual", class: className, onKeyDown: this.onKeydown, ref: (el) => (this.popoverEl = el) }, index.h("div", { key: 'fe0b70d78e58130e548d985da628cdb1ab240406', "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) ? `${this.position?.y}px` : "",
                 left: Boolean(this.position) ? `${this.position?.x}px` : "",
                 visibility: this.active && !this.position && !mobile ? "hidden" : undefined,
                 "--swirl-popover-border-radius": borderRadius,
-            }, tabindex: "-1" }, index.h("span", { key: '367b321f34695844f41a60242f11c7ed7f18f0cf', class: "popover__handle" }), index.h("div", { key: '538f60733248b127e79a65feccea4d337f11819a', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
+            }, tabindex: "-1" }, index.h("span", { key: 'bb43bf1de00f9da559346aa72d6f2cd15fee240a', class: "popover__handle" }), index.h("div", { key: '2d6778670b6c6316b93629813e4dfae7b793ac27', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
                 maxHeight: !mobile && Boolean(this.maxHeight)
                     ? this.maxHeight
                     : undefined,
-            } }, index.h("slot", { key: '8f914e6bfa86c74a1c2de77fd8aed9995b2b594b' }))), this.active && (index.h("div", { key: '6d0e157e13c1c9660275d1791b1ab5b8a39dc3a5', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
+            } }, index.h("slot", { key: '88e7009099df69e6d81ba66d97713a002458ace4' }))), this.active && (index.h("div", { key: '1370c89b9af85d29d4950537cdec69f4bc306ad1', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
     }
     get el() { return index.getElement(this); }
 };
@@ -419,20 +421,12 @@ const SwirlPopoverTrigger = class {
             }
         };
     }
+    connectedCallback() {
+        this.setupHoverListeners();
+        this.setupIntersectionObserver();
+    }
     componentDidLoad() {
         this.updateTriggerElAriaAttributes();
-        this.setupHoverListeners();
-        if (this.hidePopoverWhenInvisible) {
-            this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange.bind(this), {
-                root: this.parentScrollContainer,
-                threshold: 1,
-            });
-            const firstChild = this.el.querySelector("*");
-            if (!Boolean(firstChild)) {
-                return;
-            }
-            this.intersectionObserver.observe(firstChild);
-        }
     }
     disconnectedCallback() {
         this.intersectionObserver?.disconnect();
@@ -460,6 +454,19 @@ const SwirlPopoverTrigger = class {
         }
         return this.el.children[0];
     }
+    setupIntersectionObserver() {
+        if (this.hidePopoverWhenInvisible) {
+            this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange.bind(this), {
+                root: this.parentScrollContainer,
+                threshold: 1,
+            });
+            const firstChild = this.el.querySelector("*");
+            if (!Boolean(firstChild)) {
+                return;
+            }
+            this.intersectionObserver.observe(firstChild);
+        }
+    }
     onVisibilityChange(entries) {
         const triggerIsVisible = entries[0].isIntersecting;
         if (!triggerIsVisible && this.isPopoverOpen()) {
@@ -497,7 +504,7 @@ const SwirlPopoverTrigger = class {
         return isActive;
     }
     render() {
-        return (index.h(index.Host, { key: 'a034d0c5c58412ebb716dd0ef530d46ff8876acb', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, index.h("slot", { key: '8efb6db531779c63fb783af18b5dc310aff2dc6e' })));
+        return (index.h(index.Host, { key: 'c3f8abef369c944c9fbaf9cb11ea31ecde57b5cc', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, index.h("slot", { key: '88053a62f9804a5a66d809829d047fae3ddf16ab' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/swirl-radio-group.cjs.entry.js

@@ -22,7 +22,7 @@ const SwirlRadioGroup = class {
             }
         };
     }
-    componentDidLoad() {
+    connectedCallback() {
         this.radioButtons = Array.from(this.el.querySelectorAll("swirl-radio"));
         this.initValue();
         this.addValueChangeListeners();
@@ -51,7 +51,7 @@ const SwirlRadioGroup = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'ab2b7c745db3cd8543c9d47f90b241b379e38301', "aria-describedby": this.swirlAriaDescribedby, role: "radiogroup" }, index.h("div", { key: 'af5af683d7a3d36b38f7cd7b5590c9e8251fbebf', class: "radio-group" }, index.h("slot", { key: 'ae0a6e7d163560a493f708423e83e9bf7adf073b' }))));
+        return (index.h(index.Host, { key: '843c405062c889e74be2452e0498931d17a65177', "aria-describedby": this.swirlAriaDescribedby, role: "radiogroup" }, index.h("div", { key: '06a6114696d469d6fe0ef41c9f952082aa5d124b', class: "radio-group" }, index.h("slot", { key: '56871a249dc67fb0a5f24814e57e6970112942b0' }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -92,11 +92,13 @@ const SwirlResourceList = class {
             }
         };
     }
-    componentDidLoad() {
+    connectedCallback() {
         this.observeSlotChanges();
         this.collectItems();
         this.setupControllingElement();
         this.setItemAllowDragState();
+    }
+    componentDidLoad() {
         this.setupDragDrop();
         this.setSectionSpacingAndSeparator();
     }
@@ -273,7 +275,7 @@ const SwirlResourceList = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '7e7a38cb48011dcabb1d4bccffdcac3d4c8be109', onKeyDown: this.onKeyDown }, index.h("swirl-visually-hidden", { key: '1fe37b20ae1fa8e819774dbe79a018cf6f99ab91', role: "alert" }, this.assistiveText), index.h("swirl-box", { key: 'f22f7d9905888c0ca6941bc4cd073604901fb865', paddingBlockEnd: this.paddingBlockEnd ?? this.padding, paddingBlockStart: this.paddingBlockStart ?? this.padding, paddingInlineEnd: this.paddingInlineEnd ?? this.padding ?? "8", paddingInlineStart: this.paddingInlineStart ?? this.padding ?? "8" }, index.h("swirl-stack", { key: 'f0f190c2d934851f78b54caa31d90d13db62f355', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: this.semantics, spacing: this.spacing }, index.h("slot", { key: 'be2a19b002fe1d89760f9812c3efa8c91c5bc722' })))));
+        return (index.h(index.Host, { key: '1ee5cc333ec6b97ba9b73292d7c4d3907be34f06', onKeyDown: this.onKeyDown }, index.h("swirl-visually-hidden", { key: '09291dc20b98e59c89be768d536ae7800e1c620d', role: "alert" }, this.assistiveText), index.h("swirl-box", { key: 'ff790da5bcaec4c738340150b23ea8f622175493', paddingBlockEnd: this.paddingBlockEnd ?? this.padding, paddingBlockStart: this.paddingBlockStart ?? this.padding, paddingInlineEnd: this.paddingInlineEnd ?? this.padding ?? "8", paddingInlineStart: this.paddingInlineStart ?? this.padding ?? "8" }, index.h("swirl-stack", { key: 'f43368058ebd4375da12f0348f6c50ef9816bb27', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: this.semantics, spacing: this.spacing }, index.h("slot", { key: '02c4a02b46c56b8c501e4fab98c698ce4514b689' })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -12,7 +12,7 @@ export class SwirlAccordion {
             }
         };
     }
-    componentDidLoad() {
+    connectedCallback() {
         this.el.addEventListener("expansionChange", this.onExpansionChange);
     }
     disconnectedCallback() {
@@ -49,7 +49,7 @@ export class SwirlAccordion {
         });
     }
     render() {
-        return (h(Host, { key: 'a055c9792756a0cf248d0fea251e255800cd7960' }, h("slot", { key: '7da8b05b3664f55cca7e04db4127cbeecf134eeb' })));
+        return (h(Host, { key: '1f6137c28a45e18096736147c4d0b09daf963bc9' }, h("slot", { key: '946dd241ee4b9375853ba7f3197f02ca484f431e' })));
     }
     static get is() { return "swirl-accordion"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-form-control/swirl-form-control.js

@@ -39,8 +39,11 @@ export class SwirlFormControl {
             }
         };
     }
-    componentWillLoad() {
+    connectedCallback() {
         this.inputEl = this.el.firstElementChild;
+        this.listenToInputValueChanges();
+    }
+    componentWillLoad() {
         this.associateDescriptionWithInputElement();
         this.associateLabelWithInputElement();
         this.setInputElementDisabledState();
@@ -49,7 +52,6 @@ export class SwirlFormControl {
         this.setInputElementInvalidState();
         this.setInputElementLabel();
         this.checkInputValue();
-        this.listenToInputValueChanges();
     }
     componentDidRender() {
         this.checkInputValue();
@@ -183,7 +185,7 @@ export class SwirlFormControl {
             "form-control--is-select": isSelect,
         });
         const LabelTag = hasContenteditableControl ? "div" : "label";
-        return (h(Host, { key: '8de41acd28cfee7913f3ff81ba810ed7f4bbb164', onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, h("div", { key: 'c78df1a568504cec48ef392dc23607d4c020b231', class: className, role: "group" }, h("span", { key: '14d484fbf10c70d737a319c435f6fe6be0c02fc8', class: "form-control__controls" }, h("span", { key: '2ca49b4a96c77762358ac5afe9de4fd4e5ac14f8', class: "form-control__prefix" }, h("slot", { key: '06be44723833cb8f42f93146a9ceb3cfc632e4c6', name: "prefix" })), h(LabelTag, { key: '0caa27d086ee16ad40f8dab57694b15a9e27f7cf', class: "form-control__label", onClick: this.onLabelClick }, hasIcon && (h("span", { key: 'f901d2fc81babbfd96bc9e89c32a3fb583557d1f', class: "form-control__icon" }, h("swirl-icon", { key: '5891f45d595ca34b1d10fa61622fc87843b0ceb1', glyph: this.icon, size: 20 }))), h("span", { key: '2f7a5dc77fac79ea2ccbdf4213c57e83a754e418', class: "form-control__label-text", id: this.labelId }, this.label, this.secondaryLabel && this.labelPosition === "outside" && (h("span", { key: '5088427ccf543a28db24e652c61bde008e740bec', class: "form-control__secondary-label" }, this.secondaryLabel)), this.tooltip && (h("span", { key: '3bbfae595ef50ad0d77a760362c1f018294d30a2', class: "form-control__tooltip" }, h("swirl-tooltip", { key: 'b60a8f8634d6ac4bfae2fdd4f5ffc8c24454d97a', content: this.tooltip, position: "top" }, h("swirl-icon-help", { key: '63247aca671669a2cc47eba4e4fa2d87fa452db3', size: 16, tabindex: "0" }))))), h("span", { key: '0791c8c0a9e4f4877a3f6963bf520375485728e1', class: "form-control__input" }, h("slot", { key: '8768b5848fb197a619022411463b1c50164b580d' }), h("span", { key: '34c6d013f9f681a2a394a42e25b533c86c094365', class: "form-control__bottom" }, h("slot", { key: 'cdc3c91cca7de3d0c36314f0916d7a6863f96ae9', name: "bottom" }))))), showDescription && (h("span", { key: '9c8bd265e155d25cee456c51d1ae5ed4dc653848', class: "form-control__description", id: this.descriptionId }, this.description)), h("span", { key: '93185768874312feb48558fd1e1e7a085bdbc1ef', "aria-live": "polite" }, showErrorMessage && (h("span", { key: '02b681d9ee0cc99611373de1eceb1948a6ebfc70', class: "form-control__error-message", id: this.descriptionId }, h("swirl-inline-error", { key: '19b7443c2b694f55b006d5a6b4415a2ed8d59e8e', message: this.errorMessage, size: "s" })))))));
+        return (h(Host, { key: '6915a563e238b5301eec46a0e419d64ceffcdba4', onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, h("div", { key: 'ea2bbf01a71ec9d044479659b369629993cf6ecc', class: className, role: "group" }, h("span", { key: '8e1b4ad354ae02007231f4875a174b2e5cf7f2c0', class: "form-control__controls" }, h("span", { key: '1f7554dc19d9cd77bd7434261e0b28a8dd1da519', class: "form-control__prefix" }, h("slot", { key: '2e80b1680d0647b36f9a9e2ef1f169d59009a315', name: "prefix" })), h(LabelTag, { key: 'c7d0c330cb17be854abc0bfdecb6df1207c05574', class: "form-control__label", onClick: this.onLabelClick }, hasIcon && (h("span", { key: 'c144e2c24605112ffe728caf84282058f5e253d4', class: "form-control__icon" }, h("swirl-icon", { key: '29f17ec92c2d0c83f052659cd0465125c67651a1', glyph: this.icon, size: 20 }))), h("span", { key: 'd3f55b1b5dbc1e8a84dae5a1c2b8c63085679c61', class: "form-control__label-text", id: this.labelId }, this.label, this.secondaryLabel && this.labelPosition === "outside" && (h("span", { key: '621ad4301acc7716a14c3f41b2077123742897d8', class: "form-control__secondary-label" }, this.secondaryLabel)), this.tooltip && (h("span", { key: 'fff38bec9521273b202b4d6c30fe3673e5363460', class: "form-control__tooltip" }, h("swirl-tooltip", { key: '5e19071975fdd95f6562e32b3bc509c68d294fb9', content: this.tooltip, position: "top" }, h("swirl-icon-help", { key: '0d7026620a38276a4b46e7a27e13f088dda60bb4', size: 16, tabindex: "0" }))))), h("span", { key: 'b5f7cdcb12dc5fe585b9e05f8209b4c1f29a373f', class: "form-control__input" }, h("slot", { key: '1069cced3e9943fcac7937398102de05bc5880fd' }), h("span", { key: 'f5844abbe3f4e8137df79c3138883ecad311badd', class: "form-control__bottom" }, h("slot", { key: 'f279db84c9dcdd958f20486d034cc25be619ab29', name: "bottom" }))))), showDescription && (h("span", { key: '20697b04f91cfa4e8b6d8e0f6011f21c475d3ee6', class: "form-control__description", id: this.descriptionId }, this.description)), h("span", { key: 'f14ac6afa9bb8bac5834527134a21fc8a5ea2071', "aria-live": "polite" }, showErrorMessage && (h("span", { key: 'df3148dff898088dc6c4dbcc184a51baf7a02dea', class: "form-control__error-message", id: this.descriptionId }, h("swirl-inline-error", { key: '0e3ca419be23aee94adcbdc0a856de1b0afa39d8', message: this.errorMessage, size: "s" })))))));
     }
     static get is() { return "swirl-form-control"; }
     static get encapsulation() { return "scoped"; }

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

@@ -136,7 +136,7 @@ export class SwirlLightbox {
             }
         };
     }
-    componentWillLoad() {
+    connectedCallback() {
         this.registerSlides();
     }
     componentDidLoad() {

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

@@ -14,6 +14,7 @@ export class SwirlOptionList {
         this.selectAllLabel = "Select all";
         this.value = [];
         this.selectAllState = false;
+        this.componentLoaded = false;
         this.selectAllValue = uuid();
         this.onClick = (event) => {
             event.preventDefault();
@@ -150,6 +151,13 @@ export class SwirlOptionList {
             this.focusItem(newIndex);
         };
     }
+    connectedCallback() {
+        if (this.componentLoaded) {
+            this.observeSlotChanges();
+            this.subscribeToSwirlPopover();
+            this.setItemAllowDragState();
+        }
+    }
     componentDidLoad() {
         this.updateItems();
         this.observeSlotChanges();
@@ -161,6 +169,7 @@ export class SwirlOptionList {
         this.setSectionSeparator();
         this.setSelectAllState();
         this.subscribeToSwirlPopover();
+        this.componentLoaded = true;
     }
     componentDidRender() {
         this.setupDragDrop();
@@ -437,7 +446,7 @@ export class SwirlOptionList {
         const ariaMultiselectable = this.multiSelect ? "true" : undefined;
         const tabIndex = Boolean(this.dragging) ? 0 : undefined;
         const showSelectAll = this.multiSelect && this.showSelectAll;
-        return (h(Host, { key: '8080599bf5de76632f659d6b7c7509d865909ec3' }, h("swirl-visually-hidden", { key: '65a835e8b329828b2f23fae5be33e0b2eb6155f5', role: "alert" }, this.assistiveText), h("div", { key: '66c0b43da9305cccfe484d7179d97f28d601d453', "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", id: this.optionListId, onClick: this.onClick, onKeyDown: this.onKeyDown, ref: (el) => (this.listboxEl = el), role: "listbox", tabIndex: tabIndex }, showSelectAll && (h("swirl-option-list-item", { key: '21e486ef9d9eeeea08b4f8d69df5c435953306be', ref: (el) => (this.selectAllEl = el), label: this.selectAllLabel, disabled: this.disabled, context: "multi-select", selected: this.selectAllState === true, indeterminate: this.selectAllState === "indeterminate", value: this.selectAllValue })), h("slot", { key: 'c34a7c44299962381c5a5d5812d39169382d22ec', onSlotchange: this.setSectionSeparator }))));
+        return (h(Host, { key: 'ccde136da1bd0cc0217da24507a6c59954533bbd' }, h("swirl-visually-hidden", { key: 'c34905445208114685344f415572858ac91e7cc1', role: "alert" }, this.assistiveText), h("div", { key: '22d3f09f10f9bbdfce4455ad00383ceaa6bd2378', "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", id: this.optionListId, onClick: this.onClick, onKeyDown: this.onKeyDown, ref: (el) => (this.listboxEl = el), role: "listbox", tabIndex: tabIndex }, showSelectAll && (h("swirl-option-list-item", { key: 'd7890cd65febc6249561f12be58e128965a5f246', ref: (el) => (this.selectAllEl = el), label: this.selectAllLabel, disabled: this.disabled, context: "multi-select", selected: this.selectAllState === true, indeterminate: this.selectAllState === "indeterminate", value: this.selectAllValue })), h("slot", { key: '4d334f92999da727c34dc4d09d803698e6a3df20', onSlotchange: this.setSectionSeparator }))));
     }
     static get is() { return "swirl-option-list"; }
     static get encapsulation() { return "scoped"; }

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

@@ -68,8 +68,10 @@ export class SwirlPopover {
             this.close();
         };
     }
-    componentDidLoad() {
+    connectedCallback() {
         this.connectTrigger();
+    }
+    componentDidLoad() {
         this.updateTriggerAttributes();
         if (Boolean(this.trigger)) {
             console.warn('[Swirl] The "trigger" prop of swirl-popover is deprecated and will be removed with the next major release. Please use the swirl-popover-trigger component instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlpopovertrigger--docs');
@@ -303,16 +305,16 @@ export class SwirlPopover {
             "popover--transparent": this.transparent,
             "popover--padded": this.padded,
         });
-        return (h(Host, { key: 'f415f0f3489fa984ec57af318bd1adc9c33cb0b3' }, h("div", { key: '7061cd077de88e09645f0f011f76b4550eca92d4', popover: "manual", class: className, onKeyDown: this.onKeydown, ref: (el) => (this.popoverEl = el) }, h("div", { key: 'd87e049c3e5c68ce5e1c9fdf4813e04147c23fe1', "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: {
+        return (h(Host, { key: 'e13802f20876c880190d801e6f1ef92384594223' }, h("div", { key: 'df4ed0a350c388200d932a3ef28b0e34a4de477c', popover: "manual", class: className, onKeyDown: this.onKeydown, ref: (el) => (this.popoverEl = el) }, h("div", { key: 'fe0b70d78e58130e548d985da628cdb1ab240406', "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) ? `${this.position?.y}px` : "",
                 left: Boolean(this.position) ? `${this.position?.x}px` : "",
                 visibility: this.active && !this.position && !mobile ? "hidden" : undefined,
                 "--swirl-popover-border-radius": borderRadius,
-            }, tabindex: "-1" }, h("span", { key: '367b321f34695844f41a60242f11c7ed7f18f0cf', class: "popover__handle" }), h("div", { key: '538f60733248b127e79a65feccea4d337f11819a', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
+            }, tabindex: "-1" }, h("span", { key: 'bb43bf1de00f9da559346aa72d6f2cd15fee240a', class: "popover__handle" }), h("div", { key: '2d6778670b6c6316b93629813e4dfae7b793ac27', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
                 maxHeight: !mobile && Boolean(this.maxHeight)
                     ? this.maxHeight
                     : undefined,
-            } }, h("slot", { key: '8f914e6bfa86c74a1c2de77fd8aed9995b2b594b' }))), this.active && (h("div", { key: '6d0e157e13c1c9660275d1791b1ab5b8a39dc3a5', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
+            } }, h("slot", { key: '88e7009099df69e6d81ba66d97713a002458ace4' }))), this.active && (h("div", { key: '1370c89b9af85d29d4950537cdec69f4bc306ad1', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
     }
     static get is() { return "swirl-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -95,20 +95,12 @@ export class SwirlPopoverTrigger {
             }
         };
     }
+    connectedCallback() {
+        this.setupHoverListeners();
+        this.setupIntersectionObserver();
+    }
     componentDidLoad() {
         this.updateTriggerElAriaAttributes();
-        this.setupHoverListeners();
-        if (this.hidePopoverWhenInvisible) {
-            this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange.bind(this), {
-                root: this.parentScrollContainer,
-                threshold: 1,
-            });
-            const firstChild = this.el.querySelector("*");
-            if (!Boolean(firstChild)) {
-                return;
-            }
-            this.intersectionObserver.observe(firstChild);
-        }
     }
     disconnectedCallback() {
         this.intersectionObserver?.disconnect();
@@ -136,6 +128,19 @@ export class SwirlPopoverTrigger {
         }
         return this.el.children[0];
     }
+    setupIntersectionObserver() {
+        if (this.hidePopoverWhenInvisible) {
+            this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange.bind(this), {
+                root: this.parentScrollContainer,
+                threshold: 1,
+            });
+            const firstChild = this.el.querySelector("*");
+            if (!Boolean(firstChild)) {
+                return;
+            }
+            this.intersectionObserver.observe(firstChild);
+        }
+    }
     onVisibilityChange(entries) {
         const triggerIsVisible = entries[0].isIntersecting;
         if (!triggerIsVisible && this.isPopoverOpen()) {
@@ -173,7 +178,7 @@ export class SwirlPopoverTrigger {
         return isActive;
     }
     render() {
-        return (h(Host, { key: 'a034d0c5c58412ebb716dd0ef530d46ff8876acb', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, h("slot", { key: '8efb6db531779c63fb783af18b5dc310aff2dc6e' })));
+        return (h(Host, { key: 'c3f8abef369c944c9fbaf9cb11ea31ecde57b5cc', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, h("slot", { key: '88053a62f9804a5a66d809829d047fae3ddf16ab' })));
     }
     static get is() { return "swirl-popover-trigger"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-radio-group/swirl-radio-group.js

@@ -18,7 +18,7 @@ export class SwirlRadioGroup {
             }
         };
     }
-    componentDidLoad() {
+    connectedCallback() {
         this.radioButtons = Array.from(this.el.querySelectorAll("swirl-radio"));
         this.initValue();
         this.addValueChangeListeners();
@@ -47,7 +47,7 @@ export class SwirlRadioGroup {
         });
     }
     render() {
-        return (h(Host, { key: 'ab2b7c745db3cd8543c9d47f90b241b379e38301', "aria-describedby": this.swirlAriaDescribedby, role: "radiogroup" }, h("div", { key: 'af5af683d7a3d36b38f7cd7b5590c9e8251fbebf', class: "radio-group" }, h("slot", { key: 'ae0a6e7d163560a493f708423e83e9bf7adf073b' }))));
+        return (h(Host, { key: '843c405062c889e74be2452e0498931d17a65177', "aria-describedby": this.swirlAriaDescribedby, role: "radiogroup" }, h("div", { key: '06a6114696d469d6fe0ef41c9f952082aa5d124b', class: "radio-group" }, h("slot", { key: '56871a249dc67fb0a5f24814e57e6970112942b0' }))));
     }
     static get is() { return "swirl-radio-group"; }
     static get encapsulation() { return "scoped"; }

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

@@ -88,11 +88,13 @@ export class SwirlResourceList {
             }
         };
     }
-    componentDidLoad() {
+    connectedCallback() {
         this.observeSlotChanges();
         this.collectItems();
         this.setupControllingElement();
         this.setItemAllowDragState();
+    }
+    componentDidLoad() {
         this.setupDragDrop();
         this.setSectionSpacingAndSeparator();
     }
@@ -269,7 +271,7 @@ export class SwirlResourceList {
         });
     }
     render() {
-        return (h(Host, { key: '7e7a38cb48011dcabb1d4bccffdcac3d4c8be109', onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { key: '1fe37b20ae1fa8e819774dbe79a018cf6f99ab91', role: "alert" }, this.assistiveText), h("swirl-box", { key: 'f22f7d9905888c0ca6941bc4cd073604901fb865', paddingBlockEnd: this.paddingBlockEnd ?? this.padding, paddingBlockStart: this.paddingBlockStart ?? this.padding, paddingInlineEnd: this.paddingInlineEnd ?? this.padding ?? "8", paddingInlineStart: this.paddingInlineStart ?? this.padding ?? "8" }, h("swirl-stack", { key: 'f0f190c2d934851f78b54caa31d90d13db62f355', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: this.semantics, spacing: this.spacing }, h("slot", { key: 'be2a19b002fe1d89760f9812c3efa8c91c5bc722' })))));
+        return (h(Host, { key: '1ee5cc333ec6b97ba9b73292d7c4d3907be34f06', onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { key: '09291dc20b98e59c89be768d536ae7800e1c620d', role: "alert" }, this.assistiveText), h("swirl-box", { key: 'ff790da5bcaec4c738340150b23ea8f622175493', paddingBlockEnd: this.paddingBlockEnd ?? this.padding, paddingBlockStart: this.paddingBlockStart ?? this.padding, paddingInlineEnd: this.paddingInlineEnd ?? this.padding ?? "8", paddingInlineStart: this.paddingInlineStart ?? this.padding ?? "8" }, h("swirl-stack", { key: 'f43368058ebd4375da12f0348f6c50ef9816bb27', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: this.semantics, spacing: this.spacing }, h("slot", { key: '02c4a02b46c56b8c501e4fab98c698ce4514b689' })))));
     }
     static get is() { return "swirl-resource-list"; }
     static get encapsulation() { return "scoped"; }

package/dist/components/swirl-accordion.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,createEvent as s,h as i,Host as o,transformTag as n}from"@stencil/core/internal/client";const c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.expandedItemChange=s(this,"expandedItemChange",7),this.multiExpand=!1,this.onExpansionChange=e=>{e.detail&&(this.expandedItemChange.emit(e.target.itemId),this.collapseInactiveItems(e.target))}}componentDidLoad(){this.el.addEventListener("expansionChange",this.onExpansionChange)}disconnectedCallback(){this.el.removeEventListener("expansionChange",this.onExpansionChange)}async collapseItem(e){const t=Array.from(this.el.querySelectorAll("swirl-accordion-item")).find((t=>t.itemId===e));t&&t.collapse()}async expandItem(e){const t=Array.from(this.el.querySelectorAll("swirl-accordion-item")).find((t=>t.itemId===e));t&&t.expand()}collapseInactiveItems(e){this.multiExpand||Array.from(this.el.querySelectorAll("swirl-accordion-item")).forEach((t=>{t!==e&&t.collapse()}))}render(){return i(o,{key:"a055c9792756a0cf248d0fea251e255800cd7960"},i("slot",{key:"7da8b05b3664f55cca7e04db4127cbeecf134eeb"}))}get el(){return this}static get style(){return":host{display:block}:host *{box-sizing:border-box}::slotted(*:last-child){border-bottom:0.0625rem solid var(--s-border-default)}"}},[257,"swirl-accordion",{multiExpand:[4,"multi-expand"],collapseItem:[64],expandItem:[64]}]),r=c,a=function(){"undefined"!=typeof customElements&&["swirl-accordion"].forEach((e=>{"swirl-accordion"===e&&(customElements.get(n(e))||customElements.define(n(e),c))}))};export{r as SwirlAccordion,a as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as e,createEvent as s,h as i,Host as n,transformTag as o}from"@stencil/core/internal/client";const c=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.expandedItemChange=s(this,"expandedItemChange",7),this.multiExpand=!1,this.onExpansionChange=t=>{t.detail&&(this.expandedItemChange.emit(t.target.itemId),this.collapseInactiveItems(t.target))}}connectedCallback(){this.el.addEventListener("expansionChange",this.onExpansionChange)}disconnectedCallback(){this.el.removeEventListener("expansionChange",this.onExpansionChange)}async collapseItem(t){const e=Array.from(this.el.querySelectorAll("swirl-accordion-item")).find((e=>e.itemId===t));e&&e.collapse()}async expandItem(t){const e=Array.from(this.el.querySelectorAll("swirl-accordion-item")).find((e=>e.itemId===t));e&&e.expand()}collapseInactiveItems(t){this.multiExpand||Array.from(this.el.querySelectorAll("swirl-accordion-item")).forEach((e=>{e!==t&&e.collapse()}))}render(){return i(n,{key:"1f6137c28a45e18096736147c4d0b09daf963bc9"},i("slot",{key:"946dd241ee4b9375853ba7f3197f02ca484f431e"}))}get el(){return this}static get style(){return":host{display:block}:host *{box-sizing:border-box}::slotted(*:last-child){border-bottom:0.0625rem solid var(--s-border-default)}"}},[257,"swirl-accordion",{multiExpand:[4,"multi-expand"],collapseItem:[64],expandItem:[64]}]),r=c,a=function(){"undefined"!=typeof customElements&&["swirl-accordion"].forEach((t=>{"swirl-accordion"===t&&(customElements.get(o(t))||customElements.define(o(t),c))}))};export{r as SwirlAccordion,a as defineCustomElement}