@ionic/core 8.2.3-dev.11719513154.1075733b → 8.2.3-dev.11719565135.1ab35bb2

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

@@ -0,0 +1,111 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('picker: rendering'), () => {
+        test('inline pickers should not have visual regression', async ({ page }) => {
+            await page.goto(`/src/components/picker/test/basic`, config);
+            const fullStack = page.locator('#inline ion-picker-column-option[data-test-value="full-stack"]');
+            const onion = page.locator('#inline ion-picker-column-option[data-test-value="onion"]');
+            await expect(fullStack).toHaveClass(/option-active/);
+            await expect(onion).toHaveClass(/option-active/);
+            await page.waitForChanges();
+            await expect(page.locator('#inline')).toHaveScreenshot(screenshot(`picker-inline-diff`));
+        });
+    });
+    test.describe(title('picker: overlay rendering'), () => {
+        test('popover: should not have visual regression', async ({ page }) => {
+            await page.goto(`/src/components/picker/test/basic`, config);
+            const button = page.locator('#popover');
+            const didPresent = await page.spyOnEvent('ionPopoverDidPresent');
+            const picker = page.locator('ion-popover ion-picker');
+            await button.click();
+            await didPresent.next();
+            await expect(picker).toBeVisible();
+            const popoverContent = page.locator('ion-popover .ion-delegate-host');
+            await expect(popoverContent).toHaveScreenshot(screenshot(`picker-popover-diff`), {
+                /**
+                 * Animations must be enabled to capture the screenshot.
+                 * By default, animations are disabled with toHaveScreenshot,
+                 * and when capturing the screenshot will call animation.finish().
+                 * This will cause the popover to close and the screenshot capture
+                 * to be invalid.
+                 */
+                animations: 'allow',
+            });
+        });
+        test('modal: should not have visual regression', async ({ page }) => {
+            await page.goto('/src/components/picker/test/basic', config);
+            const button = page.locator('#modal');
+            const didPresent = await page.spyOnEvent('ionModalDidPresent');
+            const picker = page.locator('ion-modal ion-picker');
+            await button.click();
+            await didPresent.next();
+            await expect(picker).toBeVisible();
+            const modalContent = page.locator('ion-modal .ion-delegate-host');
+            await expect(modalContent).toHaveScreenshot(screenshot(`picker-modal-diff`), {
+                /**
+                 * Animations must be enabled to capture the screenshot.
+                 * By default, animations are disabled with toHaveScreenshot,
+                 * and when capturing the screenshot will call animation.finish().
+                 * This will cause the modal to close and the screenshot capture
+                 * to be invalid.
+                 */
+                animations: 'allow',
+            });
+        });
+    });
+});
+/**
+ * This behavior does not vary across modes/directions.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('picker: focus'), () => {
+        test.beforeEach(async ({ page }) => {
+            await page.setContent(`
+        <ion-picker>
+          <ion-picker-column value="full-stack" id="first">
+            <ion-picker-column-option value="minified">Minified</ion-picker-column-option>
+            <ion-picker-column-option value="responsive">Responsive</ion-picker-column-option>
+            <ion-picker-column-option value="full-stack">Full Stack</ion-picker-column-option>
+            <ion-picker-column-option value="mobile-first">Mobile First</ion-picker-column-option>
+            <ion-picker-column-option value="serverless">Serverless</ion-picker-column-option>
+          </ion-picker-column>
+          <ion-picker-column value="onion" id="second">
+            <ion-picker-column-option value="tomato">Tomato</ion-picker-column-option>
+            <ion-picker-column-option value="avocado">Avocado</ion-picker-column-option>
+            <ion-picker-column-option value="onion">Onion</ion-picker-column-option>
+            <ion-picker-column-option value="potato">Potato</ion-picker-column-option>
+            <ion-picker-column-option value="artichoke">Artichoke</ion-picker-column-option>
+          </ion-picker-column>
+        </ion-picker>
+      `, config);
+        });
+        test('tabbing should correctly move focus between columns', async ({ page }) => {
+            const firstColumn = page.locator('ion-picker-column#first');
+            const secondColumn = page.locator('ion-picker-column#second');
+            // Focus first column
+            await page.keyboard.press('Tab');
+            await expect(firstColumn).toBeFocused();
+            await page.waitForChanges();
+            // Focus second column
+            await page.keyboard.press('Tab');
+            await expect(secondColumn).toBeFocused();
+        });
+        test('tabbing should correctly move focus back', async ({ page }) => {
+            const firstColumn = page.locator('ion-picker-column#first');
+            const secondColumn = page.locator('ion-picker-column#second');
+            await secondColumn.evaluate((el) => el.setFocus());
+            await expect(secondColumn).toBeFocused();
+            await page.waitForChanges();
+            // Focus first column
+            await page.keyboard.press('Shift+Tab');
+            await expect(firstColumn).toBeFocused();
+        });
+    });
+});

package/dist/collection/components/picker/test/custom/picker.e2e.js

@@ -0,0 +1,85 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+const pickerElement = `
+  <ion-picker>
+    <ion-picker-column id="first"></ion-picker-column>
+    <ion-picker-column id="second"></ion-picker-column>
+  </ion-picker>
+
+  <script>
+    const setPickerColumn = (selector, items, value) => {
+      const column = document.querySelector(selector);
+
+      items.forEach((item) => {
+        const option = document.createElement('ion-picker-column-option');
+        option.value = item.value;
+        option.textContent = item.text;
+
+        option.setAttribute('data-test-value', item.value);
+
+        column.appendChild(option);
+      });
+
+      column.value = value;
+    };
+
+    setPickerColumn(
+      '#first',
+      [
+        { text: 'Minified', value: 'minified' },
+        { text: 'Responsive', value: 'responsive' },
+        { text: 'Full Stack', value: 'full-stack' },
+        { text: 'Mobile First', value: 'mobile-first' },
+        { text: 'Serverless', value: 'serverless' },
+      ],
+      'minified'
+    );
+
+    setPickerColumn(
+      '#second',
+      [
+        { text: 'Tomato', value: 'tomato' },
+        { text: 'Avocado', value: 'avocado' },
+        { text: 'Onion', value: 'onion' },
+        { text: 'Potato', value: 'potato' },
+        { text: 'Artichoke', value: 'artichoke' },
+      ],
+      'tomato'
+    );
+  </script>
+`;
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('picker: custom'), () => {
+        test('should allow styling of the picker highlight', async ({ page }) => {
+            await page.setContent(`
+        <style>
+          ion-picker {
+            --highlight-background: rgb(0, 255, 0, 0.4);
+            --highlight-border-radius: 48px;
+          }
+        </style>
+        ${pickerElement}
+      `, config);
+            const picker = page.locator('ion-picker');
+            await expect(picker).toHaveScreenshot(screenshot(`picker-custom-highlight`));
+        });
+        test('should allow styling of the picker fade', async ({ page }) => {
+            await page.setContent(`
+        <style>
+          ion-picker {
+            --fade-background-rgb: 40, 40, 40;
+          }
+        </style>
+        ${pickerElement}
+      `, config);
+            const picker = page.locator('ion-picker');
+            await expect(picker).toHaveScreenshot(screenshot(`picker-custom-fade`));
+        });
+    });
+});

package/dist/collection/components/picker/test/keyboard-entry/picker.e2e.js

@@ -0,0 +1,183 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+/**
+ * This behavior does not vary across modes/directions.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('picker: keyboard entry'), () => {
+        test('should scroll to and update the value prop for a single column', async ({ page }) => {
+            await page.setContent(`
+        <ion-picker>
+          <ion-picker-column></ion-picker-column>
+        </ion-picker>
+
+        <script>
+          const column = document.querySelector('ion-picker-column');
+          column.numericInput = true;
+          const items = [
+            { text: '01', value: 1 },
+            { text: '02', value: 2 },
+            { text: '03', value: 3 },
+            { text: '04', value: 4 },
+            { text: '05', value: 5 }
+          ];
+
+          items.forEach((item) => {
+            const option = document.createElement('ion-picker-column-option');
+            option.value = item.value;
+            option.textContent = item.text;
+
+            column.appendChild(option);
+          });
+        </script>
+      `, config);
+            const column = page.locator('ion-picker-column');
+            const ionChange = await page.spyOnEvent('ionChange');
+            await column.evaluate((el) => el.setFocus());
+            await page.keyboard.press('Digit2');
+            await expect(ionChange).toHaveReceivedEventDetail({ value: 2 });
+            await expect(column).toHaveJSProperty('value', 2);
+        });
+        test('should scroll to and update the value prop for multiple columns', async ({ page }) => {
+            await page.setContent(`
+        <ion-picker>
+          <ion-picker-column id="first"></ion-picker-column>
+          <ion-picker-column id="second"></ion-picker-column>
+        </ion-picker>
+
+        <script>
+          const firstColumn = document.querySelector('ion-picker-column#first');
+          const firstItems = [
+            { text: '01', value: 1 },
+            { text: '02', value: 2 },
+            { text: '03', value: 3 },
+            { text: '04', value: 4 },
+            { text: '05', value: 5 }
+          ];
+          firstColumn.value = 5;
+          firstColumn.numericInput = true;
+
+          firstItems.forEach((item) => {
+            const option = document.createElement('ion-picker-column-option');
+            option.value = item.value;
+            option.textContent = item.text;
+
+            firstColumn.appendChild(option);
+          });
+
+          const secondColumn = document.querySelector('ion-picker-column#second');
+          const secondItems = [
+            { text: '20', value: 20 },
+            { text: '21', value: 21 },
+            { text: '22', value: 22 },
+            { text: '23', value: 23 },
+            { text: '24', value: 24 }
+          ];
+          secondColumn.value = 22;
+          secondColumn.numericInput = true;
+
+          secondItems.forEach((item) => {
+            const option = document.createElement('ion-picker-column-option');
+            option.value = item.value;
+            option.textContent = item.text;
+
+            secondColumn.appendChild(option);
+          });
+        </script>
+      `, config);
+            const firstColumn = page.locator('ion-picker-column#first');
+            const secondColumn = page.locator('ion-picker-column#second');
+            const highlight = page.locator('ion-picker .picker-highlight');
+            const firstIonChange = await firstColumn.spyOnEvent('ionChange');
+            const secondIonChange = await secondColumn.spyOnEvent('ionChange');
+            const box = await highlight.boundingBox();
+            if (box !== null) {
+                await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2);
+            }
+            await expect(firstColumn).toHaveClass(/picker-column-active/);
+            await expect(secondColumn).toHaveClass(/picker-column-active/);
+            await page.keyboard.press('Digit2');
+            await expect(firstIonChange).toHaveReceivedEventDetail({ value: 2 });
+            await expect(firstColumn).toHaveJSProperty('value', 2);
+            await page.keyboard.press('Digit2+Digit4');
+            await expect(secondIonChange).toHaveReceivedEventDetail({ value: 24 });
+            await expect(secondColumn).toHaveJSProperty('value', 24);
+        });
+        test('should select 00', async ({ page }) => {
+            await page.setContent(`
+        <ion-picker>
+          <ion-picker-column></ion-picker-column>
+        </ion-picker>
+
+        <script>
+          const column = document.querySelector('ion-picker-column');
+          const items = [
+            { text: '00', value: 12 },
+            { text: '01', value: 1 },
+            { text: '02', value: 2 },
+            { text: '03', value: 3 },
+            { text: '04', value: 4 },
+            { text: '05', value: 5 }
+          ];
+          column.value = 5;
+          column.numericInput = true;
+
+          items.forEach((item) => {
+            const option = document.createElement('ion-picker-column-option');
+            option.value = item.value;
+            option.textContent = item.text;
+
+            column.appendChild(option);
+          });
+        </script>
+      `, config);
+            const column = page.locator('ion-picker-column');
+            const ionChange = await page.spyOnEvent('ionChange');
+            await column.evaluate((el) => el.setFocus());
+            await page.keyboard.press('Digit0');
+            await expect(ionChange).toHaveReceivedEventDetail({ value: 12 });
+            await expect(column).toHaveJSProperty('value', 12);
+        });
+        test('pressing Enter should dismiss the keyboard', async ({ page }) => {
+            test.info().annotations.push({
+                type: 'issue',
+                description: 'https://github.com/ionic-team/ionic-framework/issues/28325',
+            });
+            await page.setContent(`
+        <ion-picker>
+          <ion-picker-column></ion-picker-column>
+        </ion-picker>
+
+        <script>
+          const column = document.querySelector('ion-picker-column');
+          column.numericInput = true;
+          const items = [
+            { text: '01', value: 1 },
+            { text: '02', value: 2 },
+            { text: '03', value: 3 },
+            { text: '04', value: 4 },
+            { text: '05', value: 5 }
+          ];
+
+          items.forEach((item) => {
+            const option = document.createElement('ion-picker-column-option');
+            option.value = item.value;
+            option.textContent = item.text;
+
+            column.appendChild(option);
+          });
+        </script>
+      `, config);
+            const column = page.locator('ion-picker-column');
+            await column.click();
+            const input = page.locator('ion-picker input');
+            await expect(input).toBeFocused();
+            // pressing Enter should blur the input and therefore close the keyboard
+            await page.keyboard.press('Enter');
+            await expect(input).not.toBeFocused();
+        });
+    });
+});

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

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -69,8 +75,8 @@
  * events. This allows screen readers to navigate the column.
  */
 .assistive-focusable {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -167,7 +173,8 @@
   scroll-snap-align: none;
 }
 
