@ionic/core 9.0.3-dev.11788456135.1ab1d6cd → 9.0.3-dev.11790016799.1e269b7a

package/dist/collection/components/input/input.ionic.css

@@ -548,8 +548,8 @@
  * If the input has a validity state, the
  * border should reflect that as a color.
  */
-:host(.input-fill-solid.has-focus.ion-valid) .input-wrapper-inner,
-:host(.input-fill-solid.ion-touched.ion-invalid) .input-wrapper-inner {
+:host(.input-fill-solid.has-focus.ion-valid) .input-wrapper,
+:host(.input-fill-solid.ion-touched.ion-invalid) .input-wrapper {
   --border-color: var(--highlight-color);
 }
 
@@ -595,33 +595,6 @@
   text-transform: none;
 }
 
-.input-outline {
-  right: 0;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  border-radius: var(--border-radius);
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  border: var(--border-width) var(--border-style) var(--border-color);
-}
-
-:host(.input-label-placement-start) .input-wrapper {
-  flex-direction: row;
-}
-
-:host(.input-label-placement-end) .input-wrapper {
-  flex-direction: row-reverse;
-}
-
-:host(.input-label-placement-stacked) .input-wrapper,
-:host(.input-label-placement-floating) .input-wrapper {
-  flex-direction: column;
-  align-items: start;
-}
-
 :host(.input-label-placement-stacked) input,
 :host(.input-label-placement-floating) input {
   margin-left: 0;
@@ -639,37 +612,95 @@
   padding-bottom: var(--token-space-100, var(--token-scale-100, 4px));
 }
 
+/**
+ * The label is nested in the control so that every theme renders the same tree.
+ * Laying the wrapper out as a grid and flattening the control lets the label
+ * span its own row above the start slot, the input and the end slot.
+ */
 .input-wrapper {
-  /**
-   * For the ionic theme, the padding needs to sit on the
-   * native wrapper instead, so that it sits within the
-   * outline container but does not always affect the
-   * label text.
-   */
   padding-left: 0;
   padding-right: 0;
   padding-top: 0;
   padding-bottom: 0;
+  display: grid;
+  grid-template-columns: [field-start slot-start] auto [native] minmax(0, 1fr) [slot-end] auto [field-end];
+  grid-template-rows: [label] auto [field] auto;
   /**
-   * Outline inputs do not have a bottom border.
-   * Instead, they have a border that wraps the
-   * input + label.
+   * Only stretch grows an auto row, so centering holds the label row at its
+   * content height and still centers the field in any leftover host height.
    */
-  border-bottom: none;
+  align-content: center;
+  align-items: center;
   /**
-   * Do not show a background on the input wrapper as
-   * this includes the label, instead we apply the
-   * background to the native wrapper.
+   * The wrapper spans the label too, so the background belongs on the field
+   * box rather than here.
    */
   background: transparent;
 }
 
+.input-control {
+  display: contents;
+}
+
+/**
+ * A pseudo-element draws the box across the second row, so the label can sit in
+ * the first row and stay outside of it while the tree matches the other themes.
+ */
+.input-wrapper::before {
+  border-radius: var(--border-radius, 0);
+  align-self: stretch;
+  box-sizing: border-box;
+  content: "";
+  pointer-events: none;
+  min-height: var(--token-scale-1000, 40px);
+  border: var(--border-width) var(--border-style) var(--border-color);
+  background: var(--background);
+}
+
+.input-wrapper::before {
+  grid-row: field;
+  grid-column: field-start/field-end;
+}
+
 .label-text-wrapper {
-  /**
-   * The label should appear on top of an outline
-   * container that overlaps it so it is always clickable.
-   */
-  position: relative;
+  grid-row: label;
+  grid-column: field-start/field-end;
+}
+
+.input-start {
+  grid-row: field;
+  grid-column: slot-start;
+}
+
+.native-wrapper {
+  grid-row: field;
+  grid-column: native;
+}
+
+.input-end {
+  grid-row: field;
+  grid-column: slot-end;
+}
+
+/**
+ * The padding sits on the cells that the field box covers, so the label is not
+ * indented by it.
+ */
+.input-start,
+.native-wrapper,
+.input-end {
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
+}
+
+.input-start {
+  -webkit-padding-start: var(--padding-start);
+  padding-inline-start: var(--padding-start);
+}
+
+.input-end {
+  -webkit-padding-end: var(--padding-end);
+  padding-inline-end: var(--padding-end);
 }
 
 :host(.input-label-placement-stacked) .label-text-wrapper {
@@ -698,27 +729,6 @@
   border-top: none;
 }
 
