@ionic/core 7.3.4-dev.11694548895.1578981b → 7.3.4-dev.11694608913.1bc64f72

package/dist/cjs/{overlays-c78a0148.js → overlays-5c1706ed.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const ionicGlobal = require('./ionic-global-6d5d27b5.js');
+const ionicGlobal = require('./ionic-global-f81d8b73.js');
 const frameworkDelegate = require('./framework-delegate-c0873a6f.js');
 const hardwareBackButton = require('./hardware-back-button-b67c8e75.js');
 const helpers = require('./helpers-ea4ccbcb.js');

package/dist/cjs/{status-tap-cc4c6539.js → status-tap-4564b66c.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const index = require('./index-184fdd62.js');
+const index = require('./index-484b1104.js');
 const index$1 = require('./index-10873539.js');
 const helpers = require('./helpers-ea4ccbcb.js');
 require('./index-cc7dfb7c.js');

package/dist/collection/collection-manifest.json

@@ -94,7 +94,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.2.1",
+    "version": "4.2.0",
     "typescriptVersion": "5.1.6"
   },
   "collections": [

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

@@ -124,6 +124,15 @@
   margin-bottom: 10px;
 }
 
+:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper {
+  margin-top: 10px;
+  margin-bottom: 16px;
+}
+
+:host(.in-item.checkbox-label-placement-stacked) .native-wrapper {
+  margin-bottom: 10px;
+}
+
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise
@@ -198,6 +207,14 @@ input {
   justify-content: end;
 }
 
+:host(.checkbox-alignment-start) .checkbox-wrapper {
+  align-items: start;
+}
+
+:host(.checkbox-alignment-center) .checkbox-wrapper {
+  align-items: center;
+}
+
 /**
  * Label is on the left of the checkbox in LTR and
  * on the right in RTL.
@@ -261,6 +278,24 @@ input {
   max-width: 200px;
 }
 
+/**
+ * Label is on top of the checkbox.
+ */
+:host(.checkbox-label-placement-stacked) .checkbox-wrapper {
+  flex-direction: column;
+}
+
+:host(.checkbox-label-placement-stacked) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the checkbox should be on the bottom
+   * when the label sits at the top.
+   */
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 16px;
+}
+
 :host(.checkbox-checked) .checkbox-icon,
 :host(.checkbox-indeterminate) .checkbox-icon {
   border-color: var(--border-color-checked);

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

@@ -55,6 +55,7 @@ export class Checkbox {
     this.value = 'on';
     this.labelPlacement = 'start';
     this.justify = 'space-between';
+    this.alignment = 'center';
     this.legacy = undefined;
   }
   // TODO(FW-3100): remove this
@@ -92,7 +93,7 @@ export class Checkbox {
     return legacyFormController.hasLegacyControl() ? this.renderLegacyCheckbox() : this.renderCheckbox();
   }
   renderCheckbox() {
-    const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, } = this;
+    const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, } = this;
     const mode = getIonMode(this);
     const path = getSVGPath(mode, indeterminate);
     renderHiddenInput(true, el, name, checked ? value : '', disabled);