-::slotted([slot=prefix]), ::slotted([slot=suffix]) {
+::slotted([slot=prefix]),
+::slotted([slot=suffix]) {
   max-width: 200px;
   text-overflow: ellipsis;
   white-space: nowrap;

package/dist/collection/components/picker-column/picker-column.js

@@ -7,9 +7,10 @@ import { getElementRoot, raf } from "../../utils/helpers";
 import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from "../../utils/native/haptic";
 import { isPlatform } from "../../utils/platform";
 import { createColorClasses } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
  * @slot prefix - Content to show on the left side of the picker options.
  * @slot suffix - Content to show on the right side of the picker options.
@@ -533,13 +534,13 @@ export class PickerColumn {
     }
     render() {
         const { color, disabled, isActive, numericInput } = this;
-        const mode = getIonMode(this);
-        return (h(Host, { key: 'd60736ce74c0e8c774a163272b78fbad32993ec2', class: createColorClasses(color, {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'd8394b411538657d4dcf74d419d26731674b4139', class: createColorClasses(color, {
+                [theme]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
                 ['picker-column-disabled']: disabled,
-            }) }, this.renderAssistiveFocusable(), h("slot", { key: '74611112ef154b343ae29a773f8cd8a01cc1447d', name: "prefix" }), h("div", { key: 'af772d2b61b7eb41a567593d290b80a50b7caa72', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
+            }) }, this.renderAssistiveFocusable(), h("slot", { key: '76f125144484f040f1f84fdd94bfa4f667ded873', name: "prefix" }), h("div", { key: '43ce783c7ec5168ba05cdad07259d6f64accd948', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
                 this.scrollEl = el;
             },
             /**
@@ -560,7 +561,7 @@ export class PickerColumn {
              * To prevent this, we set the tabIndex to -1. This
              * will match the behavior of the other browsers.
              */
-            tabIndex: -1 }, h("div", { key: '4b646ee97bcf8ed541b9798c91dff189eec41dd1', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'a44d1a10d20a13aeb47f9871b09e291aa7f216bd', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '6a481715bd68fa68dc2a76c2e867ce771ea680b0', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '23236e731b1ad432c104761ebeec91697a6b7643' }), h("div", { key: '58a6c1f35a3ff0b26acaceebfd477d74b6dcfd6d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'ea864872dec6dc363406d1bd9101b1bf21944db6', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '28cc4c570d0dd59f491eef2b15a5ed706d28b7bb', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: 'cff1cc0bea732a5ce22bb451c5ea404a84af1993', name: "suffix" })));
+            tabIndex: -1 }, h("div", { key: 'c34013dd35974ee01b8d6c7afee63ed274669742', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '775350f6dfd63e89a39f043fca24b3205eb6b012', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'c11a4228f40a3abbce211633dab9d4a73e7bab66', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '6c1a0a56e44e7091b63f405801ad480731522ac5' }), h("div", { key: '47e32bd7a7c7e446920ed21d9ea8a353500f93cc', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'b0e0a8f82cfa913aef913c799a5314ef435aae45', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'c0c6b1b323ae8123fdc4ca7b42355d22645e2916', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: '0f61d56444d9d34fafd1d9ba4a6461845ce848d5', name: "suffix" })));
     }
     static get is() { return "ion-picker-column"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/picker-column/test/basic/picker-column.e2e.js

@@ -0,0 +1,64 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+/**
+ * This behavior does not vary across modes/directions.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('picker-column'), () => {
+        test.beforeEach(async ({ page }) => {
+            await page.goto('/src/components/picker-column/test/basic', config);
+        });
+        test('should render a picker item for each item', async ({ page }) => {
+            const columns = page.locator('ion-picker-column ion-picker-column-option');
+            await expect(columns).toHaveCount(24);
+        });
+        test('should render 6 empty picker items', async ({ page }) => {
+            const columns = page.locator('ion-picker-column .picker-item-empty');
+            await expect(columns).toHaveCount(6);
+        });
+        test('should not have an active item when value is not set', async ({ page }) => {
+            const activeColumn = page.locator('ion-picker-column ion-picker-column-option.option-active');
+            await expect(activeColumn).toHaveCount(0);
+        });
+        test('should have an active item when value is set', async ({ page }) => {
+            await page.locator('#default').evaluate((el) => {
+                el.value = '12';
+            });
+            await page.waitForChanges();
+            const activeColumn = page.locator('ion-picker-column ion-picker-column-option.option-active');
+            expect(activeColumn).not.toBeNull();
+        });
+        // TODO FW-3616
+        test.skip('scrolling should change the active item', async ({ page, skip }) => {
+            skip.browser('firefox', 'https://bugzilla.mozilla.org/show_bug.cgi?id=1766890');
+            await page.locator('#default').evaluate((el) => {
+                el.scrollTop = 801;
+            });
+            await page.waitForChanges();
+            const activeColumn = page.locator('ion-picker-column ion-picker-column-option.option-active');
+            await expect(activeColumn).toHaveJSProperty('value', 23);
+        });
+        test('should not emit ionChange when the value is modified externally', async ({ page, skip }) => {
+            skip.browser('firefox', 'https://bugzilla.mozilla.org/show_bug.cgi?id=1766890');
+            const ionChangeSpy = await page.spyOnEvent('ionChange');
+            await page.locator('#default').evaluate((el) => {
+                el.value = '12';
+            });
+            expect(ionChangeSpy).not.toHaveReceivedEvent();
+        });
+        // TODO FW-3616
+        test.skip('should emit ionChange when the picker is scrolled', async ({ page, skip }) => {
+            skip.browser('firefox', 'https://bugzilla.mozilla.org/show_bug.cgi?id=1766890');
+            const ionChangeSpy = await page.spyOnEvent('ionChange');
+            await page.locator('#default').evaluate((el) => {
+                el.scrollTo(0, el.scrollHeight);
+            });
+            await page.waitForChanges();
+            await ionChangeSpy.next();
+            expect(ionChangeSpy).toHaveReceivedEvent();
+        });
+    });
+});

package/dist/collection/components/picker-column/test/disabled/picker-column.e2e.js

@@ -0,0 +1,91 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+/**
+ * This behavior does not vary across modes/directions.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('picker-column: disabled items'), () => {
+        test('disabled picker item should not be considered active', async ({ page }) => {
+            await page.setContent(`
+        <ion-picker>
+          <ion-picker-column value="b">
+            <ion-picker-column-option value="a">A</ion-picker-column-option>
+            <ion-picker-column-option value="b" disabled="true">B</ion-picker-column-option>
+            <ion-picker-column-option value="c">C</ion-picker-column-option>
+          </ion-picker-column>
+        </ion-picker>
+      `, config);
+            const disabledItem = page.locator('ion-picker-column-option').nth(1);
+            await expect(disabledItem).not.toHaveClass(/option-active/);
+        });
+        test('setting the value to a disabled item should not cause that item to be active', async ({ page }) => {
+            await page.setContent(`
+        <ion-picker>
+          <ion-picker-column>
+            <ion-picker-column-option value="a">A</ion-picker-column-option>
+            <ion-picker-column-option value="b" disabled="true">B</ion-picker-column-option>
+            <ion-picker-column-option value="c">C</ion-picker-column-option>
+          </ion-picker-column>
+        </ion-picker>
+      `, config);
+            const pickerColumn = page.locator('ion-picker-column');
+            await pickerColumn.evaluate((el) => (el.value = 'b'));
+            await page.waitForChanges();
+            const disabledItem = page.locator('ion-picker-column ion-picker-column-option').nth(1);
+            await expect(disabledItem).not.toHaveClass(/option-active/);
+        });
+        test('defaulting the value to a disabled item should not cause that item to be active', async ({ page }) => {
+            await page.setContent(`
+        <ion-picker>
+          <ion-picker-column value="b">
+            <ion-picker-column-option value="a">A</ion-picker-column-option>
+            <ion-picker-column-option value="b" disabled="true">B</ion-picker-column-option>
+            <ion-picker-column-option value="c">C</ion-picker-column-option>
+          </ion-picker-column>
+        </ion-picker>
+      `, config);
+            const disabledItem = page.locator('ion-picker-column ion-picker-column-option').nth(1);
+            await expect(disabledItem).not.toHaveClass(/option-active/);
+        });
+    });
+});
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('picker-column: disabled column rendering'), () => {
+        test.beforeEach(async ({ page }) => {
+            await page.goto('/src/components/picker-column/test/disabled', config);
+        });
+        test('disabled column should not have visual regressions', async ({ page }) => {
+            const disabledColumn = page.locator('#column-disabled');
+            await page.waitForChanges();
+            await expect(disabledColumn).toHaveScreenshot(screenshot('picker-disabled-column'));
+        });
+    });
+});
+/**
+ * This behavior does not vary across modes/directions.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('picker-column: disabled column'), () => {
+        test.beforeEach(async ({ page }) => {
+            await page.goto('/src/components/picker-column/test/disabled', config);
+        });
+        test('clicking option in disabled column should not change value', async ({ page }) => {
+            const column = page.locator('#column-disabled');
+            const option = column.locator('ion-picker-column-option').nth(1);
+            await expect(column).toHaveJSProperty('value', 11);
+            /**
+             * Options do not receive pointer events
+             * so we need to forcibly click the element.
+             */
+            await option.click({ force: true });
+            await page.waitForChanges();
+            await expect(column).toHaveJSProperty('value', 11);
+        });
+    });
+});