@ionic/core 8.8.19-dev.11786730389.1a1927bf → 8.8.19-dev.11786735826.1fad7c0a

package/dist/collection/components/textarea/textarea.md.css

@@ -112,20 +112,6 @@
   box-sizing: border-box;
 }
 
-/**
- * Since the label sits on top of the element,
- * the component needs to be taller otherwise the
- * label will appear too close to the textarea text.
- * Also, floating and stacked labels should not
- * push the label down since it it
- * sits on top of the textarea.
- */
-:host(.textarea-label-placement-floating),
-:host(.textarea-label-placement-stacked) {
-  --padding-top: 0px;
-  min-height: 56px;
-}
-
 /**
  * When the cols property is set we should
  * respect that width instead of defaulting
@@ -248,8 +234,8 @@
   padding-inline-start: var(--padding-start);
   -webkit-padding-end: var(--padding-end);
   padding-inline-end: var(--padding-end);
-  padding-top: 0px;
-  padding-bottom: 0px;
+  padding-top: 0;
+  padding-bottom: 0;
   border-radius: var(--border-radius);
   display: flex;
   position: relative;
@@ -262,23 +248,46 @@
   line-height: normal;
 }
 
+.textarea-control {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
+  display: flex;
+  flex-grow: 1;
+  align-items: start;
+  align-self: stretch;
+  width: 100%;
+  /**
+  * Allows the control to shrink below the label and textarea's intrinsic
+  * width, preventing the start and end slots from being pushed outside
+  * the wrapper. The label and textarea truncate independently, so it can
+  * use whatever space remains after accounting for the slots.
+  */
+  min-width: 0;
+}
+
 .native-wrapper {
   position: relative;
   width: 100%;
   height: 100%;
 }
 
