voyager-ionic-core 8.0.0-beta.1 → 8.0.0-beta.2

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

@@ -64,6 +64,7 @@
    * @prop --placeholder-color: Color of the select placeholder text
    * @prop --placeholder-opacity: Opacity of the select placeholder text
    *
+   * @prop --highlight-height: The height of the highlight on the select. Only applies to md mode.
    * @prop --highlight-color-focused: The color of the highlight on the select when focused
    * @prop --highlight-color-invalid: The color of the highlight on the select when invalid
    * @prop --highlight-color-valid: The color of the highlight on the select when valid
@@ -902,7 +903,7 @@ button {
  */
 :host(.select-fill-outline.select-expanded),
 :host(.select-fill-outline.ion-focused) {
-  --border-width: 2px;
+  --border-width: var(--highlight-height);
   --border-color: var(--highlight-color);
 }
 
@@ -1106,6 +1107,7 @@ button {
 :host {
   --border-width: 1px;
   --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));
+  --highlight-height: 2px;
 }
 
 .select-icon {
@@ -1137,7 +1139,7 @@ button {
   bottom: -1px;
   position: absolute;
   width: 100%;
-  height: 2px;
+  height: var(--highlight-height);
   transform: scale(0);
   transition: transform 200ms;
   background: var(--highlight-color);
@@ -1185,31 +1187,6 @@ button {
   color: var(--highlight-color);
 }
 
-/**
- * Adjust the arrow so that it appears in the middle
- * of the item. If the item has fill="outline" then
- * we should adjust the entire ion-select rather than
- * just the outline so the selected value appears centered too.
- */
-:host-context(.item-label-stacked) .select-icon,
-:host-context(.item-label-floating:not(.item-fill-outline)) .select-icon,
-:host-context(.item-label-floating.item-fill-outline) {
-  transform: translate3d(0,  -9px,  0);
-}
-
-:host-context(.item-has-focus):host(:not(.has-expanded-icon)) .select-icon {
-  transform: rotate(180deg);
-}
-
-/**
- * Ensure that the translation we did
- * above is preserved when we rotate the select icon.
- */
-:host-context(.item-has-focus.item-label-stacked):host(:not(.has-expanded-icon)) .select-icon,
-:host-context(.item-has-focus.item-label-floating:not(.item-fill-outline)):host(:not(.has-expanded-icon)) .select-icon {
-  transform: translate3d(0,  -9px,  0) rotate(180deg);
-}
-
 :host(.select-shape-round) {
   --border-radius: 16px;
 }

package/dist/collection/components/select/test/highlight/select.e2e.js

@@ -4,8 +4,8 @@
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-    test.describe(title('input: highlights'), () => {
-        test.describe('input: no fill', () => {
+    test.describe(title('select: highlights'), () => {
+        test.describe('select: no fill', () => {
             test('should render valid state correctly', async ({ page }) => {
                 await page.setContent(`
           <ion-select value="apple" class="ion-valid ion-focused" label="Favorite Fruit">
@@ -33,8 +33,36 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
                 const select = page.locator('ion-select');
                 await expect(select).toHaveScreenshot(screenshot(`select-no-fill-focus`));
             });
+            test('should render custom highlight correctly', async ({ page }) => {
+                await page.setContent(`
+          <style>
+            ion-select.custom {
+              --highlight-color-focused: red;
+              --highlight-color-invalid: blue;
+              --highlight-color-valid: purple;
+              --highlight-height: 6px;
+            }
+          </style>
+
+          <div class="container">
+            <ion-select value="apple" class="custom ion-valid ion-focused" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+
+            <ion-select value="apple" class="custom ion-touched ion-invalid ion-focused" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+
+            <ion-select value="apple" class="custom ion-focused" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+          </div>
+        `, config);
+                const container = page.locator('.container');
+                await expect(container).toHaveScreenshot(screenshot(`select-no-fill-custom-highlight`));
+            });
         });
-        test.describe('input: solid', () => {
+        test.describe('select: solid', () => {
             test('should render valid state correctly', async ({ page }) => {
                 await page.setContent(`
           <ion-select fill="solid" value="apple" class="ion-valid ion-focused" label="Favorite Fruit">
@@ -62,8 +90,36 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
                 const select = page.locator('ion-select');
                 await expect(select).toHaveScreenshot(screenshot(`select-solid-focus`));
             });
+            test('should render custom highlight correctly', async ({ page }) => {
+                await page.setContent(`
+          <style>
+            ion-select.custom {
+              --highlight-color-focused: red;
+              --highlight-color-invalid: blue;
+              --highlight-color-valid: purple;
+              --highlight-height: 6px;
+            }
+          </style>
+
+          <div class="container">
+            <ion-select fill="solid" value="apple" class="custom ion-valid ion-focused" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+
+            <ion-select fill="solid" value="apple" class="custom ion-touched ion-invalid ion-focused" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+
+            <ion-select fill="solid" value="apple" class="custom ion-focused" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+          </div>
+        `, config);
+                const container = page.locator('.container');
+                await expect(container).toHaveScreenshot(screenshot(`select-solid-custom-highlight`));
+            });
         });
-        test.describe('input: outline', () => {
+        test.describe('select: outline', () => {
             test('should render valid state correctly', async ({ page }) => {
                 await page.setContent(`
           <ion-select fill="outline" value="apple" class="ion-valid ion-focused" label="Favorite Fruit">
@@ -91,6 +147,34 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
                 const select = page.locator('ion-select');
                 await expect(select).toHaveScreenshot(screenshot(`select-outline-focus`));
             });
+            test('should render custom highlight correctly', async ({ page }) => {
+                await page.setContent(`
+          <style>
+            ion-select.custom {
+              --highlight-color-focused: red;
+              --highlight-color-invalid: blue;
+              --highlight-color-valid: purple;
+              --highlight-height: 6px;
+            }
+          </style>
+
+          <div class="container">
+            <ion-select fill="outline" value="apple" class="custom ion-valid ion-focused" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+
+            <ion-select fill="outline" value="apple" class="custom ion-touched ion-invalid ion-focused" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+
+            <ion-select fill="outline" value="apple" class="custom ion-focused" label="Favorite Fruit">
+              <ion-select-option value="apple">Apple</ion-select-option>
+            </ion-select>
+          </div>
+        `, config);
+                const container = page.locator('.container');
+                await expect(container).toHaveScreenshot(screenshot(`select-outline-custom-highlight`));
+            });
         });
     });
     test.describe(title('select: expanded highlight'), () => {

package/dist/collection/components/select-option/select-option.js

@@ -10,7 +10,7 @@ export class SelectOption {
         this.value = undefined;
     }
     render() {
-        return h(Host, { key: 'e46b062b71c143792bb74527ba4980e02edc14b3', role: "option", id: this.inputId, class: getIonMode(this) });
+        return h(Host, { key: 'd26050569d40011a686a66ab7bc59ffa7163d264', role: "option", id: this.inputId, class: getIonMode(this) });
     }
     static get is() { return "ion-select-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select-popover/select-popover.js

@@ -102,7 +102,7 @@ export class SelectPopover {
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        return (h(Host, { key: '07c094ea0b8ba353f6147a912eedc3c75719fd4e', class: getIonMode(this) }, h("ion-list", { key: '4d110e3e036bbfecc418d0e37fc9bc4ec0c18674' }, header !== undefined && h("ion-list-header", null, header), hasSubHeaderOrMessage && (h("ion-item", null, h("ion-label", { class: "ion-text-wrap" }, subHeader !== undefined && h("h3", null, subHeader), message !== undefined && h("p", null, message)))), this.renderOptions(options))));
+        return (h(Host, { key: '7b93c55895f66fc6431862b7b47eeb60eaa8c292', class: getIonMode(this) }, h("ion-list", { key: '3a74ec35ec9b627a192d8ad3a206f81df838342b' }, header !== undefined && h("ion-list-header", null, header), hasSubHeaderOrMessage && (h("ion-item", null, h("ion-label", { class: "ion-text-wrap" }, subHeader !== undefined && h("h3", null, subHeader), message !== undefined && h("p", null, message)))), this.renderOptions(options))));
     }
     static get is() { return "ion-select-popover"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/skeleton-text/skeleton-text.js

@@ -25,11 +25,11 @@ export class SkeletonText {
         const animated = this.animated && config.getBoolean('animated', true);
         const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
         const mode = getIonMode(this);
-        return (h(Host, { key: 'e0a84e5017cde072087d5580dd370bbd36106f99', class: {
+        return (h(Host, { key: 'f6b1a1888a3cac52acbeb4957ca32befd6bc52f8', class: {
                 [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: '3274a42e3fd4f1b9fb285f4b982416e1f68ac766' }, "\u00A0")));
+            } }, h("span", { key: '1e61b9d249f8e3bcb55c06de8311c224866b9632' }, "\u00A0")));
     }
     static get is() { return "ion-skeleton-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spinner/spinner.js

@@ -39,7 +39,7 @@ export class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (h(Host, { key: 'bfb8b93a58da60686f6a1e6b8a5e0d1b7dea1f5d', class: createColorClasses(self.color, {
+        return (h(Host, { key: 'd33d08486ee9d9069abbe37b17e58fc2c321a414', class: createColorClasses(self.color, {
                 [mode]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),

package/dist/collection/components/split-pane/split-pane.js

@@ -118,12 +118,12 @@ export class SplitPane {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'ea58eb10f1e0040f8b193684085dcf0b6fb70736', class: {
+        return (h(Host, { key: '0f83e45ded140540bf43da4c5ff2c3540cc3b74b', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: '568992064ae695fb4de01aef59d6f6e3359e1e0f' })));
+            } }, h("slot", { key: '77ff2487fa265f9f5e96fdffad80dc9c417f896a' })));
     }
     static get is() { return "ion-split-pane"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab/tab.js

@@ -48,10 +48,10 @@ export class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (h(Host, { key: 'e67484767fa4aab6bc90db390a90eb5e24e51f14', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: '4892bdb4aab5f2e2bb08e78fd7f67b3902ada693', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, h("slot", { key: 'ad6523d5a128d457d09e88739f8218cdf16152de' })));
+            } }, h("slot", { key: 'd919df91de8fd547581329e566bddacac64509a0' })));
     }
     static get is() { return "ion-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab-bar/tab-bar.js

@@ -51,11 +51,11 @@ export class TabBar {
         const { color, translucent, keyboardVisible } = this;
         const mode = getIonMode(this);
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (h(Host, { key: '2d30e75e19d86a1eb65cff8ddab0cb059f59b224', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: 'cbebdd59017a50a71e4e9e6ae831f4ca6eb64884', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, h("slot", { key: '5b739f1bbe21c887b7810383edd2f67143ac086e' })));
+            }) }, h("slot", { key: 'b58c66562e91f3584a270c4c755c6bd8c165e634' })));
     }
     static get is() { return "ion-tab-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -70,7 +70,7 @@ export class TabButton {
             rel,
             target,
         };
-        return (h(Host, { key: 'b37743b20b93c27ffb0094b35545292533f9d30f', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: '6cbc09067f12f3b643f2bfc3bdc1eddf81b00daa', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [mode]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -82,7 +82,7 @@ export class TabButton {
                 'ion-activatable': true,
                 'ion-selectable': true,
                 'ion-focusable': true,
-            } }, h("a", Object.assign({ key: '7dd2b3aaa96f64a8b7411730ed8b201466a97162' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), h("span", { key: 'cb328541793b6aa469d5d3bff662d2efa56dc977', class: "button-inner" }, h("slot", { key: '904a1b063f481ac86d5bea967a375addc9c96471' })), mode === 'md' && h("ion-ripple-effect", { type: "unbounded" }))));
+            } }, h("a", Object.assign({ key: '5626f8bf8ddb30fb03773d816ec5fd6417d59391' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), h("span", { key: 'ad789c6d82860eed68fc6c56d15143f989756ba3', class: "button-inner" }, h("slot", { key: '1cf17817e025e371664bedcfd8268b452674159d' })), mode === 'md' && h("ion-ripple-effect", { type: "unbounded" }))));
     }
     static get is() { return "ion-tab-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tabs.js

@@ -135,7 +135,7 @@ export class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (h(Host, { key: 'e2cac6a2e54514f31cfe65692e34e88d530b204f', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '53bc64f37aebb9a68c6e2db2c89ec6d39cd64bbd', name: "top" }), h("div", { key: '72f4f0ae53518631d6c1b6276da3f63147c28cfc', class: "tabs-inner" }, h("slot", { key: '79f1eece652cf00a3dd8359b68e68059816ff704' })), h("slot", { key: '3fbaf52447720ee14c7db06f2bf71a92093847f4', name: "bottom" })));
+        return (h(Host, { key: 'ec86c6800e70022ebd33b9c7fa39bf14cee242ba', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '51f603c67624eccc49c916acac0cf67e6386c665', name: "top" }), h("div", { key: '69c8654e9b5be1cc36603c3c314d4acf14dfeef9', class: "tabs-inner" }, h("slot", { key: 'ff8c8349f2bfd218e85be3abac695d1bc9ffadba' })), h("slot", { key: 'ab95302bfe9a2d704f6e95545b1eee6ce73c34d8', name: "bottom" })));
     }
     static get is() { return "ion-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text/text.js

@@ -13,9 +13,9 @@ export class Text {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '9b5decc6dfca4fbaf0fe42696a9833ffee269a7d', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'b52025909e5353fd8f0626b168f89ef211d3cbaf', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: '5b822dcc0f6255819cec7626d0c0f7f9873aaab9' })));
+            }) }, h("slot", { key: '7fbaf1cfb6da0244e98c54bb79f18b6641b8ca0c' })));
     }
     static get is() { return "ion-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textarea/test/highlight/textarea.e2e.js

@@ -54,6 +54,52 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
                 const textarea = page.locator('ion-textarea');
                 await expect(textarea).toHaveScreenshot(screenshot(`textarea-no-fill-focus`));
             });
+            test('should render custom highlight correctly', async ({ page }) => {
+                await page.setContent(`
+          <style>
+            ion-textarea.custom {
+              --highlight-color-focused: red;
+              --highlight-color-invalid: blue;
+              --highlight-color-valid: purple;
+              --highlight-height: 6px;
+            }
+          </style>
+
+          <div class="container">
+            <ion-textarea
+              value="hi@ionic.io"
+              class="custom has-focus"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-textarea>
+
+            <ion-textarea
+              value="hi@ionic.io"
+              class="custom has-focus ion-valid"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-textarea>
+
+            <ion-textarea
+              value="hi@ionic.io"
+              class="custom has-focus ion-invalid ion-touched"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-textarea>
+          </div>
+        `, config);
+                const container = page.locator('.container');
+                await expect(container).toHaveScreenshot(screenshot(`textarea-no-fill-custom-highlight`));
+            });
         });
         test.describe('textarea: solid', () => {
             test('should render valid state correctly', async ({ page }) => {
@@ -104,6 +150,55 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
                 const textarea = page.locator('ion-textarea');
                 await expect(textarea).toHaveScreenshot(screenshot(`textarea-solid-focus`));
             });
+            test('should render custom highlight correctly', async ({ page }) => {
+                await page.setContent(`
+          <style>
+            ion-textarea.custom {
+              --highlight-color-focused: red;
+              --highlight-color-invalid: blue;
+              --highlight-color-valid: purple;
+              --highlight-height: 6px;
+            }
+          </style>
+
+          <div class="container">
+            <ion-textarea
+              fill="solid"
+              value="hi@ionic.io"
+              class="custom has-focus"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-textarea>
+
+            <ion-textarea
+              fill="solid"
+              value="hi@ionic.io"
+              class="custom has-focus ion-valid"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-textarea>
+
+            <ion-textarea
+              fill="solid"
+              value="hi@ionic.io"
+              class="custom has-focus ion-invalid ion-touched"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-textarea>
+          </div>
+        `, config);
+                const container = page.locator('.container');
+                await expect(container).toHaveScreenshot(screenshot(`textarea-solid-custom-highlight`));
+            });
         });
         test.describe('textarea: outline', () => {
             test('should render valid state correctly', async ({ page }) => {
@@ -154,6 +249,55 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
                 const textarea = page.locator('ion-textarea');
                 await expect(textarea).toHaveScreenshot(screenshot(`textarea-outline-focus`));
             });
+            test('should render custom highlight correctly', async ({ page }) => {
+                await page.setContent(`
+          <style>
+            ion-textarea.custom {
+              --highlight-color-focused: red;
+              --highlight-color-invalid: blue;
+              --highlight-color-valid: purple;
+              --highlight-height: 6px;
+            }
+          </style>
+
+          <div class="container">
+            <ion-textarea
+              fill="outline"
+              value="hi@ionic.io"
+              class="custom has-focus"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-textarea>
+
+            <ion-textarea
+              fill="outline"
+              value="hi@ionic.io"
+              class="custom has-focus ion-valid"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-textarea>
+
+            <ion-textarea
+              fill="outline"
+              value="hi@ionic.io"
+              class="custom has-focus ion-invalid ion-touched"
+              label="Email"
+              error-text="Please enter a valid email"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+            ></ion-textarea>
+          </div>
+        `, config);
+                const container = page.locator('.container');
+                await expect(container).toHaveScreenshot(screenshot(`textarea-outline-custom-highlight`));
+            });
         });
     });
 });

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

@@ -70,6 +70,7 @@
    * @prop --placeholder-font-weight: Weight of the placeholder text
    * @prop --placeholder-opacity: Opacity of the placeholder text
    *
+   * @prop --highlight-height: The height of the highlight on the textarea. Only applies to md mode.
    * @prop --highlight-color-focused: The color of the highlight on the textarea when focused
    * @prop --highlight-color-valid: The color of the highlight on the textarea when valid
    * @prop --highlight-color-invalid: The color of the highlight on the textarea when invalid
@@ -150,10 +151,6 @@
   align-self: baseline;
 }
 
-:host-context(ion-item:not(.item-label)) {
-  --padding-start: 0;
-}
-
 :host-context(ion-item)[slot=start],
 :host-context(ion-item)[slot=end] {
   width: auto;
@@ -247,15 +244,6 @@
   overflow: hidden;
 }
 
-:host-context(.item-label-floating.item-has-placeholder:not(.item-has-value)) {
-  opacity: 0;
-}
-
-:host-context(.item-label-floating.item-has-placeholder:not(.item-has-value).item-has-focus) {
-  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-  opacity: 1;
-}
-
 .textarea-wrapper {
   -webkit-padding-start: var(--padding-start);
   padding-inline-start: var(--padding-start);
@@ -864,16 +852,10 @@
   --padding-end: 0px;
   --padding-bottom: 8px;
   --padding-start: 0px;
+  --highlight-height: 0px;
   font-size: inherit;
 }
 
-:host-context(.item-label-stacked),
-:host-context(.item-label-floating) {
-  --padding-top: 8px;
-  --padding-bottom: 8px;
-  --padding-start: 0px;
-}
-
 :host(.textarea-disabled) {
   opacity: 0.3;
 }

package/dist/collection/components/textarea/textarea.js

@@ -359,7 +359,7 @@ export class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '3adbec7986ecb5a274ecf341b938432c3d04705a', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'e2ac4428f0e3268ac0507b331b0badd8dbfa5010', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -368,7 +368,7 @@ export class Textarea {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, h("label", { key: '9df12985193c4fa6a277b71bcac668d7e61f02ac', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'b39ac1d580d3bcaad8cc028e703960cd2277fa10', class: "textarea-wrapper-inner" }, h("div", { key: 'b2d6971c51683fe67121c4d0e4ac8e17723fa59d', class: "start-slot-wrapper" }, h("slot", { key: 'b229d482a4ff208858dffc6ff3a5ad661a2a7288', name: "start" })), h("div", { key: 'b2d2770afa7012f055463df6a302bed685b46107', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: 'a18150f8d381e0569f6d71867451ce8176157521', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), h("div", { key: 'f20f6e5c9b339cff4bdd7bffe59afd27b05ce8b9', class: "end-slot-wrapper" }, h("slot", { key: '64a10ebdb4a89ec1c3d34c29e8c9403d3d788f3b', name: "end" }))), shouldRenderHighlight && h("div", { class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: 'a5a566c5d91e8d74449f172fb64093777e1bf9c3', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'fc2bbf87535d133f52e27be986e5fcfac987f986', class: "textarea-wrapper-inner" }, h("div", { key: '8834f1e7bf4853087a8e7fd0dfe23106cdba5ef3', class: "start-slot-wrapper" }, h("slot", { key: 'd4014b4b58f3c1ee1bc25ff712a45d4720b38c4d', name: "start" })), h("div", { key: 'f9f34505f0e2dfb647ae1b727e406b522d0891a2', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '4bcb6eb6becdc47ce2056162cb8bb0d727879260', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), h("div", { key: '0605291843bd7c4cf59b44a970cb43830e825362', class: "end-slot-wrapper" }, h("slot", { key: '61a90e1625860e662e4526d4b88653edb6ecb5b4', name: "end" }))), shouldRenderHighlight && h("div", { class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "scoped"; }

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

@@ -70,6 +70,7 @@
    * @prop --placeholder-font-weight: Weight of the placeholder text
    * @prop --placeholder-opacity: Opacity of the placeholder text
    *
+   * @prop --highlight-height: The height of the highlight on the textarea. Only applies to md mode.
    * @prop --highlight-color-focused: The color of the highlight on the textarea when focused
    * @prop --highlight-color-valid: The color of the highlight on the textarea when valid
    * @prop --highlight-color-invalid: The color of the highlight on the textarea when invalid
@@ -150,10 +151,6 @@
   align-self: baseline;
 }
 
-:host-context(ion-item:not(.item-label)) {
-  --padding-start: 0;
-}
-
 :host-context(ion-item)[slot=start],
 :host-context(ion-item)[slot=end] {
   width: auto;
@@ -247,15 +244,6 @@
   overflow: hidden;
 }
 
-:host-context(.item-label-floating.item-has-placeholder:not(.item-has-value)) {
-  opacity: 0;
-}
-
-:host-context(.item-label-floating.item-has-placeholder:not(.item-has-value).item-has-focus) {
-  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-  opacity: 1;
-}
-
 .textarea-wrapper {
   -webkit-padding-start: var(--padding-start);
   padding-inline-start: var(--padding-start);
@@ -1075,7 +1063,7 @@
  * the textarea is focused.
  */
 :host(.textarea-fill-outline.has-focus) {
-  --border-width: 2px;
+  --border-width: var(--highlight-height);
   --border-color: var(--highlight-color);
 }
 
@@ -1283,6 +1271,7 @@
   --padding-end: 0px;
   --padding-bottom: 8px;
   --padding-start: 0px;
+  --highlight-height: 2px;
   font-size: inherit;
 }
 
@@ -1315,7 +1304,7 @@
   bottom: -1px;
   position: absolute;
   width: 100%;
-  height: 2px;
+  height: var(--highlight-height);
   transform: scale(0);
   transition: transform 200ms;
   background: var(--highlight-color);

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: '68bac4e80f5d27131690fd20dfabff2618743206', class: getIonMode(this) }, h("slot", { key: '89f46a686288428391cdfaef3384824751ae3d05' })));
+        return (h(Host, { key: '85a0eb73f012ab18ad8b03e63aca9488dd11a4d7', class: getIonMode(this) }, h("slot", { key: 'a335c711d1987615cfcc953958edc0d63fbccca2' })));
     }
     static get is() { return "ion-thumbnail"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,11 +27,11 @@ export class ToolbarTitle {
     render() {
         const mode = getIonMode(this);
         const size = this.getSize();
-        return (h(Host, { key: 'af95e7123b3d39110425c16cb4f7f8efb1ee1536', class: createColorClasses(this.color, {
+        return (h(Host, { key: '13fcf9c4fea765a4580a2c99aa03a25304d310de', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: '54efce3d5769fb3de297a6d534dc87d57f365004', class: "toolbar-title" }, h("slot", { key: 'f7ed25c6b178cad1840e35e81e3eeeca3aacea3f' }))));
+            }) }, h("div", { key: 'a0ad40298bdea5687c6ee4c873bd2926603df0f7', class: "toolbar-title" }, h("slot", { key: 'b08edc05432144aec791c10eec1ad23030fcfa1f' }))));
     }
     static get is() { return "ion-title"; }
     static get encapsulation() { return "shadow"; }