@getflip/swirl-components 0.341.1 → 0.341.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/components.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2025-06-26T11:23:16",
2
+ "timestamp": "2025-07-01T09:39:34",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.35.0",
@@ -227,7 +227,9 @@ const SwirlMenu = class {
227
227
  }
228
228
  observeSlotChanges() {
229
229
  this.observer = new MutationObserver(() => {
230
- this.updateItems();
230
+ requestAnimationFrame(() => {
231
+ this.updateItems();
232
+ });
231
233
  });
232
234
  this.observer.observe(this.el, { childList: true });
233
235
  }
@@ -291,7 +293,7 @@ const SwirlMenu = class {
291
293
  "menu--mobile": this.mobile,
292
294
  "menu--root": isTopLevelMenu,
293
295
  });
294
- return (index.h(index.Host, { key: '14d513570280eb415edc20e3180babe4e06edb84' }, index.h("div", { key: '95e6ea0c4ef6c860be438e81e136789e0da1aaac', class: className }, this.mobile && isTopLevelMenu && (index.h("div", { key: 'd3994bd3b4052114473e565f86de1bc61e49d679', class: "menu__mobile-header" }, this.activeLevel === 0 && (index.h("swirl-button", { key: 'f247067e415e2b987990cc824b30b50c99df839d', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.mobileCloseMenuButtonLabel, onClick: this.onClose, variant: "plain" })), this.activeLevel > 0 && (index.h("swirl-button", { key: '358bc15f34a0731c51effb4f5ace0032a73bc262', hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" })), index.h("span", { key: '426f977b65536d7a61acfa857eae758e5e97cf3e', class: "menu__title", id: "menu-title" }, index.h("swirl-heading", { key: '06af6cab0c2c130d6c88500bb99d5668fffd40ec', align: "center", as: "span", level: 4, text: this.label, truncate: true })), index.h("swirl-button", { key: 'ff4bcc9e9bb9c243bb5927bd3a8772acc2c3dfd5', class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone }))), index.h("div", { key: '30f1216bd6ccc0224e832f2be0d248ca9cfdf6ab', "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
296
+ return (index.h(index.Host, { key: '4e5dfba8d1514afa36270f77bcecffa886078f4b' }, index.h("div", { key: 'f765e4dae6ebb7596a91cac26d838cd3745d7711', class: className }, this.mobile && isTopLevelMenu && (index.h("div", { key: '9527ad2795410f27226f3428ec06dee495dc007e', class: "menu__mobile-header" }, this.activeLevel === 0 && (index.h("swirl-button", { key: '05a018f52eb78619d3d3aa126ee030db42cb463b', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.mobileCloseMenuButtonLabel, onClick: this.onClose, variant: "plain" })), this.activeLevel > 0 && (index.h("swirl-button", { key: '71713bb65af8bc72cc6df084884e5d3eeb69d810', hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" })), index.h("span", { key: '730a9e03a6e1d327b6e3a30b03ec1471c6509067', class: "menu__title", id: "menu-title" }, index.h("swirl-heading", { key: '110aec04f9a5c4dd9cadd85b33d5b0a61326d435', align: "center", as: "span", level: 4, text: this.label, truncate: true })), index.h("swirl-button", { key: '9dcc36effd5252cec301a378511fd3fc70630815', class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone }))), index.h("div", { key: '05df203a130cbd4ec9d03bd2a531862adbf2d9da', "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
295
297
  ? {
296
298
  top: Boolean(this.position) ? `${this.position?.y}px` : "",
297
299
  left: Boolean(this.position) ? `${this.position?.x}px` : "",
@@ -302,7 +304,7 @@ const SwirlMenu = class {
302
304
  ? `calc(-100% * ${this.activeLevel})`
303
305
  : "100%",
304
306
  }
305
- : undefined }, index.h("slot", { key: 'b5fe00c7591b29cb9b35ed3ec9e0e6588afa972d' })))));
307
+ : undefined }, index.h("slot", { key: '2b3cd9bf21a1e9a129b99ce813cf3e9384cbf1e6' })))));
306
308
  }
307
309
  get el() { return index.getElement(this); }
308
310
  static get watchers() { return {
@@ -219,7 +219,9 @@ export class SwirlMenu {
219
219
  }
220
220
  observeSlotChanges() {
221
221
  this.observer = new MutationObserver(() => {
222
- this.updateItems();
222
+ requestAnimationFrame(() => {
223
+ this.updateItems();
224
+ });
223
225
  });
224
226
  this.observer.observe(this.el, { childList: true });
225
227
  }
@@ -283,7 +285,7 @@ export class SwirlMenu {
283
285
  "menu--mobile": this.mobile,
284
286
  "menu--root": isTopLevelMenu,
285
287
  });
286
- return (h(Host, { key: '14d513570280eb415edc20e3180babe4e06edb84' }, h("div", { key: '95e6ea0c4ef6c860be438e81e136789e0da1aaac', class: className }, this.mobile && isTopLevelMenu && (h("div", { key: 'd3994bd3b4052114473e565f86de1bc61e49d679', class: "menu__mobile-header" }, this.activeLevel === 0 && (h("swirl-button", { key: 'f247067e415e2b987990cc824b30b50c99df839d', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.mobileCloseMenuButtonLabel, onClick: this.onClose, variant: "plain" })), this.activeLevel > 0 && (h("swirl-button", { key: '358bc15f34a0731c51effb4f5ace0032a73bc262', hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" })), h("span", { key: '426f977b65536d7a61acfa857eae758e5e97cf3e', class: "menu__title", id: "menu-title" }, h("swirl-heading", { key: '06af6cab0c2c130d6c88500bb99d5668fffd40ec', align: "center", as: "span", level: 4, text: this.label, truncate: true })), h("swirl-button", { key: 'ff4bcc9e9bb9c243bb5927bd3a8772acc2c3dfd5', class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone }))), h("div", { key: '30f1216bd6ccc0224e832f2be0d248ca9cfdf6ab', "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
288
+ return (h(Host, { key: '4e5dfba8d1514afa36270f77bcecffa886078f4b' }, h("div", { key: 'f765e4dae6ebb7596a91cac26d838cd3745d7711', class: className }, this.mobile && isTopLevelMenu && (h("div", { key: '9527ad2795410f27226f3428ec06dee495dc007e', class: "menu__mobile-header" }, this.activeLevel === 0 && (h("swirl-button", { key: '05a018f52eb78619d3d3aa126ee030db42cb463b', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.mobileCloseMenuButtonLabel, onClick: this.onClose, variant: "plain" })), this.activeLevel > 0 && (h("swirl-button", { key: '71713bb65af8bc72cc6df084884e5d3eeb69d810', hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" })), h("span", { key: '730a9e03a6e1d327b6e3a30b03ec1471c6509067', class: "menu__title", id: "menu-title" }, h("swirl-heading", { key: '110aec04f9a5c4dd9cadd85b33d5b0a61326d435', align: "center", as: "span", level: 4, text: this.label, truncate: true })), h("swirl-button", { key: '9dcc36effd5252cec301a378511fd3fc70630815', class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone }))), h("div", { key: '05df203a130cbd4ec9d03bd2a531862adbf2d9da', "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
287
289
  ? {
288
290
  top: Boolean(this.position) ? `${this.position?.y}px` : "",
289
291
  left: Boolean(this.position) ? `${this.position?.x}px` : "",
@@ -294,7 +296,7 @@ export class SwirlMenu {
294
296
  ? `calc(-100% * ${this.activeLevel})`
295
297
  : "100%",
296
298
  }
297
- : undefined }, h("slot", { key: 'b5fe00c7591b29cb9b35ed3ec9e0e6588afa972d' })))));
299
+ : undefined }, h("slot", { key: '2b3cd9bf21a1e9a129b99ce813cf3e9384cbf1e6' })))));
298
300
  }
299
301
  static get is() { return "swirl-menu"; }
300
302
  static get encapsulation() { return "shadow"; }