@ionic/core 7.3.2-dev.11693321763.15a54694 → 7.3.2-dev.11693507138.1f9ed625

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

@@ -218,12 +218,12 @@ export class Popover {
     }
     const { el } = this;
     const { inline, delegate } = this.getDelegate(true);
-    this.ionMount.emit();
     this.usersElement = await attachComponent(delegate, el, this.component, ['popover-viewport'], this.componentProps, inline);
     if (!this.keyboardEvents) {
       this.configureKeyboardInteraction();
     }
     this.configureDismissInteraction();
+    this.ionMount.emit();
     /**
      * When using the lazy loaded build of Stencil, we need to wait
      * for every Stencil component instance to be ready before presenting

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

@@ -147,6 +147,15 @@ input {
   margin-bottom: 10px;
 }
 
+:host(.in-item.radio-label-placement-stacked) .label-text-wrapper {
+  margin-top: 10px;
+  margin-bottom: 16px;
+}
+
+:host(.in-item.radio-label-placement-stacked) .native-wrapper {
+  margin-bottom: 10px;
+}
+
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise
@@ -173,6 +182,14 @@ input {
   justify-content: end;
 }
 
+:host(.radio-alignment-start) .radio-wrapper {
+  align-items: start;
+}
+
+:host(.radio-alignment-center) .radio-wrapper {
+  align-items: center;
+}
+
 /**
  * Label is on the left of the radio in LTR and
  * on the right in RTL.
@@ -235,6 +252,24 @@ input {
   min-width: 100px;
 }
 
+/**
+ * Label is on top of the radio.
+ */
+:host(.radio-label-placement-stacked) .radio-wrapper {
+  flex-direction: column;
+}
+
+:host(.radio-label-placement-stacked) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the radio should be on the bottom
+   * when the label sits on top.
+   */
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 16px;
+}
+
 :host {
   --color-checked: var(--ion-color-primary, #3880ff);
 }

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

@@ -70,6 +70,7 @@ export class Radio {
     this.labelPlacement = 'start';
     this.legacy = undefined;
     this.justify = 'space-between';
+    this.alignment = 'center';
   }
   valueChanged() {
     /**
@@ -134,7 +135,7 @@ export class Radio {
     return legacyFormController.hasLegacyControl() ? this.renderLegacyRadio() : this.renderRadio();
   }
   renderRadio() {
-    const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex } = this;
+    const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
     const mode = getIonMode(this);
     const inItem = hostContext('ion-item', el);
     return (h(Host, { onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
@@ -143,6 +144,7 @@ export class Radio {
         'radio-checked': checked,
         'radio-disabled': disabled,
         [`radio-justify-${justify}`]: true,
+        [`radio-alignment-${alignment}`]: true,
         [`radio-label-placement-${labelPlacement}`]: true,
         // Focus and active styling should not apply when the radio is in an item
         'ion-activatable': !inItem,
@@ -275,15 +277,15 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'start' | 'end' | 'fixed'",
-          "resolved": "\"end\" | \"fixed\" | \"start\"",
+          "original": "'start' | 'end' | 'fixed' | 'stacked'",
+          "resolved": "\"end\" | \"fixed\" | \"stacked\" | \"start\"",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Where to place the label relative to the radio.\n`\"start\"`: The label will appear to the left of the radio in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the radio in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\")."
+          "text": "Where to place the label relative to the radio.\n`\"start\"`: The label will appear to the left of the radio in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the radio in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").\n`\"stacked\"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `alignment` property."
         },
         "attribute": "label-placement",
         "reflect": false,
@@ -323,6 +325,24 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         "attribute": "justify",
         "reflect": false,
         "defaultValue": "'space-between'"
+      },
+      "alignment": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'start' | 'center'",
+          "resolved": "\"center\" | \"start\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "How to control the alignment of the radio and label on the cross axis.\n`\"start\"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.\n`\"center\"`: The label and control will appear at the center of the cross axis in both LTR and RTL."
+        },
+        "attribute": "alignment",
+        "reflect": false,
+        "defaultValue": "'center'"
       }
     };
   }

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

@@ -147,6 +147,15 @@ input {
   margin-bottom: 10px;
 }
 
+:host(.in-item.radio-label-placement-stacked) .label-text-wrapper {
+  margin-top: 10px;
+  margin-bottom: 16px;
+}
+
+:host(.in-item.radio-label-placement-stacked) .native-wrapper {
+  margin-bottom: 10px;
+}
+
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise
@@ -173,6 +182,14 @@ input {
   justify-content: end;
 }
 
+:host(.radio-alignment-start) .radio-wrapper {
+  align-items: start;
+}
+
+:host(.radio-alignment-center) .radio-wrapper {
+  align-items: center;
+}
+
 /**
  * Label is on the left of the radio in LTR and
  * on the right in RTL.
@@ -235,6 +252,24 @@ input {
   min-width: 100px;
 }
 
+/**
+ * Label is on top of the radio.
+ */
+:host(.radio-label-placement-stacked) .radio-wrapper {
+  flex-direction: column;
+}
+
+:host(.radio-label-placement-stacked) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the radio should be on the bottom
+   * when the label sits on top.
+   */
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 16px;
+}
+
 :host {
   --color: rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);
   --color-checked: var(--ion-color-primary, #3880ff);

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

@@ -51,4 +51,19 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co
       expect(await list.screenshot()).toMatchSnapshot(screenshot(`radio-long-label-in-item`));
     });
   });
