voyager-ionic-core 7.6.0 → 7.6.3

package/dist/collection/components/radio/test/a11y/radio.e2e.js

@@ -16,7 +16,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         });
     });
     test.describe(title('radio: keyboard navigation'), () => {
-        test.beforeEach(async ({ page }) => {
+        test.beforeEach(async ({ page, browserName }) => {
             await page.setContent(`
       <ion-app>
         <ion-content>
@@ -55,6 +55,20 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         </ion-content>
       </ion-app>
     `, config);
+            if (browserName === 'webkit') {
+                const radio = page.locator('#first-group ion-radio').first();
+                /**
+                 * Sometimes Safari does not focus the first radio.
+                 * This is a workaround to ensure the first radio is focused.
+                 *
+                 * Wait for the first radio to be rendered before tabbing.
+                 * This is necessary because the first radio may not be rendered
+                 * when the page first loads.
+                 *
+                 * This would cause the first radio to be skipped when tabbing.
+                 */
+                await radio.waitFor();
+            }
         });
         test('tabbing should switch between radio groups', async ({ page, pageUtils }) => {
             const firstGroupRadios = page.locator('#first-group ion-radio');

package/dist/collection/components/radio/test/legacy/a11y/radio.e2e.js

@@ -8,9 +8,22 @@ import { configs, test } from "../../../../../utils/test/playwright/index";
  */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
     test.describe(title('radio: a11y'), () => {
-        test.beforeEach(async ({ page, skip }) => {
-            skip.browser('webkit', 'Tabbing is flaky in Safari');
+        test.beforeEach(async ({ page, browserName }) => {
             await page.goto(`/src/components/radio/test/legacy/a11y`, config);
+            if (browserName === 'webkit') {
+                const radio = page.locator('#first-group ion-radio').first();
+                /**
+                 * Sometimes Safari does not focus the first radio.
+                 * This is a workaround to ensure the first radio is focused.
+                 *
+                 * Wait for the first radio to be rendered before tabbing.
+                 * This is necessary because the first radio may not be rendered
+                 * when the page first loads.
+                 *
+                 * This would cause the first radio to be skipped when tabbing.
+                 */
+                await radio.waitFor();
+            }
         });
         test('tabbing should switch between radio groups', async ({ page, pageUtils }) => {
             const firstGroupRadios = page.locator('#first-group ion-radio');

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

@@ -33,7 +33,15 @@ export class RadioGroup {
              * using the `name` attribute.
              */
             const selectedRadio = ev.target && ev.target.closest('ion-radio');
-            if (selectedRadio && selectedRadio.disabled === false) {
+            /**
+             * Our current disabled prop definition causes Stencil to mark it
+             * as optional. While this is not desired, fixing this behavior
+             * in Stencil is a significant breaking change, so this effort is
+             * being de-risked in STENCIL-917. Until then, we compromise
+             * here by checking for falsy `disabled` values instead of strictly
+             * checking `disabled === false`.
+             */
+            if (selectedRadio && !selectedRadio.disabled) {
                 const currentValue = this.value;
                 const newValue = selectedRadio.value;
                 if (newValue !== currentValue) {

package/dist/collection/components/range/range.js

@@ -718,7 +718,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A callback used to format the pin text.\nBy default the pin text is set to `Math.round(value)`."
+                    "text": "A callback used to format the pin text.\nBy default the pin text is set to `Math.round(value)`.\n\nSee https://ionicframework.com/docs/troubleshooting/runtime#accessing-this\nif you need to access `this` from within the callback."
                 },
                 "defaultValue": "(value: number): number => Math.round(value)"
             },

package/dist/collection/components/refresher/refresher.js

@@ -8,6 +8,9 @@ import { clamp, componentOnReady, getElementRoot, raf, transitionEndAsync } from
 import { ImpactStyle, hapticImpact } from "../../utils/native/haptic";
 import { getIonMode } from "../../global/ionic-global";
 import { createPullingAnimation, createSnapBackAnimation, getRefresherAnimationType, handleScrollWhilePulling, handleScrollWhileRefreshing, setSpinnerOpacity, shouldUseNativeRefresher, translateElement, } from "./refresher.utils";
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ */
 export class Refresher {
     constructor() {
         this.appliedStyles = false;

package/dist/collection/components/refresher/refresher.utils.js

@@ -4,7 +4,6 @@
 import { writeTask } from "@stencil/core";
 import { createAnimation } from "../../utils/animation/animation";
 import { clamp, componentOnReady, transitionEndAsync } from "../../utils/helpers";
-import { isPlatform } from "../../utils/platform";
 export const getRefresherAnimationType = (contentEl) => {
     const previousSibling = contentEl.previousElementSibling;
     const hasHeader = previousSibling !== null && previousSibling.tagName === 'ION-HEADER';
@@ -162,6 +161,24 @@ export const translateElement = (el, value, duration = 200) => {
 };
 // Utils
 // -----------------------------
+/**
+ * In order to use the native iOS refresher the device must support rubber band scrolling.
+ * As part of this, we need to exclude Desktop Safari because it has a slightly different rubber band effect that is not compatible with the native refresher in Ionic.
+ *
+ * We also need to be careful not to include devices that spoof their user agent.
+ * For example, when using iOS emulation in Chrome the user agent will be spoofed such that
+ * navigator.maxTouchPointer > 0. To work around this,
+ * we check to see if the apple-pay-logo is supported as a named image which is only
+ * true on Apple devices.
+ *
+ * We previously checked referencEl.style.webkitOverflowScrolling to explicitly check
+ * for rubber band support. However, this property was removed on iPadOS and it's possible
+ * that this will be removed on iOS in the future too.
+ *
+ */
+export const supportsRubberBandScrolling = () => {
+    return navigator.maxTouchPoints > 0 && CSS.supports('background: -webkit-named-image(apple-pay-logo-black)');
+};
 export const shouldUseNativeRefresher = async (referenceEl, mode) => {
     const refresherContent = referenceEl.querySelector('ion-refresher-content');
     if (!refresherContent) {
@@ -172,14 +189,5 @@ export const shouldUseNativeRefresher = async (referenceEl, mode) => {
     const refreshingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-refreshing ion-spinner');
     return (pullingSpinner !== null &&
         refreshingSpinner !== null &&
-        /**
-         * We use webkitOverflowScrolling for feature detection with rubber band scrolling
-         * on iOS. When doing referenceEl.style, webkitOverflowScrolling is undefined on non-iOS platforms.
-         * However, it will be the empty string on iOS.
-         * Note that we do not use getPropertyValue (and thus need to cast as any) because calling
-         * getPropertyValue('-webkit-overflow-scrolling') will return the empty string if it is not
-         * set on the element, even if the platform does not support that.
-         */
-        ((mode === 'ios' && isPlatform('mobile') && referenceEl.style.webkitOverflowScrolling !== undefined) ||
-            mode === 'md'));
+        ((mode === 'ios' && supportsRubberBandScrolling()) || mode === 'md'));
 };

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

@@ -3,11 +3,11 @@
  */
 import { Host, h } from "@stencil/core";
 import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
-import { isPlatform } from "../../utils/platform";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { arrowDown, caretBackSharp } from "ionicons/icons";
 import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
+import { supportsRubberBandScrolling } from "../refresher/refresher.utils";
 import { SPINNERS } from "../spinner/spinner-configs";
 export class RefresherContent {
     constructor() {
@@ -19,9 +19,15 @@ export class RefresherContent {
     }
     componentWillLoad() {
         if (this.pullingIcon === undefined) {
+            /**
+             * The native iOS refresher uses a spinner instead of
+             * an icon, so we need to see if this device supports
+             * the native iOS refresher.
+             */
+            const hasRubberBandScrolling = supportsRubberBandScrolling();
             const mode = getIonMode(this);
-            const overflowRefresher = this.el.style.webkitOverflowScrolling !== undefined ? 'lines' : arrowDown;
-            this.pullingIcon = config.get('refreshingIcon', mode === 'ios' && isPlatform('mobile') ? config.get('spinner', overflowRefresher) : 'circular');
+            const overflowRefresher = hasRubberBandScrolling ? 'lines' : arrowDown;
+            this.pullingIcon = config.get('refreshingIcon', mode === 'ios' && hasRubberBandScrolling ? config.get('spinner', overflowRefresher) : 'circular');
         }
         if (this.refreshingSpinner === undefined) {
             const mode = getIonMode(this);

package/dist/collection/components/select/select.ios.css

@@ -628,10 +628,12 @@ button {
 
 ::slotted([slot=start]) {
   margin-inline-end: 16px;
+  margin-inline-start: 0;
 }
 
 ::slotted([slot=end]) {
   margin-inline-start: 16px;
+  margin-inline-end: 0;
 }
 
 /**
@@ -764,4 +766,22 @@ button {
 
 :host(.select-disabled) {
   opacity: 0.3;
+}
+
+/**
+ * Slotted buttons have a lot of default padding that can
+ * cause them to look misaligned from other pieces such
+ * as the control's label, especially when using a clear
+ * fill. We also make them circular to ensure that non-
+ * clear buttons and the focus/hover state on clear ones
+ * don't look too crowded.
+ */
+::slotted(ion-button[slot=start].button-has-icon-only),
+::slotted(ion-button[slot=end].button-has-icon-only) {
+  --border-radius: 50%;
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-top: 0;
+  --padding-bottom: 0;
+  aspect-ratio: 1;
 }

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

@@ -628,10 +628,12 @@ button {
 
 ::slotted([slot=start]) {
   margin-inline-end: 16px;
+  margin-inline-start: 0;
 }
 
 ::slotted([slot=end]) {
   margin-inline-start: 16px;
+  margin-inline-end: 0;
 }
 
 /**
@@ -1350,4 +1352,23 @@ button {
 
 :host(.select-disabled) {
   opacity: 0.38;
+}
+
+/**
+ * Slotted buttons have a lot of default padding that can
+ * cause them to look misaligned from other pieces such
+ * as the control's label, especially when using a clear
+ * fill. We also make them circular to ensure that non-
+ * clear buttons and the focus/hover state on clear ones
+ * don't look too crowded.
+ */
+::slotted(ion-button[slot=start].button-has-icon-only),
+::slotted(ion-button[slot=end].button-has-icon-only) {
+  --border-radius: 50%;
+  --padding-start: 8px;
+  --padding-end: 8px;
+  --padding-top: 8px;
+  --padding-bottom: 8px;
+  aspect-ratio: 1;
+  min-height: 40px;
 }

package/dist/collection/components/select/test/slot/select.e2e.js

@@ -9,7 +9,9 @@ configs().forEach(({ title, screenshot, config }) => {
             await page.setContent(`
           <ion-select label-placement="start" fill="solid" placeholder="Select weight" label="Weight">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
-            <ion-label slot="end">lbs</ion-label>
+            <ion-button slot="end" aria-label="Show/hide password">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-select>
         `, config);
             const select = page.locator('ion-select');
@@ -19,7 +21,9 @@ configs().forEach(({ title, screenshot, config }) => {
             await page.setContent(`
           <ion-select label-placement="floating" fill="solid" placeholder="Select weight" label="Weight">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
-            <ion-label slot="end">lbs</ion-label>
+            <ion-button slot="end" aria-label="Show/hide password">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-select>
         `, config);
             const select = page.locator('ion-select');

package/dist/collection/components/split-pane/split-pane.ios.css

@@ -146,13 +146,21 @@
   top: 0;
   bottom: 0;
   position: relative;
-  /* stylelint-disable-next-line declaration-no-important */
-  box-shadow: none !important;
+  box-shadow: none;
   z-index: 0;
 }
 
 :host(.split-pane-visible) ::slotted(.split-pane-main) {
   flex: 1;
+  /**
+   * Content can overflow outside of a router outlet
+   * or a nav container to allow for the translucent
+   * tab bar effect to work. However, this can cause
+   * iOS page transitions to flow outside of the container
+   * and overlap the menu on larger viewports. As a result,
+   * we disable the overflow when that is the case.
+   */
+  overflow: hidden;
 }
 
 :host(.split-pane-visible) ::slotted(.split-pane-side:not(ion-menu)),

package/dist/collection/components/split-pane/split-pane.md.css

@@ -146,13 +146,21 @@
   top: 0;
   bottom: 0;
   position: relative;
-  /* stylelint-disable-next-line declaration-no-important */
-  box-shadow: none !important;
+  box-shadow: none;
   z-index: 0;
 }
 
 :host(.split-pane-visible) ::slotted(.split-pane-main) {
   flex: 1;
+  /**
+   * Content can overflow outside of a router outlet
+   * or a nav container to allow for the translucent
+   * tab bar effect to work. However, this can cause
+   * iOS page transitions to flow outside of the container
+   * and overlap the menu on larger viewports. As a result,
+   * we disable the overflow when that is the case.
+   */
+  overflow: hidden;
 }
 
 :host(.split-pane-visible) ::slotted(.split-pane-side:not(ion-menu)),

package/dist/collection/components/textarea/test/clear-on-edit/textarea.e2e.js

@@ -3,6 +3,7 @@
  */
 import { expect } from "@playwright/test";
 import { test, configs } from "../../../../utils/test/playwright/index";
+const IGNORED_KEYS = ['Tab', 'Shift', 'Meta', 'Alt', 'Control'];
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
     test.describe(title('textarea: clearOnEdit'), () => {
         test('should clear when typed into', async ({ page }) => {
@@ -21,5 +22,40 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.waitForChanges();
             await expect(textarea).toHaveJSProperty('value', 'abc');
         });
+        test('should not clear the textarea if it does not have an initial value when typing', async ({ page }) => {
+            await page.setContent(`<ion-textarea label="textarea" value="" clear-on-edit="true"></ion-textarea>`, config);
+            const textarea = page.locator('ion-textarea');
+            await textarea.click();
+            await textarea.type('hello world');
+            await expect(textarea).toHaveJSProperty('value', 'hello world');
+        });
+        IGNORED_KEYS.forEach((ignoredKey) => {
+            test(`should not clear when ${ignoredKey} is pressed`, async ({ page, skip }) => {
+                skip.browser((browserName) => browserName === 'firefox' && ignoredKey === 'Meta', 'Firefox incorrectly adds "OS" to the textarea when pressing the Meta key on Linux');
+                await page.setContent(`<ion-textarea value="abc" clear-on-edit="true" aria-label="textarea"></ion-textarea>`, config);
+                const textarea = page.locator('ion-textarea');
+                await textarea.locator('textarea').focus();
+                await page.keyboard.press(ignoredKey);
+                await page.waitForChanges();
+                await expect(textarea).toHaveJSProperty('value', 'abc');
+            });
+        });
+        test('should clear after when pressing valid key after pressing ignored key', async ({ page }) => {
+            test.info().annotations.push({
+                type: 'issue',
+                description: 'https://github.com/ionic-team/ionic-framework/issues/28633',
+            });
+            await page.setContent(`<ion-textarea value="abc" clear-on-edit="true" aria-label="textarea"></ion-textarea>`, config);
+            const textarea = page.locator('ion-textarea');
+            await textarea.locator('textarea').focus();
+            // ignored
+            await page.keyboard.press('Shift');
+            await page.waitForChanges();
+            await expect(textarea).toHaveJSProperty('value', 'abc');
+            // allowed
+            await page.keyboard.press('a');
+            await page.waitForChanges();
+            await expect(textarea).toHaveJSProperty('value', 'a');
+        });
     });
 });

package/dist/collection/components/textarea/test/slot/textarea.e2e.js

@@ -9,7 +9,9 @@ configs().forEach(({ title, screenshot, config }) => {
             await page.setContent(`
           <ion-textarea label-placement="start" fill="solid" value="100" label="Weight">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
-            <ion-label slot="end">lbs</ion-label>
+            <ion-button slot="end" aria-label="Show/hide password">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-textarea>
         `, config);
             const textarea = page.locator('ion-textarea');
@@ -19,7 +21,9 @@ configs().forEach(({ title, screenshot, config }) => {
             await page.setContent(`
           <ion-textarea label-placement="floating" fill="solid" value="100" label="Weight">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
-            <ion-label slot="end">lbs</ion-label>
+            <ion-button slot="end" aria-label="Show/hide password">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-textarea>
         `, config);
             const textarea = page.locator('ion-textarea');

package/dist/collection/components/textarea/textarea.ios.css

@@ -766,10 +766,12 @@
 
 ::slotted([slot=start]) {
   margin-inline-end: 16px;
+  margin-inline-start: 0;
 }
 
 ::slotted([slot=end]) {
   margin-inline-start: 16px;
+  margin-inline-end: 0;
 }
 
 /**
@@ -964,4 +966,22 @@
 :host(.legacy-textarea) .native-textarea[disabled],
 :host(.textarea-disabled) {
   opacity: 0.3;
+}
+
+/**
+ * Slotted buttons have a lot of default padding that can
+ * cause them to look misaligned from other pieces such
+ * as the control's label, especially when using a clear
+ * fill. We also make them circular to ensure that non-
+ * clear buttons and the focus/hover state on clear ones
+ * don't look too crowded.
+ */
+::slotted(ion-button[slot=start].button-has-icon-only),
+::slotted(ion-button[slot=end].button-has-icon-only) {
+  --border-radius: 50%;
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-top: 0;
+  --padding-bottom: 0;
+  aspect-ratio: 1;
 }

package/dist/collection/components/textarea/textarea.js

@@ -238,15 +238,38 @@ export class Textarea {
         if (!this.clearOnEdit) {
             return;
         }
+        /**
+         * The following keys do not modify the
+         * contents of the input. As a result, pressing
+         * them should not edit the textarea.
+         *
+         * We can't check to see if the value of the textarea
+         * was changed because we call checkClearOnEdit
+         * in a keydown listener, and the key has not yet
+         * been added to the textarea.
+         *
+         * Unlike ion-input, the "Enter" key does modify the
+         * textarea by adding a new line, so "Enter" is not
+         * included in the IGNORED_KEYS array.
+         */
+        const IGNORED_KEYS = ['Tab', 'Shift', 'Meta', 'Alt', 'Control'];
+        const pressedIgnoredKey = IGNORED_KEYS.includes(ev.key);
         /**
          * Clear the textarea if the control has not been previously cleared
          * during focus.
          */
-        if (!this.didTextareaClearOnEdit && this.hasValue() && ev.key !== 'Tab') {
+        if (!this.didTextareaClearOnEdit && this.hasValue() && !pressedIgnoredKey) {
             this.value = '';
             this.emitInputChange(ev);
         }
-        this.didTextareaClearOnEdit = true;
+        /**
+         * Pressing an IGNORED_KEYS first and
+         * then an allowed key will cause the input to not
+         * be cleared.
+         */
+        if (!pressedIgnoredKey) {
+            this.didTextareaClearOnEdit = true;
+        }
     }
     focusChange() {
         this.emitStyle();
@@ -825,7 +848,7 @@ Developers can use the "legacy" property to continue using the legacy form marku
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\"."
+                    "text": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".\n\nSee https://ionicframework.com/docs/troubleshooting/runtime#accessing-this\nif you need to access `this` from within the callback."
                 }
             },
             "errorText": {

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

@@ -766,10 +766,12 @@
 
 ::slotted([slot=start]) {
   margin-inline-end: 16px;
+  margin-inline-start: 0;
 }
 
 ::slotted([slot=end]) {
   margin-inline-start: 16px;
+  margin-inline-end: 0;
 }
 
 /**
@@ -1529,4 +1531,23 @@
 
 :host(.textarea-shape-round) {
   --border-radius: 16px;
+}
+
+/**
+ * Slotted buttons have a lot of default padding that can
+ * cause them to look misaligned from other pieces such
+ * as the control's label, especially when using a clear
+ * fill. We also make them circular to ensure that non-
+ * clear buttons and the focus/hover state on clear ones
+ * don't look too crowded.
+ */
+::slotted(ion-button[slot=start].button-has-icon-only),
+::slotted(ion-button[slot=end].button-has-icon-only) {
+  --border-radius: 50%;
+  --padding-start: 8px;
+  --padding-end: 8px;
+  --padding-top: 8px;
+  --padding-bottom: 8px;
+  aspect-ratio: 1;
+  min-height: 40px;
 }

package/dist/docs.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2023-12-07T03:01:23",
+  "timestamp": "2024-01-03T23:38:55",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.8.1",
+    "version": "4.8.2",
     "typescriptVersion": "5.2.2"
   },
   "components": [
@@ -7627,7 +7627,7 @@
           },
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "A callback used to format the header text that shows how many\ndates are selected. Only used if there are 0 or more than 1\nselected (i.e. unused for exactly 1). By default, the header\ntext is set to \"numberOfDates days\".",
+          "docs": "A callback used to format the header text that shows how many\ndates are selected. Only used if there are 0 or more than 1\nselected (i.e. unused for exactly 1). By default, the header\ntext is set to \"numberOfDates days\".\n\nSee https://ionicframework.com/docs/troubleshooting/runtime#accessing-this\nif you need to access `this` from within the callback.",
           "docsTags": [],
           "values": [
             {
@@ -10162,7 +10162,7 @@
           },
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".",
+          "docs": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".\n\nSee https://ionicframework.com/docs/troubleshooting/runtime#accessing-this\nif you need to access `this` from within the callback.",
           "docsTags": [],
           "values": [
             {
@@ -15091,7 +15091,7 @@
           "mutable": false,
           "attr": "can-dismiss",
           "reflectToAttr": false,
-          "docs": "Determines whether or not a modal can dismiss\nwhen calling the `dismiss` method.\n\nIf the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss.\nIf the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.",
+          "docs": "Determines whether or not a modal can dismiss\nwhen calling the `dismiss` method.\n\nIf the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss.\nIf the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.\n\nSee https://ionicframework.com/docs/troubleshooting/runtime#accessing-this\nif you need to access `this` from within the callback.",
           "docsTags": [],
           "default": "true",
           "values": [
@@ -20286,7 +20286,7 @@
           },
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "A callback used to format the pin text.\nBy default the pin text is set to `Math.round(value)`.",
+          "docs": "A callback used to format the pin text.\nBy default the pin text is set to `Math.round(value)`.\n\nSee https://ionicframework.com/docs/troubleshooting/runtime#accessing-this\nif you need to access `this` from within the callback.",
           "docsTags": [],
           "default": "(value: number): number => Math.round(value)",
           "values": [
@@ -20620,7 +20620,12 @@
       "encapsulation": "none",
       "tag": "ion-refresher",
       "docs": "",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "virtualProp",
+          "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
+        }
+      ],
       "usage": {},
       "props": [
         {
@@ -20667,6 +20672,27 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "mode",
+          "type": "\"ios\" | \"md\"",
+          "mutable": false,
+          "attr": "mode",
+          "reflectToAttr": false,
+          "docs": "The mode determines which platform styles to use.",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "ios",
+              "type": "string"
+            },
+            {
+              "value": "md",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "pullFactor",
           "type": "number",
@@ -26355,7 +26381,7 @@
           },
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".",
+          "docs": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".\n\nSee https://ionicframework.com/docs/troubleshooting/runtime#accessing-this\nif you need to access `this` from within the callback.",
           "docsTags": [],
           "values": [
             {

package/dist/esm/{app-globals-722340c4.js → app-globals-8c62bec2.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { i as initialize } from './ionic-global-c0cda98e.js';
+import { i as initialize } from './ionic-global-1f99b929.js';
 
 const globalScripts = initialize;
 

package/dist/esm/{button-active-c6ee4f50.js → button-active-308d3edd.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as writeTask } from './index-08d686eb.js';
+import { w as writeTask } from './index-b7d870cf.js';
 import { h as hapticSelectionEnd, a as hapticSelectionStart, b as hapticSelectionChanged } from './haptic-554688a5.js';
 import { createGesture } from './index-2cf77112.js';