-:host(.has-focus) textarea {
-  caret-color: var(--highlight-color);
+/**
+ * When the label sits beside the textarea, the label should size to its content
+ * and the textarea should take the remaining space. A zero flex basis prevents
+ * the textarea from requesting its full width and forcing the label to shrink.
+ * Stacked and floating placements use a column layout, so their flex basis
+ * controls height instead and does not need to be overridden.
+ */
+:host(.textarea-label-placement-start) .native-wrapper,
+:host(.textarea-label-placement-end) .native-wrapper,
+:host(.textarea-label-placement-fixed) .native-wrapper {
+  flex: 1 1 0;
 }
 
-.native-wrapper textarea {
-  -webkit-padding-start: 0px;
-  padding-inline-start: 0px;
-  -webkit-padding-end: 0px;
-  padding-inline-end: 0px;
-  padding-top: var(--padding-top);
-  padding-bottom: var(--padding-bottom);
+:host(.has-focus) textarea {
+  caret-color: var(--highlight-color);
 }
 
 .native-wrapper {
@@ -305,8 +314,8 @@
 .native-wrapper::after {
   padding-left: 0;
   padding-right: 0;
-  padding-top: var(--padding-top);
-  padding-bottom: var(--padding-bottom);
+  padding-top: 0;
+  padding-bottom: 0;
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
@@ -332,12 +341,6 @@
   word-break: break-word;
 }
 
-.textarea-wrapper-inner {
-  display: flex;
-  width: 100%;
-  min-height: inherit;
-}
-
 :host(.ion-touched.ion-invalid) {
   --highlight-color: var(--highlight-color-invalid);
 }
@@ -421,12 +424,12 @@
 }
 
 .label-text-wrapper {
-  -webkit-padding-start: 0px;
-  padding-inline-start: 0px;
-  -webkit-padding-end: 0px;
-  padding-inline-end: 0px;
-  padding-top: var(--padding-top);
-  padding-bottom: var(--padding-bottom);
+  /**
+  * Allows the label to shrink below its intrinsic content width.
+  * Without this the label keeps its full width and can push the
+  * textarea and end slot outside the wrapper.
+  */
+  min-width: 0;
   /**
    * Label text should not extend
    * beyond the bounds of the textarea.
@@ -445,6 +448,18 @@
   pointer-events: none;
 }
 
+/**
+ * When start/end slots are added or removed, we temporarily
+ * disable the label transition to prevent the floating label
+ * from animating as its position is adjusted.
+ *
+ * This class is applied by the start container controller, so
+ * renaming it here requires renaming it there too.
+ */
+:host(.skip-label-transition) .label-text-wrapper {
+  transition: none;
+}
+
 /**
  * We need to use two elements instead of
  * one. The .label-text-wrapper is responsible
@@ -488,7 +503,7 @@
  * Label is on the left of the textarea in LTR and
  * on the right in RTL.
  */
-:host(.textarea-label-placement-start) .textarea-wrapper {
+:host(.textarea-label-placement-start) .textarea-control {
   flex-direction: row;
 }
 
@@ -510,7 +525,7 @@
  * Label is on the right of the textarea in LTR and
  * on the left in RTL.
  */
-:host(.textarea-label-placement-end) .textarea-wrapper {
+:host(.textarea-label-placement-end) .textarea-control {
   flex-direction: row-reverse;
 }
 
@@ -560,8 +575,15 @@
  * down when the textarea is focused or has a value.
  *
  */
-:host(.textarea-label-placement-stacked) .textarea-wrapper,
-:host(.textarea-label-placement-floating) .textarea-wrapper {
+:host(.textarea-label-placement-stacked),
+:host(.textarea-label-placement-floating) {
+  --padding-top: 20px;
+  --padding-bottom: 6px;
+}
+
+:host(.textarea-label-placement-stacked) .textarea-control,
+:host(.textarea-label-placement-floating) .textarea-control {
+  padding-top: 0;
   flex-direction: column;
   align-items: start;
 }
@@ -574,12 +596,10 @@
 :host(.textarea-label-placement-stacked) .label-text-wrapper,
 :host(.textarea-label-placement-floating) .label-text-wrapper {
   transform-origin: left top;
-  -webkit-padding-start: 0px;
-  padding-inline-start: 0px;
-  -webkit-padding-end: 0px;
-  padding-inline-end: 0px;
-  padding-top: 0px;
-  padding-bottom: 0px;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
   max-width: 100%;
   /**
    * The 2 ensures the label
@@ -614,13 +634,6 @@
   margin-bottom: 0px;
 }
 
-:host(.textarea-label-placement-stacked) ::slotted([slot=start]),
-:host(.textarea-label-placement-stacked) ::slotted([slot=end]),
-:host(.textarea-label-placement-floating) ::slotted([slot=start]),
-:host(.textarea-label-placement-floating) ::slotted([slot=end]) {
-  margin-top: 8px;
-}
-
 /**
  * This makes the label sit over the textarea
  * when the textarea is blurred and has no value.
@@ -655,19 +668,17 @@
   max-width: calc(100% / 0.75);
 }
 
-.start-slot-wrapper, .end-slot-wrapper {
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: var(--padding-top);
-  padding-bottom: var(--padding-bottom);
+.textarea-start,
+.textarea-end {
   display: flex;
+  position: relative;
   flex-shrink: 0;
   align-self: start;
 }
 
 ::slotted([slot=start]),
 ::slotted([slot=end]) {
-  margin-top: 0;
+  margin-top: var(--padding-top);
 }
 
 ::slotted([slot=start]:last-of-type) {
@@ -906,7 +917,6 @@
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
-  min-height: 56px;
 }
 
 /**
@@ -1034,7 +1044,14 @@
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
-  min-height: 56px;
+  /**
+   * The measured width of the start container, as a negative offset
+   * in LTR and a positive one in RTL. Written to the host by the
+   * start container controller, so renaming it here requires renaming
+   * it there too. Declared with a default so the label is positioned
+   * correctly before the first measurement runs.
+   */
+  --internal-start-container-adjustment: 0px;
 }
 
 :host(.textarea-fill-outline.textarea-shape-round) {
@@ -1088,15 +1105,25 @@
   border-bottom: none;
 }
 
+/**
+ * The resting label is positioned relative to the control so it can size to
+ * the space between the start and end slots. When floating, the label needs
+ * to escape the control and position itself relative to the wrapper instead.
+ */
+:host(.textarea-fill-outline:not(.label-floating)) .textarea-control {
+  position: relative;
+}
+
 :host(.textarea-fill-outline.textarea-label-placement-stacked) .label-text-wrapper,
 :host(.textarea-fill-outline.textarea-label-placement-floating) .label-text-wrapper {
   transform-origin: left top;
   position: absolute;
   /**
-   * Label text should not extend
-   * beyond the bounds of the textarea.
+   * While resting this is the width of the textarea, which already
+   * excludes the start and end slots. Once the label floats the
+   * containing block becomes the wrapper and the rule below takes over.
    */
-  max-width: calc(100% - var(--padding-start) - var(--padding-end));
+  max-width: 100%;
 }
 :host-context([dir=rtl]):host(.textarea-fill-outline.textarea-label-placement-stacked) .label-text-wrapper, :host-context([dir=rtl]).textarea-fill-outline.textarea-label-placement-stacked .label-text-wrapper, :host-context([dir=rtl]):host(.textarea-fill-outline.textarea-label-placement-floating) .label-text-wrapper, :host-context([dir=rtl]).textarea-fill-outline.textarea-label-placement-floating .label-text-wrapper {
   transform-origin: right top;
@@ -1121,7 +1148,7 @@
  * This makes the label sit above the textarea.
  */
 :host(.label-floating.textarea-fill-outline) .label-text-wrapper {
-  transform: translateY(-32%) scale(0.75);
+  transform: translate(var(--internal-start-container-adjustment, 0px), -32%) scale(0.75);
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
@@ -1137,7 +1164,7 @@
 
 /**
  * This ensures that the textarea does not
- * overlap the floating label while still
+ * overlap the outline container while still
  * remaining visually centered.
  */
 :host(.textarea-fill-outline.textarea-label-placement-stacked) textarea,
@@ -1148,17 +1175,10 @@
   margin-inline-start: 0px;
   -webkit-margin-end: 0px;
   margin-inline-end: 0px;
-  margin-top: 12px;
+  margin-top: 19px;
   margin-bottom: 0px;
 }
 
-:host(.textarea-fill-outline.textarea-label-placement-stacked) ::slotted([slot=start]),
-:host(.textarea-fill-outline.textarea-label-placement-stacked) ::slotted([slot=end]),
-:host(.textarea-fill-outline.textarea-label-placement-floating) ::slotted([slot=start]),
-:host(.textarea-fill-outline.textarea-label-placement-floating) ::slotted([slot=end]) {
-  margin-top: 12px;
-}
-
 :host(.textarea-fill-outline) .textarea-outline-container {
   left: 0;
   right: 0;
@@ -1276,6 +1296,7 @@
   --padding-bottom: 8px;
   --padding-start: 0px;
   --highlight-height: 2px;
+  min-height: 72px;
   font-size: inherit;
 }
 
@@ -1337,6 +1358,11 @@
   --border-radius: 16px;
 }
 
+::slotted(ion-button[slot=start]),
+::slotted(ion-button[slot=end]) {
+  margin-top: 7px;
+}
+
 /**
  * Slotted buttons have a lot of default padding that can
  * cause them to look misaligned from other pieces such

package/dist/collection/components/thumbnail/thumbnail.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Thumbnail {
     render() {
-        return (h(Host, { key: '833e947c683b482a78f8f0df8c9a68e99478bbaa', class: getIonMode(this) }, h("slot", { key: '6d1e9e686db88d91379f14121058dbf035d8ded2' })));
+        return (h(Host, { key: 'ff9d2a4886b1c90a316c761f1160111f0e997f5d', class: getIonMode(this) }, h("slot", { key: '9a0f0d69e3713831e88c8770a60b28ff1a03abb6' })));
     }
     static get is() { return "ion-thumbnail"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/title/title.js

@@ -39,11 +39,11 @@ export class ToolbarTitle {
     render() {
         const mode = getIonMode(this);
         const size = this.getSize();
-        return (h(Host, { key: 'd9317e8e66cb6112717f5a9c252658777efbd873', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'c5f0b913ff0a22d9bf02da48a313a613c2ac8fe7', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: 'a4d011d6d409bf006d8efe33667002edb109820a', class: "toolbar-title" }, h("slot", { key: '4ca3303b957a0e5387f1e9058e5adb4c6275afcc' }))));
+            }) }, h("div", { key: '5253b9e39fb764bfe1e57370719139f8a83e9904', class: "toolbar-title" }, h("slot", { key: 'e38b1eccb0175c36f8cab211aee7ce4d61fc9035' }))));
     }
     static get is() { return "ion-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toast/toast.js

@@ -529,14 +529,14 @@ export class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('[ion-toast] - This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
         }
-        return (h(Host, { key: '2acb2cd2e12ea0082986495929e4a596d4da2f38', tabindex: "-1", ...this.htmlAttributes, style: {
+        return (h(Host, { key: '15d2ff8b689e40bb5cae3e304448dadf91b11b88', tabindex: "-1", ...this.htmlAttributes, style: {
                 zIndex: `${60000 + this.overlayIndex}`,
             }, class: createColorClasses(this.color, {
                 [mode]: true,
                 ...getClassMap(this.cssClass),
                 'overlay-hidden': true,
                 'toast-translucent': this.translucent,
-            }), onIonToastWillDismiss: this.dispatchCancelHandler }, h("div", { key: '8b24ba5d3d51d1ab94b9bf6bb5d6e4b8bb3248a7', class: wrapperClass, part: "wrapper" }, h("div", { key: 'e1ebdf4f0425cc7b1e2688667ee9a2b3c545804a', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '552b1ab8f4e72882cc8e878579c7a594119677e1', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '8ac8d64f632fbedadb180132c83043474466bee0', class: "toast-content", part: "content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+            }), onIonToastWillDismiss: this.dispatchCancelHandler }, h("div", { key: 'd26cc17a59e3d81810e22ee422398f2cc4c7a05c', class: wrapperClass, part: "wrapper" }, h("div", { key: 'f15e1a97f13defcbf96612df4c7ba45999e6244d', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '639cacec828f969673071e54dc68284050e9f2fd', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: 'a07e68cf68e4c507e4515de1a4b43dd8fb3541d3', class: "toast-content", part: "content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
     }
     static get is() { return "ion-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toggle/toggle.js

@@ -353,7 +353,7 @@ export class Toggle {
         // The attributes are matched too because the class needs the item to render.
         const inClickableItem = hostContext('ion-item.ion-activatable, ion-item[button], ion-item[href]', el);
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: 'ec5ce11209c70083c0b2ef1ea54de3033cfa7e89', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses(color, {
+        return (h(Host, { key: '148d15040257b05b3769da5a2439d051e357cbba', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': inItem,
                 // `ion-focusable` has to stay on because it is what makes the item focusable.
@@ -367,10 +367,10 @@ export class Toggle {
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: '95c1c7abd546ed2703d493acb967cf93e056a376', class: "toggle-wrapper", htmlFor: inputId }, h("input", { key: '7a206f525a4d340d94c668d6fc3b1f585cd97683', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required, ...inheritedAttributes }), h("div", { key: '62c2a365f980d46c2d7eaf1cbd19498d5813e1b1', class: {
+            }) }, h("label", { key: '0dbc40adc87e2ab4bdcd9a9fef43393484174c18', class: "toggle-wrapper", htmlFor: inputId }, h("input", { key: '92dee565687fc9a883f97091ead1bbb51df43779', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required, ...inheritedAttributes }), h("div", { key: 'f057bc57714b26e84226ee931e09212b86dba69f', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: 'f352f834790e1e9581ecb107f9a8aaaeb101fae5' }), this.renderHintText()), h("div", { key: 'f086ba9e31e9842ec438bb3226927faf9d0a7ea9', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '345efb5ce20f8124d1e74877b4943edf82fe2f8e' }), this.renderHintText()), h("div", { key: 'fc1a7fb6b65064307fbe0a50178559a52d6aedb7', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toolbar/toolbar.js

@@ -70,13 +70,13 @@ export class Toolbar {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: '40bad6fa7e94262438da4bbe037dcf8a5fa2df22', class: {
+        return (h(Host, { key: 'c16803dc4eae9972ef19bf43aa74b94feb4fd4c1', class: {
                 ...childStyles,
                 ...createColorClasses(this.color, {
                     [mode]: true,
                     'in-toolbar': hostContext('ion-toolbar', this.el),
                 }),
-            } }, h("div", { key: 'df44c9f0fe3958116ab860b0dad79c53b89f6c59', class: "toolbar-background", part: "background" }), h("div", { key: '2169ffa576875b8d5624211cc0b4bf86191562bc', class: "toolbar-container", part: "container" }, h("slot", { key: 'c8910dcf1ce98ab427fd89c3396a67c2a75bdd07', name: "start" }), h("slot", { key: '05da24d5ef96b9eebd83b534ce02c1f7bcd06680', name: "secondary" }), h("div", { key: '090fea1541e7e2b6ad74a6ded4eadffdb471ccce', class: "toolbar-content", part: "content" }, h("slot", { key: '507e143f92f6fa59ff23d94026411fa2c74f2f8e' })), h("slot", { key: 'f79fdee472e657e26a910cb89d7551943e40e440', name: "primary" }), h("slot", { key: 'dd40fe9ed490cf4346c642e195fdb524dc6cc4f5', name: "end" }))));
+            } }, h("div", { key: '20e3f85844c94b8399c245d2df125e6ab678d681', class: "toolbar-background", part: "background" }), h("div", { key: '12f09e324e8d9130b9d30c493106b500233fb016', class: "toolbar-container", part: "container" }, h("slot", { key: '6da0fe99ee0c4d7c969712e2908a4e7e6be5ed2c', name: "start" }), h("slot", { key: '177c346d6dcabb7857d810cda7d25c6dde32e6e2', name: "secondary" }), h("div", { key: '8c921b415940c71bf4c1a2c5c6887f36ad1afd16', class: "toolbar-content", part: "content" }, h("slot", { key: '1f2976b80d967bd51e86ed1357b363271d655df2' })), h("slot", { key: '0f7618044a7e8b0d9b715a8e208070f7ef2ee4c8', name: "primary" }), h("slot", { key: '125c393197e0660a3c2638dd4628c41ef7e05f19', name: "end" }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/forms/index.js

@@ -2,6 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 export * from './notch-controller';
+export * from './start-container-controller';
 export * from './compare-with-utils';
 export * from './item-multiple-inputs';
 export * from './validity';

package/dist/collection/utils/forms/start-container-controller.js

@@ -0,0 +1,132 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { raf } from "../helpers";
+import { isRTL } from "../rtl/index";
+/**
+ * Applied to the host while the label is being repositioned. The
+ * component stylesheets style this class, so it must stay in sync with
+ * the `skip-label-transition` selector in those files. Renaming it here
+ * requires renaming it there too.
+ */
+export const SKIP_LABEL_TRANSITION_CLASS = 'skip-label-transition';
+/**
+ * Set on the host as an inline style. The component stylesheets declare
+ * this property and read it with `var()`, so it must stay in sync with
+ * the `--internal-start-container-adjustment` references in those files.
+ * Renaming it here requires renaming it there too.
+ */
+export const START_CONTAINER_ADJUSTMENT_VAR = '--internal-start-container-adjustment';
+/**
+ * A utility to measure and update the start container width adjustment
+ * for form components (input, textarea, select) with `fill="outline"`.
+ * This adjustment compensates for the start container width when
+ * positioning floating/stacked labels within the outline border.
+ *
+ * Measurement is deferred with raf() to avoid forcing layout during
+ * component updates, and a ResizeObserver watches for dynamic width
+ * changes (e.g., when web fonts load or async content changes).
+ *
+ * @internal
+ * @param el - The host element (ion-input, ion-textarea, or ion-select).
+ * @param getStartContainer - A callback that returns the start container element.
+ * @param shouldApplyAdjustment - A callback that determines whether the adjustment should be applied.
+ */
+export const createStartContainerController = (el, getStartContainer, shouldApplyAdjustment) => {
+    let resizeObserver;
+    let observedContainer;
+    let measurementRaf;
+    let transitionRaf;
+    let appliedAdjustment;
+    const calculateAdjustment = () => {
+        const startSlot = getStartContainer();
+        if (!startSlot || !shouldApplyAdjustment()) {
+            return '';
+        }
+        /*
+         * Round to one decimal place so fractional widths produce a stable
+         * label offset when the start container is added, removed, or resized.
+         */
+        const startContainerWidth = startSlot.getBoundingClientRect().width;
+        const roundedWidth = Math.round(startContainerWidth * 10) / 10;
+        const sign = isRTL(el) ? '' : '-';
+        return roundedWidth ? `${sign}${roundedWidth}px` : '0px';
+    };
+    const scheduleAdjustmentUpdate = () => {
+        // Return if there is already a measurement queued to avoid a flicker
+        if (measurementRaf !== undefined) {
+            return;
+        }
+        /*
+         * Defer the measurement until the next animation frame so layout
+         * is measured after the current update has been applied.
+         */
+        measurementRaf = raf(() => {
+            measurementRaf = undefined;
+            const adjustment = calculateAdjustment();
+            // Only suppress the label transition when the label has to move
+            if (adjustment !== appliedAdjustment) {
+                // Discard a removal queued by an earlier change
+                if (transitionRaf !== undefined) {
+                    cancelAnimationFrame(transitionRaf);
+                }
+                el.classList.add(SKIP_LABEL_TRANSITION_CLASS);
+                el.style.setProperty(START_CONTAINER_ADJUSTMENT_VAR, adjustment);
+                appliedAdjustment = adjustment;
+                // Re-enable the transition once the new offset has been painted
+                transitionRaf = raf(() => {
+                    transitionRaf = undefined;
+                    el.classList.remove(SKIP_LABEL_TRANSITION_CLASS);
+                });
+            }
+            setupResizeObserver();
+        });
+    };
+    const disconnectResizeObserver = () => {
+        if (resizeObserver) {
+            resizeObserver.disconnect();
+            resizeObserver = undefined;
+            observedContainer = undefined;
+        }
+    };
+    const setupResizeObserver = () => {
+        const startSlot = getStartContainer();
+        // Stop watching once the adjustment no longer applies
+        if (!startSlot || !shouldApplyAdjustment()) {
+            disconnectResizeObserver();
+            return;
+        }
+        // Return when prerendering or already watching this container
+        if (typeof ResizeObserver !== 'function' || (resizeObserver && observedContainer === startSlot)) {
+            return;
+        }
+        disconnectResizeObserver();
+        resizeObserver = new ResizeObserver(() => {
+            scheduleAdjustmentUpdate();
+        });
+        observedContainer = startSlot;
+        resizeObserver.observe(startSlot);
+    };
+    const calculateStartContainerWidth = () => {
+        scheduleAdjustmentUpdate();
+    };
+    const destroy = () => {
+        disconnectResizeObserver();
+        if (measurementRaf !== undefined) {
+            cancelAnimationFrame(measurementRaf);
+            measurementRaf = undefined;
+        }
+        // Tearing down mid-toggle would leave the transition disabled
+        if (transitionRaf !== undefined) {
+            cancelAnimationFrame(transitionRaf);
+            transitionRaf = undefined;
+            el.classList.remove(SKIP_LABEL_TRANSITION_CLASS);
+        }
+        // Re-apply from scratch if the element is connected again
+        appliedAdjustment = undefined;
+    };
+    return {
+        calculateStartContainerWidth,
+        destroy,
+    };
+};

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-08-14T18:01:38",
+  "timestamp": "2026-08-14T19:32:20",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -30384,7 +30384,15 @@
         },
         {
           "name": "part",
-          "text": "inner - The inner element of the wrapper that manages the slots, selected values or placeholder, and toggle icons."
+          "text": "start - The wrapper element for the content in the start slot."
+        },
+        {
+          "name": "part",
+          "text": "control - The wrapper element containing the label and native select control. When the label is not floating or stacked, this part also contains the dropdown icon."
+        },
+        {
+          "name": "part",
+          "text": "end - The wrapper element for the content in the end slot. When the label is floating or stacked, this part also contains the dropdown icon."
         }
       ],
       "usage": {},
@@ -31559,6 +31567,14 @@
           "name": "container",
           "docs": "The container for the selected text or placeholder."
         },
+        {
+          "name": "control",
+          "docs": "The wrapper element containing the label and native select control. When the label is not floating or stacked, this part also contains the dropdown icon."
+        },
+        {
+          "name": "end",
+          "docs": "The wrapper element for the content in the end slot. When the label is floating or stacked, this part also contains the dropdown icon."
+        },
         {
           "name": "error-text",
           "docs": "Supporting text displayed beneath the select when the select is invalid and touched."
@@ -31571,10 +31587,6 @@
           "name": "icon",
           "docs": "The select icon container."
         },
-        {
-          "name": "inner",
-          "docs": "The inner element of the wrapper that manages the slots, selected values or placeholder, and toggle icons."
-        },
         {
           "name": "label",
           "docs": "The label text describing the select."
@@ -31583,6 +31595,10 @@
           "name": "placeholder",
           "docs": "The text displayed in the select when there is no value."
         },
+        {
+          "name": "start",
+          "docs": "The wrapper element for the content in the start slot."
+        },
         {
           "name": "supporting-text",
           "docs": "Supporting text displayed beneath the select."

package/dist/esm/input.utils-B1ValN_N.js

@@ -0,0 +1,33 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { j as printIonError } from './index-ChhhtsGZ.js';
+
+const getCounterText = (value, maxLength, counterFormatter) => {
+    const valueLength = value == null ? 0 : value.toString().length;
+    const defaultCounterText = defaultCounterFormatter(valueLength, maxLength);
+    /**
+     * If developers did not pass a custom formatter,
+     * use the default one.
+     */
+    if (counterFormatter === undefined) {
+        return defaultCounterText;
+    }
+    /**
+     * Otherwise, try to use the custom formatter
+     * and fallback to the default formatter if
+     * there was an error.
+     */
+    try {
+        return counterFormatter(valueLength, maxLength);
+    }
+    catch (e) {
+        printIonError('[ion-input] - Exception in provided `counterFormatter`:', e);
+        return defaultCounterText;
+    }
+};
+const defaultCounterFormatter = (length, maxlength) => {
+    return `${length} / ${maxlength}`;
+};
+
+export { getCounterText as g };