update demo

[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [@playwright/test](https://playwright.dev)
([source](https://togithub.com/microsoft/playwright)) | [`1.42.0` ->
`1.42.1`](https://renovatebot.com/diffs/npm/@playwright%2ftest/1.42.0/1.42.1)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@playwright%2ftest/1.42.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@playwright%2ftest/1.42.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@playwright%2ftest/1.42.0/1.42.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@playwright%2ftest/1.42.0/1.42.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>microsoft/playwright (@&#8203;playwright/test)</summary>

###
[`v1.42.1`](https://togithub.com/microsoft/playwright/releases/tag/v1.42.1)

[Compare
Source](https://togithub.com/microsoft/playwright/compare/v1.42.0...v1.42.1)

##### Highlights


[https://github.com/microsoft/playwright/issues/29732](https://togithub.com/microsoft/playwright/issues/29732)
- \[Regression]: HEAD requests to webServer.url since
v1.42.0[https://github.com/microsoft/playwright/issues/29746](https://togithub.com/microsoft/playwright/issues/29746)6
- \[Regression]: Playwright CT CLI scripts fail due to broken
initializePlugin
impor[https://github.com/microsoft/playwright/issues/29739](https://togithub.com/microsoft/playwright/issues/29739)39
- \[Bug]: Component tests fails when imported a module with a dot in a
na[https://github.com/microsoft/playwright/issues/29731](https://togithub.com/microsoft/playwright/issues/29731)731
- \[Regression]: 1.42.0 breaks some import
stateme[https://github.com/microsoft/playwright/issues/29760](https://togithub.com/microsoft/playwright/issues/29760)9760
- \[Bug]: Possible regression with chained locators in v1.42

##### Browser Versions

-   Chromium 123.0.6312.4
-   Mozilla Firefox 123.0
-   WebKit 17.4

This version was also tested against the following stable channels:

-   Google Chrome 122
-   Microsoft Edge 123

</details>

---

### Configuration

📅 **Schedule**: Branch creation - "every weekday before 11am" (UTC),
Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you
are satisfied.

♻ **Rebasing**: Never, or you tick the rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR has been generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View
repository job log
[here](https://developer.mend.io/github/ionic-team/ionic-framework).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4yMzguMSIsInVwZGF0ZWRJblZlciI6IjM3LjIzOC4xIiwidGFyZ2V0QnJhbmNoIjoibWFpbiJ9-->

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

core/package-lock.json

@@ -1664,12 +1664,12 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.41.2",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.41.2.tgz",
-      "integrity": "sha512-qQB9h7KbibJzrDpkXkYvsmiDJK14FULCCZgEcoe2AvFAS64oCirWTwzTlAYEbKaRxWs5TFesE1Na6izMv3HfGg==",
+      "version": "1.42.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.42.1.tgz",
+      "integrity": "sha512-Gq9rmS54mjBL/7/MvBaNOBwbfnh7beHvS6oS4srqXFcQHpQCV1+c8JXWE8VLPyRDhgS3H8x8A7hztqI9VnwrAQ==",
       "dev": true,
       "dependencies": {
-        "playwright": "1.41.2"
+        "playwright": "1.42.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -7986,12 +7986,12 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.41.2",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.41.2.tgz",
-      "integrity": "sha512-v0bOa6H2GJChDL8pAeLa/LZC4feoAMbSQm1/jF/ySsWWoaNItvrMP7GEkvEEFyCTUYKMxjQKaTSg5up7nR6/8A==",
+      "version": "1.42.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.42.1.tgz",
+      "integrity": "sha512-PgwB03s2DZBcNRoW+1w9E+VkLBxweib6KTXM0M3tkiT4jVxKSi6PmVJ591J+0u10LUrgxB7dLRbiJqO5s2QPMg==",
       "dev": true,
       "dependencies": {
-        "playwright-core": "1.41.2"
+        "playwright-core": "1.42.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -8004,9 +8004,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.41.2",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.41.2.tgz",
-      "integrity": "sha512-VaTvwCA4Y8kxEe+kfm2+uUUw5Lubf38RxF7FpBxLPmGe5sdNkSg5e3ChEigaGrX7qdqT3pt2m/98LiyvU2x6CA==",
+      "version": "1.42.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.42.1.tgz",
+      "integrity": "sha512-mxz6zclokgrke9p1vtdy/COWBH+eOZgYUVVU34C73M+4j4HLlQJHtfcqiqqxpP0o8HhMkflvfbquLX5dg6wlfA==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"
@@ -11156,12 +11156,12 @@
       }
     },
     "@playwright/test": {
-      "version": "1.41.2",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.41.2.tgz",
-      "integrity": "sha512-qQB9h7KbibJzrDpkXkYvsmiDJK14FULCCZgEcoe2AvFAS64oCirWTwzTlAYEbKaRxWs5TFesE1Na6izMv3HfGg==",
+      "version": "1.42.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.42.1.tgz",
+      "integrity": "sha512-Gq9rmS54mjBL/7/MvBaNOBwbfnh7beHvS6oS4srqXFcQHpQCV1+c8JXWE8VLPyRDhgS3H8x8A7hztqI9VnwrAQ==",
       "dev": true,
       "requires": {
-        "playwright": "1.41.2"
+        "playwright": "1.42.1"
       }
     },
     "@rollup/plugin-node-resolve": {
@@ -15756,19 +15756,19 @@
       }
     },
     "playwright": {
-      "version": "1.41.2",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.41.2.tgz",
-      "integrity": "sha512-v0bOa6H2GJChDL8pAeLa/LZC4feoAMbSQm1/jF/ySsWWoaNItvrMP7GEkvEEFyCTUYKMxjQKaTSg5up7nR6/8A==",
+      "version": "1.42.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.42.1.tgz",
+      "integrity": "sha512-PgwB03s2DZBcNRoW+1w9E+VkLBxweib6KTXM0M3tkiT4jVxKSi6PmVJ591J+0u10LUrgxB7dLRbiJqO5s2QPMg==",
       "dev": true,
       "requires": {
         "fsevents": "2.3.2",
-        "playwright-core": "1.41.2"
+        "playwright-core": "1.42.1"
       }
     },
     "playwright-core": {
-      "version": "1.41.2",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.41.2.tgz",
-      "integrity": "sha512-VaTvwCA4Y8kxEe+kfm2+uUUw5Lubf38RxF7FpBxLPmGe5sdNkSg5e3ChEigaGrX7qdqT3pt2m/98LiyvU2x6CA==",
+      "version": "1.42.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.42.1.tgz",
+      "integrity": "sha512-mxz6zclokgrke9p1vtdy/COWBH+eOZgYUVVU34C73M+4j4HLlQJHtfcqiqqxpP0o8HhMkflvfbquLX5dg6wlfA==",
       "dev": true
     },
     "postcss": {

core/src/components.d.ts

@@ -3211,7 +3211,7 @@ export namespace Components {
     }
     interface IonToggle {
         /**
-          * How to control the alignment of the toggle and label on the cross axis. ``"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+          * How to control the alignment of the toggle and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
          */
         "alignment": 'start' | 'center';
         /**
@@ -8037,7 +8037,7 @@ declare namespace LocalJSX {
     }
     interface IonToggle {
         /**
-          * How to control the alignment of the toggle and label on the cross axis. ``"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+          * How to control the alignment of the toggle and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
          */
         "alignment"?: 'start' | 'center';
         /**

core/src/components/alert/test/a11y/alert.e2e.ts

@@ -288,6 +288,10 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await alert.evaluate((el: HTMLIonAlertElement) => el.present());
       await ionAlertDidPresent.next();
 
+      /**
+       * The borders on the text fields may not be visible in the screenshot
+       * when using Safari, this is due to a WebKit rendering quirk.
+       */
       await expect(page).toHaveScreenshot(screenshot(`alert-text-fields-scale`));
     });
   });

core/src/components/back-button/back-button.md.scss

@@ -48,7 +48,7 @@
   @include padding(0, 4px);
 }
 
-ion-icon {
+::slotted([slot="icon"]) {
   line-height: .67;
 
   text-align: start;

core/src/components/back-button/back-button.scss

@@ -178,7 +178,7 @@ ion-ripple-effect {
 // Back Button Icon
 // --------------------------------------------------
 
-ion-icon {
+::slotted([slot="icon"]) {
   @include padding(var(--icon-padding-top), var(--icon-padding-end), var(--icon-padding-bottom), var(--icon-padding-start));
   @include margin(var(--icon-margin-top), var(--icon-margin-end), var(--icon-margin-bottom), var(--icon-margin-start));
 

core/src/components/back-button/back-button.tsx

@@ -156,13 +156,15 @@ export class BackButton implements ComponentInterface, ButtonInterface {
         <button type={type} disabled={disabled} class="button-native" part="native" aria-label={ariaLabel}>
           <span class="button-inner">
             {backButtonIcon && (
-              <ion-icon
-                part="icon"
-                icon={backButtonIcon}
-                aria-hidden="true"
-                lazy={false}
-                flip-rtl={icon === undefined}
-              ></ion-icon>
+              <slot name="icon">
+                <ion-icon
+                  part="icon"
+                  icon={backButtonIcon}
+                  aria-hidden="true"
+                  lazy={false}
+                  flip-rtl={icon === undefined}
+                ></ion-icon>
+              </slot>
             )}
             {backButtonText && (
               <span part="text" aria-hidden="true" class="button-text">

core/src/components/input/input.tsx

@@ -833,7 +833,9 @@ export class Input implements ComponentInterface {
                 }}
                 onClick={this.clearTextInput}
               >
-                <ion-icon aria-hidden="true" icon={mode === 'ios' ? closeCircle : closeSharp}></ion-icon>
+                <slot name="clear-input-icon">
+                  <ion-icon aria-hidden="true" icon={mode === 'ios' ? closeCircle : closeSharp}></ion-icon>
+                </slot>
               </button>
             )}
             <slot name="end"></slot>

core/src/components/input/test/basic/index.html

@@ -12,6 +12,11 @@
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.14.0/cdn/themes/light.css" />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.14.0/cdn/shoelace-autoloader.js"></script>
+
     <style>
       .grid {
         display: grid;
@@ -40,15 +45,116 @@
     <ion-app>
       <ion-header>
         <ion-toolbar>
-          <ion-title>Input - Basic</ion-title>
+          <ion-buttons slot="start">
+            <ion-back-button text="Go Back" default-href="/"></ion-back-button>
+          </ion-buttons>
+          <ion-title>Ionic</ion-title>
+        </ion-toolbar>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button text="Go Back" default-href="/">
+              <i class="ph-fill ph-heart" slot="icon" style="color: hotpink"></i>
+            </ion-back-button>
+          </ion-buttons>
+          <ion-title>Phosphor</ion-title>
+        </ion-toolbar>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button text="Go Back" default-href="/">
+              <sl-icon name="suit-heart-fill" slot="icon" style="color: hotpink"></sl-icon>
+            </ion-back-button>
+          </ion-buttons>
+          <ion-title>Shoelace</ion-title>
         </ion-toolbar>
       </ion-header>
 
       <ion-content id="content" class="ion-padding">
+        <h1>Ionic</h1>
         <div class="grid">
           <div class="grid-item">
-            <h2>Default</h2>
-            <ion-input value="hi@ionic.io" label="Email"></ion-input>
+            <h2>Input / Clear Input</h2>
+            <ion-input value="hi@ionic.io" label="Email" clear-input="true"></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Select</h2>
+
+            <ion-select label="Select Value" toggle-icon="arrow-down" expanded-icon="arrow-up"></ion-select>
+          </div>
+
+          <div class="grid-item">
+            <h2>Searchbar / Clear and Search</h2>
+
+            <ion-searchbar clear-icon="trash" cancel-button-icon="sad" show-cancel-button="focus" show-clear-button="always" search-icon="send" value="search"></ion-searchbar>
+          </div>
+          <div class="grid-item">
+            <h2>Toast</h2>
+            <ion-button id="open-icon-prop-toast">Open Toast with Icon Prop</ion-button>
+            <ion-toast trigger="open-icon-prop-toast" icon="heart" duration="5000" message="Icon Property"></ion-toast>
+          </div>
+        </div>
+
+        <h1>Phosphor</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Input / Clear Input</h2>
+            <ion-input value="hi@ionic.io" label="Email" clear-input="true">
+              <i class="ph-fill ph-heart" slot="clear-input-icon" style="color: hotpink"></i>
+            </ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Select</h2>
+
+            <ion-select label="Select Value" toggle-icon="arrow-down" expanded-icon="arrow-up">
+              <i class="ph-fill ph-heart" slot="toggle-icon" style="color: red"></i>
+              <i class="ph-fill ph-heart" slot="expanded-icon" style="color: green"></i>
+            </ion-select>
+          </div>
+
+          <div class="grid-item">
+            <h2>Searchbar / Clear and Search</h2>
+
+            TODO
+          </div>
+          <div class="grid-item">
+            <h2>Toast</h2>
+            <ion-button id="open-icon-slot-toast">Open Toast with Icon Slot</ion-button>
+            <ion-toast trigger="open-icon-slot-toast" duration="5000" message="Icon Property">
+              <i class="ph-fill ph-heart" slot="icon" style="color: hotpink"></i>
+            </ion-toast>
+          </div>
+        </div>
+
+        <h1>Shoelace</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Input / Clear Input</h2>
+            <ion-input value="hi@ionic.io" label="Email" clear-input="true">
+              <sl-icon name="suit-heart-fill" slot="clear-input-icon" style="color: hotpink"></sl-icon>
+            </ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Select</h2>
+
+            <ion-select label="Select Value" toggle-icon="arrow-down" expanded-icon="arrow-up">
+              <sl-icon name="suit-heart-fill" slot="toggle-icon" style="color: red"></sl-icon>
+              <sl-icon name="suit-heart-fill" slot="expanded-icon" style="color: green"></sl-icon>
+            </ion-select>
+          </div>
+
+          <div class="grid-item">
+            <h2>Searchbar / Clear and Search</h2>
+
+              TODO
+          </div>
+          <div class="grid-item">
+            <h2>Toast</h2>
+            <ion-button id="open-icon-slot-toast-sl">Open Toast with Icon Slot</ion-button>
+            <ion-toast trigger="open-icon-slot-toast-sl" duration="5000" message="Icon Property">
+              <sl-icon name="suit-heart-fill" slot="icon" style="color: hotpink"></sl-icon>
+            </ion-toast>
           </div>
         </div>
       </ion-content>

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

@@ -92,7 +92,11 @@ export class PickerColumnInternal implements ComponentInterface {
    */
   componentWillLoad() {
     const visibleCallback = (entries: IntersectionObserverEntry[]) => {
-      const ev = entries[0];
+      /**
+       * Browsers will sometimes group multiple IO events into a single callback.
+       * As a result, we want to grab the last/most recent event in case there are multiple events.
+       */
+      const ev = entries[entries.length - 1];
 
       if (ev.isIntersecting) {
         const { activeItem, el } = this;

core/src/components/select/select.tsx

@@ -1087,7 +1087,11 @@ Developers can use the "legacy" property to continue using the legacy form marku
       icon = toggleIcon ?? defaultIcon;
     }
 
-    return <ion-icon class="select-icon" part="icon" aria-hidden="true" icon={icon}></ion-icon>;
+    return (
+      <slot name={isExpanded ? 'expanded-icon' : 'toggle-icon'}>
+        <ion-icon class="select-icon" part="icon" aria-hidden="true" icon={icon}></ion-icon>
+      </slot>
+    )
   }
 
   private get ariaLabel() {

core/src/components/toast/toast.scss

@@ -136,7 +136,8 @@
   justify-content: center;
 }
 
-.toast-icon {
+.toast-icon,
+::slotted([slot="icon"]) {
   @include margin(null, null, null, 16px);
 }
 

core/src/components/toast/toast.tsx

@@ -727,9 +727,11 @@ export class Toast implements ComponentInterface, OverlayInterface {
           <div class="toast-container" part="container">
             {this.renderButtons(startButtons, 'start')}
 
-            {this.icon !== undefined && (
-              <ion-icon class="toast-icon" part="icon" icon={this.icon} lazy={false} aria-hidden="true"></ion-icon>
-            )}
+            <slot name="icon">
+              {this.icon !== undefined && (
+                <ion-icon class="toast-icon" part="icon" icon={this.icon} lazy={false} aria-hidden="true"></ion-icon>
+              )}
+            </slot>
 
             {/*
               This creates a live region where screen readers

core/src/components/toggle/toggle.tsx

@@ -119,7 +119,7 @@ export class Toggle implements ComponentInterface {
 
   /**
    * How to control the alignment of the toggle and label on the cross axis.
-   * ``"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.
+   * `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.
    * `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
    */
   @Prop() alignment: 'start' | 'center' = 'center';