@ionic/core 7.3.4-dev.11694608913.1bc64f72 → 7.3.4-dev.11694700050.1d868b6b

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const ionicGlobal = require('./ionic-global-f81d8b73.js');
+const ionicGlobal = require('./ionic-global-6d5d27b5.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-4564b66c.js → status-tap-cc4c6539.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const index = require('./index-484b1104.js');
+const index = require('./index-184fdd62.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.0",
+    "version": "4.2.1",
     "typescriptVersion": "5.1.6"
   },
   "collections": [

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

@@ -124,15 +124,6 @@
   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
@@ -207,14 +198,6 @@ 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.
@@ -278,24 +261,6 @@ 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,7 +55,6 @@ export class Checkbox {
     this.value = 'on';
     this.labelPlacement = 'start';
     this.justify = 'space-between';
-    this.alignment = 'center';
     this.legacy = undefined;
   }
   // TODO(FW-3100): remove this
@@ -93,7 +92,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, alignment, } = this;
+    const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, } = this;
     const mode = getIonMode(this);
     const path = getSVGPath(mode, indeterminate);
     renderHiddenInput(true, el, name, checked ? value : '', disabled);
@@ -105,7 +104,6 @@ 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,
@@ -282,15 +280,15 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'start' | 'end' | 'fixed' | 'stacked'",
-          "resolved": "\"end\" | \"fixed\" | \"stacked\" | \"start\"",
+          "original": "'start' | 'end' | 'fixed'",
+          "resolved": "\"end\" | \"fixed\" | \"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 (\"...\").\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."
+          "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 (\"...\")."
         },
         "attribute": "label-placement",
         "reflect": false,
@@ -314,24 +312,6 @@ 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,15 +124,6 @@
   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
@@ -207,14 +198,6 @@ 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.
@@ -278,24 +261,6 @@ 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,17 +58,4 @@ 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,21 +91,5 @@ 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,8 +281,6 @@ 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.
@@ -316,21 +314,11 @@ 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;
@@ -362,9 +350,18 @@ ion-picker-column-internal {
   opacity: 0.4;
 }
 
-.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);
+.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;
 }
 
 :host .datetime-time {
@@ -504,30 +501,25 @@ ion-picker-column-internal {
   padding-inline-end: 8px;
   padding-top: 8px;
   padding-bottom: 8px;
-  align-items: center;
   height: calc(100% - 16px);
 }
 
-: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;
-}
-
 :host .calendar-day {
-  width: 40px;
-  min-width: 40px;
-  height: 40px;
   font-size: 20px;
 }
 
-.calendar-day.calendar-day-active {
-  background: rgba(var(--ion-color-base-rgb), 0.2);
+.calendar-day:focus .calendar-day-highlight,
+.calendar-day.calendar-day-active .calendar-day-highlight {
+  opacity: 0.2;
+}
+
+.calendar-day.calendar-day-active .calendar-day-highlight {
+  background: var(--ion-color-base);
+}
+
+.calendar-day:focus .calendar-day-highlight {
+  /* stylelint-disable-next-line declaration-no-important */
+  background: var(--ion-color-base) !important;
 }
 
 /**
@@ -556,6 +548,11 @@ 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;