@ionic/core 8.8.7-dev.11779467048.1641d05e → 8.8.7-dev.11779921691.1777274a

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

@@ -2,6 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
+import { createBadgeManager } from "../../utils/badge-position";
 import { inheritAttributes } from "../../utils/helpers";
 import { config } from "../../global/config";
 import { getIonMode, getIonTheme } from "../../global/ionic-global";
@@ -13,7 +14,41 @@ import { getIonMode, getIonTheme } from "../../global/ionic-global";
  */
 export class TabButton {
     constructor() {
+        this.hasLoaded = false;
         this.inheritedAttributes = {};
+        this.badgeManager = createBadgeManager(this.el, () => {
+            const layout = this.layout || config.get('tabButtonLayout', 'icon-top');
+            const hasIcon = this.hasIcon;
+            const hasLabel = this.hasLabel;
+            const iconEl = hasIcon ? this.el.querySelector(':scope > ion-icon') : null;
+            const labelEl = hasLabel ? this.el.querySelector('ion-label') : null;
+            let target = null;
+            if (layout === 'icon-hide') {
+                target = labelEl;
+            }
+            else if (layout === 'label-hide') {
+                target = iconEl;
+            }
+            else if (layout === 'icon-start') {
+                // Badge anchors to the trailing element
+                target = labelEl || iconEl;
+            }
+            else {
+                // icon-top, icon-bottom, icon-end: badge anchors to the icon
+                target = iconEl || labelEl;
+            }
+            if (!target) {
+                return undefined;
+            }
+            const isLabelTarget = target === labelEl;
+            return {
+                host: this.el,
+                target,
+                relativeTo: this.el.shadowRoot.querySelector('.button-inner'),
+                anchorToEdge: !isLabelTarget,
+                clamp: !isLabelTarget && hasLabel,
+            };
+        });
         /**
          * If `true`, the user cannot interact with the tab button.
          */
@@ -30,6 +65,9 @@ export class TabButton {
         this.onClick = (ev) => {
             this.selectTab(ev);
         };
+        this.onSlotChanged = () => {
+            this.badgeManager.onSlotChanged();
+        };
     }
     onTabBarChanged(ev) {
         const dispatchedFrom = ev.target;
@@ -44,6 +82,21 @@ export class TabButton {
             this.layout = config.get('tabButtonLayout', 'icon-top');
         }
     }
+    onLayoutChanged() {
+        this.badgeManager.init();
+    }
+    connectedCallback() {
+        if (this.hasLoaded) {
+            this.badgeManager.init();
+        }
+    }
+    componentDidLoad() {
+        this.hasLoaded = true;
+        this.badgeManager.init();
+    }
+    disconnectedCallback() {
+        this.badgeManager.destroy();
+    }
     getShape() {
         const theme = getIonTheme(this);
         const { shape } = this;
@@ -72,7 +125,7 @@ export class TabButton {
         return !!this.el.querySelector('ion-label');
     }
     get hasIcon() {
-        return !!this.el.querySelector('ion-icon');
+        return !!this.el.querySelector(':scope > ion-icon');
     }
     canActivate() {
         const theme = getIonTheme(this);
@@ -93,7 +146,7 @@ export class TabButton {
             rel,
             target,
         };
-        return (h(Host, { key: '124248b961d34d24a3cbeeb669c672caa10f6d07', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: '41c251791bbc8e03db9fed17455ec879889ed52b', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [theme]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -106,7 +159,7 @@ export class TabButton {
                 'ion-selectable': true,
                 [`tab-button-shape-${shape}`]: shape !== undefined,
                 'ion-focusable': true,
-            } }, h("a", Object.assign({ key: 'fde7dc112f62c5e1a08017f1e8665bf68658eadf' }, 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: '0912736f1e69a8da9a49c94bca1c613061bcaad1', class: "button-inner" }, h("slot", { key: '9b919361a07b62304dddc751658fca0540a3747a' })), theme === 'md' && h("ion-ripple-effect", { key: '472967f7b2b8f63d669fae542bb2eb1900955975', type: "unbounded" }))));
+            } }, h("a", Object.assign({ key: '6c25a3d21499b56e56dd4e5d8cd396afc69647a2' }, 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: 'e808d93bb4925615aa88646650606a034b6d0b7e', class: "button-inner" }, h("slot", { key: '8841c7b3c09a5dcd545e48ecf1f7d3223407c666', onSlotchange: this.onSlotChanged })), theme === 'md' && h("ion-ripple-effect", { key: 'acf920e86c2641e8ae79f4bcc34e51ce15ad4aeb', type: "unbounded" }))));
     }
     static get is() { return "ion-tab-button"; }
     static get encapsulation() { return "shadow"; }
