@ionic/core 8.0.0-dev.11709632212.139b6f63 → 8.0.0-dev.11711408410.14d71406

package/dist/collection/components/range/test/range-events.e2e.js

@@ -54,6 +54,33 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
                 expect(rangeStart).toHaveReceivedEventDetail({ value: 20 });
                 expect(rangeEnd).toHaveReceivedEventDetail({ value: 21 });
             });
+            test('should emit end event on tap', async ({ page }, testInfo) => {
+                testInfo.annotations.push({
+                    type: 'issue',
+                    description: 'https://github.com/ionic-team/ionic-framework/issues/28487',
+                });
+                await page.setContent(`<ion-range aria-label="Range" value="20"></ion-range>`, config);
+                const range = page.locator('ion-range');
+                const rangeEndSpy = await page.spyOnEvent('ionKnobMoveEnd');
+                const rangeBoundingBox = await range.boundingBox();
+                /**
+                 * Coordinates for the click event.
+                 * These need to be near the end of the range
+                 * (or anything that isn't the current value).
+                 *
+                 * The number 50 is arbitrary, but it should be
+                 * less than the width of the range.
+                 */
+                const x = rangeBoundingBox.width - 50;
+                // The y coordinate is the middle of the range.
+                const y = rangeBoundingBox.height / 2;
+                // Click near the end of the range.
+                await range.click({
+                    position: { x, y },
+                });
+                await rangeEndSpy.next();
+                expect(rangeEndSpy.length).toBe(1);
+            });
             // TODO FW-2873
             test.skip('should not scroll when the knob is swiped', async ({ page, skip }) => {
                 skip.browser('webkit', 'mouse.wheel is not available in WebKit');

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

@@ -6,10 +6,11 @@ import { getTimeGivenProgression } from "../../utils/animation/cubic-bezier";
 import { getScrollElement, ION_CONTENT_CLASS_SELECTOR, ION_CONTENT_ELEMENT_SELECTOR, printIonContentErrorMsg, } from "../../utils/content/index";
 import { clamp, componentOnReady, getElementRoot, raf, transitionEndAsync } from "../../utils/helpers";
 import { ImpactStyle, hapticImpact } from "../../utils/native/haptic";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonMode, getIonTheme } from "../../global/ionic-global";
 import { createPullingAnimation, createSnapBackAnimation, getRefresherAnimationType, handleScrollWhilePulling, handleScrollWhileRefreshing, setSpinnerOpacity, shouldUseNativeRefresher, translateElement, } from "./refresher.utils";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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.
  */
 export class Refresher {
     constructor() {
@@ -593,11 +594,11 @@ export class Refresher {
         }
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '460d903daa65f5549f4f75de63d185d82b9df1bc', slot: "fixed", class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '552e23519ef35bdf33358f2e3219f364b3c2cd71', slot: "fixed", class: {
+                [theme]: true,
                 // Used internally for styling
-                [`refresher-${mode}`]: true,
+                [`refresher-${theme}`]: true,
                 'refresher-native': this.nativeRefresher,
                 'refresher-active': this.state !== 1 /* RefresherState.Inactive */,
                 'refresher-pulling': this.state === 2 /* RefresherState.Pulling */,
@@ -611,13 +612,15 @@ export class Refresher {
     static get originalStyleUrls() {
         return {
             "ios": ["refresher.ios.scss"],
-            "md": ["refresher.md.scss"]
+            "md": ["refresher.md.scss"],
+            "ionic": ["refresher.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["refresher.ios.css"],
-            "md": ["refresher.md.css"]
+            "md": ["refresher.md.css"],
+            "ionic": ["refresher.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/refresher/test/a11y/refresher.e2e.js

@@ -4,7 +4,7 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test, dragElementBy } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'], modes: ['md'], themes: ['light', 'dark'] }).forEach(({ config, title }) => {
+configs({ directions: ['ltr'], modes: ['md'], palettes: ['light', 'dark'] }).forEach(({ config, title }) => {
     test.describe(title('refresher: a11y for ion-color()'), () => {
         test('should not have accessibility violations', async ({ page }) => {
             await page.setContent(`

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

@@ -6,9 +6,13 @@ import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { arrowDown, caretBackSharp } from "ionicons/icons";
 import { config } from "../../global/config";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 import { supportsRubberBandScrolling } from "../refresher/refresher.utils";
 import { SPINNERS } from "../spinner/spinner-configs";
+/**
+ * @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.
+ */
 export class RefresherContent {
     constructor() {
         this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
@@ -18,6 +22,7 @@ export class RefresherContent {
         this.refreshingText = undefined;
     }
     componentWillLoad() {
+        const theme = getIonTheme(this);
         if (this.pullingIcon === undefined) {
             /**
              * The native iOS refresher uses a spinner instead of
@@ -25,13 +30,11 @@ export class RefresherContent {
              * the native iOS refresher.
              */
             const hasRubberBandScrolling = supportsRubberBandScrolling();
-            const mode = getIonMode(this);
             const overflowRefresher = hasRubberBandScrolling ? 'lines' : arrowDown;
-            this.pullingIcon = config.get('refreshingIcon', mode === 'ios' && hasRubberBandScrolling ? config.get('spinner', overflowRefresher) : 'circular');
+            this.pullingIcon = config.get('refreshingIcon', theme === 'ios' && hasRubberBandScrolling ? config.get('spinner', overflowRefresher) : 'circular');
         }
         if (this.refreshingSpinner === undefined) {
-            const mode = getIonMode(this);
-            this.refreshingSpinner = config.get('refreshingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'circular'));
+            this.refreshingSpinner = config.get('refreshingSpinner', config.get('spinner', theme === 'ios' ? 'lines' : 'circular'));
         }
     }
     renderPullingText() {
@@ -51,8 +54,10 @@ export class RefresherContent {
     render() {
         const pullingIcon = this.pullingIcon;
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
-        const mode = getIonMode(this);
-        return (h(Host, { key: 'bd4122ec149c1ea6c43d5b6dfd7932569bfd8d7e', class: mode }, h("div", { key: '492113883e1ed465fd6b35a8e700b29a8bbb2baf', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { class: "refresher-pulling-icon" }, h("div", { class: "spinner-arrow-container" }, h("ion-spinner", { name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { class: "arrow-container" }, h("ion-icon", { icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { class: "refresher-pulling-icon" }, h("ion-icon", { icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: '402b0e02cfee42358c4fd690b60c8eb39386569f', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { class: "refresher-refreshing-icon" }, h("ion-spinner", { name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '1af7f2ac469dabdbea1307c839afe014a08f5299', class: {
+                [theme]: true,
+            } }, h("div", { key: 'dc1500809215267cb68a2fc39eeb04725bf9948e', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { class: "refresher-pulling-icon" }, h("div", { class: "spinner-arrow-container" }, h("ion-spinner", { name: this.pullingIcon, paused: true }), theme === 'md' && this.pullingIcon === 'circular' && (h("div", { class: "arrow-container" }, h("ion-icon", { icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { class: "refresher-pulling-icon" }, h("ion-icon", { icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: 'e5892f9590bb2c9ceb12e39bac9755eadc6ac683', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { class: "refresher-refreshing-icon" }, h("ion-spinner", { name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
     }
     static get is() { return "ion-refresher-content"; }
     static get properties() {

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

@@ -3,8 +3,11 @@
  */
 import { Host, h } from "@stencil/core";
 import { reorderThreeOutline, reorderTwoSharp } from "ionicons/icons";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
+ * @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.
+ *
  * @part icon - The icon of the reorder handle (uses ion-icon).
  */
 export class Reorder {
@@ -18,22 +21,26 @@ export class Reorder {
         }
     }
     render() {
-        const mode = getIonMode(this);
-        const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
-        return (h(Host, { key: '268c3575bdc5ca591e11442a744119028f17ae85', class: mode }, h("slot", { key: '4767aef1d57921060541cd38b0a62ef2d8b3267b' }, h("ion-icon", { key: 'ad5f972dc2449cdd7aba92b06e7f0d2539e9a202', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        const theme = getIonTheme(this);
+        const reorderIcon = theme === 'ios' ? reorderThreeOutline : reorderTwoSharp;
+        return (h(Host, { key: 'b1ac62e21d23164e5e0e092bb80488b432093a6e', class: {
+                [theme]: true,
+            } }, h("slot", { key: '84fb2595ffb9d96ea8dd81e600b12c4e3ec750a4' }, h("ion-icon", { key: 'f389aa4ff4d98d1d28019f93a7197859ccdfe77c', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
     }
     static get is() { return "ion-reorder"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["reorder.ios.scss"],
-            "md": ["reorder.md.scss"]
+            "md": ["reorder.md.scss"],
+            "ionic": ["reorder.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["reorder.ios.css"],
-            "md": ["reorder.md.css"]
+            "md": ["reorder.md.css"],
+            "ionic": ["reorder.md.css"]
         };
     }
     static get elementRef() { return "el"; }

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

@@ -5,7 +5,11 @@ import { Host, h } from "@stencil/core";
 import { findClosestIonContent, getScrollElement } from "../../utils/content/index";
 import { raf } from "../../utils/helpers";
 import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from "../../utils/native/haptic";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
+/**
+ * @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.
+ */
 export class ReorderGroup {
     constructor() {
         this.lastToIndex = -1;
@@ -237,9 +241,9 @@ export class ReorderGroup {
         return this.scrollEl.scrollTop - this.scrollElInitial;
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '3131c13e939242f1a4e10b4fcee028440b1a04c3', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '166dea821a1071bbc47c52088ad471598906aa69', class: {
+                [theme]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
             } }));

package/dist/collection/components/ripple-effect/ripple-effect.js

@@ -2,7 +2,11 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h, readTask, writeTask } from "@stencil/core";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
+/**
+ * @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.
+ */
 export class RippleEffect {
     constructor() {
         this.type = 'bounded';
@@ -58,9 +62,9 @@ export class RippleEffect {
         return this.type === 'unbounded';
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '42d95cc2382286e3bc5d68603f8292eb57ba10f5', role: "presentation", class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '7f9a500e68a05370d2a3353cbd588474a6f68762', role: "presentation", class: {
+                [theme]: true,
                 unbounded: this.unbounded,
             } }));
     }

package/dist/collection/components/route/route.js

@@ -1,4 +1,8 @@
 // TODO(FW-2832): types
+/**
+ * @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.
+ */
 export class Route {
     constructor() {
         this.url = '';

package/dist/collection/components/router/router.js

@@ -5,6 +5,10 @@ import { readNavState, waitUntilNavNode, writeNavState } from "./utils/dom";
 import { findChainForIDs, findChainForSegments, findRouteRedirect } from "./utils/matching";
 import { readRedirects, readRoutes } from "./utils/parser";
 import { chainToSegments, generatePath, parsePath, readSegments, writeSegments } from "./utils/path";
+/**
+ * @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.
+ */
 export class Router {
     constructor() {
         this.previousPath = null;

package/dist/collection/components/router-link/router-link.js

@@ -3,7 +3,11 @@
  */
 import { Host, h } from "@stencil/core";
 import { createColorClasses, openURL } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
+/**
+ * @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.
+ */
 export class RouterLink {
     constructor() {
         this.onClick = (ev) => {
@@ -17,16 +21,16 @@ export class RouterLink {
         this.target = undefined;
     }
     render() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const attrs = {
             href: this.href,
             rel: this.rel,
             target: this.target,
         };
-        return (h(Host, { key: '64a8781a0e92ddc14e03a60ac3da7f21dd59a2af', onClick: this.onClick, class: createColorClasses(this.color, {
-                [mode]: true,
+        return (h(Host, { key: 'f13b788a5725dfba211c2c4558d4dfc9099d8dd3', onClick: this.onClick, class: createColorClasses(this.color, {
+                [theme]: true,
                 'ion-activatable': true,
-            }) }, h("a", Object.assign({ key: 'e2da87e62410c9ada5810f95ab1b9d6c489703a0' }, attrs), h("slot", { key: '201854747f5c867c8f6fadea20ef29b1d221f9db' }))));
+            }) }, h("a", Object.assign({ key: 'a67cea28fb740c6db408a32973cd5fcbaecf7db0' }, attrs), h("slot", { key: 'ab63b4654ee317c48df7fb8aaf350eb9c272935c' }))));
     }
     static get is() { return "ion-router-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/router-link/test/a11y/router-link.e2e.js

@@ -4,7 +4,7 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('router-link: a11y'), () => {
         test('should not have accessibility violations', async ({ page }) => {
             /**

package/dist/collection/components/router-outlet/router-outlet.js

@@ -9,6 +9,9 @@ import { createLockController } from "../../utils/lock-controller";
 import { transition } from "../../utils/transition/index";
 import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
+/**
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ */
 export class RouterOutlet {
     constructor() {
         this.lockController = createLockController();
@@ -177,7 +180,7 @@ export class RouterOutlet {
         return true;
     }
     render() {
-        return h("slot", { key: 'b90c776f7924a88b1b36befe7e6f8943fc20dfe3' });
+        return h("slot", { key: 'bd25db1178276d333a68a25e5e35f5dbe0714805' });
     }
     static get is() { return "ion-router-outlet"; }
     static get encapsulation() { return "shadow"; }
@@ -210,7 +213,7 @@ export class RouterOutlet {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The mode determines which platform styles to use."
+                    "text": "The mode determines the platform behaviors of the component."
                 },
                 "attribute": "mode",
                 "reflect": false,

package/dist/collection/components/row/row.js

@@ -2,10 +2,17 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
+/**
+ * @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.
+ */
 export class Row {
     render() {
-        return (h(Host, { key: 'e52c499804f7bebc1c4ab8fb69ef1b452eae58c1', class: getIonMode(this) }, h("slot", { key: '7808e8156601912e0192fe0b74bdedda2c359e1c' })));
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '9ce8c6b2c56c8395b0fdbf27596a8995ab0c32ae', class: {
+                [theme]: true,
+            } }, h("slot", { key: '669552a7ad745daaf193ce0bad3ef4dbe062ba8c' })));
     }
     static get is() { return "ion-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/searchbar/searchbar.js

@@ -2,20 +2,22 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, forceUpdate, h } from "@stencil/core";
-import { debounceEvent, raf, componentOnReady } from "../../utils/helpers";
+import { debounceEvent, raf, componentOnReady, inheritAttributes } from "../../utils/helpers";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses } from "../../utils/theme";
 import { arrowBackSharp, closeCircle, closeSharp, searchOutline, searchSharp } from "ionicons/icons";
 import { config } from "../../global/config";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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.
  */
 export class Searchbar {
     constructor() {
         this.isCancelVisible = false;
         this.shouldAlignLeft = true;
         this.inputId = `ion-searchbar-${searchbarIds++}`;
+        this.inheritedAttributes = {};
         /**
          * Clears the input field and triggers the control change.
          */
@@ -116,6 +118,7 @@ export class Searchbar {
         this.noAnimate = true;
         this.color = undefined;
         this.animated = false;
+        this.autocapitalize = undefined;
         this.autocomplete = 'off';
         this.autocorrect = 'off';
         this.cancelButtonIcon = config.get('backButtonIcon', arrowBackSharp);
@@ -125,6 +128,8 @@ export class Searchbar {
         this.disabled = false;
         this.inputmode = undefined;
         this.enterkeyhint = undefined;
+        this.maxlength = undefined;
+        this.minlength = undefined;
         this.name = this.inputId;
         this.placeholder = 'Search';
         this.searchIcon = undefined;
@@ -134,6 +139,21 @@ export class Searchbar {
         this.type = 'search';
         this.value = '';
     }
+    /**
+     * lang and dir are globally enumerated attributes.
+     * As a result, creating these as properties
+     * can have unintended side effects. Instead, we
+     * listen for attribute changes and inherit them
+     * to the inner `<input>` element.
+     */
+    onLangChanged(newValue) {
+        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { lang: newValue });
+        forceUpdate(this);
+    }
+    onDirChanged(newValue) {
+        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { dir: newValue });
+        forceUpdate(this);
+    }
     debounceChanged() {
         const { ionInput, debounce, originalIonInput } = this;
         /**
@@ -158,6 +178,9 @@ export class Searchbar {
     connectedCallback() {
         this.emitStyle();
     }
+    componentWillLoad() {
+        this.inheritedAttributes = Object.assign({}, inheritAttributes(this.el, ['lang', 'dir']));
+    }
     componentDidLoad() {
         this.originalIonInput = this.ionInput;
         this.positionElements();
@@ -229,10 +252,10 @@ export class Searchbar {
     positionElements() {
         const value = this.getValue();
         const prevAlignLeft = this.shouldAlignLeft;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const shouldAlignLeft = !this.animated || value.trim() !== '' || !!this.focused;
         this.shouldAlignLeft = shouldAlignLeft;
-        if (mode !== 'ios') {
+        if (theme !== 'ios') {
             return;
         }
         if (prevAlignLeft !== shouldAlignLeft) {
@@ -352,13 +375,13 @@ export class Searchbar {
     render() {
         const { cancelButtonText } = this;
         const animated = this.animated && config.getBoolean('animated', true);
-        const mode = getIonMode(this);
-        const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
-        const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
+        const theme = getIonTheme(this);
+        const clearIcon = this.clearIcon || (theme === 'ios' ? closeCircle : closeSharp);
+        const searchIcon = this.searchIcon || (theme === 'ios' ? searchOutline : searchSharp);
         const shouldShowCancelButton = this.shouldShowCancelButton();
-        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: 'd219b739da043f04358e5646c9d206d5f39d1b86', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: 'fa93932c72571e76d5845e15a4d96291591cec61', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: '72fed78006b21e3e4bc3af31a4eb4545fd3b69da', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
-                [mode]: true,
+        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '0110d5f6f4cfb813a4cdf7e7954c8b7ada021f15', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: theme === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: 'e5f260684cfa75a43063e6d0071d4c220ea49563', "aria-hidden": "true" }, theme === 'md' ? (h("ion-icon", { "aria-hidden": "true", icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: '3460520d8b2dd69dab7231b88bcb571b50992f89', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+                [theme]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
                 'searchbar-no-animate': animated && this.noAnimate,
@@ -367,27 +390,29 @@ export class Searchbar {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, h("div", { key: 'b392694fa344f9316c5ca15560f49b03d149d9a1', class: "searchbar-input-container" }, h("input", { key: '998a7ab915a20bc952c6b4be645870b6291576b7', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }), mode === 'md' && cancelButton, h("ion-icon", { key: 'fa6f3463a1941368e3cf4eaf7059cf5518d1daeb', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: 'e6200807543cfb4a685a6ad0481eb2dc5cab38df', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, h("div", { key: 'cd68bfe8d27cc16477c238e34ca138b999296f5f', class: "searchbar-input-container" }, h("input", Object.assign({ key: '0c4618569243a63164e680712804381cffd5a858', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), theme === 'md' && cancelButton, h("ion-icon", { key: '360bbd3432866db7f9c5b5f0fb653935b81f0ab2', "aria-hidden": "true", icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '70d10d5f4c5839326ec3d6c7468a21943148cdef', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '983f4f65730913c5ff93baed855d694983f72e12', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: 'e541e14885d13f2844e392a4109a86062b62b2d0', "aria-hidden": "true", icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), theme === 'ios' && cancelButton));
     }
     static get is() { return "ion-searchbar"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "ios": ["searchbar.ios.scss"],
-            "md": ["searchbar.md.scss"]
+            "md": ["searchbar.md.scss"],
+            "ionic": ["searchbar.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["searchbar.ios.css"],
-            "md": ["searchbar.md.css"]
+            "md": ["searchbar.md.css"],
+            "ionic": ["searchbar.md.css"]
         };
     }
     static get properties() {
@@ -433,6 +458,23 @@ export class Searchbar {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "autocapitalize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\nAvailable options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`."
+                },
+                "attribute": "autocapitalize",
+                "reflect": false
+            },
             "autocomplete": {
                 "type": "string",
                 "mutable": false,
@@ -487,7 +529,7 @@ export class Searchbar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Set the cancel button icon. Only applies to `md` mode.\nDefaults to `arrow-back-sharp`."
+                    "text": "Set the cancel button icon. Only available when the theme is `\"md\"`.\nDefaults to `\"arrow-back-sharp\"`."
                 },
                 "attribute": "cancel-button-icon",
                 "reflect": false,
@@ -505,7 +547,7 @@ export class Searchbar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Set the the cancel button text. Only applies to `ios` mode."
+                    "text": "Set the the cancel button text. Only available when the theme is `\"ios\"`."
                 },
                 "attribute": "cancel-button-text",
                 "reflect": false,
@@ -523,7 +565,7 @@ export class Searchbar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Set the clear icon. Defaults to `close-circle` for `ios` and `close-sharp` for `md`."
+                    "text": "Set the clear icon. Defaults to `\"close-circle\"` for `\"ios\"` theme and `\"close-sharp\"` for `\"md\"` and `\"ionic\"` theme."
                 },
                 "attribute": "clear-icon",
                 "reflect": false
@@ -597,6 +639,40 @@ export class Searchbar {
                 "attribute": "enterkeyhint",
                 "reflect": false
             },
+            "maxlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This attribute specifies the maximum number of characters that the user can enter."
+                },
+                "attribute": "maxlength",
+                "reflect": false
+            },
+            "minlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This attribute specifies the minimum number of characters that the user can enter."
+                },
+                "attribute": "minlength",
+                "reflect": false
+            },
             "name": {
                 "type": "string",
                 "mutable": false,
@@ -645,7 +721,7 @@ export class Searchbar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The icon to use as the search icon. Defaults to `search-outline` in\n`ios` mode and `search-sharp` in `md` mode."
+                    "text": "The icon to use as the search icon. Defaults to `\"search-outline\"` in\nthe `\"ios\"` theme and `\"search-sharp\"` in the `\"md\"` and `\"ionic\"` themes."
                 },
                 "attribute": "search-icon",
                 "reflect": false
@@ -922,6 +998,12 @@ export class Searchbar {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "lang",
+                "methodName": "onLangChanged"
+            }, {
+                "propName": "dir",
+                "methodName": "onDirChanged"
+            }, {
                 "propName": "debounce",
                 "methodName": "debounceChanged"
             }, {