@ionic/core 7.5.8-dev.11701806358.1ca1b519 → 7.5.8-dev.11701894917.1c1465bd

package/dist/collection/components/picker-column/picker-column.md.css

@@ -53,166 +53,97 @@
  *   }
  * }
  */
-:host {
+.picker-col {
   display: flex;
-  align-items: center;
+  position: relative;
+  flex: 1;
   justify-content: center;
-  max-width: 100%;
-  height: 200px;
-  font-size: 22px;
-  text-align: center;
+  height: 100%;
+  box-sizing: content-box;
+  contain: content;
 }
 
 .picker-opts {
-  /**
-   * This padding must be set here and not on the
-   * host to ensure that the focus highlight on the
-   * column is not overly narrow.
-   */
-  -webkit-padding-start: 16px;
-  padding-inline-start: 16px;
-  -webkit-padding-end: 16px;
-  padding-inline-end: 16px;
-  padding-top: 0px;
-  padding-bottom: 0px;
-  /**
-   * When using reactive data, such as in datetime's
-   * wheel picker, there may be layout shifts between
-   * individual columns in a picker as the columns
-   * shrink to fit the widest item in the column.
-   * Setting a minimum width avoids this layout shifting.
-   *
-   * Note that we need this min-width set on the same
-   * element as the vertical padding (i.e. not on the
-   * host).
-   */
-  min-width: 26px;
-  max-height: 200px;
-  outline: none;
-  /**
-   * Added so that text-align can be set on the host
-   * from external components. For example, datetime
-   * changes the alignment of specific columns in its
-   * wheel pickers.
-   */
-  text-align: inherit;
-  scroll-snap-type: y mandatory;
-  /**
-   * Need to explicitly set overflow-x: hidden
-   * for older implementations of scroll snapping.
-   */
-  overflow-x: hidden;
-  overflow-y: scroll;
-  scrollbar-width: none;
-}
-
-/**
- * Hide scrollbars on Chrome and Safari
- */
-.picker-opts::-webkit-scrollbar {
-  display: none;
+  position: relative;
+  flex: 1;
+  max-width: 100%;
 }
 
-::slotted(ion-picker-column-option) {
+.picker-opt {
+  top: 0;
   display: block;
-  scroll-snap-align: center;
-}
-
-.picker-item-empty,
-:host(:not([disabled])) ::slotted(ion-picker-column-option.option-disabled) {
-  scroll-snap-align: none;
-}
-
-::slotted([slot=prefix]), ::slotted([slot=suffix]) {
-  max-width: 200px;
+  position: absolute;
+  width: 100%;
+  border: 0;
+  text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;
+  contain: strict;
   overflow: hidden;
+  will-change: transform;
 }
-
-::slotted([slot=prefix]) {
-  /**
-   * This is added in addition to the column's own padding so that there is white
-   * space between the slot and the column's focus highlight.
-   */
-  -webkit-padding-start: 16px;
-  padding-inline-start: 16px;
-  -webkit-padding-end: 16px;
-  padding-inline-end: 16px;
-  padding-top: 0;
-  padding-bottom: 0;
-  justify-content: end;
+@supports (inset-inline-start: 0) {
+  .picker-opt {
+    inset-inline-start: 0;
+  }
 }
-
-::slotted([slot=suffix]) {
-  /**
-   * This is added in addition to the column's own padding so that there is white
-   * space between the slot and the column's focus highlight.
-   */
-  -webkit-padding-start: 16px;
-  padding-inline-start: 16px;
-  -webkit-padding-end: 16px;
-  padding-inline-end: 16px;
-  padding-top: 0;
-  padding-bottom: 0;
-  justify-content: start;
+@supports not (inset-inline-start: 0) {
+  .picker-opt {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .picker-opt {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  [dir=rtl] .picker-opt {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    .picker-opt:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
-:host .picker-item {
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  display: block;
-  width: 100%;
-  height: 34px;
-  border: 0px;
-  outline: none;
-  background: transparent;
-  color: inherit;
-  font-family: var(--ion-font-family, inherit);
-  font-size: inherit;
-  line-height: 34px;
-  text-align: inherit;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  cursor: pointer;
-  overflow: hidden;
-  scroll-snap-align: center;
+.picker-opt.picker-opt-disabled {
+  pointer-events: none;
 }
 
-:host .picker-item-empty,
-:host .picker-item[disabled] {
-  cursor: default;
+.picker-opt-disabled {
+  opacity: 0;
 }
 
-:host .picker-item-empty,
-:host(:not([disabled])) .picker-item[disabled] {
-  scroll-snap-align: none;
+.picker-opts-left {
+  justify-content: flex-start;
 }
 
-:host([disabled]) {
-  overflow-y: hidden;
+.picker-opts-right {
+  justify-content: flex-end;
 }
 
-:host .picker-item[disabled] {
-  opacity: 0.4;
+.picker-opt:active, .picker-opt:focus {
+  outline: none;
 }
 
-:host(.picker-column-active) .picker-item.picker-item-active {
-  color: var(--ion-color-base);
+.picker-prefix {
+  position: relative;
+  flex: 1;
+  text-align: end;
+  white-space: nowrap;
 }
 
-@media (any-hover: hover) {
-  :host(:focus) .picker-opts {
-    outline: none;
-    background: rgba(var(--ion-color-base-rgb), 0.2);
-  }
+.picker-suffix {
+  position: relative;
+  flex: 1;
+  text-align: start;
+  white-space: nowrap;
 }
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -268,6 +199,48 @@
  *   }
  * }
  */
-:host .picker-item-active {
-  color: var(--ion-color-base);
+.picker-col {
+  -webkit-padding-start: 8px;
+  padding-inline-start: 8px;
+  -webkit-padding-end: 8px;
+  padding-inline-end: 8px;
+  padding-top: 0;
+  padding-bottom: 0;
+  transform-style: preserve-3d;
+}
+
+.picker-prefix,
+.picker-suffix,
+.picker-opts {
+  top: 77px;
+  transform-style: preserve-3d;
+  color: inherit;
+  font-size: 22px;
+  line-height: 42px;
+  pointer-events: none;
+}
+
+.picker-opt {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  height: 43px;
+  transition-timing-function: ease-out;
+  background: transparent;
+  color: inherit;
+  font-size: 22px;
+  line-height: 42px;
+  backface-visibility: hidden;
+  pointer-events: auto;
+}
+
+.picker-prefix,
+.picker-suffix,
+.picker-opt.picker-opt-selected {
+  color: var(--ion-color-primary, #3880ff);
 }

package/dist/collection/components/{picker-legacy-column → picker-column}/test/picker-column-aria.spec.js

@@ -25,10 +25,10 @@ describe('picker-column', () => {
         };
         const page = await newSpecPage({
             components: [PickerColumnCmp],
-            template: () => h("ion-picker-legacy-column", { col: col }),
+            template: () => h("ion-picker-column", { col: col }),
         });
-        const firstOption = page.body.querySelector('ion-picker-legacy-column .picker-opt:nth-child(1)');
-        const secondOption = page.body.querySelector('ion-picker-legacy-column .picker-opt:nth-child(2)');
+        const firstOption = page.body.querySelector('ion-picker-column .picker-opt:nth-child(1)');
+        const secondOption = page.body.querySelector('ion-picker-column .picker-opt:nth-child(2)');
         expect(firstOption.getAttribute('aria-label')).toBe('C Sharp');
         expect(secondOption.getAttribute('aria-label')).toBe(null);
     });

package/dist/collection/components/{picker-legacy-column → picker-column}/test/picker-column-dynamic.spec.js

@@ -15,9 +15,9 @@ describe('picker-column: dynamic options', () => {
         ];
         const page = await newSpecPage({
             components: [PickerColumnCmp],
-            template: () => (h("ion-picker-legacy-column", { col: { options: defaultOptions, name: 'animals' } })),
+            template: () => h("ion-picker-column", { col: { options: defaultOptions, name: 'animals' } }),
         });
-        const pickerCol = page.body.querySelector('ion-picker-legacy-column');
+        const pickerCol = page.body.querySelector('ion-picker-column');
         pickerCol.col = {
             options: [...defaultOptions, { text: 'Carrot', value: 'carrot' }],
             name: 'vegetables',

package/dist/collection/components/{picker-legacy-column → picker-column}/test/picker-column.spec.js

@@ -9,9 +9,9 @@ describe('picker-column', () => {
         const col = { cssClass: 'test-class', options: [], name: 'col' };
         const page = await newSpecPage({
             components: [PickerColumnCmp],
-            template: () => h("ion-picker-legacy-column", { col: col }),
+            template: () => h("ion-picker-column", { col: col }),
         });
-        const pickerCol = page.body.querySelector('ion-picker-legacy-column');
+        const pickerCol = page.body.querySelector('ion-picker-column');
         expect(pickerCol.classList.contains('test-class')).toBe(true);
     });
 });

package/dist/collection/components/{picker-legacy-column → picker-column}/test/standalone/picker-column.e2e.js

@@ -6,11 +6,11 @@ import { configs, test } from "../../../../utils/test/playwright/index";
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
     test.describe(title('picker-column'), () => {
         test.beforeEach(async ({ page }) => {
-            await page.goto(`/src/components/picker-legacy-column/test/standalone`, config);
+            await page.goto(`/src/components/picker-column/test/standalone`, config);
         });
         test('should present picker without ion-app', async ({ page }) => {
             const ionPickerDidPresent = await page.spyOnEvent('ionPickerDidPresent');
-            const picker = page.locator('ion-picker-legacy');
+            const picker = page.locator('ion-picker');
             await page.click('#single-column-button');
             await ionPickerDidPresent.next();
             await expect(picker).toBeVisible();
@@ -22,7 +22,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             });
             const ionPickerDidPresent = await page.spyOnEvent('ionPickerDidPresent');
             const ionPickerColChangeEvent = await page.spyOnEvent('ionPickerColChange');
-            const column = page.locator('ion-picker-legacy-column');
+            const column = page.locator('ion-picker-column');
             const secondOption = column.locator('.picker-opt').nth(1);
             await page.click('#single-column-button');
             await ionPickerDidPresent.next();

package/dist/collection/components/{picker-column-option/picker-column-option.md.css → picker-column-internal/picker-column-internal.ios.css}

@@ -53,7 +53,35 @@
  *   }
  * }
  */
-button {
+:host {
+  -webkit-padding-start: 16px;
+  padding-inline-start: 16px;
+  -webkit-padding-end: 16px;
+  padding-inline-end: 16px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  height: 200px;
+  outline: none;
+  font-size: 22px;
+  scroll-snap-type: y mandatory;
+  /**
+   * Need to explicitly set overflow-x: hidden
+   * for older implementations of scroll snapping.
+   */
+  overflow-x: hidden;
+  overflow-y: scroll;
+  scrollbar-width: none;
+  text-align: center;
+}
+
+/**
+ * Hide scrollbars on Chrome and Safari
+ */
+:host::-webkit-scrollbar {
+  display: none;
+}
+
+:host .picker-item {
   padding-left: 0;
   padding-right: 0;
   padding-top: 0;
@@ -62,6 +90,7 @@ button {
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 0;
+  display: block;
   width: 100%;
   height: 34px;
   border: 0px;
@@ -76,16 +105,34 @@ button {
   white-space: nowrap;
   cursor: pointer;
   overflow: hidden;
+  scroll-snap-align: center;
 }
 
-:host(.option-disabled) {
-  opacity: 0.4;
+:host .picker-item-empty,
+:host .picker-item[disabled] {
+  cursor: default;
 }
 
-:host(.option-disabled) button {
-  cursor: default;
+:host .picker-item-empty,
+:host(:not([disabled])) .picker-item[disabled] {
+  scroll-snap-align: none;
+}
+
+:host([disabled]) {
+  overflow-y: hidden;
+}
+
+:host .picker-item[disabled] {
+  opacity: 0.4;
 }
 
-:host(.option-active) {
+:host(.picker-column-active) .picker-item.picker-item-active {
   color: var(--ion-color-base);
+}
+
+@media (any-hover: hover) {
+  :host(:focus) {
+    outline: none;
+    background: rgba(var(--ion-color-base-rgb), 0.2);
+  }
 }