@ionic/core 8.2.6-nightly.20240724 → 8.2.6

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.
Files changed (49) hide show
  1. package/components/action-sheet.js +7 -4
  2. package/components/ion-loading.js +6 -3
  3. package/components/ion-modal.js +8 -5
  4. package/components/ion-picker-legacy.js +6 -3
  5. package/components/ion-toast.js +6 -3
  6. package/components/popover.js +4 -3
  7. package/dist/cjs/ion-action-sheet.cjs.entry.js +7 -4
  8. package/dist/cjs/ion-datetime_3.cjs.entry.js +6 -3
  9. package/dist/cjs/ion-loading.cjs.entry.js +6 -3
  10. package/dist/cjs/ion-modal.cjs.entry.js +8 -5
  11. package/dist/cjs/ion-popover.cjs.entry.js +4 -3
  12. package/dist/cjs/ion-toast.cjs.entry.js +6 -3
  13. package/dist/collection/components/action-sheet/action-sheet.js +7 -4
  14. package/dist/collection/components/loading/loading.js +6 -3
  15. package/dist/collection/components/modal/modal.js +8 -5
  16. package/dist/collection/components/picker-legacy/picker.js +6 -3
  17. package/dist/collection/components/popover/popover.js +4 -3
  18. package/dist/collection/components/toast/toast.js +6 -3
  19. package/dist/docs.json +1 -1
  20. package/dist/esm/ion-action-sheet.entry.js +7 -4
  21. package/dist/esm/ion-datetime_3.entry.js +6 -3
  22. package/dist/esm/ion-loading.entry.js +6 -3
  23. package/dist/esm/ion-modal.entry.js +8 -5
  24. package/dist/esm/ion-popover.entry.js +4 -3
  25. package/dist/esm/ion-toast.entry.js +6 -3
  26. package/dist/esm-es5/ion-action-sheet.entry.js +1 -1
  27. package/dist/esm-es5/ion-datetime_3.entry.js +1 -1
  28. package/dist/esm-es5/ion-loading.entry.js +1 -1
  29. package/dist/esm-es5/ion-modal.entry.js +1 -1
  30. package/dist/esm-es5/ion-popover.entry.js +1 -1
  31. package/dist/esm-es5/ion-toast.entry.js +1 -1
  32. package/dist/ionic/ionic.esm.js +1 -1
  33. package/dist/ionic/{p-9aae0bf3.entry.js → p-096664b8.entry.js} +1 -1
  34. package/dist/ionic/{p-ed8726ad.system.entry.js → p-299a2ccb.system.entry.js} +1 -1
  35. package/dist/ionic/{p-88c0ff08.system.entry.js → p-2b017e39.system.entry.js} +1 -1
  36. package/dist/ionic/{p-4c06d890.entry.js → p-6c8d40f8.entry.js} +1 -1
  37. package/dist/ionic/{p-057c2f6f.entry.js → p-74890c76.entry.js} +1 -1
  38. package/dist/ionic/p-767a0d69.system.js +1 -1
  39. package/dist/ionic/p-94f9061a.entry.js +4 -0
  40. package/dist/ionic/{p-4a0db73d.system.entry.js → p-99740380.system.entry.js} +1 -1
  41. package/dist/ionic/{p-3b11ab95.system.entry.js → p-be9fe750.system.entry.js} +1 -1
  42. package/dist/ionic/{p-03dfca85.system.entry.js → p-caa1ea46.system.entry.js} +1 -1
  43. package/dist/ionic/{p-6db3f661.system.entry.js → p-d967f9ce.system.entry.js} +1 -1
  44. package/dist/ionic/{p-130ce79e.entry.js → p-dc321750.entry.js} +1 -1
  45. package/dist/ionic/{p-090c318d.entry.js → p-eb988a08.entry.js} +1 -1
  46. package/hydrate/index.js +37 -21
  47. package/hydrate/index.mjs +37 -21
  48. package/package.json +1 -1
  49. package/dist/ionic/p-c9345989.entry.js +0 -4
package/components/action-sheet.js CHANGED
@@ -244,7 +244,10 @@ const ActionSheet = /*@__PURE__*/ proxyCustomElement(class ActionSheet extends H
244
244
  this.triggerController.removeClickListener();
245
245
  }
246
246
  componentWillLoad() {
247
- setOverlayId(this.el);
247
+ var _a;
248
+ if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
249
+ setOverlayId(this.el);
250
+ }
248
251
  }