@@ -337,6 +390,12 @@ export class TabButton {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "layout",
+                "methodName": "onLayoutChanged"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "ionTabBarChanged",

package/dist/collection/components/tab-button/tab-button.md.css

@@ -102,12 +102,6 @@
   white-space: normal;
 }
 
-::slotted(ion-badge) {
-  box-sizing: border-box;
-  position: absolute;
-  z-index: 1;
-}
-
 :host(.tab-layout-icon-start) {
   flex-direction: row;
 }
@@ -336,58 +330,6 @@ ion-ripple-effect {
   }
 }
 
-::slotted(ion-badge) {
-  border-radius: 8px;
-  -webkit-padding-start: 2px;
-  padding-inline-start: 2px;
-  -webkit-padding-end: 2px;
-  padding-inline-end: 2px;
-  padding-top: 3px;
-  padding-bottom: 2px;
-  top: 8px;
-  min-width: 12px;
-  font-size: 8px;
-  font-weight: normal;
-}
-::slotted(ion-badge) {
-  inset-inline-start: calc(50% + 6px);
-}
-
-::slotted(ion-badge:empty) {
-  display: block;
-  min-width: 8px;
-  height: 8px;
-}
-
-:host ::slotted(ion-badge[vertical=bottom]) {
-  top: calc(50% - 8px);
-}
-
-:host ::slotted(ion-badge[vertical=bottom]:empty) {
-  top: calc(50% - 4px);
-}
-
-:host(.tab-layout-icon-bottom) ::slotted(ion-badge[vertical=top]) {
-  top: calc(50% - 4px);
-}
-:host(.tab-layout-icon-bottom) ::slotted(ion-badge[vertical=top]) {
-  inset-inline-start: calc(50% + 6px);
-}
-
-:host(.tab-layout-icon-bottom) ::slotted(ion-badge[vertical=bottom]) {
-  top: calc(50% + 4px);
-}
-:host(.tab-layout-icon-bottom) ::slotted(ion-badge[vertical=bottom]) {
-  inset-inline-start: calc(50% + 6px);
-}
-
-:host(.tab-layout-icon-bottom) ::slotted(ion-badge[vertical=bottom]:empty) {
-  top: calc(50% + 12px);
-}
-:host(.tab-layout-icon-bottom) ::slotted(ion-badge[vertical=bottom]:empty) {
-  inset-inline-start: calc(50% + 6px);
-}
-
 :host(.tab-layout-icon-top) ::slotted(ion-icon) {
   margin-top: 6px;
   margin-bottom: 2px;
@@ -398,13 +340,6 @@ ion-ripple-effect {
   margin-bottom: 6px;
 }
 
-:host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
-  top: 8px;
-}
-:host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
-  inset-inline-start: 70%;
-}
-
 :host(.tab-layout-icon-bottom) ::slotted(ion-icon) {
   margin-top: 0;
   margin-bottom: 6px;
@@ -415,15 +350,6 @@ ion-ripple-effect {
   margin-bottom: 0;
 }
 
-:host(.tab-layout-icon-start) ::slotted(ion-badge),
-:host(.tab-layout-icon-end) ::slotted(ion-badge) {
-  top: 16px;
-}
-:host(.tab-layout-icon-start) ::slotted(ion-badge),
-:host(.tab-layout-icon-end) ::slotted(ion-badge) {
-  inset-inline-start: 80%;
-}
-
 :host(.tab-layout-icon-start) ::slotted(ion-icon) {
   -webkit-margin-end: 6px;
   margin-inline-end: 6px;
@@ -434,26 +360,12 @@ ion-ripple-effect {
   margin-inline-start: 6px;
 }
 
-:host(.tab-layout-icon-hide) ::slotted(ion-badge),
-:host(.tab-has-label-only) ::slotted(ion-badge) {
-  top: 16px;
-}
-:host(.tab-layout-icon-hide) ::slotted(ion-badge),
-:host(.tab-has-label-only) ::slotted(ion-badge) {
-  inset-inline-start: 70%;
-}
-
 :host(.tab-layout-icon-hide) ::slotted(ion-label),
 :host(.tab-has-label-only) ::slotted(ion-label) {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-:host(.tab-layout-label-hide) ::slotted(ion-badge),
-:host(.tab-has-icon-only) ::slotted(ion-badge) {
-  top: 16px;
-}
-
 :host(.tab-layout-label-hide) ::slotted(ion-icon),
 :host(.tab-has-icon-only) ::slotted(ion-icon) {
   margin-top: 0;

package/dist/collection/components/tabs/tabs.css

@@ -1,42 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
 /**
  * A heuristic that applies CSS to tablet
  * viewports.

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

@@ -0,0 +1 @@
+export {};

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

@@ -5,7 +5,6 @@ import { Host, h } from "@stencil/core";
 import { printIonError } from "../../utils/logging/index";
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
  * @slot - Content is placed between the named slots if provided without a slot.
  * @slot top - Content is placed at the top of the screen.
@@ -17,12 +16,10 @@ export class Tabs {
         /** @internal */
         this.useRouter = false;
         this.onTabClicked = (ev) => {
+            var _a;
             const { href, tab } = ev.detail;
             if (this.useRouter && href !== undefined) {
-                const router = document.querySelector('ion-router');
-                if (router) {
-                    router.push(href);
-                }
+                (_a = this.router) === null || _a === void 0 ? void 0 : _a.push(href);
             }
             else {
                 this.select(tab);
@@ -58,11 +55,12 @@ export class Tabs {
         this.updateTabBar();
     }
     updateTabBar() {
+        var _a;
         const tabBar = this.el.querySelector('ion-tab-bar');
         if (!tabBar) {
             return;
         }
-        const tab = this.selectedTab ? this.selectedTab.tab : undefined;
+        const tab = (_a = this.selectedTab) === null || _a === void 0 ? void 0 : _a.tab;
         // If tabs has no selected tab but tab-bar already has a selected-tab set,
         // don't overwrite it. This handles cases where tab-bar is used without ion-tab elements.
         if (tab === undefined) {
@@ -100,7 +98,8 @@ export class Tabs {
      * Get the currently selected tab. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.
      */
     getSelected() {
-        return Promise.resolve(this.selectedTab ? this.selectedTab.tab : undefined);
+        var _a;
+        return Promise.resolve((_a = this.selectedTab) === null || _a === void 0 ? void 0 : _a.tab);
     }
     /** @internal */
     async setRouteId(id) {
@@ -123,7 +122,7 @@ export class Tabs {
     }
     setActive(selectedTab) {
         if (this.transitioning) {
-            return Promise.reject('transitioning already happening');
+            return Promise.reject(new Error('transitioning already happening'));
         }
         this.transitioning = true;
         this.leavingTab = this.selectedTab;
@@ -149,11 +148,9 @@ export class Tabs {
         }
     }
     notifyRouter() {
+        var _a;
         if (this.useRouter) {
-            const router = document.querySelector('ion-router');
-            if (router) {
-                return router.navChanged('forward');
-            }
+            return (_a = this.router) === null || _a === void 0 ? void 0 : _a.navChanged('forward');
         }
         return Promise.resolve(false);
     }
@@ -164,8 +161,11 @@ export class Tabs {
     get tabs() {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
+    get router() {
+        return document.querySelector('ion-router');
+    }
     render() {
-        return (h(Host, { key: 'd94b2760650125d00a9bd620f367022119aba911', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: 'dfa95a272dce19af4575e4d6488962cf6c521754', name: "top" }), h("div", { key: 'd537e5212745833107c751cc6f79d12f48f5472a', class: "tabs-inner" }, h("slot", { key: '6db89721daa7ffd390586345137f1fdfcefa7910' })), h("slot", { key: '7b24f140b89e8e316f24170b29390e00c31d9a0c', name: "bottom" })));
+        return (h(Host, { key: 'adb841bcdb470077a1753add8f9d59aa3f704d51', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '692dc5d1dcc6c78d34033f7c5755a99c4ba1f291', name: "top" }), h("div", { key: '8e831d1644ce228196902561673504ee0e29f888', class: "tabs-inner" }, h("slot", { key: '4f86f6d91670f7add339446821fc7bd47bdf3205' })), h("slot", { key: '82471d76d7b39fc591139fcc6ca208cf090da8ed', name: "bottom" })));
     }
     static get is() { return "ion-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -400,7 +400,7 @@ export class Tabs {
 const getTab = (tabs, tab) => {
     const tabEl = typeof tab === 'string' ? tabs.find((t) => t.tab === tab) : tab;
     if (!tabEl) {
-        printIonError(`[ion-tabs] - Tab with id: "${tabEl}" does not exist`);
+        printIonError(`[ion-tabs] - Tab with id: "${tab}" does not exist`);
     }
     return tabEl;
 };

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

@@ -11,9 +11,9 @@ import { getIonTheme } from "../../global/ionic-global";
 export class Text {
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '4a8be0173621ab64b2849bd02b569e479890c5c4', class: createColorClasses(this.color, {
+        return (h(Host, { key: '7a3f31d6e219207a1ff98ac441357caa512012e5', class: createColorClasses(this.color, {
                 [theme]: true,
-            }) }, h("slot", { key: 'af7771d2fd855b5de843f32d58cd33a89051fa8b' })));
+            }) }, h("slot", { key: '392d48d6a5e0e5d1b44e762ec96fb8b53b3ebd49' })));
     }
     static get is() { return "ion-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -639,7 +639,7 @@
   --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
   --highlight-color-valid: var(--token-text-success, var(--token-semantics-success-900, var(--token-primitives-green-900, #126f23)));
   --highlight-color-invalid: var(--token-semantics-danger-800, var(--token-primitives-red-800, #bf2222));
-  --highlight-color-focused: var(--ion-color-primary, var(--token-bg-primary-base-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))));
+  --highlight-color-focused: var(--ion-color-primary, var(--ion-color-primary-bold));
   --placeholder-color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262));
   --placeholder-opacity: 1;
   --background: var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));

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

@@ -605,9 +605,9 @@
 :host {
   --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
   --padding-bottom: 8px;
-  --highlight-color-focused: var(--ion-color-primary, #0054e9);
-  --highlight-color-valid: var(--ion-color-success, #2dd55b);
-  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
+  --highlight-color-focused: var(--ion-color-primary, var(--ion-color-primary-bold));
+  --highlight-color-valid: var(--ion-color-success, var(--ion-color-success-bold));
+  --highlight-color-invalid: var(--ion-color-danger, var(--ion-color-danger-bold));
   min-height: 44px;
   font-family: var(--ion-font-family, inherit);
   z-index: 2;
@@ -661,11 +661,11 @@
 }
 
 .textarea-bottom .helper-text {
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  color: var(--ion-text-color-step-300, #4d4d4d);
 }
 
 .textarea-bottom .counter {
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  color: var(--ion-text-color-step-300, #4d4d4d);
   padding-inline-start: 16px;
 }
 
@@ -987,7 +987,7 @@
  */
 :host {
   --border-width: 0.55px;
-  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-background-color-step-250, #c8c7cc)));
   --padding-top: 10px;
   --padding-end: 0px;
   --padding-bottom: 8px;

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

@@ -3,7 +3,7 @@
  */
 import { Build, Host, forceUpdate, h, writeTask, } from "@stencil/core";
 import { createNotchController, checkInvalidState, reportValidityToElementInternals } from "../../utils/forms/index";
-import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnReady } from "../../utils/helpers";
+import { inheritAriaAttributes, debounceEvent, inheritAttributes, waitForComponentReady } from "../../utils/helpers";
 import { createSlotMutationController } from "../../utils/slot-mutation-controller";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { getIonTheme } from "../../global/ionic-global";
@@ -310,7 +310,7 @@ export class Textarea {
          * nativeInput won't be defined yet with the custom elements build, so wait for it to load in.
          */
         if (!this.nativeInput) {
-            await new Promise((resolve) => componentOnReady(this.el, resolve));
+            await waitForComponentReady(this.el);
         }
         return Promise.resolve(this.nativeInput);
     }
@@ -565,7 +565,7 @@ export class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: 'd4a95fcd3fe11311d779c10777421c36da20b7a6', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'cdf5602367314c8ce2b3637d5b8f7177797166e8', class: createColorClasses(this.color, {
                 [theme]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -577,7 +577,7 @@ export class Textarea {
                 'in-item': inItem,
                 'textarea-disabled': disabled,
                 'textarea-readonly': readonly,
-            }) }, h("label", { key: '3d21eab560550527de015d36b1c71761792aa516', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: '5fe9ec91ac5560d2ebbb93751dd770fe17e5f839', class: "textarea-wrapper-inner" }, 
+            }) }, h("label", { key: 'fd4fb1536da7bee289bd6070ffaac0b6b6f949f6', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: 'd2c9b6ee9868ce3f78a947cd63ba2b32aa453318', class: "textarea-wrapper-inner" }, 
         /**
          * For the ionic theme, we render the outline container here
          * instead of higher up, so it can be positioned relative to
@@ -587,7 +587,7 @@ export class Textarea {
          * <label> element, ensuring that clicking the label text
          * focuses the textarea.
          */
-        theme === 'ionic' && fill === 'outline' && h("div", { key: 'aac1db3f8a9a9d541bd0d76f17c7936daca419d7', class: "textarea-outline" }), h("div", { key: '49779a6b346b5bf2e8f98787c9159f41fd767d26', class: "start-slot-wrapper" }, h("slot", { key: '2a86311a2ee002e286d8cb1e27480364cb3eb5b1', name: "start" })), h("div", { key: '922069ecd0aa72e4294d78e02a4f216706af0d99', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el), part: "container" }, h("textarea", Object.assign({ key: 'c1cae5f0695b4d978fbbd6d0af8d3da681d2c671', class: "native-textarea", part: "native", 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, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), h("div", { key: '6e76190d9644dd880200f28bbfdb6291362ce639', class: "end-slot-wrapper" }, h("slot", { key: 'fe9466237a1d88bf8cd534e83cca148ce6178abe', name: "end" }))), shouldRenderHighlight && h("div", { key: 'e8a158231e0dcacb4df5b94575fe54d7aff5c23f', class: "textarea-highlight" })), this.renderBottomContent()));
+        theme === 'ionic' && fill === 'outline' && h("div", { key: '595707abdbc6c1f8c8457e445b38fb94a8f7ed46', class: "textarea-outline" }), h("div", { key: '067b66d0d1e7f770374671a5687f87f39e7ca916', class: "start-slot-wrapper" }, h("slot", { key: 'ca6f3fdf8ba771c1be60012c43c75935c25e11d1', name: "start" })), h("div", { key: '70e64eb49f3bbe1476297335d7486bb5b5135145', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el), part: "container" }, h("textarea", Object.assign({ key: '5716d0e46463b08b9538ae46ac895a91ab3ff5d1', class: "native-textarea", part: "native", 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, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), h("div", { key: 'ac78b4b4f4b24555603ace419ca0aef1ea15e3ba', class: "end-slot-wrapper" }, h("slot", { key: 'ab37741284b2cf40ee63e5c659845ad6b48bdf56', name: "end" }))), shouldRenderHighlight && h("div", { key: '5de71fab7cc25a67323db371f0fa127e72febf6e', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "shadow"; }

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

@@ -605,9 +605,9 @@
 :host {
   --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
   --padding-bottom: 8px;
-  --highlight-color-focused: var(--ion-color-primary, #0054e9);
-  --highlight-color-valid: var(--ion-color-success, #2dd55b);
-  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
+  --highlight-color-focused: var(--ion-color-primary, var(--ion-color-primary-bold));
+  --highlight-color-valid: var(--ion-color-success, var(--ion-color-success-bold));
+  --highlight-color-invalid: var(--ion-color-danger, var(--ion-color-danger-bold));
   min-height: 44px;
   font-family: var(--ion-font-family, inherit);
   z-index: 2;
@@ -661,11 +661,11 @@
 }
 
 .textarea-bottom .helper-text {
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  color: var(--ion-text-color-step-300, #4d4d4d);
 }
 
 .textarea-bottom .counter {
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  color: var(--ion-text-color-step-300, #4d4d4d);
   padding-inline-start: 16px;
 }
 
@@ -1047,8 +1047,8 @@
  * }
  */
 :host(.textarea-fill-solid) {
-  --background: var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));
-  --border-color: var(--ion-color-step-500, var(--ion-background-color-step-500, gray));
+  --background: var(--ion-background-color-step-50, #f2f2f2);
+  --border-color: var(--ion-background-color-step-500, gray);
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
@@ -1088,8 +1088,8 @@
  */
 @media (any-hover: hover) {
   :host(.textarea-fill-solid:hover) {
-    --background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
-    --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
+    --background: var(--ion-background-color-step-100, #e6e6e6);
+    --border-color: var(--ion-background-color-step-750, #404040);
   }
 }
 /**
@@ -1097,8 +1097,8 @@
  * much darker on focus.
  */
 :host(.textarea-fill-solid.has-focus) {
-  --background: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));
-  --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
+  --background: var(--ion-background-color-step-150, #d9d9d9);
+  --border-color: var(--ion-background-color-step-750, #404040);
 }
 
 :host(.textarea-fill-solid) .textarea-wrapper {
@@ -1182,7 +1182,7 @@
  * }
  */
 :host(.textarea-fill-outline) {
-  --border-color: var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3));
+  --border-color: var(--ion-background-color-step-300, #b3b3b3);
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
@@ -1210,7 +1210,7 @@
  */
 @media (any-hover: hover) {
   :host(.textarea-fill-outline:hover) {
-    --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
+    --border-color: var(--ion-background-color-step-750, #404040);
   }
 }
 /**
@@ -1423,7 +1423,7 @@
 
 :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)))));
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13))));
   --padding-top: 18px;
   --padding-end: 0px;
   --padding-bottom: 8px;

package/dist/collection/components/thumbnail/thumbnail.css

@@ -68,8 +68,8 @@
   --border-radius: 0;
   border-radius: var(--border-radius);
   display: block;
-  width: var(--size);
-  height: var(--size);
+  width: var(--size, 48px);
+  height: var(--size, 48px);
 }
 
 ::slotted(ion-img),

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

@@ -10,9 +10,9 @@ import { getIonTheme } from "../../global/ionic-global";
 export class Thumbnail {
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '2fb4e6f9f650badf2bc492fc4b1c43cad64141c0', class: {
+        return (h(Host, { key: '6053cf163155d4268dad4fc81ffc6bbc70d75659', class: {
                 [theme]: true,
-            } }, h("slot", { key: 'ea18f4572b2b019af3470c6bdb7915d4a5dd84bb' })));
+            } }, h("slot", { key: 'b7afb5835bce7c7ed9e5cf44758bbe2d802e1271' })));
     }
     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 theme = getIonTheme(this);
         const size = this.getSize();
-        return (h(Host, { key: '87bb5264f4c13d0d6eeef874ed114539d0b59062', class: createColorClasses(this.color, {
+        return (h(Host, { key: '8db3e5f9dbd8b1762a9919eaeef29c98649dfb25', class: createColorClasses(this.color, {
                 [theme]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: '75f2ddfaf693ffdec13d909eefdb09b441d76e80', class: "toolbar-title" }, h("slot", { key: '00539af5e250bee78fdd1c55f2ecdc8e53bc18b0' }))));
+            }) }, h("div", { key: 'a31ebae2c494a51d2145eec69d0b1bc635108a01', class: "toolbar-title" }, h("slot", { key: 'f5975b44b3e3afbf98dcbdb53fc78447b49407b3' }))));
     }
     static get is() { return "ion-title"; }
     static get encapsulation() { return "shadow"; }

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

@@ -313,10 +313,10 @@
  * }
  */
 :host {
-  --background: var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));
+  --background: var(--ion-background-color-step-50, #f2f2f2);
   --border-radius: 14px;
-  --button-color: var(--ion-color-primary, #0054e9);
-  --color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
+  --button-color: var(--ion-color-primary, var(--ion-color-primary-bold));
+  --color: var(--ion-text-color-step-150, #262626);
   --max-width: 700px;
   --max-height: 478px;
   --start: 10px;

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

@@ -439,9 +439,9 @@ 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, Object.assign({ key: 'f8a4c4537d421e924a58f9addbb38a4a043b9f53', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '6fd286b024a05e6960f7b4b7947a3c26cc129e14', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true, [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent, [`toast-shape-${shape}`]: shape !== undefined, [`toast-hue-${hue}`]: hue !== undefined })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '4f0b39c8e0d7aecfe81da23c3ca1591374a8afa5', class: wrapperClass, part: "wrapper" }, h("div", { key: 'a2cf3ea830d27b51ffe1158fb3f3bf87486401b5', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: 'bee5f21ee8df2278e20bf0565495da30c2e61963', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '40a95848e952dd587d1972487affd4b8e088209f', 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')))));
+            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true, [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent, [`toast-shape-${shape}`]: shape !== undefined, [`toast-hue-${hue}`]: hue !== undefined })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '42aa178a6c7f25841bb6e257810c37b6a5703b1f', class: wrapperClass, part: "wrapper" }, h("div", { key: '5cb2f2566ce8ab76de6a79ecac02a354eb242c58', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: 'f5a60e1b8c95bbbb829e3b9b01db64ab5229265a', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: 'a903491644c03391f66432253cc8365c782b056d', 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"; }