+  test.describe(title('radio: stacked label in item'), () => {
+    test('should render margins correctly when using stacked label in item', async ({ page }) => {
+      await page.setContent(`
+          <ion-list>
+            <ion-radio-group>
+              <ion-item>
+                <ion-radio label-placement="stacked">Enable Notifications</ion-radio>
+              </ion-item>
+            </ion-radio-group>
+          </ion-list>
+        `, config);
+      const list = page.locator('ion-list');
+      await expect(list).toHaveScreenshot(screenshot(`radio-stacked-label-in-item`));
+    });
+  });
 });

package/dist/collection/components/radio/test/label-placement/radio.e2e.js

@@ -100,5 +100,25 @@ configs().forEach(({ title, screenshot, config }) => {
         expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-label-fixed-justify-space-between`));
       });
     });
+    test.describe('radio: stacked placement', () => {
+      test('should align the label to the start of the container in the stacked position', async ({ page }) => {
+        await page.setContent(`
+            <ion-radio-group value="1">
+              <ion-radio label-placement="stacked" alignment="start" style="width: 200px" value="1">This is a long label</ion-radio>
+            </ion-radio-group>
+          `, config);
+        const radio = page.locator('ion-radio');
+        await expect(radio).toHaveScreenshot(screenshot(`radio-label-stacked-align-start`));
+      });
+      test('should align the label to the center of the container in the stacked position', async ({ page }) => {
+        await page.setContent(`
+            <ion-radio-group value="1">
+              <ion-radio label-placement="stacked" alignment="center" style="width: 200px" value="1">This is a long label</ion-radio>
+            </ion-radio-group>
+          `, config);
+        const radio = page.locator('ion-radio');
+        await expect(radio).toHaveScreenshot(screenshot(`radio-label-stacked-align-center`));
+      });
+    });
   });
 });

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

@@ -363,6 +363,25 @@
   max-width: 200px;
 }
 
+/**
+ * Label is on top of the range.
+ */
+:host(.range-label-placement-stacked) .range-wrapper {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+:host(.range-label-placement-stacked) .label-text-wrapper {
+  /**
+  * The margin between the label and
+  * the range should be on the bottom
+  * when the label sits on top.
+  */
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 16px;
+}
+
 :host {
   --knob-border-radius: 50%;
   --knob-background: #ffffff;
@@ -407,10 +426,31 @@
   margin-bottom: 0;
 }
 
-:host(.range-has-pin) {
+:host(.range-has-pin:not(.range-label-placement-stacked)) {
+  /**
+  * The pin should not overlap any elements that are
+  * above the range. By adding padding to the top of the
+  * range, it provides a buffer for the pin to move into
+  * when it is pressed.
+  *
+  * The padding is not included when the label is stacked
+  * because the pin is below the label.
+  * It still requires a buffer to prevent the pin from
+  * overlapping the range. The buffer is added to the
+  * bottom of the range label instead of the host.
+  */
   padding-top: 20px;
 }
 
+:host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper {
+  /**
+  * The pin should not overlap the stacked label. By adding
+  * margin to the bottom of the label, it provides a buffer
+  * for the pin to move into when it is pressed.
+  */
+  margin-bottom: 20px;
+}
+
 .range-bar-active {
   bottom: 0;
   width: auto;

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

@@ -808,15 +808,15 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'start' | 'end' | 'fixed'",
-          "resolved": "\"end\" | \"fixed\" | \"start\"",
+          "original": "'start' | 'end' | 'fixed' | 'stacked'",
+          "resolved": "\"end\" | \"fixed\" | \"stacked\" | \"start\"",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Where to place the label relative to the range.\n`\"start\"`: The label will appear to the left of the range in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the range in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\")."
+          "text": "Where to place the label relative to the range.\n`\"start\"`: The label will appear to the left of the range in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the range in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").\n`\"stacked\"`: The label will appear above the range regardless of the direction."
         },
         "attribute": "label-placement",
         "reflect": false,

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