@@ -104,6 +105,7 @@ export class Checkbox {
         'checkbox-indeterminate': indeterminate,
         interactive: true,
         [`checkbox-justify-${justify}`]: true,
+        [`checkbox-alignment-${alignment}`]: true,
         [`checkbox-label-placement-${labelPlacement}`]: true,
       }) }, h("label", { class: "checkbox-wrapper" }, h("input", Object.assign({ type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, inheritedAttributes)), h("div", { class: {
         'label-text-wrapper': true,
@@ -280,15 +282,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 checkbox.\n`\"start\"`: The label will appear to the left of the checkbox in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the checkbox 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 checkbox.\n`\"start\"`: The label will appear to the left of the checkbox in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the checkbox 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 checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property."
         },
         "attribute": "label-placement",
         "reflect": false,
@@ -312,6 +314,24 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         "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 checkbox 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'"
+      },
       "legacy": {
         "type": "boolean",
         "mutable": false,

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

@@ -124,6 +124,15 @@
   margin-bottom: 10px;
 }
 
+:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper {
+  margin-top: 10px;
+  margin-bottom: 16px;
+}
+
+:host(.in-item.checkbox-label-placement-stacked) .native-wrapper {
+  margin-bottom: 10px;
+}
+
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise
@@ -198,6 +207,14 @@ input {
   justify-content: end;
 }
 
+:host(.checkbox-alignment-start) .checkbox-wrapper {
+  align-items: start;
+}
+
+:host(.checkbox-alignment-center) .checkbox-wrapper {
+  align-items: center;
+}
+
 /**
  * Label is on the left of the checkbox in LTR and
  * on the right in RTL.
@@ -261,6 +278,24 @@ input {
   max-width: 200px;
 }
 
+/**
+ * Label is on top of the checkbox.
+ */
+:host(.checkbox-label-placement-stacked) .checkbox-wrapper {
+  flex-direction: column;
+}
+
+:host(.checkbox-label-placement-stacked) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the checkbox should be on the bottom
+   * when the label sits at the top.
+   */
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 16px;
+}
+
 :host(.checkbox-checked) .checkbox-icon,
 :host(.checkbox-indeterminate) .checkbox-icon {
   border-color: var(--border-color-checked);

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

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

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

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

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

@@ -281,6 +281,8 @@ ion-picker-column-internal {
 }
 
 :host .calendar-body .calendar-month {
+  display: flex;
+  flex-flow: column;
   /**
    * Swiping should snap to at
    * most one month at a time.
@@ -314,11 +316,21 @@ ion-picker-column-internal {
   grid-template-columns: repeat(7, 1fr);
 }
 
+:host .calendar-day-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  min-height: 0;
+  overflow: visible;
+}
+
 /**
  * Center the day text vertically
  * and horizontally within its grid cell.
  */
 :host .calendar-day {
+  border-radius: 50%;
   -webkit-padding-start: 0px;
   padding-inline-start: 0px;
   -webkit-padding-end: 0px;
@@ -350,18 +362,9 @@ ion-picker-column-internal {
   opacity: 0.4;
 }
 
-.calendar-day-highlight {
-  border-radius: 32px;
-  -webkit-padding-start: 4px;
-  padding-inline-start: 4px;
-  -webkit-padding-end: 4px;
-  padding-inline-end: 4px;
-  padding-top: 4px;
-  padding-bottom: 4px;
-  position: absolute;
-  width: 32px;
-  height: 32px;
-  z-index: -1;
+.calendar-day:focus {
+  background: rgba(var(--ion-color-base-rgb), 0.2);
+  box-shadow: 0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);
 }
 
 :host .datetime-time {
@@ -501,25 +504,30 @@ ion-picker-column-internal {
   padding-inline-end: 8px;
   padding-top: 8px;
   padding-bottom: 8px;
+  align-items: center;
   height: calc(100% - 16px);
 }
 
-:host .calendar-day {
-  font-size: 20px;
-}
-
-.calendar-day:focus .calendar-day-highlight,
-.calendar-day.calendar-day-active .calendar-day-highlight {
-  opacity: 0.2;
+:host .calendar-day-wrapper {
+  -webkit-padding-start: 4px;
+  padding-inline-start: 4px;
+  -webkit-padding-end: 4px;
+  padding-inline-end: 4px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  height: 0;
+  min-height: 16px;
 }
 
-.calendar-day.calendar-day-active .calendar-day-highlight {
-  background: var(--ion-color-base);
+:host .calendar-day {
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  font-size: 20px;
 }
 
-.calendar-day:focus .calendar-day-highlight {
-  /* stylelint-disable-next-line declaration-no-important */
-  background: var(--ion-color-base) !important;
+.calendar-day.calendar-day-active {
+  background: rgba(var(--ion-color-base-rgb), 0.2);
 }
 
 /**
@@ -548,11 +556,6 @@ ion-picker-column-internal {
   color: var(--ion-color-contrast);
 }
 
-.calendar-day.calendar-day-today.calendar-day-active .calendar-day-highlight {
-  background: var(--ion-color-base);
-  opacity: 1;
-}
-
 :host .datetime-time {
   -webkit-padding-start: 16px;
   padding-inline-start: 16px;