-.input-wrapper-inner {
-  border-radius: inherit;
-  -webkit-padding-start: var(--padding-start);
-  padding-inline-start: var(--padding-start);
-  -webkit-padding-end: var(--padding-end);
-  padding-inline-end: var(--padding-end);
-  padding-top: var(--padding-top);
-  padding-bottom: var(--padding-bottom);
-  display: flex;
-  position: relative;
-  align-items: center;
-  width: 100%;
-  min-height: var(--token-scale-1000, 40px);
-  box-sizing: border-box;
-  /**
-  * Apply the background to the inner wrapper so the label
-  * above it stays outside the field.
-  */
-  background: var(--background);
-}
-
 :host(.input-size-medium) {
   --padding-start: var(--token-space-300, var(--token-scale-300, 12px));
   --padding-end: var(--token-space-300, var(--token-scale-300, 12px));
@@ -734,15 +744,15 @@
   --padding-end: var(--token-space-500, var(--token-scale-500, 20px));
 }
 
-:host(.input-size-medium) .input-wrapper-inner {
+:host(.input-size-medium) .input-wrapper::before {
   min-height: var(--token-scale-1000, 40px);
 }
 
-:host(.input-size-large) .input-wrapper-inner {
+:host(.input-size-large) .input-wrapper::before {
   min-height: var(--token-scale-1200, 48px);
 }
 
-:host(.input-size-xlarge) .input-wrapper-inner {
+:host(.input-size-xlarge) .input-wrapper::before {
   min-height: var(--token-scale-1400, 56px);
 }
 
@@ -770,18 +780,31 @@
   --size: var(--token-scale-1400, 56px);
 }
 
-.input-wrapper-inner::after {
-  right: 0;
-  left: 0;
-  top: 50%;
-  position: absolute;
-  height: 100%;
-  min-height: var(--token-scale-1200, 48px);
-  transform: translateY(-50%);
+/**
+ * This stays at the default stacking level. The native input is positioned at
+ * `z-index: 1`, so a target area at that level or above paints over it and
+ * swallows the clicks meant for it. Tree order already puts this above the
+ * field box, which is all it needs to cover.
+ */
+.input-wrapper::after {
+  grid-row: field;
+  grid-column: field-start/field-end;
+  align-self: stretch;
   content: "";
   cursor: text;
 }
 
+/**
+ * The medium field is shorter than the minimum target area, so the negative
+ * block margin lets the target area overflow the row instead of growing it.
+ * The larger sizes are already at least as tall, so they need no correction.
+ */
+:host(.input-size-medium) .input-wrapper::after {
+  margin-top: calc((var(--token-scale-1000, 40px) - var(--token-scale-1200, 48px)) / 2);
+  margin-bottom: calc((var(--token-scale-1000, 40px) - var(--token-scale-1200, 48px)) / 2);
+  min-height: var(--token-scale-1200, 48px);
+}
+
 ::slotted([slot=start]),
 ::slotted([slot=end]),
 .input-clear-icon {

package/dist/collection/components/input/input.js

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import xRegular from "@phosphor-icons/core/assets/regular/x.svg";
 import { Build, Host, forceUpdate, h, } from "@stencil/core";
 import { createClearButtonPressController, createNotchController, createStartContainerController, checkInvalidState, } from "../../utils/forms/index";
 import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnReady } from "../../utils/helpers";
@@ -579,27 +578,19 @@ export class Input {
                 'input-clear-button-pressed': this.isClearButtonPressed,
             }, onPointerDown: this.clearButtonPressController.onPointerDown, onPointerCancel: this.clearButtonPressController.release, onClick: this.clearTextInput }, h("ion-icon", { "aria-hidden": "true", icon: this.inputClearIcon })));
     }