@@ -363,6 +363,25 @@
   max-width: 200px;
 }
 
+/**
+ * Label is on top of the range.
+ */
+:host(.range-label-placement-stacked) .range-wrapper {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+:host(.range-label-placement-stacked) .label-text-wrapper {
+  /**
+  * The margin between the label and
+  * the range should be on the bottom
+  * when the label sits on top.
+  */
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 16px;
+}
+
 :host {
   --knob-border-radius: 50%;
   --knob-background: var(--bar-background-active);
@@ -423,10 +442,31 @@
   margin-bottom: 0;
 }
 
-:host(.range-has-pin) {
+:host(.range-has-pin:not(.range-label-placement-stacked)) {
+  /**
+  * The pin should not overlap any elements that are
+  * above the range. By adding padding to the top of the
+  * range, it provides a buffer for the pin to move into
+  * when it is pressed.
+  *
+  * The padding is not included when the label is stacked
+  * because the pin is below the label.
+  * It still requires a buffer to prevent the pin from
+  * overlapping the range. The buffer is added to the
+  * bottom of the range label instead of the host.
+  */
   padding-top: 28px;
 }
 
+:host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper {
+  /**
+  * The pin should not overlap the stacked label. By adding
+  * margin to the bottom of the label, it provides a buffer
+  * for the pin to move into when it is pressed.
+  */
+  margin-bottom: 28px;
+}
+
 .range-bar-active {
   bottom: 0;
   width: auto;

package/dist/collection/components/range/test/label/range.e2e.js

@@ -40,6 +40,17 @@ configs().forEach(({ title, screenshot, config }) => {
         const range = page.locator('ion-range');
         expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-no-items-fixed`));
       });
+      test('should render label above the range slider', async ({ page }) => {
+        await page.setContent(`
+          <div id="container" style="padding-inline-start: 20px;">
+            <ion-range label-placement="stacked">
+              <span slot="label">Volume</span>
+            </ion-range>
+          </div>
+        `, config);
+        const range = page.locator('#container');
+        await expect(range).toHaveScreenshot(screenshot(`range-no-items-stacked`));
+      });
     });
     test.describe('range: start and end items', () => {
       test('should render a range with no visible label', async ({ page }) => {
@@ -85,6 +96,17 @@ configs().forEach(({ title, screenshot, config }) => {
         const range = page.locator('ion-range');
         expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-items-fixed`));
       });
+      test('should render label above the range slider', async ({ page }) => {
+        await page.setContent(`
+          <ion-range label-placement="stacked">
+            <ion-icon name="volume-off" slot="start"></ion-icon>
+            <ion-icon name="volume-high" slot="end"></ion-icon>
+            <span slot="label">Volume</span>
+          </ion-range>
+        `, config);
+        const range = page.locator('ion-range');
+        await expect(range).toHaveScreenshot(screenshot(`range-items-stacked`));
+      });
     });
     test.describe('range: label prop', () => {
       test('should render label in the start placement', async ({ page }) => {
@@ -102,6 +124,15 @@ configs().forEach(({ title, screenshot, config }) => {
         const range = page.locator('ion-range');
         expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-label-prop-fixed`));
       });
+      test('should render label above the range slider', async ({ page }) => {
+        await page.setContent(`
+          <div id="container" style="padding-inline-start: 20px;">
+            <ion-range label-placement="stacked" label="Volume"></ion-range>
+          </div>
+          `, config);
+        const range = page.locator('#container');
+        await expect(range).toHaveScreenshot(screenshot(`range-label-prop-stacked`));
+      });
     });
   });
 });
@@ -117,4 +148,21 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-label-truncate`));
     });
   });
