@ionic/core 8.8.19 → 8.8.20-dev.11787158518.168a2fea

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

@@ -16,19 +16,31 @@ const QUERY = {
     never: '',
 };
 export class SplitPane {
-    constructor() {
-        this.visible = false;
-        /**
-         * If `true`, the split pane will be hidden.
-         */
-        this.disabled = false;
-        /**
-         * When the split-pane should be shown.
-         * Can be a CSS media query expression, or a shortcut expression.
-         * Can also be a boolean expression.
-         */
-        this.when = QUERY['lg'];
-    }
+    rmL;
+    el;
+    visible = false;
+    /**
+     * The `id` of the main content. When using
+     * a router this is typically `ion-router-outlet`.
+     * When not using a router, this is typically
+     * your main view's `ion-content`. This is not the
+     * id of the `ion-content` inside of your `ion-menu`.
+     */
+    contentId;
+    /**
+     * If `true`, the split pane will be hidden.
+     */
+    disabled = false;
+    /**
+     * When the split-pane should be shown.
+     * Can be a CSS media query expression, or a shortcut expression.
+     * Can also be a boolean expression.
+     */
+    when = QUERY['lg'];
+    /**
+     * Expression to be called when the split-pane visibility has changed
+     */
+    ionSplitPaneVisible;
     visibleChanged(visible) {
         this.ionSplitPaneVisible.emit({ visible });
     }
@@ -126,12 +138,12 @@ export class SplitPane {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '05c88c009fbe2e223fd261760a2b49da1653ff62', class: {
+        return (h(Host, { key: '652bc0965ae962dc36a67fd7129dacaa1ba8e551', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: 'b35865082661253c4468520d79234fa5dab5bd35' })));
+            } }, h("slot", { key: '9eac85f4c4e33ec00e8e16e2679f5975d7652452' })));
     }
     static get is() { return "ion-split-pane"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,10 +5,21 @@ import { Build, Host, h } from "@stencil/core";
 import { attachComponent } from "../../utils/framework-delegate";
 import { printIonError } from "../../utils/logging/index";
 export class Tab {
-    constructor() {
-        /** @internal */
-        this.active = false;
-    }
+    loadPromise;
+    el;
+    /** @internal */
+    active = false;
+    /** @internal */
+    delegate;
+    /**
+     * A tab id must be provided for each `ion-tab`. It's used internally to reference
+     * the selected tab or by the router to switch between them.
+     */
+    tab;
+    /**
+     * The component to display inside of the tab.
+     */
+    component;
     async componentWillLoad() {
         if (Build.isDev) {
             if (this.component !== undefined && this.el.childElementCount > 0) {
@@ -54,10 +65,10 @@ export class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (h(Host, { key: 'c35c9f96ed3a73270b23f30d9e279dcad9032e28', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: '8ecbd7a85d3370ed8ed40561cd8134e71584d6aa', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, h("slot", { key: '1c03523327e571f9ba140be0ccd6fe089e16a77a' })));
+            } }, h("slot", { key: '8d6326d75812888e33fd09665b7e588e1e270df1' })));
     }
     static get is() { return "ion-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,18 +9,21 @@ import { getIonMode } from "../../global/ionic-global";
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class TabBar {
-    constructor() {
-        this.keyboardCtrl = null;
-        this.keyboardCtrlPromise = null;
-        this.didLoad = false;
-        this.keyboardVisible = false;
-        /**
-         * If `true`, the tab bar will be translucent.
-         * Only applies when the mode is `"ios"` and the device supports
-         * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
-         */
-        this.translucent = false;
-    }
+    keyboardCtrl = null;
+    keyboardCtrlPromise = null;
+    didLoad = false;
+    el;
+    keyboardVisible = false;
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color;
+    /**
+     * The selected tab component
+     */
+    selectedTab;
     selectedTabChanged() {
         // Skip the initial watcher call that happens during component load
         // We handle that in componentDidLoad to ensure children are ready
@@ -33,6 +36,21 @@ export class TabBar {
             });
         }
     }
+    /**
+     * If `true`, the tab bar will be translucent.
+     * Only applies when the mode is `"ios"` and the device supports
+     * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+     */
+    translucent = false;
+    /** @internal */
+    ionTabBarChanged;
+    /**
+     * @internal
+     * This event is used in IonContent to correctly
+     * calculate the fullscreen content offsets
+     * when IonTabBar is used.
+     */
+    ionTabBarLoaded;
     componentDidLoad() {
         this.ionTabBarLoaded.emit();
         // Set the flag to indicate the component has loaded
@@ -87,11 +105,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: '24e164eaf81a0bec9237b561465618f10990806c', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '5c56cffd380df7720f3309af7cfca71500817678', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, h("slot", { key: '0ca29a2d97a7c38bbf43f8d79e271b874b4d9be8' })));
+            }) }, h("slot", { key: 'a98d3298320f864578e30e0fb79a2cc0cccb46d9' })));
     }
     static get is() { return "ion-tab-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,34 +11,65 @@ import { getIonMode } from "../../global/ionic-global";
  * @part native - The native HTML anchor element that wraps all child elements.
  */
 export class TabButton {
-    constructor() {
-        this.inheritedAttributes = {};
-        /**
-         * If `true`, the user cannot interact with the tab button.
-         */
-        this.disabled = false;
-        /**
-         * The selected tab component
-         */
-        this.selected = false;
-        this.onKeyUp = (ev) => {
-            if (ev.key === 'Enter' || ev.key === ' ') {
-                this.selectTab(ev);
-            }
-        };
-        this.onClick = (ev) => {
-            this.selectTab(ev);
-        };
-    }
+    inheritedAttributes = {};
+    el;
+    /**
+     * If `true`, the user cannot interact with the tab button.
+     */
+    disabled = false;
+    /**
+     * This attribute instructs browsers to download a URL instead of navigating to
+     * it, so the user will be prompted to save it as a local file. If the attribute
+     * has a value, it is used as the pre-filled file name in the Save prompt
+     * (the user can still change the file name if they want).
+     */
+    download;
+    /**
+     * Contains a URL or a URL fragment that the hyperlink points to.
+     * If this property is set, an anchor tag will be rendered.
+     */
+    href;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
+     */
+    rel;
+    /**
+     * Set the layout of the text and icon in the tab bar.
+     * It defaults to `"icon-top"`.
+     */
+    layout;
+    /**
+     * The selected tab component
+     */
+    selected = false;
+    /**
+     * A tab id must be provided for each `ion-tab`. It's used internally to reference
+     * the selected tab or by the router to switch between them.
+     */
+    tab;
+    /**
+     * Specifies where to display the linked URL.
+     * Only applies when an `href` is provided.
+     * Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
+     */
+    target;
+    /**
+     * Emitted when the tab bar is clicked
+     * @internal
+     */
+    ionTabButtonClick;
     onTabBarChanged(ev) {
         const dispatchedFrom = ev.target;
         const parent = this.el.parentElement;
-        if (ev.composedPath().includes(parent) || (dispatchedFrom === null || dispatchedFrom === void 0 ? void 0 : dispatchedFrom.contains(this.el))) {
+        if (ev.composedPath().includes(parent) || dispatchedFrom?.contains(this.el)) {
             this.selected = this.tab === ev.detail.tab;
         }
     }
     componentWillLoad() {
-        this.inheritedAttributes = Object.assign({}, inheritAttributes(this.el, ['aria-label']));
+        this.inheritedAttributes = {
+            ...inheritAttributes(this.el, ['aria-label']),
+        };
         if (this.layout === undefined) {
             this.layout = config.get('tabButtonLayout', 'icon-top');
         }
@@ -61,6 +92,14 @@ export class TabButton {
     get hasIcon() {
         return !!this.el.querySelector('ion-icon');
     }
+    onKeyUp = (ev) => {
+        if (ev.key === 'Enter' || ev.key === ' ') {
+            this.selectTab(ev);
+        }
+    };
+    onClick = (ev) => {
+        this.selectTab(ev);
+    };
     render() {
         const { disabled, hasIcon, hasLabel, href, rel, target, layout, selected, tab, inheritedAttributes } = this;
         const mode = getIonMode(this);
@@ -70,7 +109,7 @@ export class TabButton {
             rel,
             target,
         };
-        return (h(Host, { key: '638b93ef40701ec3aefb89b1579eb91aaf6d4f8a', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: '45bb7ffa6d8764202adc2c5c393748d4003e86fe', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [mode]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -82,7 +121,7 @@ export class TabButton {
                 'ion-activatable': true,
                 'ion-selectable': true,
                 'ion-focusable': true,
-            } }, h("a", Object.assign({ key: 'c053d32fbcdad8d5e4a409956b47164d7a080c6b' }, 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: 'b3b460d33ec978a46b069442280d31b23bc8e794', class: "button-inner" }, h("slot", { key: '87b3928475c941263261101b8fae27c6370d4671' })), mode === 'md' && h("ion-ripple-effect", { key: '6532e5b4546aebe4becaebe1c93ce0e6aedaffe7', type: "unbounded" }))));
+            } }, h("a", { key: '78c416609a2b86a6e7c5f217ffd2a6b9f80a5103', ...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: '62934156439ffd0ab86674b9cf89d9cfa0d3589c', class: "button-inner" }, h("slot", { key: '293ba8f5ef50373c4e6e492dcaa55b3d2aae8d2f' })), mode === 'md' && h("ion-ripple-effect", { key: '360b010afedcf17fc1f3ab6d192f0f8c7b1cf112', type: "unbounded" }))));
     }
     static get is() { return "ion-tab-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,23 +9,25 @@ import { printIonError } from "../../utils/logging/index";
  * @slot bottom - Content is placed at the bottom of the screen.
  */
 export class Tabs {
-    constructor() {
-        this.transitioning = false;
-        /** @internal */
-        this.useRouter = false;
-        this.onTabClicked = (ev) => {
-            const { href, tab } = ev.detail;
-            if (this.useRouter && href !== undefined) {
-                const router = document.querySelector('ion-router');
-                if (router) {
-                    router.push(href);
-                }
-            }
-            else {
-                this.select(tab);
-            }
-        };
-    }
+    transitioning = false;
+    leavingTab;
+    el;
+    selectedTab;
+    /** @internal */
+    useRouter = false;
+    /**
+     * Emitted when the navigation will load a component.
+     * @internal
+     */
+    ionNavWillLoad;
+    /**
+     * Emitted when the navigation is about to transition to a new component.
+     */
+    ionTabsWillChange;
+    /**
+     * Emitted when the navigation has finished transitioning to a new component.
+     */
+    ionTabsDidChange;
     async componentWillLoad() {
         if (!this.useRouter) {
             /**
@@ -114,8 +116,7 @@ export class Tabs {
     }
     /** @internal */
     async getRouteId() {
-        var _a;
-        const tabId = (_a = this.selectedTab) === null || _a === void 0 ? void 0 : _a.tab;
+        const tabId = this.selectedTab?.tab;
         return tabId !== undefined ? { id: tabId, element: this.selectedTab } : undefined;
     }
     setActive(selectedTab) {
@@ -161,8 +162,20 @@ export class Tabs {
     get tabs() {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
+    onTabClicked = (ev) => {
+        const { href, tab } = ev.detail;
+        if (this.useRouter && href !== undefined) {
+            const router = document.querySelector('ion-router');
+            if (router) {
+                router.push(href);
+            }
+        }
+        else {
+            this.select(tab);
+        }
+    };
     render() {
-        return (h(Host, { key: 'c7131135b31aa312dc0207602561e1c0f4ac3e53', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '6c46e91c0389bbcea1f15f35cf3ea513a74ac545', name: "top" }), h("div", { key: '4f1b649d8bb60b61402b97359de204979c5eda52', class: "tabs-inner" }, h("slot", { key: '8d1ef4952be4fb33567376e1083ea4da697fcae0' })), h("slot", { key: '260b8da8031494e9cb4635b3d22c49a433042db1', name: "bottom" })));
+        return (h(Host, { key: '7b8c6455e0673e343d0c759ed85e0d9970de3bb8', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '7d0d840ae03312ca22bcb694ffca738d6648218e', name: "top" }), h("div", { key: 'f336d903800af34af0d36adfc94223b940111e6a', class: "tabs-inner" }, h("slot", { key: '14656154959a24ae176eff20f6463043180d2eae' })), h("slot", { key: '2be4d114f058d24b0e70fb12cfb0eccd3d6e6a74', name: "bottom" })));
     }
     static get is() { return "ion-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,11 +8,17 @@ import { getIonMode } from "../../global/ionic-global";
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Text {
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color;
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'bfaa49d35f43b8036725ae8a322c716fc6e43bdf', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'b6f604df1b7aa5705a5b9a458e669a6a921c02a1', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: 'c04880cd1935b42cbe60f58fd523b4d8a96072dc' })));
+            }) }, h("slot", { key: '055d07b024a6554dfcf959fc8ed7b405e2730af2' })));
     }
     static get is() { return "ion-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textarea/textarea.ios.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) {
@@ -856,10 +867,31 @@
   font-size: inherit;
 }
 
+/**
+ * Give stacked and floating textareas a taller minimum height to
+ * accommodate the label and textarea content.
+ */
+:host(.textarea-label-placement-floating),
+:host(.textarea-label-placement-stacked) {
+  min-height: 56px;
+}
+
 :host(.textarea-disabled) {
   opacity: 0.3;
 }
 
+::slotted(ion-button[slot=start]),
+::slotted(ion-button[slot=end]) {
+  margin-top: 2px;
+}
+
+:host(.textarea-label-placement-floating) ::slotted(ion-button[slot=start]),
+:host(.textarea-label-placement-floating) ::slotted(ion-button[slot=end]),
+:host(.textarea-label-placement-stacked) ::slotted(ion-button[slot=start]),
+:host(.textarea-label-placement-stacked) ::slotted(ion-button[slot=end]) {
+  margin-top: 10px;
+}
+
 /**
  * Slotted buttons have a lot of default padding that can
  * cause them to look misaligned from other pieces such