-    /**
-     * The ionic theme keeps the label above a field box that wraps the slots and
-     * the input, so the label can size independently of the slotted content.
-     */
-    renderIonicField() {
-        return [
-            this.renderLabel(),
-            h("div", { key: "inner", class: "input-wrapper-inner" }, h("div", { key: "outline", class: "input-outline" }), this.renderStartContainer(), h("div", { key: "control", class: "input-control" }, h("div", { class: "native-wrapper", onClick: this.onLabelClick }, this.renderNativeInput())), this.renderEndContainer()),
-        ];
-    }
-    /**
-     * The ios and md themes nest the label alongside the input so a floating
-     * label can escape the control and clear the start and end slots.
-     */
     renderStartContainer() {
         return (h("div", { key: "start", class: "input-start", ref: (el) => (this.startContainerEl = el) }, h("slot", { name: "start" })));
     }
     renderEndContainer() {
         return (h("div", { key: "end", class: "input-end" }, this.renderClearButton(), h("slot", { name: "end" })));
     }
-    renderNativeField() {
+    /**
+     * Every theme renders the same label and control structure, aside from the md
+     * outline container below. The label is nested alongside the input so the ios
+     * and md floating label can escape the control and clear the start and end
+     * slots. The ionic theme lifts it above the field with grid instead.
+     */
+    renderField() {
         const hasOutlineFill = getIonTheme(this) === 'md' && this.getFill() === 'outline';
         return [
             hasOutlineFill && this.renderOutlineContainer(),
@@ -621,16 +612,9 @@ export class Input {
         if (this.clearInputIcon != null) {
             return this.clearInputIcon;
         }
-        // Determine the theme and map to default icons
+        // Determine the theme and map to the default icon
         const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: closeCircle,
-            ionic: xRegular,
-            md: closeSharp,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured input clear icon or the default icon
+        const defaultIcon = theme === 'ios' ? closeCircle : closeSharp;
         return config.get('inputClearIcon', defaultIcon);
     }
     render() {
@@ -649,7 +633,7 @@ export class Input {
          * the input has a value or is focused.
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus));
-        return (h(Host, { key: '5f43fb688b16cf37221db78eeedbf4b337a51d65', class: createColorClasses(this.color, {
+        return (h(Host, { key: '82d13bcc33e5817aa3afcc0c752cdca87301b1c7', class: createColorClasses(this.color, {
                 [theme]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -662,7 +646,7 @@ export class Input {
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
                 'input-readonly': readonly,
-            }) }, h("label", { key: '211acead7fe50527b472ebddddca5ecc72ce1ec9', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, theme === 'ionic' ? this.renderIonicField() : this.renderNativeField(), shouldRenderHighlight && h("div", { key: 'b47126f58c61d673ec1c970f1d166284e45b5a9b', class: "input-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '53d8b948776361505a9bc47a4a2e8544d05f6856', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderField(), shouldRenderHighlight && h("div", { key: 'f4c81c4927a685d1474bb4510ad25eb51f77cd99', class: "input-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input-password-toggle/input-password-toggle.js

@@ -1,14 +1,12 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import eyeSlashRegular from "@phosphor-icons/core/assets/regular/eye-slash.svg";
-import eyeRegular from "@phosphor-icons/core/assets/regular/eye.svg";
 import { Host, h } from "@stencil/core";
 import { printIonWarning } from "../../utils/logging/index";
 import { createColorClasses } from "../../utils/theme";
 import { eyeOff, eye } from "ionicons/icons";
 import { config } from "../../global/config";
-import { getIonMode, getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
@@ -56,54 +54,46 @@ export class InputPasswordToggle {
     disconnectedCallback() {
         this.inputElRef = null;
     }
+    /**
+     * Get the icon to use for the hide icon.
+     * If an icon is set on the component, use that.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
     get inputPasswordHideIcon() {
         // Return the icon if it is explicitly set
         if (this.hideIcon != null) {
             return this.hideIcon;
         }
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: eyeOff,
-            ionic: eyeSlashRegular,
-            md: eyeOff,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured input password hide icon or the default icon
-        return config.get('inputPasswordHideIcon', defaultIcon);
+        return config.get('inputPasswordHideIcon', eyeOff);
     }
+    /**
+     * Get the icon to use for the show icon.
+     * If an icon is set on the component, use that.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
     get inputPasswordShowIcon() {
         // Return the icon if it is explicitly set
         if (this.showIcon != null) {
             return this.showIcon;
         }
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: eye,
-            ionic: eyeRegular,
-            md: eye,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured input password show icon or the default icon
-        return config.get('inputPasswordShowIcon', defaultIcon);
+        return config.get('inputPasswordShowIcon', eye);
     }
     render() {
         const { color, inputPasswordHideIcon, inputPasswordShowIcon, type } = this;
         const mode = getIonMode(this);
         const isPasswordVisible = type === 'text';
-        return (h(Host, { key: '2734787d7024b5662ab5a3f11d8026d5a514baa3', class: createColorClasses(color, {
+        return (h(Host, { key: '84bc48922e1757b815cc8cfb57120479736c3c60', class: createColorClasses(color, {
                 [mode]: true,
-            }) }, h("ion-button", { key: 'f4507daff695b5f2d0b2794ff6cb73ec71917ca8', mode: mode, color: color, fill: "clear", shape: "round", "aria-label": isPasswordVisible ? 'Hide password' : 'Show password', "aria-pressed": isPasswordVisible ? 'true' : 'false', type: "button", onPointerDown: (ev) => {
+            }) }, h("ion-button", { key: '1ffddcd50039cc044a0ad36e5c8e0465d135518c', mode: mode, color: color, fill: "clear", shape: "round", "aria-label": isPasswordVisible ? 'Hide password' : 'Show password', "aria-pressed": isPasswordVisible ? 'true' : 'false', type: "button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the password toggle
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: 'b1d55b3625cc0a90249090c29b635064e6086075', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
+            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: '6ee118c5044c11b6db743f3ce6be6ef7ba255292', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
     }
     static get is() { return "ion-input-password-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/item/item.js

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import caretRightRegular from "@phosphor-icons/core/assets/regular/caret-right.svg";
 import { Build, Host, forceUpdate, h } from "@stencil/core";
 import { inheritAttributes, raf } from "../../utils/helpers";
 import { createColorClasses, hostContext, openURL } from "../../utils/theme";
@@ -239,29 +238,25 @@ export class Item {
         const controls = this.el.querySelectorAll('ion-toggle:not([disabled]), ion-checkbox:not([disabled]), ion-radio:not([disabled]), ion-select:not([disabled]), ion-input:not([disabled]), ion-textarea:not([disabled])');
         return controls[0];
     }
+    /**
+     * Get the icon to use for the detail icon.
+     * If an icon is set on the component, use that.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
     get itemDetailIcon() {
         // Return the icon if it is explicitly set
         if (this.detailIcon != null) {
             return this.detailIcon;
         }
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: chevronForward,
-            ionic: caretRightRegular,
-            md: chevronForward,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured item detail icon or the default icon
-        return config.get('itemDetailIcon', defaultIcon);
+        return config.get('itemDetailIcon', chevronForward);
     }
     /**
      * The icon should be flipped when the app is RTL and
      * the icon is a variation of chevron.
      */
     get shouldFlipIcon() {
-        return this.itemDetailIcon === chevronForward || this.itemDetailIcon === caretRightRegular;
+        return this.itemDetailIcon === chevronForward;
     }
     render() {
         const { detail, download, labelColorStyles, lines, disabled, href, itemDetailIcon, shouldFlipIcon, rel, target, routerAnimation, routerDirection, inheritedAriaAttributes, multipleInputs, } = this;
@@ -340,7 +335,7 @@ export class Item {
          * multi-input item, and in a clickable item, which is a second tab stop.
          */
         const slottedIndicatorNeedsRoom = this.hasSlottedIndicatorControl && (multipleInputs || this.isClickable());
-        return (h(Host, { key: 'e303a3416c411185a0990ec8dcb1b1479eb236e8', "aria-disabled": ariaDisabled, class: {
+        return (h(Host, { key: '94668203071ec29cbcd4a435cded154d9a6f44e1', "aria-disabled": ariaDisabled, class: {
                 ...childStyles,
                 ...labelColorStyles,
                 ...createColorClasses(this.color, {
@@ -357,7 +352,7 @@ export class Item {
                     'ion-focusable': this.focusable,
                     'item-rtl': document.dir === 'rtl',
                 }),
-            }, role: inList ? 'listitem' : null }, h(TagType, { key: '551e095097f4c241aa0bb0d2aceb0bf4777563b2', ...attrs, ...inheritedAriaAttributes, class: "item-native", part: "native", disabled: disabled, ...clickFn }, h("slot", { key: '8a602938537caaebaad7d72aa3e8d5a4d3a12290', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), h("div", { key: 'c82030fdec973d347bc56ae25bb71f6c76173b60', class: "item-inner", part: "inner" }, h("div", { key: '01db0987d735ce734f1edfcd7ee8164e441c840e', class: "input-wrapper", part: "container" }, h("slot", { key: '87e073b45610277443733f8f150d0adf26e6bf86', onSlotchange: this.updateInteractivityOnSlotChange })), h("slot", { key: '4446a01b2556284a0d8dfb1c209bec1b064a2341', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (h("ion-icon", { key: '09196aa21716c854cbbd7c5aeefff2bfb859746e', icon: itemDetailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": shouldFlipIcon }))), canActivate && theme === 'md' && h("ion-ripple-effect", { key: '3408c7ffac92c84ad99a9d71f8c26b98583010a0' }))));
+            }, role: inList ? 'listitem' : null }, h(TagType, { key: '5d806a372a58368735fa9ec5d7a91fb9fb0177a1', ...attrs, ...inheritedAriaAttributes, class: "item-native", part: "native", disabled: disabled, ...clickFn }, h("slot", { key: 'f51ab92aa48af5e6061e4ce6054ce758913849e9', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), h("div", { key: '7f843e3fc8446f137c2ab8e3b9ec761816537f88', class: "item-inner", part: "inner" }, h("div", { key: '7427ac82b29335459ec3b9c8f07d8b92faee675e', class: "input-wrapper", part: "container" }, h("slot", { key: '99306e28323143b5e4b83f548fcbbe693684128b', onSlotchange: this.updateInteractivityOnSlotChange })), h("slot", { key: 'c0da503cade4c5be74c1a06cbda6d381569b0819', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (h("ion-icon", { key: 'a4422494c8715cf258655ccc1e1dd7ffd9cc13eb', icon: itemDetailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": shouldFlipIcon }))), canActivate && theme === 'md' && h("ion-ripple-effect", { key: '16aa4720ebfbdc1669cec2769780b4cfc8f775ed' }))));
     }
     static get is() { return "ion-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menu-button/menu-button.js

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import listRegular from "@phosphor-icons/core/assets/regular/list.svg";
 import { Host, h } from "@stencil/core";
 import { inheritAriaAttributes } from "../../utils/helpers";
 import { menuController } from "../../utils/menu-controller/index";
@@ -46,17 +45,15 @@ export class MenuButton {
     async visibilityChanged() {
         this.visible = await updateVisibility(this.menu);
     }
+    /**
+     * Get the icon to use for the menu icon.
+     * Use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
     get menuIcon() {
-        // Determine the theme and map to default icons
+        // Determine the theme and map to the default icon
         const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: menuOutline,
-            ionic: listRegular,
-            md: menuSharp,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured menu icon or the default icon
+        const defaultIcon = theme === 'ios' ? menuOutline : menuSharp;
         return config.get('menuIcon', defaultIcon);
     }
     render() {
@@ -67,7 +64,7 @@ export class MenuButton {
             type: this.type,
         };
         const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
-        return (h(Host, { key: '2129cb866a1acc620f005264340f77311535a0c5', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '0593ed9f0867e28fbb9d79e381282eef93343df8', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
                 [theme]: true,
                 button: true, // ion-buttons target .button
                 'menu-button-hidden': hidden,
@@ -76,7 +73,7 @@ export class MenuButton {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h("button", { key: '0dc5a571945fc4da0cc639087c8fff7a989caf5d', ...attrs, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: 'e7393a7e22fb8ef73ac9a5899979501f114dabf0', class: "button-inner" }, h("slot", { key: '78b6e51e63ae6d3525021000e94c7ec8ae06cc70' }, h("ion-icon", { key: '2dccf089945d8938799afe970f728ee94acc0d37', part: "icon", icon: menuIcon, lazy: false, "aria-hidden": "true" }))), theme === 'md' && h("ion-ripple-effect", { key: 'd39348251d4106aabbee9cd9bc4f176a64a090d3', type: "unbounded" }))));
+            }) }, h("button", { key: 'e61f71642db9b719eaf9b71e813fc271ea3b7343', ...attrs, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: '8e5bb04a8e56dd02c7c8b2d10166f095ac40e461', class: "button-inner" }, h("slot", { key: '23d1bce767d0d389380fe30b3cd94e6f7c5c98f6' }, h("ion-icon", { key: 'abc88761fa11b5cfa853b58411e1ee8a4f632859', part: "icon", icon: menuIcon, lazy: false, "aria-hidden": "true" }))), theme === 'md' && h("ion-ripple-effect", { key: '77e328074a65be3b951cf7352aa7f9e82b7f1256', type: "unbounded" }))));
     }
     static get is() { return "ion-menu-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/refresher-content/refresher-content.js

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import caretLeftFill from "@phosphor-icons/core/assets/fill/caret-left-fill.svg";
 import { Host, h } from "@stencil/core";
 import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
@@ -34,6 +33,14 @@ export class RefresherContent {
             this.refreshingSpinner = config.get('refreshingSpinner', config.get('spinner', theme === 'ios' ? 'lines' : 'circular'));
         }
     }
+    /**
+     * Get the icon to use for the arrow icon.
+     * Use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get refresherArrowIcon() {
+        return config.get('refresherArrowIcon', caretBackSharp);
+    }
     renderPullingText() {
         const { customHTMLEnabled, pullingText } = this;
         if (customHTMLEnabled) {
@@ -52,10 +59,9 @@ export class RefresherContent {
         const pullingIcon = this.pullingIcon;
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
         const theme = getIonTheme(this);
-        const arrowIcon = theme === 'ionic' ? caretLeftFill : caretBackSharp;
-        return (h(Host, { key: '264b9869eb2357cc2acb3d2abde9538f2486bc60', class: {
+        return (h(Host, { key: '79641f5cfcbae77afd812b4758984ecb191dda29', class: {
                 [theme]: true,
-            } }, h("div", { key: '4b315df6bfeddc0e8d02435e4049970930858478', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: 'fc5debec928ae7d96ba64c814a35d6d372e60b02', class: "refresher-pulling-icon" }, h("div", { key: '1aa993350b3e9532f3e74a62865093d2e86f3884', class: "spinner-arrow-container" }, h("ion-spinner", { key: 'd8c39493a3b45f994a4f4da8b09662e148790c97', name: this.pullingIcon, paused: true }), (theme === 'md' || theme === 'ionic') && this.pullingIcon === 'circular' && (h("div", { key: 'fbefee823b63e4904ee28b9d978c6822c392bdad', class: "arrow-container" }, h("ion-icon", { key: '2e9742a0d73ec59330d4204217f72cc6e3bae571', icon: arrowIcon, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: '9ad2c55fafd0b284aae8e3be27b462cb520feae0', class: "refresher-pulling-icon" }, h("ion-icon", { key: 'e36ccd2de7d8109495bceead82979cb678285752', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: '2990d364f999f4d018c26ed3dee237bc81a29129', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: 'eb6f9b8ee370f0c809ea3519968c1562ef72da5e', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '07d526cea46499a22b49d43371c3b3c4d3937689', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+            } }, h("div", { key: '3d6dedbcd0ad04d0a1cc2563a130ac8c53a34891', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: '4dad78f16e6ee175bd55bd88e40ac33bbd492fc0', class: "refresher-pulling-icon" }, h("div", { key: '9d9b9a6c8f371e92aee43eca9d25768fe80aff8f', class: "spinner-arrow-container" }, h("ion-spinner", { key: '56c31feada2e1558f30b472a624e66cada7dd971', name: this.pullingIcon, paused: true }), (theme === 'md' || theme === 'ionic') && this.pullingIcon === 'circular' && (h("div", { key: 'ddb580acffb25ed3cf1c3e793594e4a7c93323bf', class: "arrow-container" }, h("ion-icon", { key: '2ef17431b18d0475e645062b3b98435a1adc2d01', icon: this.refresherArrowIcon, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: 'd400ef684a1a3783709b1842f096b657950d7700', class: "refresher-pulling-icon" }, h("ion-icon", { key: '82e1c30d5c7e94c4420518722a1ddca406739e69', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: '27a6e09db376a00d704d3880d4075580d8ea4fba', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: '712b68c41b714fb3cf3f6403db4250a16df570cd', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '051829b30e40c8eed2a121f2b11cae2fa240a147', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
     }
     static get is() { return "ion-refresher-content"; }
     static get originalStyleUrls() {

package/dist/collection/components/reorder/reorder.js

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import listRegular from "@phosphor-icons/core/assets/regular/list.svg";
 import { Host, h } from "@stencil/core";
 import { reorderThreeOutline, reorderTwoSharp } from "ionicons/icons";
 import { config } from "../../global/config";
@@ -24,28 +23,21 @@ export class Reorder {
     }
     /**
      * Get the icon to use for the handle icon.
-     * Otherwise, use the icon set in the config.
+     * Use the icon set in the config.
      * If no icon is set in the config, use the default icon.
      */
     get reorderHandleIcon() {
-        // Determine the theme and map to default icons
+        // Determine the theme and map to the default icon
         const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: reorderThreeOutline,
-            ionic: listRegular,
-            md: reorderTwoSharp,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured reorder handle icon or the default icon
+        const defaultIcon = theme === 'ios' ? reorderThreeOutline : reorderTwoSharp;
         return config.get('reorderHandleIcon', defaultIcon);
     }
     render() {
         const { reorderHandleIcon } = this;
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'b33c72a16a2ef9aef7b15d4907ba9b3ea9617954', class: {
+        return (h(Host, { key: 'ba25a7b0b5ece6693f2431f562d63738efe1f831', class: {
                 [theme]: true,
-            } }, h("slot", { key: '4a34e01ec73e0237b224cf9d8705cf4c13870d70' }, h("ion-icon", { key: '36e4d3c1926f1abb97422b44fcb28b0cc3507e1c', icon: reorderHandleIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+            } }, h("slot", { key: 'b5afb5131bfb9bfce01a01d6b36e0a7408e14ec5' }, h("ion-icon", { key: '7e0d35640277a07b139d122939b0253a81dc785d', icon: reorderHandleIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
     }
     static get is() { return "ion-reorder"; }
     static get encapsulation() { return "shadow"; }