@ionic/core 7.6.7-dev.11706551842.118ce6e0 → 7.6.7-dev.11706565090.179aa5a7

package/dist/collection/components/{picker-legacy-column → picker-column}/picker-column.md.css

@@ -242,5 +242,5 @@
 .picker-prefix,
 .picker-suffix,
 .picker-opt.picker-opt-selected {
-  color: var(--ion-color-primary, #0054e9);
+  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);
+  }
 }