+  test.describe(title('range: with pin'), () => {
+    test('should render pin below a stacked label', async ({ page }) => {
+      await page.setContent(`
+        <div id="container" style="padding-inline-start: 20px;">
+          <ion-range label-placement="stacked" pin="true">
+            <span slot="label">Volume</span>
+          </ion-range>
+        </div>
+      `, config);
+      const container = page.locator('#container');
+      const range = page.locator('ion-range');
+      const knob = range.locator('.range-knob-handle');
+      // Force the pin to show
+      await knob.evaluate((el) => el.classList.add('ion-focused'));
+      await expect(container).toHaveScreenshot(screenshot(`range-stacked-pin`));
+    });
+  });
 });

package/dist/collection/components/toggle/test/item/toggle.e2e.js

@@ -58,4 +58,19 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co
       expect(await list.screenshot()).toMatchSnapshot(screenshot(`toggle-long-label-in-item`));
     });
   });
+  test.describe(title('toggle: stacked label in item'), () => {
+    test('should render margins correctly when using stacked label in item', async ({ page }) => {
+      await page.setContent(`
+          <ion-list>
+            <ion-radio-group>
+              <ion-item>
+                <ion-toggle label-placement="stacked">Enable Notifications</ion-toggle>
+              </ion-item>
+            </ion-radio-group>
+          </ion-list>
+        `, config);
+      const list = page.locator('ion-list');
+      await expect(list).toHaveScreenshot(screenshot(`toggle-stacked-label-in-item`));
+    });
+  });
 });

package/dist/collection/components/toggle/test/label/toggle.e2e.js

@@ -90,4 +90,20 @@ configs().forEach(({ title, screenshot, config }) => {
       expect(await toggle.screenshot()).toMatchSnapshot(screenshot(`toggle-label-fixed-justify-space-between`));
     });
   });
+  test.describe(title('toggle: stacked placement'), () => {
+    test('should align the label to the start of the container in the stacked position', async ({ page }) => {
+      await page.setContent(`
+          <ion-toggle label-placement="stacked" alignment="start" style="width: 200px">This is a long label</ion-toggle>
+        `, config);
+      const toggle = page.locator('ion-toggle');
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-label-stacked-align-start`));
+    });
+    test('should align the label to the center of the container in the stacked position', async ({ page }) => {
+      await page.setContent(`
+          <ion-toggle label-placement="stacked" alignment="center" style="width: 200px">This is a long label</ion-toggle>
+        `, config);
+      const toggle = page.locator('ion-toggle');
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-label-stacked-align-center`));
+    });
+  });
 });

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

