chore: resolve merge conflicts

core/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.5.7](https://github.com/ionic-team/ionic-framework/compare/v7.5.6...v7.5.7) (2023-11-29)
+
+
+### Bug Fixes
+
+* **alert:** date inputs render correctly in mobile safari ([#28495](https://github.com/ionic-team/ionic-framework/issues/28495)) ([b833f0e](https://github.com/ionic-team/ionic-framework/commit/b833f0e826ddd261230e2e29b70e2dc884d8cb04)), closes [#28494](https://github.com/ionic-team/ionic-framework/issues/28494)
+* **datetime:** allow disabling datetime with prefer-wheel ([#28511](https://github.com/ionic-team/ionic-framework/issues/28511)) ([01130e1](https://github.com/ionic-team/ionic-framework/commit/01130e12e1d73bbf558da9d4dffd7122822ff39c))
+
+
+
+
+
 ## [7.5.6](https://github.com/ionic-team/ionic-framework/compare/v7.5.5...v7.5.6) (2023-11-21)
 
 

core/api.txt

@@ -916,7 +916,12 @@ ion-picker-column,prop,disabled,boolean,false,false,false
 ion-picker-column,prop,items,PickerColumnItem[],[],false,false
 ion-picker-column,prop,mode,"ios" | "md",undefined,false,false
 ion-picker-column,prop,value,number | string | undefined,undefined,false,false
+<<<<<<< HEAD
 ion-picker-column,event,ionChange,{ value: string | number | undefined; },true
+=======
+ion-picker-column,method,setFocus,setFocus() => Promise<void>
+ion-picker-column,event,ionChange,PickerColumnItem,true
+>>>>>>> origin/FW-5580
 
 ion-picker-column-option,shadow
 ion-picker-column-option,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,'primary',false,true

core/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/core",
-  "version": "7.5.6",
+  "version": "7.5.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "7.5.6",
+      "version": "7.5.7",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "^4.7.2",
+        "@stencil/core": "^4.8.1",
         "ionicons": "^7.2.1",
         "tslib": "^2.1.0"
       },
@@ -1825,9 +1825,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.7.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.7.2.tgz",
-      "integrity": "sha512-sPPDYrXiTbfeUF5CCyfqysXK/yfTHC4xYR1+nHzGkS2vhRSBOLp0oPuB+xkJLKA+K2ZqDJUxpOnDxy1CLWwBXA==",
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.1.tgz",
+      "integrity": "sha512-KG1H10j24rlyxIqOI4CG8/h9T7ObTv7giW2H3u1qXV4KKrLykDOpMcLzpqNXqL2Fki3s1QvHyl/oaRvi5waWVw==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -12184,9 +12184,9 @@
       "requires": {}
     },
     "@stencil/core": {
-      "version": "4.7.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.7.2.tgz",
-      "integrity": "sha512-sPPDYrXiTbfeUF5CCyfqysXK/yfTHC4xYR1+nHzGkS2vhRSBOLp0oPuB+xkJLKA+K2ZqDJUxpOnDxy1CLWwBXA=="
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.1.tgz",
+      "integrity": "sha512-KG1H10j24rlyxIqOI4CG8/h9T7ObTv7giW2H3u1qXV4KKrLykDOpMcLzpqNXqL2Fki3s1QvHyl/oaRvi5waWVw=="
     },
     "@stencil/react-output-target": {
       "version": "0.5.3",

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.5.6",
+  "version": "7.5.7",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,7 +31,7 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^4.7.2",
+    "@stencil/core": "^4.8.1",
     "ionicons": "^7.2.1",
     "tslib": "^2.1.0"
   },

core/scripts/testing/themes/dark.css

@@ -0,0 +1,151 @@
+/*
+ * Dark Colors
+ * -------------------------------------------
+ */
+
+:root {
+  --ion-color-primary: #428cff;
+  --ion-color-primary-rgb: 66, 140, 255;
+  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary-contrast-rgb: 255, 255, 255;
+  --ion-color-primary-shade: #3a7be0;
+  --ion-color-primary-tint: #5598ff;
+
+  --ion-color-secondary: #50c8ff;
+  --ion-color-secondary-rgb: 80, 200, 255;
+  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary-contrast-rgb: 255, 255, 255;
+  --ion-color-secondary-shade: #46b0e0;
+  --ion-color-secondary-tint: #62ceff;
+
+  --ion-color-tertiary: #6a64ff;
+  --ion-color-tertiary-rgb: 106, 100, 255;
+  --ion-color-tertiary-contrast: #ffffff;
+  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+  --ion-color-tertiary-shade: #5d58e0;
+  --ion-color-tertiary-tint: #7974ff;
+
+  --ion-color-success: #2fdf75;
+  --ion-color-success-rgb: 47, 223, 117;
+  --ion-color-success-contrast: #000000;
+  --ion-color-success-contrast-rgb: 0, 0, 0;
+  --ion-color-success-shade: #29c467;
+  --ion-color-success-tint: #44e283;
+
+  --ion-color-warning: #ffd534;
+  --ion-color-warning-rgb: 255, 213, 52;
+  --ion-color-warning-contrast: #000000;
+  --ion-color-warning-contrast-rgb: 0, 0, 0;
+  --ion-color-warning-shade: #e0bb2e;
+  --ion-color-warning-tint: #ffd948;
+
+  --ion-color-danger: #ff4961;
+  --ion-color-danger-rgb: 255, 73, 97;
+  --ion-color-danger-contrast: #ffffff;
+  --ion-color-danger-contrast-rgb: 255, 255, 255;
+  --ion-color-danger-shade: #e04055;
+  --ion-color-danger-tint: #ff5b71;
+
+  --ion-color-dark: #f4f5f8;
+  --ion-color-dark-rgb: 244, 245, 248;
+  --ion-color-dark-contrast: #000000;
+  --ion-color-dark-contrast-rgb: 0, 0, 0;
+  --ion-color-dark-shade: #d7d8da;
+  --ion-color-dark-tint: #f5f6f9;
+
+  --ion-color-medium: #989aa2;
+  --ion-color-medium-rgb: 152, 154, 162;
+  --ion-color-medium-contrast: #000000;
+  --ion-color-medium-contrast-rgb: 0, 0, 0;
+  --ion-color-medium-shade: #86888f;
+  --ion-color-medium-tint: #a2a4ab;
+
+  --ion-color-light: #222428;
+  --ion-color-light-rgb: 34, 36, 40;
+  --ion-color-light-contrast: #ffffff;
+  --ion-color-light-contrast-rgb: 255, 255, 255;
+  --ion-color-light-shade: #1e2023;
+  --ion-color-light-tint: #383a3e;
+}
+
+/*
+ * iOS Dark Theme
+ * -------------------------------------------
+ */
+
+.ios body {
+  --ion-background-color: #000000;
+  --ion-background-color-rgb: 0, 0, 0;
+
+  --ion-text-color: #ffffff;
+  --ion-text-color-rgb: 255, 255, 255;
+
+  --ion-color-step-50: #0d0d0d;
+  --ion-color-step-100: #1a1a1a;
+  --ion-color-step-150: #262626;
+  --ion-color-step-200: #333333;
+  --ion-color-step-250: #404040;
+  --ion-color-step-300: #4d4d4d;
+  --ion-color-step-350: #595959;
+  --ion-color-step-400: #666666;
+  --ion-color-step-450: #737373;
+  --ion-color-step-500: #808080;
+  --ion-color-step-550: #8c8c8c;
+  --ion-color-step-600: #999999;
+  --ion-color-step-650: #a6a6a6;
+  --ion-color-step-700: #b3b3b3;
+  --ion-color-step-750: #bfbfbf;
+  --ion-color-step-800: #cccccc;
+  --ion-color-step-850: #d9d9d9;
+  --ion-color-step-900: #e6e6e6;
+  --ion-color-step-950: #f2f2f2;
+
+  --ion-toolbar-background: #0d0d0d;
+
+  --ion-item-background: #000000;
+
+  --ion-card-background: #1c1c1d;
+}
+
+/*
+ * Material Design Dark Theme
+ * -------------------------------------------
+ */
+
+.md body {
+  --ion-background-color: #121212;
+  --ion-background-color-rgb: 18, 18, 18;
+
+  --ion-text-color: #ffffff;
+  --ion-text-color-rgb: 255, 255, 255;
+
+  --ion-border-color: #222222;
+
+  --ion-color-step-50: #1e1e1e;
+  --ion-color-step-100: #2a2a2a;
+  --ion-color-step-150: #363636;
+  --ion-color-step-200: #414141;
+  --ion-color-step-250: #4d4d4d;
+  --ion-color-step-300: #595959;
+  --ion-color-step-350: #656565;
+  --ion-color-step-400: #717171;
+  --ion-color-step-450: #7d7d7d;
+  --ion-color-step-500: #898989;
+  --ion-color-step-550: #949494;
+  --ion-color-step-600: #a0a0a0;
+  --ion-color-step-650: #acacac;
+  --ion-color-step-700: #b8b8b8;
+  --ion-color-step-750: #c4c4c4;
+  --ion-color-step-800: #d0d0d0;
+  --ion-color-step-850: #dbdbdb;
+  --ion-color-step-900: #e7e7e7;
+  --ion-color-step-950: #f3f3f3;
+
+  --ion-item-background: #1e1e1e;
+
+  --ion-toolbar-background: #1f1f1f;
+
+  --ion-tab-bar-background: #1f1f1f;
+
+  --ion-card-background: #1e1e1e;
+}

core/src/components.d.ts

@@ -1162,7 +1162,7 @@ export namespace Components {
          */
         "autocorrect": 'on' | 'off';
         /**
-          * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+          * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
          */
         "autofocus": boolean;
         /**
@@ -1274,7 +1274,7 @@ export namespace Components {
          */
         "required": boolean;
         /**
-          * Sets focus on the native `input` in `ion-input`. Use this method instead of the global `input.focus()`.  Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.  Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved.
+          * Sets focus on the native `input` in `ion-input`. Use this method instead of the global `input.focus()`.  Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.  Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved.  See [managing focus](/docs/developing/managing-focus) for more information.
          */
         "setFocus": () => Promise<void>;
         /**
@@ -1977,6 +1977,10 @@ export namespace Components {
          */
         "numericInput": boolean;
         "scrollActiveItemIntoView": () => Promise<void>;
+        /**
+          * Sets focus on the scrollable container within the picker column. Use this method instead of the global `pickerColumn.focus()`.
+         */
+        "setFocus": () => Promise<void>;
         /**
           * Sets the value prop and fires the ionChange event. This is used when we need to fire ionChange from user-generated events that cannot be caught with normal input/change event listeners.
          */
@@ -2615,7 +2619,7 @@ export namespace Components {
          */
         "searchIcon"?: string;
         /**
-          * Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global `input.focus()`.  Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.  Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved.
+          * Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global `input.focus()`.  Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.  Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved.  See [managing focus](/docs/developing/managing-focus) for more information.
          */
         "setFocus": () => Promise<void>;
         /**
@@ -2964,7 +2968,7 @@ export namespace Components {
          */
         "autocapitalize": string;
         /**
-          * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+          * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
          */
         "autofocus": boolean;
         /**
@@ -3064,7 +3068,7 @@ export namespace Components {
          */
         "rows"?: number;
         /**
-          * Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global `textarea.focus()`.
+          * Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global `textarea.focus()`.  See [managing focus](/docs/developing/managing-focus) for more information.
          */
         "setFocus": () => Promise<void>;
         /**
@@ -5875,7 +5879,7 @@ declare namespace LocalJSX {
          */
         "autocorrect"?: 'on' | 'off';
         /**
-          * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+          * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
          */
         "autofocus"?: boolean;
         /**
@@ -7734,7 +7738,7 @@ declare namespace LocalJSX {
          */
         "autocapitalize"?: string;
         /**
-          * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+          * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
          */
         "autofocus"?: boolean;
         /**

core/src/components/action-sheet/action-sheet.tsx

@@ -337,6 +337,17 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
     if (this.isOpen === true) {
       raf(() => this.present());
     }
+
+    /**
+     * When binding values in frameworks such as Angular
+     * it is possible for the value to be set after the Web Component
+     * initializes but before the value watcher is set up in Stencil.
+     * As a result, the watcher callback may not be fired.
+     * We work around this by manually calling the watcher
+     * callback when the component has loaded and the watcher
+     * is configured.
+     */
+    this.triggerChanged();
   }
 
   render() {

core/src/components/alert/alert.tsx

@@ -376,6 +376,17 @@ export class Alert implements ComponentInterface, OverlayInterface {
     if (this.isOpen === true) {
       raf(() => this.present());
     }
+
+    /**
+     * When binding values in frameworks such as Angular
+     * it is possible for the value to be set after the Web Component
+     * initializes but before the value watcher is set up in Stencil.
+     * As a result, the watcher callback may not be fired.
+     * We work around this by manually calling the watcher
+     * callback when the component has loaded and the watcher
+     * is configured.
+     */
+    this.triggerChanged();
   }
 
   /**

core/src/components/datetime/datetime.scss

@@ -25,19 +25,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 {
-  min-width: 26px;
-}
-
 :host(.datetime-size-fixed) {
   width: auto;
   height: auto;

core/src/components/datetime/test/position/index.html

@@ -25,7 +25,7 @@
       <ion-content class="ion-padding">
         <ion-button id="open-datetime" onclick="presentPopover(defaultPopover, event)">Present Popover</ion-button>
         <ion-popover class="datetime-popover" id="default-popover">
-          <ion-datetime value="2022-05-03"></ion-datetime>
+          <ion-datetime value="2022-05-03T14:23:00.000Z"></ion-datetime>
         </ion-popover>
       </ion-content>
 

core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts

@@ -445,6 +445,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         await page.waitForSelector('.datetime-ready');
 
         const dateColumn = page.locator('.date-column');
+        const dateColumnScrollEl = dateColumn.locator('.picker-opts');
         const dateValues = dateColumn.locator('ion-picker-column-option');
 
         expect(await dateValues.count()).toBe(90);
@@ -453,7 +454,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
          * Select 1st item to change the dates rendered
          */
         await expect(dateValues.nth(0)).toHaveJSProperty('value', '2022-1-1');
-        await dateColumn.evaluate((el: HTMLElement) => (el.scrollTop = 0));
+        await dateColumnScrollEl.evaluate((el: HTMLElement) => (el.scrollTop = 0));
         await page.waitForChanges();
 
         await expect(dateValues.nth(0)).toHaveJSProperty('value', '2021-12-1');
@@ -630,6 +631,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         await page.waitForSelector('.datetime-ready');
 
         const dateColumn = page.locator('.date-column');
+        const dateColumnScrollEl = dateColumn.locator('.picker-opts');
         const dateValues = dateColumn.locator('ion-picker-column-option');
 
         expect(await dateValues.count()).toBe(90);
@@ -638,7 +640,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
          * Select 1st item to change the dates rendered
          */
         await expect(dateValues.nth(0)).toHaveJSProperty('value', '2022-1-1');
-        await dateColumn.evaluate((el: HTMLElement) => (el.scrollTop = 0));
+        await dateColumnScrollEl.evaluate((el: HTMLElement) => (el.scrollTop = 0));
         await page.waitForChanges();
 
         await expect(dateValues.nth(0)).toHaveJSProperty('value', '2021-12-1');

core/src/components/input/input.tsx

@@ -95,7 +95,9 @@ export class Input implements ComponentInterface {
   @Prop() autocorrect: 'on' | 'off' = 'off';
 
   /**
-   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+   * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.
+   *
+   * This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
    */
   @Prop() autofocus = false;
 
@@ -424,6 +426,8 @@ export class Input implements ComponentInterface {
    *
    * Developers who wish to focus an input when an overlay is presented
    * should call `setFocus` after `didPresent` has resolved.
+   *
+   * See [managing focus](/docs/developing/managing-focus) for more information.
    */
   @Method()
   async setFocus() {

core/src/components/loading/loading.tsx

@@ -225,6 +225,17 @@ export class Loading implements ComponentInterface, OverlayInterface {
     if (this.isOpen === true) {
       raf(() => this.present());
     }
+
+    /**
+     * When binding values in frameworks such as Angular
+     * it is possible for the value to be set after the Web Component
+     * initializes but before the value watcher is set up in Stencil.
+     * As a result, the watcher callback may not be fired.
+     * We work around this by manually calling the watcher
+     * callback when the component has loaded and the watcher
+     * is configured.
+     */
+    this.triggerChanged();
   }
 
   disconnectedCallback() {

core/src/components/modal/modal.tsx

@@ -368,6 +368,17 @@ export class Modal implements ComponentInterface, OverlayInterface {
       raf(() => this.present());
     }
     this.breakpointsChanged(this.breakpoints);
+
+    /**
+     * When binding values in frameworks such as Angular
+     * it is possible for the value to be set after the Web Component
+     * initializes but before the value watcher is set up in Stencil.
+     * As a result, the watcher callback may not be fired.
+     * We work around this by manually calling the watcher
+     * callback when the component has loaded and the watcher
+     * is configured.
+     */
+    this.triggerChanged();
   }
 
   /**

core/src/components/picker-column/picker-column.scss

@@ -4,13 +4,53 @@
 // --------------------------------------------------
 
 :host {
-  @include padding(0px, 16px, 0px, 16px);
+  display: flex;
+
+  align-items: center;
+
+  justify-content: center;
+
+  max-width: 100%;
 
   height: 200px;
 
+  font-size: 22px;
+
+  text-align: center;
+}
+
+.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.
+   */
+  @include padding(0px, 16px, 0px, 16px);
+
+  /**
+   * 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;
 
-  font-size: 22px;
+  /**
+   * 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;
 
   /**
@@ -22,14 +62,12 @@
 
   // Hide scrollbars on Firefox
   scrollbar-width: none;
-
-  text-align: center;
 }
 
 /**
  * Hide scrollbars on Chrome and Safari
  */
-:host::-webkit-scrollbar {
+.picker-opts::-webkit-scrollbar {
   display: none;
 }
 
@@ -44,6 +82,36 @@
   scroll-snap-align: none;
 }
 
+::slotted([slot="prefix"]), ::slotted([slot="suffix"]) {
+  max-width: 200px;
+
+  text-overflow: ellipsis;
+
+  white-space: nowrap;
+
+  overflow: hidden;
+}
+
+::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.
+   */
+  @include padding(0, 16px);
+
+  justify-content: end;
+}
+
+::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.
+   */
+  @include padding(0, 16px);
+
+  justify-content: start;
+}
+
 // TODO FW-5580 remove this
 :host .picker-item {
   @include padding(0);
@@ -110,7 +178,7 @@
 }
 
 @media (any-hover: hover) {
-  :host(:focus) {
+  :host(:focus) .picker-opts {
     outline: none;
 
     background: current-color(base, 0.2);

core/src/components/picker-column/picker-column.tsx

@@ -14,6 +14,9 @@ import type { PickerColumnItem } from './picker-column-interfaces';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ *
+ * @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.
  */
 // TODO FW-5580 we can likely go back to a single stylesheet here
 // the per-mode styles were moved to ion-picker-column-option
@@ -26,6 +29,7 @@ import type { PickerColumnItem } from './picker-column-interfaces';
   shadow: true,
 })
 export class PickerColumn implements ComponentInterface {
+  private scrollEl?: HTMLDivElement | null;
   private destroyScrollListener?: () => void;
   private isScrolling = false;
   private scrollEndCallback?: () => void;
@@ -180,13 +184,25 @@ export class PickerColumn implements ComponentInterface {
     this.ionChange.emit({ value });
   }
 
+  /**
+   * Sets focus on the scrollable container within the picker column.
+   * Use this method instead of the global `pickerColumn.focus()`.
+   */
+  @Method()
+  async setFocus() {
+    if (this.scrollEl) {
+      this.scrollEl.focus();
+    }
+  }
+
   private centerPickerItemInView = (target: HTMLElement, smooth = true, canExitInputMode = true) => {
-    const { el, isColumnVisible } = this;
-    if (isColumnVisible) {
+    const { isColumnVisible, scrollEl } = this;
+
+    if (isColumnVisible && scrollEl) {
       // (Vertical offset from parent) - (three empty picker rows) + (half the height of the target to ensure the scroll triggers)
       const top = target.offsetTop - 3 * target.clientHeight + target.clientHeight / 2;
 
-      if (el.scrollTop !== top) {
+      if (scrollEl.scrollTop !== top) {
         /**
          * Setting this flag prevents input
          * mode from exiting in the picker column's
@@ -195,7 +211,7 @@ export class PickerColumn implements ComponentInterface {
          * of these can cause a scroll to occur.
          */
         this.canExitInputMode = canExitInputMode;
-        el.scroll({
+        scrollEl.scroll({
           top,
           left: 0,
           behavior: smooth ? 'smooth' : undefined,
@@ -272,13 +288,15 @@ export class PickerColumn implements ComponentInterface {
      * be disabled on Android.
      */
     const enableHaptics = isPlatform('ios');
-    const { el } = this;
+    const { el, scrollEl } = this;
 
     let timeout: ReturnType<typeof setTimeout> | undefined;
     let activeEl: HTMLIonPickerColumnOptionElement | undefined = this.activeItem;
 
     const scrollCallback = () => {
       raf(() => {
+        if (!scrollEl) return;
+
         if (timeout) {
           clearTimeout(timeout);
           timeout = undefined;
@@ -293,7 +311,7 @@ export class PickerColumn implements ComponentInterface {
          * Select item in the center of the column
          * which is the month/year that we want to select
          */
-        const bbox = el.getBoundingClientRect();
+        const bbox = scrollEl.getBoundingClientRect();
         const centerX = bbox.x + bbox.width / 2;
         const centerY = bbox.y + bbox.height / 2;
 
@@ -403,10 +421,12 @@ export class PickerColumn implements ComponentInterface {
      * does not fire when component is initially shown.
      */
     raf(() => {
-      el.addEventListener('scroll', scrollCallback);
+      if (!scrollEl) return;
+
+      scrollEl.addEventListener('scroll', scrollCallback);
 
       this.destroyScrollListener = () => {
-        el.removeEventListener('scroll', scrollCallback);
+        scrollEl.removeEventListener('scroll', scrollCallback);
       };
     });
   };
@@ -468,32 +488,41 @@ export class PickerColumn implements ComponentInterface {
       <Host
         exportparts={`${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`}
         disabled={pickerDisabled}
-        tabindex={pickerDisabled ? null : 0}
         class={createColorClasses(color, {
           [mode]: true,
           ['picker-column-active']: isActive,
           ['picker-column-numeric-input']: numericInput,
         })}
       >
-        <div class="picker-item picker-item-empty" aria-hidden="true">
-          &nbsp;
-        </div>
-        <div class="picker-item picker-item-empty" aria-hidden="true">
-          &nbsp;
-        </div>
-        <div class="picker-item picker-item-empty" aria-hidden="true">
-          &nbsp;
-        </div>
-        <slot></slot>
-        <div class="picker-item picker-item-empty" aria-hidden="true">
-          &nbsp;
-        </div>
-        <div class="picker-item picker-item-empty" aria-hidden="true">
-          &nbsp;
-        </div>
-        <div class="picker-item picker-item-empty" aria-hidden="true">
-          &nbsp;
+        <slot name="prefix"></slot>
+        <div
+          class="picker-opts"
+          tabindex={pickerDisabled ? undefined : 0}
+          ref={(el) => {
+            this.scrollEl = el;
+          }}
+        >
+          <div class="picker-item picker-item-empty" aria-hidden="true">
+            &nbsp;
+          </div>
+          <div class="picker-item picker-item-empty" aria-hidden="true">
+            &nbsp;
+          </div>
+          <div class="picker-item picker-item-empty" aria-hidden="true">
+            &nbsp;
+          </div>
+          <slot></slot>
+          <div class="picker-item picker-item-empty" aria-hidden="true">
+            &nbsp;
+          </div>
+          <div class="picker-item picker-item-empty" aria-hidden="true">
+            &nbsp;
+          </div>
+          <div class="picker-item picker-item-empty" aria-hidden="true">
+            &nbsp;
+          </div>
         </div>
+        <slot name="suffix"></slot>
       </Host>
     );
   }

core/src/components/picker-column/test/slots/index.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Picker Column - Slots</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header translucent="true">
+        <ion-toolbar>
+          <ion-title>Picker Column - Basic</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-picker>
+          <ion-picker-column>
+            <div slot="prefix">Prefix</div>
+            <div slot="suffix">Suffix</div>
+          </ion-picker-column>
+        </ion-picker>
+        <ion-picker>
+          <ion-picker-column>
+            <div slot="prefix">Prefix</div>
+            <div slot="suffix">Long Suffix Long Suffix Long Suffix</div>
+          </ion-picker-column>
+        </ion-picker>
+      </ion-content>
+      <script>
+        const pickerColumns = document.querySelectorAll('ion-picker-column');
+
+        const items = Array(24)
+          .fill()
+          .forEach((_, i) => {
+            pickerColumns.forEach((col) => {
+              const option = document.createElement('ion-picker-column-option');
+              option.value = i;
+              option.textContent = i;
+
+              col.appendChild(option);
+            });
+          });
+      </script>
+    </ion-app>
+  </body>
+</html>

core/src/components/picker-column/test/slots/picker-column.e2e.ts

@@ -0,0 +1,46 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('picker-column: slots'), () => {
+    test('should not have visual regressions with prefix and suffix', 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">B</ion-picker-column-option>
+            <ion-picker-column-option value="c">C</ion-picker-column-option>
+            <div slot="prefix">Prefix</div>
+            <div slot="suffix">Suffix</div>
+          </ion-picker-column>
+        </ion-picker>
+      `,
+        config
+      );
+
+      const picker = page.locator('ion-picker');
+      await expect(picker).toHaveScreenshot(screenshot(`picker-prefix-suffix`));
+    });
+
+    test('should not have visual regressions with a long prefix and suffix', 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">B</ion-picker-column-option>
+            <ion-picker-column-option value="c">C</ion-picker-column-option>
+            <div slot="prefix">Long prefix long prefix long prefix</div>
+            <div slot="suffix">Long suffix long suffix long suffix</div>
+          </ion-picker-column>
+        </ion-picker>
+      `,
+        config
+      );
+
+      const picker = page.locator('ion-picker');
+      await expect(picker).toHaveScreenshot(screenshot(`picker-long-prefix-suffix`));
+    });
+  });
+});

core/src/components/picker/test/basic/picker.e2e.ts

@@ -124,7 +124,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       const firstColumn = page.locator('ion-picker-column#first');
       const secondColumn = page.locator('ion-picker-column#second');
 
-      await secondColumn.focus();
+      await secondColumn.evaluate((el: HTMLIonPickerColumnElement) => el.setFocus());
       await expect(secondColumn).toBeFocused();
 
       await page.waitForChanges();

core/src/components/picker/test/keyboard-entry/picker.e2e.ts

@@ -33,7 +33,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
       const column = page.locator('ion-picker-column');
       const ionChange = await page.spyOnEvent('ionChange');
-      await column.focus();
+      await column.evaluate((el: HTMLIonPickerColumnElement) => el.setFocus());
 
       await page.keyboard.press('Digit2');
 
@@ -127,7 +127,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
       const column = page.locator('ion-picker-column');
       const ionChange = await page.spyOnEvent('ionChange');
-      await column.focus();
+      await column.evaluate((el: HTMLIonPickerColumnElement) => el.setFocus());
 
       await page.keyboard.press('Digit0');
 

core/src/components/popover/popover.tsx

@@ -370,6 +370,17 @@ export class Popover implements ComponentInterface, PopoverInterface {
         this.dismiss(undefined, undefined, false);
       });
     }
+
+    /**
+     * When binding values in frameworks such as Angular
+     * it is possible for the value to be set after the Web Component
+     * initializes but before the value watcher is set up in Stencil.
+     * As a result, the watcher callback may not be fired.
+     * We work around this by manually calling the watcher
+     * callback when the component has loaded and the watcher
+     * is configured.
+     */
+    this.configureTriggerInteraction();
   }
 
   /**

core/src/components/searchbar/searchbar.tsx

@@ -257,6 +257,8 @@ export class Searchbar implements ComponentInterface {
    *
    * Developers who wish to focus an input when an overlay is presented
    * should call `setFocus` after `didPresent` has resolved.
+   *
+   * See [managing focus](/docs/developing/managing-focus) for more information.
    */
   @Method()
   async setFocus() {

core/src/components/textarea/textarea.tsx

@@ -93,7 +93,9 @@ export class Textarea implements ComponentInterface {
   @Prop() autocapitalize = 'none';
 
   /**
-   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+   * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.
+   *
+   * This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
    */
   @Prop() autofocus = false;
 
@@ -372,6 +374,8 @@ export class Textarea implements ComponentInterface {
   /**
    * Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global
    * `textarea.focus()`.
+   *
+   * See [managing focus](/docs/developing/managing-focus) for more information.
    */
   @Method()
   async setFocus() {

core/src/components/toast/toast.tsx

@@ -288,6 +288,17 @@ export class Toast implements ComponentInterface, OverlayInterface {
     if (this.isOpen === true) {
       raf(() => this.present());
     }
+
+    /**
+     * When binding values in frameworks such as Angular
+     * it is possible for the value to be set after the Web Component
+     * initializes but before the value watcher is set up in Stencil.
+     * As a result, the watcher callback may not be fired.
+     * We work around this by manually calling the watcher
+     * callback when the component has loaded and the watcher
+     * is configured.
+     */
+    this.triggerChanged();
   }
 
   /**

core/src/utils/test/playwright/generator.ts

@@ -1,5 +1,12 @@
 export type Mode = 'ios' | 'md';
 export type Direction = 'ltr' | 'rtl';
+/**
+ * The theme to use for the playwright test.
+ *
+ * - `light`: The fallback theme values. Theme stylesheet will not be included.
+ * - `dark`: The dark theme values.
+ */
+export type Theme = 'light' | 'dark';
 
 export type TitleFn = (title: string) => string;
 export type ScreenshotFn = (fileName: string) => string;
@@ -7,6 +14,7 @@ export type ScreenshotFn = (fileName: string) => string;
 export interface TestConfig {
   mode: Mode;
   direction: Direction;
+  theme: Theme;
 }
 
 interface TestUtilities {
@@ -18,6 +26,7 @@ interface TestUtilities {
 interface TestConfigOption {
   modes?: Mode[];
   directions?: Direction[];
+  themes?: Theme[];
 }
 
 /**
@@ -27,9 +36,19 @@ interface TestConfigOption {
  * each test title is unique.
  */
 const generateTitle = (title: string, config: TestConfig): string => {
-  const { mode, direction } = config;
+  const { mode, direction, theme } = config;
 
-  return `${title} - ${mode}/${direction}`;
+  if (theme === 'light') {
+    /**
+     * Ionic has many existing tests that existed prior to
+     * the introduction of theme testing. To maintain backwards
+     * compatibility, we will not include the theme in the test
+     * title if the theme is set to light.
+     */
+    return `${title} - ${mode}/${direction}`;
+  }
+
+  return `${title} - ${mode}/${direction}/${theme}`;
 };
 
 /**
@@ -37,9 +56,19 @@ const generateTitle = (title: string, config: TestConfig): string => {
  * and a test config.
  */
 const generateScreenshotName = (fileName: string, config: TestConfig): string => {
-  const { mode, direction } = config;
+  const { mode, direction, theme } = config;
 
-  return `${fileName}-${mode}-${direction}.png`;
+  if (theme === 'light') {
+    /**
+     * Ionic has many existing tests that existed prior to
+     * the introduction of theme testing. To maintain backwards
+     * compatibility, we will not include the theme in the screenshot
+     * name if the theme is set to light.
+     */
+    return `${fileName}-${mode}-${direction}.png`;
+  }
+
+  return `${fileName}-${mode}-${direction}-${theme}.png`;
 };
 
 /**
@@ -54,12 +83,15 @@ export const configs = (testConfig: TestConfigOption = DEFAULT_TEST_CONFIG_OPTIO
    * If certain options are not provided,
    * fall back to the defaults.
    */
-  const processedMode: Mode[] = modes ?? DEFAULT_MODES;
-  const processedDirection: Direction[] = directions ?? DEFAULT_DIRECTIONS;
+  const processedMode = modes ?? DEFAULT_MODES;
+  const processedDirection = directions ?? DEFAULT_DIRECTIONS;
+  const processedTheme = testConfig.themes ?? DEFAULT_THEMES;
 
-  processedMode.forEach((mode: Mode) => {
-    processedDirection.forEach((direction: Direction) => {
-      configs.push({ mode, direction });
+  processedMode.forEach((mode) => {
+    processedDirection.forEach((direction) => {
+      processedTheme.forEach((theme) => {
+        configs.push({ mode, direction, theme });
+      });
     });
   });
 
@@ -74,6 +106,7 @@ export const configs = (testConfig: TestConfigOption = DEFAULT_TEST_CONFIG_OPTIO
 
 const DEFAULT_MODES: Mode[] = ['ios', 'md'];
 const DEFAULT_DIRECTIONS: Direction[] = ['ltr', 'rtl'];
+const DEFAULT_THEMES: Theme[] = ['light'];
 
 const DEFAULT_TEST_CONFIG_OPTION = {
   modes: DEFAULT_MODES,

core/src/utils/test/playwright/page/utils/set-content.ts

@@ -1,5 +1,5 @@
 import type { Page, TestInfo } from '@playwright/test';
-import type { E2EPageOptions, Mode, Direction } from '@utils/test/playwright';
+import type { E2EPageOptions, Mode, Direction, Theme } from '@utils/test/playwright';
 
 /**
  * Overwrites the default Playwright page.setContent method.
@@ -19,25 +19,30 @@ export const setContent = async (page: Page, html: string, testInfo: TestInfo, o
 
   let mode: Mode;
   let direction: Direction;
+  let theme: Theme;
 
   if (options == undefined) {
     mode = testInfo.project.metadata.mode;
     direction = testInfo.project.metadata.rtl ? 'rtl' : 'ltr';
+    theme = testInfo.project.metadata.theme;
   } else {
     mode = options.mode;
     direction = options.direction;
+    theme = options.theme;
   }
 
   const baseUrl = process.env.PLAYWRIGHT_TEST_BASE_URL;
 
   const output = `
     <!DOCTYPE html>
-    <html dir="${direction}">
+    <html dir="${direction}" lang="en">
       <head>
+        <title>Ionic Playwright Test</title>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
         <link href="${baseUrl}/css/ionic.bundle.css" rel="stylesheet" />
         <link href="${baseUrl}/scripts/testing/styles.css" rel="stylesheet" />
+        ${theme !== 'light' ? `<link href="${baseUrl}/scripts/testing/themes/${theme}.css" rel="stylesheet" />` : ''}
         <script src="${baseUrl}/scripts/testing/scripts.js"></script>
         <script type="module" src="${baseUrl}/dist/ionic/ionic.esm.js"></script>
         <script>
@@ -54,6 +59,11 @@ export const setContent = async (page: Page, html: string, testInfo: TestInfo, o
     </html>
   `;
 
+  testInfo.annotations.push({
+    type: 'theme',
+    description: theme,
+  });
+
   if (baseUrl) {
     await page.route(baseUrl, (route) => {
       if (route.request().url() === `${baseUrl}/`) {