249
252
  componentDidLoad() {
250
253
  /**
@@ -289,12 +292,12 @@ const ActionSheet = /*@__PURE__*/ proxyCustomElement(class ActionSheet extends H
289
292
  const cancelButton = allButtons.find((b) => b.role === 'cancel');
290
293
  const buttons = allButtons.filter((b) => b.role !== 'cancel');
291
294
  const headerID = `action-sheet-${overlayIndex}-header`;
292
- return (h(Host, Object.assign({ key: 'b640e9730af4bd9ec569884cf203c63102e0ea59', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
295
+ return (h(Host, Object.assign({ key: '7bbd202ca9e19727e7514abbe073687d982f80c3', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
293
296
  zIndex: `${20000 + this.overlayIndex}`,
294
- }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: 'bcfa5b7ffb5c265ef54caa114e697ada11f20c12', tappable: this.backdropDismiss }), h("div", { key: '207ae95b5365ce1d76170a05bdf8c83c3ba5de42', tabindex: "0" }), h("div", { key: 'bf2b4e8d57c822a4ea2bbe6c34b1b2f2067e4c02', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '9c4841eb03ca1378c5abc1e3aafbbcfaaa43c345', class: "action-sheet-container" }, h("div", { key: 'fa438b8663f5d30852e5967da0471489efa783b2', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { key: '2c600f1cd8314d65137fb1bfa180312b4791121a', id: headerID, class: {
297
+ }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '23344a9221a2e6720d7b9de5249dc37256cafa7b', tappable: this.backdropDismiss }), h("div", { key: 'd46361bb5cdc32a7922dcf76b566f358a6174bfa', tabindex: "0" }), h("div", { key: '136c3f2e77c8a2eac8e9ae4bb13d735e1d62598d', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '6168ea8b2be42020b2edeb8ff3a0f3d1254be37a', class: "action-sheet-container" }, h("div", { key: '29b9e6619dc54574733a704d6bf885839151bd84', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { key: '536ce764bfddb3816ea3512d90f4acef2ccb8589', id: headerID, class: {
295
298
  'action-sheet-title': true,
296
299
  'action-sheet-has-sub-title': this.subHeader !== undefined,
297
- } }, header, this.subHeader && h("div", { key: 'a98d6a3f7948733de22a07432e56255f11243b7b', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && h("ion-ripple-effect", null))))), cancelButton && (h("div", { key: '5c5abd0e0b3d486ba2bfe437e28a23b2c7c4c955', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: '520a23bbbe6c7436f5bc58bad162d7894b870e54' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: '28c90f66786ee82316adc6cfd68d322d2038357d', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: 'fd49fcea260c7addc9b07718eeb02d4fa6e4d900', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", { key: 'c83f636e171fe77635a4fce2b97161447e10546a' })))))), h("div", { key: 'd304920fc7cb006b87542183a3224a7e460abd3d', tabindex: "0" })));
300
+ } }, header, this.subHeader && h("div", { key: '6d888219145824fd36cdfe0d3c8388bbf2769777', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && h("ion-ripple-effect", null))))), cancelButton && (h("div", { key: '46f98f0ed5a9bdb3e35feb9ae71c4489c17b7d77', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: 'e3c457bced8ad5f692e48de26e65f731fd631b4f' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: '4cba6dc559f734ecc852e024959210cd0dd25354', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: '9df64989aad1b4d1e75edf4d37ab208965cfe37f', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", { key: '558089275a29177cefdb2e38eefc9b5c8b62872b' })))))), h("div", { key: 'fa4df6e043b00a6e4126dbc71cb344cfc2b2e7bc', tabindex: "0" })));
298
301
  }
299
302
  get el() { return this; }
300
303
  static get watchers() { return {
package/components/ion-loading.js CHANGED
@@ -163,11 +163,14 @@ const Loading = /*@__PURE__*/ proxyCustomElement(class Loading extends HTMLEleme
163
163
  this.triggerChanged();
164
164
  }
165
165
  componentWillLoad() {
166
+ var _a;
166
167
  if (this.spinner === undefined) {
167
168
  const mode = getIonMode(this);
168
169
  this.spinner = config.get('loadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
169
170
  }
170
- setOverlayId(this.el);
171
+ if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
172
+ setOverlayId(this.el);
173
+ }
171
174
  }
172
175
  componentDidLoad() {
173
176
  /**
@@ -256,9 +259,9 @@ const Loading = /*@__PURE__*/ proxyCustomElement(class Loading extends HTMLEleme
256
259
  * Otherwise, don't set aria-labelledby.
257
260
  */
258
261
  const ariaLabelledBy = message !== undefined ? msgId : null;
259
- return (h(Host, Object.assign({ key: '4610b316b10a4df3416d0e83062935f3079baff2', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
262
+ return (h(Host, Object.assign({ key: 'fb3d2cd7cd0539ed6540d8be50e243c7916b3ca2', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
260
263
  zIndex: `${40000 + this.overlayIndex}`,
261
- }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: 'd07d0759ed13093c4c4fe06be442dde4bd9c2c31', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'ed3ec8b48f049b592fbea9767cc3d448dc037938', tabindex: "0" }), h("div", { key: 'c515f3badf149d83c1d67374ef3507415fe51422', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '265d1673c2deb751aeca285f5a18863bb629ca5e', class: "loading-spinner" }, h("ion-spinner", { key: '155bf7c92f6d7afd8edbb39f2b47ad05b7d503f1', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: 'b0e21df5cf54f9b48a218a03543d8c86f5406522', tabindex: "0" })));
264
+ }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: 'c8bd30782f3040b1b80e88aa924861e439d40754', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '4ebfbb67c92e8eb56c27dd7c199b35bf6be1cf63', tabindex: "0" }), h("div", { key: '9492723cd87f1ef75534e449d4bc2b2deb0cb3cc', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: 'd9eb42454e48c82704d974a68b80ceb4de990417', class: "loading-spinner" }, h("ion-spinner", { key: 'cdb046bad89872f4208ae466979315652766bf3a', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: '412d1bb537dafa6e6863d07ddc15f5969fe0617d', tabindex: "0" })));
262
265
  }
263
266
  get el() { return this; }
264
267
  static get watchers() { return {
package/components/ion-modal.js CHANGED
@@ -1222,6 +1222,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
1222
1222
  this.triggerController.removeClickListener();
1223
1223
  }
1224
1224
  componentWillLoad() {
1225
+ var _a;
1225
1226
  const { breakpoints, initialBreakpoint, el, htmlAttributes } = this;
1226
1227
  const isSheetModal = (this.isSheetModal = breakpoints !== undefined && initialBreakpoint !== undefined);
1227
1228
  const attributesToInherit = ['aria-label', 'role'];
@@ -1263,7 +1264,9 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
1263
1264
  if (breakpoints !== undefined && initialBreakpoint !== undefined && !breakpoints.includes(initialBreakpoint)) {
1264
1265
  printIonWarning('Your breakpoints array must include the initialBreakpoint value.');
1265
1266
  }
1266
- setOverlayId(el);
1267
+ if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
1268
+ setOverlayId(this.el);
1269
+ }
1267
1270
  }
1268
1271
  componentDidLoad() {
1269
1272
  /**
@@ -1653,18 +1656,18 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
1653
1656
  const mode = getIonMode(this);
1654
1657
  const isCardModal = presentingElement !== undefined && mode === 'ios';
1655
1658
  const isHandleCycle = handleBehavior === 'cycle';
1656
- return (h(Host, Object.assign({ key: 'fe6fd17cf857127f89d652b9aa3e9473d28c55db', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
1659
+ return (h(Host, Object.assign({ key: '013ba4864ca4d2c1052c512f6a4b0732b8decff7', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
1657
1660
  zIndex: `${20000 + this.overlayIndex}`,
1658
- }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), h("ion-backdrop", { key: '0f3a31363c2717e5483bc0412c25804897d4aff8', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '0e5ed59162ff08fe0a9f757e06bdacc75f65c0ed', class: "modal-shadow" }), h("div", Object.assign({ key: '35cdbe2238765e5f346ad7be64f7eefa8c78f0c0',
1661
+ }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), h("ion-backdrop", { key: '498b1c0a03836d6799dcf3b8e9315805c70f6480', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'ce22e4caf1096e87248926fe2477f0d5a4c8a5cf', class: "modal-shadow" }), h("div", Object.assign({ key: '540e47b15d8290166c39b022c725182114a75682',
1659
1662
  /*
1660
1663
  role and aria-modal must be used on the
1661
1664
  same element. They must also be set inside the
1662
1665
  shadow DOM otherwise ion-button will not be highlighted
1663
1666
  when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
1664
1667
  */
1665
- role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '7a4031eaebf9a098f4c4220a5fe9d1c25cc0ec92', class: "modal-handle",
1668
+ role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: 'f3b352ec9a63a7ec801462aacfd8295b4302d115', class: "modal-handle",
1666
1669
  // Prevents the handle from receiving keyboard focus when it does not cycle
1667
- tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), h("slot", { key: '534adc8e5bd850199fe2e9e16f0e7c19217d8486' }))));
1670
+ tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), h("slot", { key: '31a3f58f4c733ffdf736523c154200874a96b1d0' }))));
1668
1671
  }
1669
1672
  get el() { return this; }
1670
1673
  static get watchers() { return {
package/components/ion-picker-legacy.js CHANGED
@@ -127,7 +127,10 @@ const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement
127
127
  this.triggerController.removeClickListener();
128
128
  }
129
129
  componentWillLoad() {
130
- setOverlayId(this.el);
130
+ var _a;
131
+ if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
132
+ setOverlayId(this.el);
133
+ }
131
134
  }
132
135
  componentDidLoad() {
133
136
  printIonWarning('ion-picker-legacy and ion-picker-legacy-column have been deprecated in favor of new versions of the ion-picker and ion-picker-column components. These new components display inline with your page content allowing for more presentation flexibility than before.', this.el);
@@ -240,11 +243,11 @@ const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement
240
243
  render() {
241
244
  const { htmlAttributes } = this;
242
245
  const mode = getIonMode(this);
243
- return (h(Host, Object.assign({ key: '26e3144adcdf01605271d01e468bb4a75ce854b1', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
246
+ return (h(Host, Object.assign({ key: '3b163ca87354a3a4f302ff016d5affd0dc97bccc', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
244
247
  zIndex: `${20000 + this.overlayIndex}`,
245
248
  }, class: Object.assign({ [mode]: true,
246
249
  // Used internally for styling
247
- [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: 'fa212d21406606186cd95f8c7a4f119696ac8d4a', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '19ea889f65cb6a68a9db26cf9f83c6587cfcf07e', tabindex: "0" }), h("div", { key: '5fc0f5d26915ba353b9f0335946f94b6fda95e1e', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '3fa5bff4ac0013ef31845482a27a14caebbdcd2f', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: '2ff6376956d01dcd9ec01b8d6972dd4b37ffb1a1', class: "picker-columns" }, h("div", { key: '4adcef77429f10a3faa50b41d1eaf3404387997c', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: 'e0f37d3e9896eb2bc0f0aef4762a897130851963', class: "picker-below-highlight" }))), h("div", { key: '671bb7d0f487b0d7c7fa70388f8fa1de77448b9f', tabindex: "0" })));
250
+ [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: 'da4224447bdbcfbadd1bd63ebe7a7bfdb8aa3129', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '211475c859b7acf4d64556905c45993201d92d43', tabindex: "0" }), h("div", { key: 'c3b3674038155809caea84ae6348ff0d66897a64', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: 'a21757da70dc7864945a5751d9da3ca4bf87897b', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: '0220da1854d09ef22d2d9a32eaa3c3b222be5a0a', class: "picker-columns" }, h("div", { key: '55757c165ba9e38e56b4dee76a9b13d3ff8b21e6', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: '160092a46a48287bf75e5dfe3502f1755a2d0c70', class: "picker-below-highlight" }))), h("div", { key: 'e212db6cca7d75fc0eda0baf4312dd51b9b7a4ef', tabindex: "0" })));
248
251
  }
249
252
  get el() { return this; }
250
253
  static get watchers() { return {
package/components/ion-toast.js CHANGED
@@ -590,7 +590,10 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
590
590
  this.triggerController.removeClickListener();
591
591
  }
592
592
  componentWillLoad() {
593
- setOverlayId(this.el);
593
+ var _a;
594
+ if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
595
+ setOverlayId(this.el);
596
+ }
594
597
  }
595
598
  componentDidLoad() {
596
599
  /**
@@ -828,9 +831,9 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
828
831
  if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
829
832
  printIonWarning('This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
830
833
  }
831
- return (h(Host, Object.assign({ key: 'da148788489146a20b42023fdc6401e53c044767', tabindex: "-1" }, this.htmlAttributes, { style: {
834
+ return (h(Host, Object.assign({ key: '68c336f80af04ba484ca9899bae8f40c0d9b7691', tabindex: "-1" }, this.htmlAttributes, { style: {
832
835
  zIndex: `${60000 + this.overlayIndex}`,
833
- }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: 'ab0a4d783aa43ba961492b3eb8beb60a38153057', class: wrapperClass }, h("div", { key: '83e49027fd1ca6553d6910ff91befeea43576f3c', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '025cb4b6b170a89548969a25bcce4ab7a3817898', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: 'b811b4e1cbc1528c2cfb57898f5615692120f840', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
836
+ }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '3483b188f14b700964a123997a60a43a2023a1b6', class: wrapperClass }, h("div", { key: '1b88544a9b87253b364cbec6285625388979b560', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: 'bd1c42e3b14af66b880dfe283e3ae910075c0f70', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: 'a5ef6cdabc1f7c70d11a5f2a0abf8737fe7550e8', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
834
837
  }
835
838
  get el() { return this; }
836
839
  static get watchers() { return {
package/components/popover.js CHANGED
@@ -1089,8 +1089,9 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
1089
1089
  }
1090
1090
  }
1091
1091
  componentWillLoad() {
1092
+ var _a, _b;
1092
1093
  const { el } = this;
1093
- const popoverId = setOverlayId(el);
1094
+ const popoverId = (_b = (_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : setOverlayId(el);
1094
1095
  this.parentPopover = el.closest(`ion-popover:not(#${popoverId})`);
1095
1096
  if (this.alignment === undefined) {
1096
1097
  this.alignment = getIonMode(this) === 'ios' ? 'center' : 'start';
@@ -1293,9 +1294,9 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
1293
1294
  const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
1294
1295
  const desktop = isPlatform('desktop');
1295
1296
  const enableArrow = arrow && !parentPopover;
1296
- return (h(Host, Object.assign({ key: '17e5e8b3e7ba5e251665fb9d0ade10c781f82f0e', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
1297
+ return (h(Host, Object.assign({ key: '3a7c4c39384bab1447c4bd6b9b06d7837a09353b', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
1297
1298
  zIndex: `${20000 + this.overlayIndex}`,
1298
- }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: 'c12fb94b375d7e88a0c5d715440c0f66ad7ee817', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '478b388cc9a5a382003a2863e968e77a174914ab', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: 'f1c63a0079f197a8d4577e7c00a654871fb9d816', class: "popover-arrow", part: "arrow" }), h("div", { key: '08b62a321c09ad4b0f90460468ecbc1d56320bf1', class: "popover-content", part: "content" }, h("slot", { key: '55645ff597f64d434219caa28015cf2a4ceb0ee5' })))));
1299
+ }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: '38a1c4ad29238d1e81cab407f099121fa4947cce', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'f825494c5e3be89d7fcf0229e29b405bccb13edb', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '3acae5a0106389c776c8ffe5bf10f3ff006e0346', class: "popover-arrow", part: "arrow" }), h("div", { key: '2aa73e9f06b1d2ac4c0d36c23186b9164f395079', class: "popover-content", part: "content" }, h("slot", { key: '62f5713414aae47dde6a8aef1f9b69af287534ae' })))));
1299
1300
  }
1300
1301
  get el() { return this; }
1301
1302
  static get watchers() { return {
package/dist/cjs/ion-action-sheet.cjs.entry.js CHANGED
@@ -252,7 +252,10 @@ const ActionSheet = class {
252
252
  this.triggerController.removeClickListener();
253
253
  }
254
254
  componentWillLoad() {
255
- overlays.setOverlayId(this.el);
255
+ var _a;
256
+ if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
257
+ overlays.setOverlayId(this.el);
258
+ }
256
259
  }
257
260
  componentDidLoad() {
258
261
  /**
@@ -297,12 +300,12 @@ const ActionSheet = class {
297
300
  const cancelButton = allButtons.find((b) => b.role === 'cancel');
298
301
  const buttons = allButtons.filter((b) => b.role !== 'cancel');
299
302
  const headerID = `action-sheet-${overlayIndex}-header`;
300
- return (index.h(index.Host, Object.assign({ key: 'b640e9730af4bd9ec569884cf203c63102e0ea59', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
303
+ return (index.h(index.Host, Object.assign({ key: '7bbd202ca9e19727e7514abbe073687d982f80c3', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
301
304
  zIndex: `${20000 + this.overlayIndex}`,
302
- }, class: Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), index.h("ion-backdrop", { key: 'bcfa5b7ffb5c265ef54caa114e697ada11f20c12', tappable: this.backdropDismiss }), index.h("div", { key: '207ae95b5365ce1d76170a05bdf8c83c3ba5de42', tabindex: "0" }), index.h("div", { key: 'bf2b4e8d57c822a4ea2bbe6c34b1b2f2067e4c02', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, index.h("div", { key: '9c4841eb03ca1378c5abc1e3aafbbcfaaa43c345', class: "action-sheet-container" }, index.h("div", { key: 'fa438b8663f5d30852e5967da0471489efa783b2', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (index.h("div", { key: '2c600f1cd8314d65137fb1bfa180312b4791121a', id: headerID, class: {
305
+ }, class: Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), index.h("ion-backdrop", { key: '23344a9221a2e6720d7b9de5249dc37256cafa7b', tappable: this.backdropDismiss }), index.h("div", { key: 'd46361bb5cdc32a7922dcf76b566f358a6174bfa', tabindex: "0" }), index.h("div", { key: '136c3f2e77c8a2eac8e9ae4bb13d735e1d62598d', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, index.h("div", { key: '6168ea8b2be42020b2edeb8ff3a0f3d1254be37a', class: "action-sheet-container" }, index.h("div", { key: '29b9e6619dc54574733a704d6bf885839151bd84', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (index.h("div", { key: '536ce764bfddb3816ea3512d90f4acef2ccb8589', id: headerID, class: {
303
306
  'action-sheet-title': true,
304
307
  'action-sheet-has-sub-title': this.subHeader !== undefined,
305
- } }, header, this.subHeader && index.h("div", { key: 'a98d6a3f7948733de22a07432e56255f11243b7b', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (index.h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), index.h("span", { class: "action-sheet-button-inner" }, b.icon && index.h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && index.h("ion-ripple-effect", null))))), cancelButton && (index.h("div", { key: '5c5abd0e0b3d486ba2bfe437e28a23b2c7c4c955', class: "action-sheet-group action-sheet-group-cancel" }, index.h("button", Object.assign({ key: '520a23bbbe6c7436f5bc58bad162d7894b870e54' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), index.h("span", { key: '28c90f66786ee82316adc6cfd68d322d2038357d', class: "action-sheet-button-inner" }, cancelButton.icon && (index.h("ion-icon", { key: 'fd49fcea260c7addc9b07718eeb02d4fa6e4d900', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && index.h("ion-ripple-effect", { key: 'c83f636e171fe77635a4fce2b97161447e10546a' })))))), index.h("div", { key: 'd304920fc7cb006b87542183a3224a7e460abd3d', tabindex: "0" })));
308
+ } }, header, this.subHeader && index.h("div", { key: '6d888219145824fd36cdfe0d3c8388bbf2769777', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (index.h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), index.h("span", { class: "action-sheet-button-inner" }, b.icon && index.h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && index.h("ion-ripple-effect", null))))), cancelButton && (index.h("div", { key: '46f98f0ed5a9bdb3e35feb9ae71c4489c17b7d77', class: "action-sheet-group action-sheet-group-cancel" }, index.h("button", Object.assign({ key: 'e3c457bced8ad5f692e48de26e65f731fd631b4f' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), index.h("span", { key: '4cba6dc559f734ecc852e024959210cd0dd25354', class: "action-sheet-button-inner" }, cancelButton.icon && (index.h("ion-icon", { key: '9df64989aad1b4d1e75edf4d37ab208965cfe37f', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && index.h("ion-ripple-effect", { key: '558089275a29177cefdb2e38eefc9b5c8b62872b' })))))), index.h("div", { key: 'fa4df6e043b00a6e4126dbc71cb344cfc2b2e7bc', tabindex: "0" })));
306
309
  }
307
310
  get el() { return index.getElement(this); }
308
311
  static get watchers() { return {
package/dist/cjs/ion-datetime_3.cjs.entry.js CHANGED
@@ -1914,7 +1914,10 @@ const Picker = class {
1914
1914
  this.triggerController.removeClickListener();
1915
1915
  }
1916
1916
  componentWillLoad() {
1917
- overlays.setOverlayId(this.el);
1917
+ var _a;
1918
+ if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
1919
+ overlays.setOverlayId(this.el);
1920
+ }
1918
1921
  }
1919
1922
  componentDidLoad() {
1920
1923
  index.printIonWarning('ion-picker-legacy and ion-picker-legacy-column have been deprecated in favor of new versions of the ion-picker and ion-picker-column components. These new components display inline with your page content allowing for more presentation flexibility than before.', this.el);
@@ -2027,11 +2030,11 @@ const Picker = class {
2027
2030
  render() {
2028
2031
  const { htmlAttributes } = this;
2029
2032
  const mode = ionicGlobal.getIonMode(this);
2030
- return (index$1.h(index$1.Host, Object.assign({ key: '26e3144adcdf01605271d01e468bb4a75ce854b1', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
2033
+ return (index$1.h(index$1.Host, Object.assign({ key: '3b163ca87354a3a4f302ff016d5affd0dc97bccc', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
2031
2034
  zIndex: `${20000 + this.overlayIndex}`,
2032
2035
  }, class: Object.assign({ [mode]: true,
2033
2036
  // Used internally for styling
2034
- [`picker-${mode}`]: true, 'overlay-hidden': true }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), index$1.h("ion-backdrop", { key: 'fa212d21406606186cd95f8c7a4f119696ac8d4a', visible: this.showBackdrop, tappable: this.backdropDismiss }), index$1.h("div", { key: '19ea889f65cb6a68a9db26cf9f83c6587cfcf07e', tabindex: "0" }), index$1.h("div", { key: '5fc0f5d26915ba353b9f0335946f94b6fda95e1e', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, index$1.h("div", { key: '3fa5bff4ac0013ef31845482a27a14caebbdcd2f', class: "picker-toolbar" }, this.buttons.map((b) => (index$1.h("div", { class: buttonWrapperClass(b) }, index$1.h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), index$1.h("div", { key: '2ff6376956d01dcd9ec01b8d6972dd4b37ffb1a1', class: "picker-columns" }, index$1.h("div", { key: '4adcef77429f10a3faa50b41d1eaf3404387997c', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => index$1.h("ion-picker-legacy-column", { col: c })), index$1.h("div", { key: 'e0f37d3e9896eb2bc0f0aef4762a897130851963', class: "picker-below-highlight" }))), index$1.h("div", { key: '671bb7d0f487b0d7c7fa70388f8fa1de77448b9f', tabindex: "0" })));
2037
+ [`picker-${mode}`]: true, 'overlay-hidden': true }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), index$1.h("ion-backdrop", { key: 'da4224447bdbcfbadd1bd63ebe7a7bfdb8aa3129', visible: this.showBackdrop, tappable: this.backdropDismiss }), index$1.h("div", { key: '211475c859b7acf4d64556905c45993201d92d43', tabindex: "0" }), index$1.h("div", { key: 'c3b3674038155809caea84ae6348ff0d66897a64', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, index$1.h("div", { key: 'a21757da70dc7864945a5751d9da3ca4bf87897b', class: "picker-toolbar" }, this.buttons.map((b) => (index$1.h("div", { class: buttonWrapperClass(b) }, index$1.h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), index$1.h("div", { key: '0220da1854d09ef22d2d9a32eaa3c3b222be5a0a', class: "picker-columns" }, index$1.h("div", { key: '55757c165ba9e38e56b4dee76a9b13d3ff8b21e6', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => index$1.h("ion-picker-legacy-column", { col: c })), index$1.h("div", { key: '160092a46a48287bf75e5dfe3502f1755a2d0c70', class: "picker-below-highlight" }))), index$1.h("div", { key: 'e212db6cca7d75fc0eda0baf4312dd51b9b7a4ef', tabindex: "0" })));
2035
2038
  }
2036
2039
  get el() { return index$1.getElement(this); }
2037
2040
  static get watchers() { return {
package/dist/cjs/ion-loading.cjs.entry.js CHANGED
@@ -169,11 +169,14 @@ const Loading = class {
169
169
  this.triggerChanged();
170
170
  }
171
171
  componentWillLoad() {
172
+ var _a;
172
173
  if (this.spinner === undefined) {
173
174
  const mode = ionicGlobal.getIonMode(this);
174
175
  this.spinner = ionicGlobal.config.get('loadingSpinner', ionicGlobal.config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
175
176
  }
176
- overlays.setOverlayId(this.el);
177
+ if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
178
+ overlays.setOverlayId(this.el);
179
+ }
177
180
  }
178
181
  componentDidLoad() {
179
182
  /**
@@ -262,9 +265,9 @@ const Loading = class {
262
265
  * Otherwise, don't set aria-labelledby.
263
266
  */
264
267
  const ariaLabelledBy = message !== undefined ? msgId : null;
265
- return (index.h(index.Host, Object.assign({ key: '4610b316b10a4df3416d0e83062935f3079baff2', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
268
+ return (index.h(index.Host, Object.assign({ key: 'fb3d2cd7cd0539ed6540d8be50e243c7916b3ca2', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
266
269
  zIndex: `${40000 + this.overlayIndex}`,
267
- }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), index.h("ion-backdrop", { key: 'd07d0759ed13093c4c4fe06be442dde4bd9c2c31', visible: this.showBackdrop, tappable: this.backdropDismiss }), index.h("div", { key: 'ed3ec8b48f049b592fbea9767cc3d448dc037938', tabindex: "0" }), index.h("div", { key: 'c515f3badf149d83c1d67374ef3507415fe51422', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (index.h("div", { key: '265d1673c2deb751aeca285f5a18863bb629ca5e', class: "loading-spinner" }, index.h("ion-spinner", { key: '155bf7c92f6d7afd8edbb39f2b47ad05b7d503f1', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), index.h("div", { key: 'b0e21df5cf54f9b48a218a03543d8c86f5406522', tabindex: "0" })));
270
+ }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), index.h("ion-backdrop", { key: 'c8bd30782f3040b1b80e88aa924861e439d40754', visible: this.showBackdrop, tappable: this.backdropDismiss }), index.h("div", { key: '4ebfbb67c92e8eb56c27dd7c199b35bf6be1cf63', tabindex: "0" }), index.h("div", { key: '9492723cd87f1ef75534e449d4bc2b2deb0cb3cc', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (index.h("div", { key: 'd9eb42454e48c82704d974a68b80ceb4de990417', class: "loading-spinner" }, index.h("ion-spinner", { key: 'cdb046bad89872f4208ae466979315652766bf3a', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), index.h("div", { key: '412d1bb537dafa6e6863d07ddc15f5969fe0617d', tabindex: "0" })));
268
271
  }
269
272
  get el() { return index.getElement(this); }
270
273
  static get watchers() { return {
package/dist/cjs/ion-modal.cjs.entry.js CHANGED
@@ -1226,6 +1226,7 @@ const Modal = class {
1226
1226
  this.triggerController.removeClickListener();
1227
1227
  }
1228
1228
  componentWillLoad() {
1229
+ var _a;
1229
1230
  const { breakpoints, initialBreakpoint, el, htmlAttributes } = this;
1230
1231
  const isSheetModal = (this.isSheetModal = breakpoints !== undefined && initialBreakpoint !== undefined);
1231
1232
  const attributesToInherit = ['aria-label', 'role'];
@@ -1267,7 +1268,9 @@ const Modal = class {
1267
1268
  if (breakpoints !== undefined && initialBreakpoint !== undefined && !breakpoints.includes(initialBreakpoint)) {
1268
1269
  index$4.printIonWarning('Your breakpoints array must include the initialBreakpoint value.');
1269
1270
  }
1270
- overlays.setOverlayId(el);
1271
+ if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
1272
+ overlays.setOverlayId(this.el);
1273
+ }
1271
1274
  }
1272
1275
  componentDidLoad() {
1273
1276
  /**
@@ -1657,18 +1660,18 @@ const Modal = class {
1657
1660
  const mode = ionicGlobal.getIonMode(this);
1658
1661
  const isCardModal = presentingElement !== undefined && mode === 'ios';
1659
1662
  const isHandleCycle = handleBehavior === 'cycle';
1660
- return (index$3.h(index$3.Host, Object.assign({ key: 'fe6fd17cf857127f89d652b9aa3e9473d28c55db', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
1663
+ return (index$3.h(index$3.Host, Object.assign({ key: '013ba4864ca4d2c1052c512f6a4b0732b8decff7', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
1661
1664
  zIndex: `${20000 + this.overlayIndex}`,
1662
- }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), index$3.h("ion-backdrop", { key: '0f3a31363c2717e5483bc0412c25804897d4aff8', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && index$3.h("div", { key: '0e5ed59162ff08fe0a9f757e06bdacc75f65c0ed', class: "modal-shadow" }), index$3.h("div", Object.assign({ key: '35cdbe2238765e5f346ad7be64f7eefa8c78f0c0',
1665
+ }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), index$3.h("ion-backdrop", { key: '498b1c0a03836d6799dcf3b8e9315805c70f6480', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && index$3.h("div", { key: 'ce22e4caf1096e87248926fe2477f0d5a4c8a5cf', class: "modal-shadow" }), index$3.h("div", Object.assign({ key: '540e47b15d8290166c39b022c725182114a75682',
1663
1666
  /*
1664
1667
  role and aria-modal must be used on the
1665
1668
  same element. They must also be set inside the
1666
1669
  shadow DOM otherwise ion-button will not be highlighted
1667
1670
  when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
1668
1671
  */
1669
- role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (index$3.h("button", { key: '7a4031eaebf9a098f4c4220a5fe9d1c25cc0ec92', class: "modal-handle",
1672
+ role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (index$3.h("button", { key: 'f3b352ec9a63a7ec801462aacfd8295b4302d115', class: "modal-handle",
1670
1673
  // Prevents the handle from receiving keyboard focus when it does not cycle
1671
- tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), index$3.h("slot", { key: '534adc8e5bd850199fe2e9e16f0e7c19217d8486' }))));
1674
+ tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), index$3.h("slot", { key: '31a3f58f4c733ffdf736523c154200874a96b1d0' }))));
1672
1675
  }
1673
1676
  get el() { return index$3.getElement(this); }
1674
1677
  static get watchers() { return {
package/dist/cjs/ion-popover.cjs.entry.js CHANGED
@@ -1093,8 +1093,9 @@ const Popover = class {
1093
1093
  }
1094
1094
  }
1095
1095
  componentWillLoad() {
1096
+ var _a, _b;
1096
1097
  const { el } = this;
1097
- const popoverId = overlays.setOverlayId(el);
1098
+ const popoverId = (_b = (_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : overlays.setOverlayId(el);
1098
1099
  this.parentPopover = el.closest(`ion-popover:not(#${popoverId})`);
1099
1100
  if (this.alignment === undefined) {
1100
1101
  this.alignment = ionicGlobal.getIonMode(this) === 'ios' ? 'center' : 'start';
@@ -1297,9 +1298,9 @@ const Popover = class {
1297
1298
  const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
1298
1299
  const desktop = ionicGlobal.isPlatform('desktop');
1299
1300
  const enableArrow = arrow && !parentPopover;
1300
- return (index.h(index.Host, Object.assign({ key: '17e5e8b3e7ba5e251665fb9d0ade10c781f82f0e', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
1301
+ return (index.h(index.Host, Object.assign({ key: '3a7c4c39384bab1447c4bd6b9b06d7837a09353b', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
1301
1302
  zIndex: `${20000 + this.overlayIndex}`,
1302
- }, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && index.h("ion-backdrop", { key: 'c12fb94b375d7e88a0c5d715440c0f66ad7ee817', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), index.h("div", { key: '478b388cc9a5a382003a2863e968e77a174914ab', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && index.h("div", { key: 'f1c63a0079f197a8d4577e7c00a654871fb9d816', class: "popover-arrow", part: "arrow" }), index.h("div", { key: '08b62a321c09ad4b0f90460468ecbc1d56320bf1', class: "popover-content", part: "content" }, index.h("slot", { key: '55645ff597f64d434219caa28015cf2a4ceb0ee5' })))));
1303
+ }, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && index.h("ion-backdrop", { key: '38a1c4ad29238d1e81cab407f099121fa4947cce', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), index.h("div", { key: 'f825494c5e3be89d7fcf0229e29b405bccb13edb', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && index.h("div", { key: '3acae5a0106389c776c8ffe5bf10f3ff006e0346', class: "popover-arrow", part: "arrow" }), index.h("div", { key: '2aa73e9f06b1d2ac4c0d36c23186b9164f395079', class: "popover-content", part: "content" }, index.h("slot", { key: '62f5713414aae47dde6a8aef1f9b69af287534ae' })))));
1303
1304
  }
1304
1305
  get el() { return index.getElement(this); }
1305
1306
  static get watchers() { return {
package/dist/cjs/ion-toast.cjs.entry.js CHANGED
@@ -591,7 +591,10 @@ const Toast = class {
591
591
  this.triggerController.removeClickListener();
592
592
  }
593
593
  componentWillLoad() {
594
- overlays.setOverlayId(this.el);
594
+ var _a;
595
+ if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
596
+ overlays.setOverlayId(this.el);
597
+ }
595
598
  }
596
599
  componentDidLoad() {
597
600
  /**
@@ -829,9 +832,9 @@ const Toast = class {
829
832
  if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
830
833
  index$1.printIonWarning('This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
831
834
  }
832
- return (index$3.h(index$3.Host, Object.assign({ key: 'da148788489146a20b42023fdc6401e53c044767', tabindex: "-1" }, this.htmlAttributes, { style: {
835
+ return (index$3.h(index$3.Host, Object.assign({ key: '68c336f80af04ba484ca9899bae8f40c0d9b7691', tabindex: "-1" }, this.htmlAttributes, { style: {
833
836
  zIndex: `${60000 + this.overlayIndex}`,
834
- }, class: theme.createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), index$3.h("div", { key: 'ab0a4d783aa43ba961492b3eb8beb60a38153057', class: wrapperClass }, index$3.h("div", { key: '83e49027fd1ca6553d6910ff91befeea43576f3c', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (index$3.h("ion-icon", { key: '025cb4b6b170a89548969a25bcce4ab7a3817898', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), index$3.h("div", { key: 'b811b4e1cbc1528c2cfb57898f5615692120f840', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
837
+ }, class: theme.createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), index$3.h("div", { key: '3483b188f14b700964a123997a60a43a2023a1b6', class: wrapperClass }, index$3.h("div", { key: '1b88544a9b87253b364cbec6285625388979b560', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (index$3.h("ion-icon", { key: 'bd1c42e3b14af66b880dfe283e3ae910075c0f70', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), index$3.h("div", { key: 'a5ef6cdabc1f7c70d11a5f2a0abf8737fe7550e8', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
835
838
  }
836
839
  get el() { return index$3.getElement(this); }
837
840
  static get watchers() { return {
package/dist/collection/components/action-sheet/action-sheet.js CHANGED
@@ -146,7 +146,10 @@ export class ActionSheet {
146
146
  this.triggerController.removeClickListener();
147
147
  }
148
148
  componentWillLoad() {
149
- setOverlayId(this.el);
149
+ var _a;
150
+ if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
151
+ setOverlayId(this.el);
152
+ }
150
153
  }
151
154
  componentDidLoad() {
152
155
  /**
@@ -191,12 +194,12 @@ export class ActionSheet {
191
194
  const cancelButton = allButtons.find((b) => b.role === 'cancel');
192
195
  const buttons = allButtons.filter((b) => b.role !== 'cancel');
193
196
  const headerID = `action-sheet-${overlayIndex}-header`;
194
- return (h(Host, Object.assign({ key: 'b640e9730af4bd9ec569884cf203c63102e0ea59', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
197
+ return (h(Host, Object.assign({ key: '7bbd202ca9e19727e7514abbe073687d982f80c3', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
195
198
  zIndex: `${20000 + this.overlayIndex}`,
196
- }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: 'bcfa5b7ffb5c265ef54caa114e697ada11f20c12', tappable: this.backdropDismiss }), h("div", { key: '207ae95b5365ce1d76170a05bdf8c83c3ba5de42', tabindex: "0" }), h("div", { key: 'bf2b4e8d57c822a4ea2bbe6c34b1b2f2067e4c02', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '9c4841eb03ca1378c5abc1e3aafbbcfaaa43c345', class: "action-sheet-container" }, h("div", { key: 'fa438b8663f5d30852e5967da0471489efa783b2', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { key: '2c600f1cd8314d65137fb1bfa180312b4791121a', id: headerID, class: {
199
+ }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '23344a9221a2e6720d7b9de5249dc37256cafa7b', tappable: this.backdropDismiss }), h("div", { key: 'd46361bb5cdc32a7922dcf76b566f358a6174bfa', tabindex: "0" }), h("div", { key: '136c3f2e77c8a2eac8e9ae4bb13d735e1d62598d', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '6168ea8b2be42020b2edeb8ff3a0f3d1254be37a', class: "action-sheet-container" }, h("div", { key: '29b9e6619dc54574733a704d6bf885839151bd84', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { key: '536ce764bfddb3816ea3512d90f4acef2ccb8589', id: headerID, class: {
197
200
  'action-sheet-title': true,
198
201
  'action-sheet-has-sub-title': this.subHeader !== undefined,
199
- } }, header, this.subHeader && h("div", { key: 'a98d6a3f7948733de22a07432e56255f11243b7b', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && h("ion-ripple-effect", null))))), cancelButton && (h("div", { key: '5c5abd0e0b3d486ba2bfe437e28a23b2c7c4c955', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: '520a23bbbe6c7436f5bc58bad162d7894b870e54' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: '28c90f66786ee82316adc6cfd68d322d2038357d', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: 'fd49fcea260c7addc9b07718eeb02d4fa6e4d900', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", { key: 'c83f636e171fe77635a4fce2b97161447e10546a' })))))), h("div", { key: 'd304920fc7cb006b87542183a3224a7e460abd3d', tabindex: "0" })));
202
+ } }, header, this.subHeader && h("div", { key: '6d888219145824fd36cdfe0d3c8388bbf2769777', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && h("ion-ripple-effect", null))))), cancelButton && (h("div", { key: '46f98f0ed5a9bdb3e35feb9ae71c4489c17b7d77', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: 'e3c457bced8ad5f692e48de26e65f731fd631b4f' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: '4cba6dc559f734ecc852e024959210cd0dd25354', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: '9df64989aad1b4d1e75edf4d37ab208965cfe37f', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", { key: '558089275a29177cefdb2e38eefc9b5c8b62872b' })))))), h("div", { key: 'fa4df6e043b00a6e4126dbc71cb344cfc2b2e7bc', tabindex: "0" })));
200
203
  }
201
204
  static get is() { return "ion-action-sheet"; }
202
205
  static get encapsulation() { return "scoped"; }
package/dist/collection/components/loading/loading.js CHANGED
@@ -65,11 +65,14 @@ export class Loading {
65
65
  this.triggerChanged();
66
66
  }
67
67
  componentWillLoad() {
68
+ var _a;
68
69
  if (this.spinner === undefined) {
69
70
  const mode = getIonMode(this);
70
71
  this.spinner = config.get('loadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
71
72
  }
72
- setOverlayId(this.el);
73
+ if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
74
+ setOverlayId(this.el);
75
+ }
73
76
  }
74
77
  componentDidLoad() {
75
78
  /**
@@ -158,9 +161,9 @@ export class Loading {
158
161
  * Otherwise, don't set aria-labelledby.
159
162
  */
160
163
  const ariaLabelledBy = message !== undefined ? msgId : null;
161
- return (h(Host, Object.assign({ key: '4610b316b10a4df3416d0e83062935f3079baff2', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
164
+ return (h(Host, Object.assign({ key: 'fb3d2cd7cd0539ed6540d8be50e243c7916b3ca2', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
162
165
  zIndex: `${40000 + this.overlayIndex}`,
163
- }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: 'd07d0759ed13093c4c4fe06be442dde4bd9c2c31', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'ed3ec8b48f049b592fbea9767cc3d448dc037938', tabindex: "0" }), h("div", { key: 'c515f3badf149d83c1d67374ef3507415fe51422', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '265d1673c2deb751aeca285f5a18863bb629ca5e', class: "loading-spinner" }, h("ion-spinner", { key: '155bf7c92f6d7afd8edbb39f2b47ad05b7d503f1', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: 'b0e21df5cf54f9b48a218a03543d8c86f5406522', tabindex: "0" })));
166
+ }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: 'c8bd30782f3040b1b80e88aa924861e439d40754', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '4ebfbb67c92e8eb56c27dd7c199b35bf6be1cf63', tabindex: "0" }), h("div", { key: '9492723cd87f1ef75534e449d4bc2b2deb0cb3cc', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: 'd9eb42454e48c82704d974a68b80ceb4de990417', class: "loading-spinner" }, h("ion-spinner", { key: 'cdb046bad89872f4208ae466979315652766bf3a', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: '412d1bb537dafa6e6863d07ddc15f5969fe0617d', tabindex: "0" })));
164
167
  }
165
168
  static get is() { return "ion-loading"; }
166
169
  static get encapsulation() { return "scoped"; }
package/dist/collection/components/modal/modal.js CHANGED
@@ -132,6 +132,7 @@ export class Modal {
132
132
  this.triggerController.removeClickListener();
133
133
  }
134
134
  componentWillLoad() {
135
+ var _a;
135
136
  const { breakpoints, initialBreakpoint, el, htmlAttributes } = this;
136
137
  const isSheetModal = (this.isSheetModal = breakpoints !== undefined && initialBreakpoint !== undefined);
137
138
  const attributesToInherit = ['aria-label', 'role'];
@@ -173,7 +174,9 @@ export class Modal {
173
174
  if (breakpoints !== undefined && initialBreakpoint !== undefined && !breakpoints.includes(initialBreakpoint)) {
174
175
  printIonWarning('Your breakpoints array must include the initialBreakpoint value.');
175
176
  }
176
- setOverlayId(el);
177
+ if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
178
+ setOverlayId(this.el);
179
+ }
177
180
  }
178
181
  componentDidLoad() {
179
182
  /**
@@ -563,18 +566,18 @@ export class Modal {
563
566
  const mode = getIonMode(this);
564
567
  const isCardModal = presentingElement !== undefined && mode === 'ios';
565
568
  const isHandleCycle = handleBehavior === 'cycle';
566
- return (h(Host, Object.assign({ key: 'fe6fd17cf857127f89d652b9aa3e9473d28c55db', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
569
+ return (h(Host, Object.assign({ key: '013ba4864ca4d2c1052c512f6a4b0732b8decff7', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
567
570
  zIndex: `${20000 + this.overlayIndex}`,
568
- }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), h("ion-backdrop", { key: '0f3a31363c2717e5483bc0412c25804897d4aff8', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '0e5ed59162ff08fe0a9f757e06bdacc75f65c0ed', class: "modal-shadow" }), h("div", Object.assign({ key: '35cdbe2238765e5f346ad7be64f7eefa8c78f0c0',
571
+ }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), h("ion-backdrop", { key: '498b1c0a03836d6799dcf3b8e9315805c70f6480', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'ce22e4caf1096e87248926fe2477f0d5a4c8a5cf', class: "modal-shadow" }), h("div", Object.assign({ key: '540e47b15d8290166c39b022c725182114a75682',
569
572
  /*
570
573
  role and aria-modal must be used on the
571
574
  same element. They must also be set inside the
572
575
  shadow DOM otherwise ion-button will not be highlighted
573
576
  when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
574
577
  */
575
- role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '7a4031eaebf9a098f4c4220a5fe9d1c25cc0ec92', class: "modal-handle",
578
+ role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: 'f3b352ec9a63a7ec801462aacfd8295b4302d115', class: "modal-handle",
576
579
  // Prevents the handle from receiving keyboard focus when it does not cycle
577
- tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), h("slot", { key: '534adc8e5bd850199fe2e9e16f0e7c19217d8486' }))));
580
+ tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), h("slot", { key: '31a3f58f4c733ffdf736523c154200874a96b1d0' }))));
578
581
  }
579
582
  static get is() { return "ion-modal"; }
580
583
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/picker-legacy/picker.js CHANGED
@@ -69,7 +69,10 @@ export class Picker {
69
69
  this.triggerController.removeClickListener();
70
70
  }
71
71
  componentWillLoad() {
72
- setOverlayId(this.el);
72
+ var _a;
73
+ if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
74
+ setOverlayId(this.el);
75
+ }
73
76
  }
74
77
  componentDidLoad() {
75
78
  printIonWarning('ion-picker-legacy and ion-picker-legacy-column have been deprecated in favor of new versions of the ion-picker and ion-picker-column components. These new components display inline with your page content allowing for more presentation flexibility than before.', this.el);
@@ -182,11 +185,11 @@ export class Picker {
182
185
  render() {
183
186
  const { htmlAttributes } = this;
184
187
  const mode = getIonMode(this);
185
- return (h(Host, Object.assign({ key: '26e3144adcdf01605271d01e468bb4a75ce854b1', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
188
+ return (h(Host, Object.assign({ key: '3b163ca87354a3a4f302ff016d5affd0dc97bccc', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
186
189
  zIndex: `${20000 + this.overlayIndex}`,
187
190
  }, class: Object.assign({ [mode]: true,
188
191
  // Used internally for styling
189
- [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: 'fa212d21406606186cd95f8c7a4f119696ac8d4a', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '19ea889f65cb6a68a9db26cf9f83c6587cfcf07e', tabindex: "0" }), h("div", { key: '5fc0f5d26915ba353b9f0335946f94b6fda95e1e', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '3fa5bff4ac0013ef31845482a27a14caebbdcd2f', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: '2ff6376956d01dcd9ec01b8d6972dd4b37ffb1a1', class: "picker-columns" }, h("div", { key: '4adcef77429f10a3faa50b41d1eaf3404387997c', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: 'e0f37d3e9896eb2bc0f0aef4762a897130851963', class: "picker-below-highlight" }))), h("div", { key: '671bb7d0f487b0d7c7fa70388f8fa1de77448b9f', tabindex: "0" })));
192
+ [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: 'da4224447bdbcfbadd1bd63ebe7a7bfdb8aa3129', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '211475c859b7acf4d64556905c45993201d92d43', tabindex: "0" }), h("div", { key: 'c3b3674038155809caea84ae6348ff0d66897a64', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: 'a21757da70dc7864945a5751d9da3ca4bf87897b', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: '0220da1854d09ef22d2d9a32eaa3c3b222be5a0a', class: "picker-columns" }, h("div", { key: '55757c165ba9e38e56b4dee76a9b13d3ff8b21e6', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: '160092a46a48287bf75e5dfe3502f1755a2d0c70', class: "picker-below-highlight" }))), h("div", { key: 'e212db6cca7d75fc0eda0baf4312dd51b9b7a4ef', tabindex: "0" })));
190
193
  }
191
194
  static get is() { return "ion-picker-legacy"; }
192
195
  static get encapsulation() { return "scoped"; }