@@ -123,7 +123,6 @@ input {
   display: flex;
   position: relative;
   flex-grow: 1;
-  align-items: center;
   height: inherit;
   transition: background-color 15ms linear;
   cursor: inherit;
@@ -146,6 +145,15 @@ input {
   margin-bottom: 10px;
 }
 
+:host(.in-item.toggle-label-placement-stacked) .label-text-wrapper {
+  margin-top: 10px;
+  margin-bottom: 16px;
+}
+
+:host(.in-item.toggle-label-placement-stacked) .native-wrapper {
+  margin-bottom: 10px;
+}
+
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise
@@ -172,6 +180,14 @@ input {
   justify-content: end;
 }
 
+:host(.toggle-alignment-start) .toggle-wrapper {
+  align-items: start;
+}
+
+:host(.toggle-alignment-center) .toggle-wrapper {
+  align-items: center;
+}
+
 /**
  * Label is on the left of the input in LTR and
  * on the right in RTL.
@@ -235,6 +251,24 @@ input {
   max-width: 200px;
 }
 
+/**
+ * Label is on top of the toggle.
+ */
+:host(.toggle-label-placement-stacked) .toggle-wrapper {
+  flex-direction: column;
+}
+
+:host(.toggle-label-placement-stacked) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the toggle should be on the bottom
+   * when the label sits on top.
+   */
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 16px;
+}
+
 .toggle-icon-wrapper {
   display: flex;
   position: relative;

package/dist/collection/components/toggle/toggle.js

@@ -71,6 +71,7 @@ export class Toggle {
     this.labelPlacement = 'start';
     this.legacy = undefined;
     this.justify = 'space-between';
+    this.alignment = 'center';
   }
   disabledChanged() {
     this.emitStyle();
@@ -168,7 +169,7 @@ export class Toggle {
     return legacyFormController.hasLegacyControl() ? this.renderLegacyToggle() : this.renderToggle();
   }
   renderToggle() {
-    const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name } = this;
+    const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment } = this;
     const mode = getIonMode(this);
     const value = this.getValue();
     const rtl = isRTL(el) ? 'rtl' : 'ltr';
@@ -180,6 +181,7 @@ export class Toggle {
         'toggle-checked': checked,
         'toggle-disabled': disabled,
         [`toggle-justify-${justify}`]: true,
+        [`toggle-alignment-${alignment}`]: true,
         [`toggle-label-placement-${labelPlacement}`]: true,
         [`toggle-${rtl}`]: true,
       }) }, h("label", { class: "toggle-wrapper" }, h("input", Object.assign({ type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h("div", { class: {
@@ -352,15 +354,15 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'start' | 'end' | 'fixed'",
-          "resolved": "\"end\" | \"fixed\" | \"start\"",
+          "original": "'start' | 'end' | 'fixed' | 'stacked'",
+          "resolved": "\"end\" | \"fixed\" | \"stacked\" | \"start\"",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Where to place the label relative to the input.\n`\"start\"`: The label will appear to the left of the toggle in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the toggle in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\")."
+          "text": "Where to place the label relative to the input.\n`\"start\"`: The label will appear to the left of the toggle in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the toggle in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").\n`\"stacked\"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property."
         },
         "attribute": "label-placement",
         "reflect": false,
@@ -400,6 +402,24 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         "attribute": "justify",
         "reflect": false,
         "defaultValue": "'space-between'"
+      },
+      "alignment": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'start' | 'center'",
+          "resolved": "\"center\" | \"start\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "How to control the alignment of the toggle and label on the cross axis.\n``\"start\"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.\n`\"center\"`: The label and control will appear at the center of the cross axis in both LTR and RTL."
+        },
+        "attribute": "alignment",
+        "reflect": false,
+        "defaultValue": "'center'"
       }
     };
   }