voyager-ionic-core 8.8.17 → 9.0.3

package/dist/collection/components/alert/alert.md.css

@@ -1,3 +1,167 @@
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+.action-sheet-button-label-has-rich-content,
+.alert-radio-label-has-rich-content,
+.alert-checkbox-label-has-rich-content,
+.select-option-label-has-rich-content {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+/**
+ * Outer label container has rich content
+ * (start, content, description, end) that needs the
+ * label to span the available row width.
+ */
+.action-sheet-button-label-has-rich-content,
+.alert-radio-label-has-rich-content,
+.alert-checkbox-label-has-rich-content,
+.select-option-content {
+  flex: 1;
+}
+
+.action-sheet-button-label-text,
+.alert-checkbox-label-text,
+.alert-radio-label-text,
+.select-option-label-text {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.select-option-start,
+.select-option-end {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.select-option-description {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 5px;
+  padding-bottom: 0;
+  display: block;
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  font-size: 0.75rem;
+}
+
+/**
+ * Non-rich labels are plain text and should ellipsize when they
+ * overflow the row. Rich-content labels switch to flex so the
+ * start / content / end pieces can lay out side-by-side and wrap.
+ */
+.select-option-label:not(.select-option-label-has-rich-content) {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.select-option-label-has-rich-content {
+  display: flex;
+  align-items: center;
+}
+
+ion-radio.select-option-has-rich-content::part(label),
+ion-checkbox.select-option-has-rich-content::part(label),
+.select-option-content {
+  flex: 1;
+  /**
+   * Let rich content wrap instead of inheriting the label part's
+   * single-line truncation, so arbitrary slotted elements render
+   * without clipping.
+   */
+  white-space: normal;
+}
+
+/**
+ * Cap slotted children so they can't stretch the option
+ * row out of proportion, keeping rows visually uniform
+ * regardless of the content.
+ */
+.select-option-start > ion-avatar,
+.select-option-end > ion-avatar {
+  width: 40px;
+  height: 40px;
+}
+
+.select-option-start > ion-icon,
+.select-option-end > ion-icon {
+  font-size: 24px;
+}
+
+.select-option-start > ion-img,
+.select-option-start > img,
+.select-option-start > svg,
+.select-option-start > ion-thumbnail,
+.select-option-end > ion-img,
+.select-option-end > img,
+.select-option-end > svg,
+.select-option-end > ion-thumbnail {
+  width: 56px;
+  height: 56px;
+}
+
+.select-option-start > video,
+.select-option-end > video {
+  width: 114px;
+  height: 56px;
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -242,6 +406,39 @@
   min-height: inherit;
 }
 
+/**
+ * Label is on the right of the radio in LTR and
+ * on the left in RTL.
+ */
+.radio-label-placement-start,
+.checkbox-label-placement-start {
+  flex-direction: row-reverse;
+}
+
+/**
+ * Label is on the left of the radio in LTR and
+ * on the right in RTL.
+ */
+.radio-label-placement-end,
+.checkbox-label-placement-end {
+  flex-direction: row;
+}
+
+.radio-justify-start,
+.checkbox-justify-start {
+  justify-content: start;
+}
+
+.radio-justify-end,
+.checkbox-justify-end {
+  justify-content: end;
+}
+
+.radio-justify-space-between,
+.checkbox-justify-space-between {
+  justify-content: space-between;
+}
+
 .alert-input-disabled,
 .alert-checkbox-button-disabled .alert-button-inner,
 .alert-radio-button-disabled .alert-button-inner {
@@ -419,10 +616,10 @@ textarea.alert-input {
 }
 
 .alert-head {
-  -webkit-padding-start: 23px;
-  padding-inline-start: 23px;
-  -webkit-padding-end: 23px;
-  padding-inline-end: 23px;
+  -webkit-padding-start: 24px;
+  padding-inline-start: 24px;
+  -webkit-padding-end: 24px;
+  padding-inline-end: 24px;
   padding-top: 20px;
   padding-bottom: 15px;
   text-align: start;
@@ -522,30 +719,56 @@ textarea.alert-input {
 }
 
 .alert-radio-label {
-  -webkit-padding-start: 52px;
-  padding-inline-start: 52px;
-  -webkit-padding-end: 26px;
-  padding-inline-end: 26px;
   padding-top: 13px;
   padding-bottom: 13px;
-  flex: 1;
+  max-width: calc(100% - 20px);
   color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
   font-size: 1rem;
 }
 
+.radio-label-placement-end .alert-radio-label {
+  /**
+   * The label's inline padding clears space for the icon on the icon's side.
+   * When the label is placed at the end, the icon is at the start, so the
+   * larger padding clears it on the start side.
+   */
+  -webkit-padding-start: 56px;
+  padding-inline-start: 56px;
+  -webkit-padding-end: 24px;
+  padding-inline-end: 24px;
+}
+
+.radio-label-placement-start .alert-radio-label {
+  /**
+   * The label's inline padding clears space for the icon on the icon's side.
+   * When the label is placed at the start, the icon is at the end, so the
+   * larger padding clears it on the end side.
+   */
+  -webkit-padding-start: 24px;
+  padding-inline-start: 24px;
+  -webkit-padding-end: 56px;
+  padding-inline-end: 56px;
+}
+
 .alert-radio-icon {
   top: 0;
   border-radius: 50%;
   display: block;
   position: relative;
+  flex-shrink: 0;
   width: 20px;
   height: 20px;
   border-width: 2px;
   border-style: solid;
   border-color: var(--ion-color-step-550, var(--ion-background-color-step-550, #737373));
 }
-.alert-radio-icon {
-  inset-inline-start: 26px;
+
+.radio-label-placement-end .alert-radio-icon {
+  inset-inline-start: 24px;
+}
+
+.radio-label-placement-start .alert-radio-icon {
+  inset-inline-end: 24px;
 }
 
 .alert-radio-inner {
@@ -575,22 +798,42 @@ textarea.alert-input {
 }
 
 .alert-checkbox-label {
-  -webkit-padding-start: 53px;
-  padding-inline-start: 53px;
-  -webkit-padding-end: 26px;
-  padding-inline-end: 26px;
   padding-top: 13px;
   padding-bottom: 13px;
-  flex: 1;
-  width: calc(100% - 53px);
+  max-width: calc(100% - 16px);
   color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
   font-size: 1rem;
 }
 
+.checkbox-label-placement-end .alert-checkbox-label {
+  /**
+   * The label's inline padding clears space for the icon on the icon's side.
+   * When the label is placed at the end, the icon is at the start, so the
+   * larger padding clears it on the start side.
+   */
+  -webkit-padding-start: 56px;
+  padding-inline-start: 56px;
+  -webkit-padding-end: 24px;
+  padding-inline-end: 24px;
+}
+
+.checkbox-label-placement-start .alert-checkbox-label {
+  /**
+   * The label's inline padding clears space for the icon on the icon's side.
+   * When the label is placed at the start, the icon is at the end, so the
+   * larger padding clears it on the end side.
+   */
+  -webkit-padding-start: 24px;
+  padding-inline-start: 24px;
+  -webkit-padding-end: 56px;
+  padding-inline-end: 56px;
+}
+
 .alert-checkbox-icon {
   top: 0;
   border-radius: 2px;
   position: relative;
+  flex-shrink: 0;
   width: 16px;
   height: 16px;
   border-width: 2px;
@@ -598,8 +841,13 @@ textarea.alert-input {
   border-color: var(--ion-color-step-550, var(--ion-background-color-step-550, #737373));
   contain: strict;
 }
-.alert-checkbox-icon {
-  inset-inline-start: 26px;
+
+.checkbox-label-placement-end .alert-checkbox-icon {
+  inset-inline-start: 24px;
+}
+
+.checkbox-label-placement-start .alert-checkbox-icon {
+  inset-inline-end: 24px;
 }
 
 [aria-checked=true] .alert-checkbox-icon {
@@ -658,7 +906,7 @@ textarea.alert-input {
   overflow: hidden;
 }
 
-.alert-button-inner {
+.alert-button-group .alert-button-inner {
   justify-content: flex-end;
 }
 

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -78,7 +78,7 @@ export class Breadcrumb {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': clickable,
                 'ion-focusable': clickable,
-            }) }, h(TagType, Object.assign({ key: '479feb845f4a6d8009d5422b33eb423730b9722b' }, attrs, { class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("slot", { key: '3c5dcaeb0d258235d1b7707868026ff1d1404099', name: "start" }), h("slot", { key: 'f1cfb934443cd97dc220882c5e3596ea879d66cf' }), h("slot", { key: '539710121b5b1f3ee8d4c24a9651b67c2ae08add', name: "end" })), showCollapsedIndicator && (h("button", { key: 'ed53a95ccd89022c8b7bee0658a221ec62a5c73b', part: "collapsed-indicator", "aria-label": "Show more breadcrumbs", onClick: () => this.collapsedIndicatorClick(), ref: (collapsedEl) => (this.collapsedRef = collapsedEl), class: {
+            }) }, h(TagType, { key: '479feb845f4a6d8009d5422b33eb423730b9722b', ...attrs, class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, ...inheritedAttributes }, h("slot", { key: '3c5dcaeb0d258235d1b7707868026ff1d1404099', name: "start" }), h("slot", { key: 'f1cfb934443cd97dc220882c5e3596ea879d66cf' }), h("slot", { key: '539710121b5b1f3ee8d4c24a9651b67c2ae08add', name: "end" })), showCollapsedIndicator && (h("button", { key: 'ed53a95ccd89022c8b7bee0658a221ec62a5c73b', part: "collapsed-indicator", "aria-label": "Show more breadcrumbs", onClick: () => this.collapsedIndicatorClick(), ref: (collapsedEl) => (this.collapsedRef = collapsedEl), class: {
                 'breadcrumbs-collapsed-indicator': true,
             } }, h("ion-icon", { key: 'a849e1142a86f06f207cf11662fa2a560ab7fc6a', "aria-hidden": "true", icon: ellipsisHorizontal, lazy: false }))), showSeparator && (
         /**

package/dist/collection/components/breadcrumbs/breadcrumbs.js

@@ -99,7 +99,7 @@ export class Breadcrumbs {
     onCollapsedClick(ev) {
         const breadcrumbs = this.getBreadcrumbs();
         const collapsedBreadcrumbs = breadcrumbs.filter((breadcrumb) => breadcrumb.collapsed);
-        this.ionCollapsedClick.emit(Object.assign(Object.assign({}, ev.detail), { collapsedBreadcrumbs }));
+        this.ionCollapsedClick.emit({ ...ev.detail, collapsedBreadcrumbs });
     }
     maxItemsChanged() {
         this.resetActiveBreadcrumb();

package/dist/collection/components/button/button.js

@@ -93,7 +93,10 @@ export class Button {
      * @param propName
      */
     onAriaChanged(newValue, _oldValue, propName) {
-        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [propName]: newValue });
+        this.inheritedAttributes = {
+            ...this.inheritedAttributes,
+            [propName]: newValue,
+        };
         forceUpdate(this);
     }
     /**
@@ -248,7 +251,7 @@ export class Button {
                 'button-disabled': disabled,
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h(TagType, Object.assign({ key: '53f4cb366bac796ab38f609e858bc1a55fce7641' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: '40e127fc11c889e77b8bf02e8714f0dea83bfce7', class: "button-inner" }, h("slot", { key: 'e11c8c86d3f0894658a8999129425c9c111f5540', name: "icon-only", onSlotchange: this.slotChanged }), h("slot", { key: '105ea9259ea17036359e6fe7eced8b267ab8e0f6', name: "start" }), h("slot", { key: '0d7b0966e328a5b10b0562dacbd638dfd08d92af' }), h("slot", { key: 'c542b40685802464d69f57ecc0a7c3465d24a417', name: "end" })), mode === 'md' && h("ion-ripple-effect", { key: '46df4cbeb057b0a8daab92226121d8bbb8c0ee07', type: this.rippleType }))));
+            }) }, h(TagType, { key: '53f4cb366bac796ab38f609e858bc1a55fce7641', ...attrs, class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, ...inheritedAttributes }, h("span", { key: '40e127fc11c889e77b8bf02e8714f0dea83bfce7', class: "button-inner" }, h("slot", { key: 'e11c8c86d3f0894658a8999129425c9c111f5540', name: "icon-only", onSlotchange: this.slotChanged }), h("slot", { key: '105ea9259ea17036359e6fe7eced8b267ab8e0f6', name: "start" }), h("slot", { key: '0d7b0966e328a5b10b0562dacbd638dfd08d92af' }), h("slot", { key: 'c542b40685802464d69f57ecc0a7c3465d24a417', name: "end" })), mode === 'md' && h("ion-ripple-effect", { key: '46df4cbeb057b0a8daab92226121d8bbb8c0ee07', type: this.rippleType }))));
     }
     static get is() { return "ion-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card/card.js

@@ -52,7 +52,7 @@ export class Card {
                 rel: this.rel,
                 target: this.target,
             };
-        return (h(TagType, Object.assign({}, attrs, inheritedAriaAttributes, { class: "card-native", part: "native", disabled: this.disabled, onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation) }), h("slot", null), clickable && mode === 'md' && h("ion-ripple-effect", null)));
+        return (h(TagType, { ...attrs, ...inheritedAriaAttributes, class: "card-native", part: "native", disabled: this.disabled, onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation) }, h("slot", null), clickable && mode === 'md' && h("ion-ripple-effect", null)));
     }
     render() {
         const mode = getIonMode(this);

package/dist/collection/components/checkbox/checkbox.js

@@ -165,7 +165,9 @@ export class Checkbox {
         this.itemFocusObserver = createItemMultipleInputsObserver(el, () => forceUpdate(this));
     }
     componentWillLoad() {
-        this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
+        this.inheritedAttributes = {
+            ...inheritAriaAttributes(this.el),
+        };
         this.hintTextId = this.getHintTextId();
     }
     disconnectedCallback() {
@@ -230,7 +232,7 @@ export class Checkbox {
                 [`checkbox-justify-${justify}`]: justify !== undefined,
                 [`checkbox-alignment-${alignment}`]: alignment !== undefined,
                 [`checkbox-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: 'acca2f5b0a37aa70930b2f74ff4857939b2be2b0', class: "checkbox-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: 'f46e409383e9d3ffc3daae8e7cd4159427d4c8fe', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required }, inheritedAttributes)), h("div", { key: '69d8bf21c781cd9b1f56ceae40ff7911e6f5adfe', class: {
+            }) }, h("label", { key: 'acca2f5b0a37aa70930b2f74ff4857939b2be2b0', class: "checkbox-wrapper", htmlFor: inputId }, h("input", { key: 'f46e409383e9d3ffc3daae8e7cd4159427d4c8fe', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required, ...inheritedAttributes }), h("div", { key: '69d8bf21c781cd9b1f56ceae40ff7911e6f5adfe', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabelContent,
             }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '3c444ab897456c522588fc6cee616030f16b0586' }), this.renderHintText()), h("div", { key: '0a18dfe7a68a8eec08ce8764bd2c8a59c4a38802', class: "native-wrapper" }, h("svg", { key: '56b298b54ebc88a429a9dd67b8dabd7063759b3a', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container", "aria-hidden": "true" }, path)))));

package/dist/collection/components/col/col.js

@@ -5,7 +5,6 @@ import { Host, forceUpdate, h } from "@stencil/core";
 import { matchBreakpoint } from "../../utils/media";
 import { getIonMode } from "../../global/ionic-global";
 const win = typeof window !== 'undefined' ? window : undefined;
-// eslint-disable-next-line @typescript-eslint/prefer-optional-chain
 const SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));
 const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
 export class Col {
@@ -85,9 +84,14 @@ export class Col {
     render() {
         const isRTL = document.dir === 'rtl';
         const mode = getIonMode(this);
-        return (h(Host, { key: '32ed75d81dd09d9bc8999f6d42e5b3cb99c84d91', class: {
+        return (h(Host, { key: 'e12293a4315cb474bbde73421dd0b4129f1df1cc', class: {
                 [mode]: true,
-            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '38f8d0440c20cc6d1b1d6a654d07f16de61d8134' })));
+            }, style: {
+                ...this.calculateOffset(isRTL),
+                ...this.calculatePull(isRTL),
+                ...this.calculatePush(isRTL),
+                ...this.calculateSize(),
+            } }, h("slot", { key: '869317ea6574111a57a7a9d096c53d264c335d28' })));
     }
     static get is() { return "ion-col"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/content/content.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Build, Host, forceUpdate, h, readTask } from "@stencil/core";
+import { Build, Host, forceUpdate, h, readTask, } from "@stencil/core";
 import { componentOnReady, hasLazyBuild, inheritAriaAttributes } from "../../utils/helpers";
 import { isPlatform } from "../../utils/platform";
 import { isRTL } from "../../utils/rtl/index";
@@ -75,6 +75,9 @@ export class Content {
          */
         this.scrollEvents = false;
     }
+    fullscreenChanged() {
+        this.setupFullscreenResizeObserver();
+    }
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
@@ -114,6 +117,12 @@ export class Content {
                 closestTabs.addEventListener('ionTabBarLoaded', this.tabsLoadCallback);
             }
         }
+        // Re-observe on reattach, since componentDidLoad only fires once.
+        this.setupFullscreenResizeObserver();
+    }
+    componentDidLoad() {
+        // The custom elements build assigns fullscreen after connectedCallback.
+        this.setupFullscreenResizeObserver();
     }
     disconnectedCallback() {
         this.onScrollEnd();
@@ -135,6 +144,42 @@ export class Content {
             clearTimeout(this.resizeTimeout);
             this.resizeTimeout = null;
         }
+        this.destroyFullscreenResizeObserver();
+    }
+    /**
+     * Header and footer sizes can change after load without a window resize
+     * firing, so the `resize` listener alone misses those changes.
+     *
+     * Popover content is excluded because `contain: none` lets its offsets drive
+     * the host's own height, which would feed back into the observer.
+     */
+    setupFullscreenResizeObserver() {
+        if (!Build.isBrowser || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        if (!this.fullscreen || hostContext('ion-popover', this.el)) {
+            this.destroyFullscreenResizeObserver();
+            return;
+        }
+        if (this.fullscreenResizeObserver !== undefined) {
+            return;
+        }
+        this.fullscreenResizeObserver = new ResizeObserver(() => {
+            // A hidden page reports a 0x0 box, which would zero the offsets. Same
+            // reasoning as the guard in onResize, minus its debounce so the
+            // correction lands in the next frame instead of 100ms later.
+            if (this.el.offsetParent === null) {
+                return;
+            }
+            this.resize();
+        });
+        this.fullscreenResizeObserver.observe(this.el);
+    }
+    destroyFullscreenResizeObserver() {
+        if (this.fullscreenResizeObserver !== undefined) {
+            this.fullscreenResizeObserver.disconnect();
+            this.fullscreenResizeObserver = undefined;
+        }
     }
     /**
      * Rotating certain devices can update
@@ -373,7 +418,7 @@ export class Content {
         const forceOverscroll = this.shouldForceOverscroll();
         const transitionShadow = mode === 'ios';
         this.resize();
-        return (h(Host, Object.assign({ key: '8c1bc4a4df8698d3884741eb38512dc059210c50', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
+        return (h(Host, { key: '9551c759df407b10d809171641fc6e8f14d92219', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
                 [mode]: true,
                 'content-fullscreen': this.fullscreen,
                 'content-sizing': hostContext('ion-popover', this.el),
@@ -382,12 +427,12 @@ export class Content {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, inheritedAttributes), h("div", { key: '5e7412549b51ef7543d9378ecab9aac6bc461588', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '33f6fbf7e1e027c7cbd2dda95b487f18dc648cef', class: {
+            }, ...inheritedAttributes }, h("div", { key: 'c6de8fd226f0d10a534eb107fe032ac155fbe68e', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '082fc2936061360060b48221ecb1c864a3711fa0', class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,
                 overscroll: (scrollX || scrollY) && forceOverscroll,
-            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '00c8fe7b9e73533c702273c9457d274195d54e98' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '0d2286206facb22696a9ca7e74a3f6b7d2397aab' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
     }
     static get is() { return "ion-content"; }
     static get encapsulation() { return "shadow"; }
@@ -813,6 +858,12 @@ export class Content {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "fullscreen",
+                "methodName": "fullscreenChanged"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "resize",
@@ -824,12 +875,11 @@ export class Content {
     }
 }
 const getParentElement = (el) => {
-    var _a;
     if (el.parentElement) {
         // normal element with a parent element
         return el.parentElement;
     }
-    if ((_a = el.parentNode) === null || _a === void 0 ? void 0 : _a.host) {
+    if (el.parentNode?.host) {
         // shadow dom's document fragment
         return el.parentNode.host;
     }