voyager-ionic-core 7.7.2 → 8.0.0-beta.1

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

@@ -71,10 +71,9 @@
    * @prop --checkmark-color: Color of the checkbox checkmark when checked
    * @prop --checkmark-width: Stroke width of the checkbox checkmark
    */
-  --checkbox-background-checked: var(--ion-color-primary, #3880ff);
-  --border-color-checked: var(--ion-color-primary, #3880ff);
+  --checkbox-background-checked: var(--ion-color-primary, #0054e9);
+  --border-color-checked: var(--ion-color-primary, #0054e9);
   --checkmark-color: var(--ion-color-primary-contrast, #fff);
-  --checkmark-width: 1;
   --transition: none;
   display: inline-block;
   position: relative;
@@ -94,66 +93,17 @@
  * toolbar which is why we do not
  * limit the below behavior to just ion-item.
  */
-:host([slot=start]:not(.legacy-checkbox)),
-:host([slot=end]:not(.legacy-checkbox)) {
+:host([slot=start]),
+:host([slot=end]) {
   width: auto;
 }
 
-:host(.legacy-checkbox) {
-  width: var(--size);
-  height: var(--size);
-}
-
 :host(.ion-color) {
   --checkbox-background-checked: var(--ion-color-base);
   --border-color-checked: var(--ion-color-base);
   --checkmark-color: var(--ion-color-contrast);
 }
 
-:host(.legacy-checkbox) label {
-  top: 0;
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-  appearance: none;
-  outline: none;
-  display: flex;
-  align-items: center;
-  opacity: 0;
-}
-@supports (inset-inline-start: 0) {
-  :host(.legacy-checkbox) label {
-    inset-inline-start: 0;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  :host(.legacy-checkbox) label {
-    left: 0;
-  }
-  :host-context([dir=rtl]):host(.legacy-checkbox) label, :host-context([dir=rtl]).legacy-checkbox label {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  @supports selector(:dir(rtl)) {
-    :host(.legacy-checkbox:dir(rtl)) label {
-      left: unset;
-      right: unset;
-      right: 0;
-    }
-  }
-}
-:host(.legacy-checkbox) label::-moz-focus-inner {
-  border: 0;
-}
-
 .checkbox-wrapper {
   display: flex;
   flex-grow: 1;
@@ -168,7 +118,7 @@
   overflow: hidden;
 }
 
-:host(.in-item:not(.legacy-checkbox)) .label-text-wrapper {
+:host(.in-item) .label-text-wrapper {
   margin-top: 10px;
   margin-bottom: 10px;
 }
@@ -218,6 +168,8 @@ input {
 .checkbox-icon {
   border-radius: var(--border-radius);
   position: relative;
+  width: var(--size);
+  height: var(--size);
   transition: var(--transition);
   border-width: var(--border-width);
   border-style: var(--border-style);
@@ -226,17 +178,6 @@ input {
   box-sizing: border-box;
 }
 
-:host(.legacy-checkbox) .checkbox-icon {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-:host(:not(.legacy-checkbox)) .checkbox-icon {
-  width: var(--size);
-  height: var(--size);
-}
-
 .checkbox-icon path {
   fill: none;
   stroke: var(--checkmark-color);
@@ -524,29 +465,10 @@ input {
   transition: stroke-dashoffset 90ms linear 90ms;
 }
 
-:host(.legacy-checkbox.checkbox-disabled),
 :host(.checkbox-disabled) .label-text-wrapper {
   opacity: 0.38;
 }
 
 :host(.checkbox-disabled) .native-wrapper {
   opacity: 0.63;
-}
-
-:host(.in-item.legacy-checkbox) {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 18px;
-  margin-bottom: 18px;
-  display: block;
-  position: static;
-}
-
-:host(.in-item.legacy-checkbox[slot=start]) {
-  -webkit-margin-start: 4px;
-  margin-inline-start: 4px;
-  -webkit-margin-end: 36px;
-  margin-inline-end: 36px;
-  margin-top: 18px;
-  margin-bottom: 18px;
 }

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

@@ -4,10 +4,19 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('checkbox: a11y'), () => {
         test('should not have accessibility violations', async ({ page }) => {
-            await page.goto(`/src/components/checkbox/test/a11y`, config);
+            await page.setContent(`
+        <main>
+          <ion-checkbox>Label</ion-checkbox>
+          <ion-checkbox aria-label="my aria label"></ion-checkbox>
+          <ion-checkbox checked="true">Checked</ion-checkbox>
+          <ion-item>
+            <ion-checkbox>Checkbox in item</ion-checkbox>
+          </ion-item>
+        </main>
+      `, config);
             const results = await new AxeBuilder({ page }).analyze();
             expect(results.violations).toEqual([]);
         });

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

@@ -5,6 +5,16 @@ import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs().forEach(({ title, screenshot, config }) => {
     test.describe(title('checkbox: basic visual tests'), () => {
+        test('should not have visual regressions', async ({ page }) => {
+            await page.setContent(`
+        <div id="checkboxes">
+          <ion-checkbox>Unchecked</ion-checkbox>
+          <ion-checkbox checked>Checked</ion-checkbox>
+        </div>
+      `, config);
+            const checkboxes = page.locator('#checkboxes');
+            await expect(checkboxes).toHaveScreenshot(screenshot(`checkbox-basic`));
+        });
         test('should render custom checkmark-width correctly', async ({ page }) => {
             await page.setContent(`
         <ion-checkbox checked style="--checkmark-width: 7">Checkmark Width</ion-checkbox>

package/dist/collection/components/chip/chip.js

@@ -15,12 +15,12 @@ export class Chip {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'eca7cc616c0c9dd2ab28efd41e203fa094880e9e', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        return (h(Host, { key: '4c8c83eefc650c00f2c515937df63094f9468bbd', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [mode]: true,
                 'chip-outline': this.outline,
                 'chip-disabled': this.disabled,
                 'ion-activatable': true,
-            }) }, h("slot", { key: 'b64c9067132791f73a8434c37d5a335fb2d96f74' }), mode === 'md' && h("ion-ripple-effect", null)));
+            }) }, h("slot", { key: '5a94dafd29f2ea7255ba2d4fa173f5eff92146aa' }), mode === 'md' && h("ion-ripple-effect", null)));
     }
     static get is() { return "ion-chip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -111,9 +111,9 @@ export class Col {
     render() {
         const isRTL = document.dir === 'rtl';
         const mode = getIonMode(this);
-        return (h(Host, { key: 'c186972dd12d10a4600975c326f20666fed96abf', class: {
+        return (h(Host, { key: '8bb465c85b64001d6613e8b38cd4f4fd2b4c4a90', 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: '54cc8bd92f94cfd30d9f3e8e59e0f0dc38abfd63' })));
+            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: 'fe9f9ce55c86771638413457a0d5dcd9dce29217' })));
     }
     static get is() { return "ion-col"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/content/content.css

@@ -97,10 +97,6 @@
   color: var(--ion-color-contrast);
 }
 
-:host(.outer-content) {
-  --background: var(--ion-color-step-50, #f2f2f2);
-}
-
 #background-content {
   left: 0px;
   right: 0px;

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

@@ -334,9 +334,8 @@ export class Content {
         const mode = getIonMode(this);
         const forceOverscroll = this.shouldForceOverscroll();
         const transitionShadow = mode === 'ios';
-        const TagType = isMainContent ? 'main' : 'div';
         this.resize();
-        return (h(Host, { key: '65d85e1f7f85876a76eec79addc4bd9f697a5d84', class: createColorClasses(this.color, {
+        return (h(Host, { key: '5b6d5c2b8b91ac84dcdf6cf6178a8f7fb970ca00', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
                 [mode]: true,
                 'content-sizing': hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
@@ -344,12 +343,12 @@ export class Content {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, h("div", { key: 'e2ac474a62cbc864772c497469100436f41289ff', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), h(TagType, { key: '567a4bc2bcb13adfd987b088f95ac4b20b789f2c', class: {
+            } }, h("div", { key: '4fa58c187e2c2f7f3bc365f485dd80dc0c059d8b', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), h("div", { key: 'f595d0d59e0957acdebd0b16ae79e88da8ed973d', 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: '13909f87dd9f49bf1664ad95038499da376b9480' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, h("slot", { key: '05b56c139e203cfd1e3dd08054e99328e97e9243', name: "fixed" })));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '1aceb64f45d13574ea1e20c0885191ced5a0b961' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, h("slot", { key: 'd6c4f4d9001da024ec652358f7ae880db75d3a4e', name: "fixed" })));
     }
     static get is() { return "ion-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -61,6 +61,8 @@
    *
    * @prop --wheel-highlight-background: The background of the highlight under the selected
    * item when using a wheel style layout, or in the month/year picker for grid style layouts.
+   * @prop --wheel-highlight-border-radius: The border radius of the highlight under the selected
+   * item when using a wheel style layout, or in the month/year picker for grid style layouts.
    * @prop --wheel-fade-background-rgb: The color of the gradient covering non-selected items
    * when using a wheel style layout, or in the month/year picker for grid style layouts. Must
    * be in RGB format, e.g. `255, 255, 255`.
@@ -71,19 +73,6 @@
   overflow: hidden;
 }
 
-/**
- * When using the wheel picker to switch
- * between months, sometimes the allowed
- * dates may be filtered. As a result, it
- * is possible to get a layout shift as
- * the picker column will shrink to fit the
- * widest item in the column. Setting a minimum
- * width avoids this layout shifting.
- */
-ion-picker-column-internal {
-  min-width: 26px;
-}
-
 :host(.datetime-size-fixed) {
   width: auto;
   height: auto;
@@ -94,7 +83,7 @@ ion-picker-column-internal {
 }
 
 /**
- * This ensures that the picker is apppropriately
+ * This ensures that the picker is appropriately
  * sized and never truncates the text.
  */
 :host(.datetime-size-fixed.datetime-prefer-wheel) {
@@ -169,79 +158,13 @@ ion-picker-column-internal {
   display: flex;
 }
 
-/**
- * Safari 14 has an issue where a scroll event
- * is incorrectly fired when unhiding the calendar content.
- * To workaround this, we set the opacity
- * of the content to 0 and hide it offscreen.
- *
- * -webkit-named-image is something only WebKit supports
- * so we use this to detect general WebKit support.
- * aspect-ratio is only supported in Safari 15+
- * so by checking lack of aspect-ratio support, we know
- * that we are in a pre-Safari 15 browser.
- *
- * TODO(FW-554): Remove when iOS 14 support is dropped.
- */
-@supports (background: -webkit-named-image(apple-pay-logo-black)) and (not (aspect-ratio: 1/1)) {
-  :host(.show-month-and-year) .calendar-next-prev,
-  :host(.show-month-and-year) .calendar-days-of-week,
-  :host(.show-month-and-year) .calendar-body,
-  :host(.show-month-and-year) .datetime-time {
-    position: absolute;
-    /**
-     * Use visibility instead of
-     * opacity to ensure element
-     * cannot receive focus
-     */
-    visibility: hidden;
-    pointer-events: none;
-  }
-  @supports (inset-inline-start: 0) {
-    :host(.show-month-and-year) .calendar-next-prev,
-    :host(.show-month-and-year) .calendar-days-of-week,
-    :host(.show-month-and-year) .calendar-body,
-    :host(.show-month-and-year) .datetime-time {
-      inset-inline-start: -99999px;
-    }
-  }
-  @supports not (inset-inline-start: 0) {
-    :host(.show-month-and-year) .calendar-next-prev,
-    :host(.show-month-and-year) .calendar-days-of-week,
-    :host(.show-month-and-year) .calendar-body,
-    :host(.show-month-and-year) .datetime-time {
-      left: -99999px;
-    }
-    :host-context([dir=rtl]):host(.show-month-and-year) .calendar-next-prev, :host-context([dir=rtl]).show-month-and-year .calendar-next-prev, :host-context([dir=rtl]):host(.show-month-and-year) .calendar-days-of-week, :host-context([dir=rtl]).show-month-and-year .calendar-days-of-week, :host-context([dir=rtl]):host(.show-month-and-year) .calendar-body, :host-context([dir=rtl]).show-month-and-year .calendar-body, :host-context([dir=rtl]):host(.show-month-and-year) .datetime-time, :host-context([dir=rtl]).show-month-and-year .datetime-time {
-      left: unset;
-      right: unset;
-      right: -99999px;
-    }
-    @supports selector(:dir(rtl)) {
-      :host(.show-month-and-year:dir(rtl)) .calendar-next-prev, :host(.show-month-and-year:dir(rtl)) .calendar-days-of-week, :host(.show-month-and-year:dir(rtl)) .calendar-body, :host(.show-month-and-year:dir(rtl)) .datetime-time {
-        left: unset;
-        right: unset;
-        right: -99999px;
-      }
-    }
-  }
-}
-/**
- * This support check two cases:
- * 1. A WebKit browser that supports aspect-ratio (Safari 15+)
- * 2. Any non-WebKit browser.
- * Note that just overriding this display: none is not
- * sufficient to resolve the issue mentioned above, which
- * is why we do another set of @supports checks.
- */
-@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)) {
-  :host(.show-month-and-year) .calendar-next-prev,
-  :host(.show-month-and-year) .calendar-days-of-week,
-  :host(.show-month-and-year) .calendar-body,
-  :host(.show-month-and-year) .datetime-time {
-    display: none;
-  }
+:host(.show-month-and-year) .calendar-next-prev,
+:host(.show-month-and-year) .calendar-days-of-week,
+:host(.show-month-and-year) .calendar-body,
+:host(.show-month-and-year) .datetime-time {
+  display: none;
 }
+
 :host(.month-year-picker-open) .datetime-footer {
   display: none;
 }
@@ -317,24 +240,8 @@ ion-picker-column-internal {
   justify-content: space-between;
 }
 
-:host .calendar-action-buttons ion-item,
 :host .calendar-action-buttons ion-button {
-  --background: translucent;
-}
-
-:host .calendar-action-buttons ion-item ion-label {
-  display: flex;
-  align-items: center;
-  width: auto;
-}
-
-:host .calendar-action-buttons ion-item ion-icon {
-  -webkit-padding-start: 4px;
-  padding-inline-start: 4px;
-  -webkit-padding-end: 0;
-  padding-inline-end: 0;
-  padding-top: 0;
-  padding-bottom: 0;
+  --background: transparent;
 }
 
 :host .calendar-days-of-week {
@@ -500,7 +407,7 @@ ion-picker-column-internal {
   padding-bottom: 6px;
   display: flex;
   border: none;
-  background: var(--ion-color-step-300, #edeef0);
+  background: var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));
   color: var(--ion-text-color, #000);
   font-family: inherit;
   font-size: inherit;
@@ -516,8 +423,72 @@ ion-picker-column-internal {
   position: static;
 }
 
-:host(.show-month-and-year) .calendar-action-buttons ion-item {
-  --color: var(--ion-color-base);
+:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle {
+  color: var(--ion-color-base);
+}
+
+.calendar-month-year {
+  min-width: 0;
+}
+
+.calendar-month-year-toggle {
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-indent: inherit;
+  text-overflow: inherit;
+  text-transform: inherit;
+  text-align: inherit;
+  white-space: inherit;
+  color: inherit;
+  position: relative;
+  border: 0;
+  outline: none;
+  background: transparent;
+  cursor: pointer;
+  z-index: 1;
+}
+.calendar-month-year-toggle::after {
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  content: "";
+  opacity: 0;
+  transition: opacity 15ms linear, background-color 15ms linear;
+  z-index: -1;
+}
+.calendar-month-year-toggle.ion-focused::after {
+  background: currentColor;
+}
+.calendar-month-year-toggle:disabled {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+.calendar-month-year-toggle ion-icon {
+  -webkit-padding-start: 4px;
+  padding-inline-start: 4px;
+  -webkit-padding-end: 0;
+  padding-inline-end: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  flex-shrink: 0;
+}
+
+.calendar-month-year-toggle #toggle-wrapper {
+  display: inline-flex;
+  align-items: center;
+}
+
+ion-picker {
+  --highlight-background: var(--wheel-highlight-background);
+  --highlight-border-radius: var(--wheel-highlight-border-radius);
+  --fade-background-rgb: var(--wheel-fade-background-rgb);
 }
 
 /**
@@ -576,9 +547,9 @@ ion-picker-column-internal {
  * }
  */
 :host {
-  --background: var(--ion-color-light, #ffffff);
-  --background-rgb: var(--ion-color-light-rgb);
-  --title-color: var(--ion-color-step-600, #666666);
+  --background: var(--ion-color-light, #f4f5f8);
+  --background-rgb: var(--ion-color-light-rgb, 244, 245, 248);
+  --title-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
 }
 
 :host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)),
@@ -594,7 +565,7 @@ ion-picker-column-internal {
   padding-inline-end: 16px;
   padding-top: 16px;
   padding-bottom: 16px;
-  border-bottom: 0.55px solid var(--ion-color-step-200, #cccccc);
+  border-bottom: 0.55px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #cccccc));
   font-size: min(0.875rem, 22.4px);
 }
 
@@ -606,15 +577,31 @@ ion-picker-column-internal {
   margin-top: 10px;
 }
 
-:host .calendar-action-buttons ion-item {
-  --padding-start: 16px;
-  --background-hover: transparent;
-  --background-activated: transparent;
+.calendar-month-year-toggle {
+  -webkit-padding-start: 16px;
+  padding-inline-start: 16px;
+  -webkit-padding-end: 16px;
+  padding-inline-end: 16px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  min-height: 44px;
   font-size: min(1rem, 25.6px);
   font-weight: 600;
 }
+.calendar-month-year-toggle.ion-focused::after {
+  opacity: 0.15;
+}
+
+.calendar-month-year-toggle #toggle-wrapper {
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
+  -webkit-margin-end: 8px;
+  margin-inline-end: 8px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
 
-:host .calendar-action-buttons ion-item ion-icon,
+:host .calendar-action-buttons .calendar-month-year-toggle ion-icon,
 :host .calendar-action-buttons ion-buttons ion-button {
   color: var(--ion-color-base);
 }
@@ -640,7 +627,7 @@ ion-picker-column-internal {
   padding-inline-end: 8px;
   padding-top: 0;
   padding-bottom: 0;
-  color: var(--ion-color-step-300, #b3b3b3);
+  color: var(--ion-color-step-300, var(--ion-text-color-step-700, #b3b3b3));
   font-size: min(0.75rem, 19.2px);
   font-weight: 600;
   line-height: 24px;
@@ -784,6 +771,7 @@ ion-picker-column-internal {
 
 .calendar-day.calendar-day-active {
   background: rgba(var(--ion-color-base-rgb), 0.2);
+  font-size: min(1.375rem, 35.2px);
 }
 
 /**
@@ -835,7 +823,7 @@ ion-picker-column-internal {
   padding-inline-end: 8px;
   padding-top: 8px;
   padding-bottom: 8px;
-  border-top: 0.55px solid var(--ion-color-step-200, #cccccc);
+  border-top: 0.55px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #cccccc));
 }
 
 :host .datetime-buttons ::slotted(ion-buttons),