@ionic/core 8.0.0-beta.0 → 8.0.0-beta.2

package/components/ion-progress-bar.js

@@ -29,7 +29,7 @@ const ProgressBar = /*@__PURE__*/ proxyCustomElement(class ProgressBar extends H
         const mode = getIonMode(this);
         // If the progress is displayed as a solid bar.
         const progressSolid = buffer === 1;
-        return (h(Host, { key: '78a32304c7164cb78145a91be7bb9b86ecd11b66', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
+        return (h(Host, { key: 'b38b62bfe013dfe5f847a6faf6934b02ce32c113', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
                 [mode]: true,
                 [`progress-bar-${type}`]: true,
                 'progress-paused': paused,

package/components/ion-range.js

@@ -96,8 +96,14 @@ const Range = /*@__PURE__*/ proxyCustomElement(class Range extends HTMLElement {
                     el: rangeSlider,
                     gestureName: 'range',
                     gesturePriority: 100,
-                    threshold: 0,
-                    onStart: (ev) => this.onStart(ev),
+                    /**
+                     * Provide a threshold since the drag movement
+                     * might be a user scrolling the view.
+                     * If this is true, then the range
+                     * should not move.
+                     */
+                    threshold: 10,
+                    onStart: () => this.onStart(),
                     onMove: (ev) => this.onMove(ev),
                     onEnd: (ev) => this.onEnd(ev),
                 });
@@ -263,33 +269,93 @@ const Range = /*@__PURE__*/ proxyCustomElement(class Range extends HTMLElement {
         this.value = this.ensureValueInBounds(this.value);
         this.ionChange.emit({ value: this.value });
     }
-    onStart(detail) {
-        const { contentEl } = this;
-        if (contentEl) {
+    /**
+     * The value should be updated on touch end or
+     * when the component is being dragged.
+     * This follows the native behavior of mobile devices.
+     *
+     * For example: When the user lifts their finger from the
+     * screen after tapping the bar or dragging the bar or knob.
+     */
+    onStart() {
+        this.ionKnobMoveStart.emit({ value: this.ensureValueInBounds(this.value) });
+    }
+    /**
+     * The value should be updated while dragging the
+     * bar or knob.
+     *
+     * While the user is dragging, the view
+     * should not scroll. This is to prevent the user from
+     * feeling disoriented while dragging.
+     *
+     * The user can scroll on the view if the knob or
+     * bar is not being dragged.
+     *
+     * @param detail The details of the gesture event.
+     */
+    onMove(detail) {
+        const { contentEl, pressedKnob } = this;
+        const currentX = detail.currentX;
+        /**
+         * Since the user is dragging on the bar or knob, the view should not scroll.
+         *
+         * This only needs to be done once.
+         */
+        if (contentEl && this.initialContentScrollY === undefined) {
             this.initialContentScrollY = disableContentScrollY(contentEl);
         }
-        const rect = (this.rect = this.rangeSlider.getBoundingClientRect());
-        const currentX = detail.currentX;
-        // figure out which knob they started closer to
-        let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);
-        if (isRTL(this.el)) {
-            ratio = 1 - ratio;
+        /**
+         * The `pressedKnob` can be undefined if the user just
+         * started dragging the knob.
+         *
+         * This is necessary to determine which knob the user is dragging,
+         * especially when it's a dual knob.
+         * Plus, it determines when to apply certain styles.
+         *
+         * This only needs to be done once since the knob won't change
+         * while the user is dragging.
+         */
+        if (pressedKnob === undefined) {
+            this.setPressedKnob(currentX);
         }
-        this.pressedKnob = !this.dualKnobs || Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio) ? 'A' : 'B';
-        this.setFocus(this.pressedKnob);
-        // update the active knob's position
         this.update(currentX);
-        this.ionKnobMoveStart.emit({ value: this.ensureValueInBounds(this.value) });
-    }
-    onMove(detail) {
-        this.update(detail.currentX);
     }
+    /**
+     * The value should be updated on touch end:
+     * - When the user lifts their finger from the screen after
+     * tapping the bar.
+     *
+     * @param detail The details of the gesture or mouse event.
+     */
     onEnd(detail) {
         const { contentEl, initialContentScrollY } = this;
-        if (contentEl) {
+        const currentX = detail.currentX || detail.clientX;
+        /**
+         * The `pressedKnob` can be undefined if the user never
+         * dragged the knob. They just tapped on the bar.
+         *
+         * This is necessary to determine which knob the user is changing,
+         * especially when it's a dual knob.
+         * Plus, it determines when to apply certain styles.
+         */
+        if (this.pressedKnob === undefined) {
+            this.setPressedKnob(currentX);
+        }
+        /**
+         * The user is no longer dragging the bar or
+         * knob (if they were dragging it).
+         *
+         * The user can now scroll on the view in the next gesture event.
+         */
+        if (contentEl && initialContentScrollY !== undefined) {
             resetContentScrollY(contentEl, initialContentScrollY);
         }
-        this.update(detail.currentX);
+        // update the active knob's position
+        this.update(currentX);
+        /**
+         * Reset the pressed knob to undefined since the user
+         * may start dragging a different knob in the next gesture event.
+         */
         this.pressedKnob = undefined;
         this.emitValueChange();
         this.ionKnobMoveEnd.emit({ value: this.ensureValueInBounds(this.value) });
@@ -316,6 +382,16 @@ const Range = /*@__PURE__*/ proxyCustomElement(class Range extends HTMLElement {
         // Update input value
         this.updateValue();
     }
+    setPressedKnob(currentX) {
+        const rect = (this.rect = this.rangeSlider.getBoundingClientRect());
+        // figure out which knob they started closer to
+        let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);
+        if (isRTL(this.el)) {
+            ratio = 1 - ratio;
+        }
+        this.pressedKnob = !this.dualKnobs || Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio) ? 'A' : 'B';
+        this.setFocus(this.pressedKnob);
+    }
     get valA() {
         return ratioToValue(this.ratioA, this.min, this.max, this.step);
     }
@@ -459,7 +535,36 @@ const Range = /*@__PURE__*/ proxyCustomElement(class Range extends HTMLElement {
         if (this.hasLabel) {
             labelledBy = 'range-label';
         }
-        return (h("div", { class: "range-slider", ref: (rangeEl) => (this.rangeSlider = rangeEl) }, ticks.map((tick) => (h("div", { style: tickStyle(tick), role: "presentation", class: {
+        return (h("div", { class: "range-slider", ref: (rangeEl) => (this.rangeSlider = rangeEl),
+            /**
+             * Since the gesture has a threshold, the value
+             * won't change until the user has dragged past
+             * the threshold. This is to prevent the range
+             * from moving when the user is scrolling.
+             *
+             * This results in the value not being updated
+             * and the event emitters not being triggered
+             * if the user taps on the range. This is why
+             * we need to listen for the "pointerUp" event.
+             */
+            onPointerUp: (ev) => {
+                /**
+                 * If the user drags the knob on the web
+                 * version (does not occur on mobile),
+                 * the "pointerUp" event will be triggered
+                 * along with the gesture's events.
+                 * This leads to duplicate events.
+                 *
+                 * By checking if the pressedKnob is undefined,
+                 * we can determine if the "pointerUp" event was
+                 * triggered by a tap or a drag. If it was
+                 * dragged, the pressedKnob will be defined.
+                 */
+                if (this.pressedKnob === undefined) {
+                    this.onStart();
+                    this.onEnd(ev);
+                }
+            } }, ticks.map((tick) => (h("div", { style: tickStyle(tick), role: "presentation", class: {
                 'range-tick': true,
                 'range-tick-active': tick.active,
             }, part: tick.active ? 'tick-active' : 'tick' }))), h("div", { class: "range-bar-container" }, h("div", { class: "range-bar", role: "presentation", part: "bar" }), h("div", { class: {
@@ -512,7 +617,7 @@ const Range = /*@__PURE__*/ proxyCustomElement(class Range extends HTMLElement {
         const needsEndAdjustment = inItem && !hasEndContent;
         const mode = getIonMode(this);
         renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (h(Host, { key: 'ff8dbbb4e0c8b9802408a40fa0d93528ec730a9f', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
+        return (h(Host, { key: '576015afd256abb6faa88630dc482b75333c69e0', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
@@ -521,10 +626,10 @@ const Range = /*@__PURE__*/ proxyCustomElement(class Range extends HTMLElement {
                 [`range-label-placement-${labelPlacement}`]: true,
                 'range-item-start-adjustment': needsStartAdjustment,
                 'range-item-end-adjustment': needsEndAdjustment,
-            }) }, h("label", { key: '2164b0ec67215d7791d795a1f6274b595ad74d80', class: "range-wrapper", id: "range-label" }, h("div", { key: '717346e2bcfb29a3a5ef39b5fec226d484aa1f46', class: {
+            }) }, h("label", { key: '45619166eaf5015154ca24aeac8d088fed9606ec', class: "range-wrapper", id: "range-label" }, h("div", { key: 'e5ce095b0b1545dd9d39a04bc0d81fa643ec3739', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: 'a6ffff056ab81a45f1a0b38fa42031c51ceabb52', class: "native-wrapper" }, h("slot", { key: 'df3f155a9886cc62d3f0d23467c406c52cd3e082', name: "start" }), this.renderRangeSlider(), h("slot", { key: '3fab316ecdff317c07010a204d89e85af12d347e', name: "end" })))));
+            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '9bff70bac89c8439b3a8933c2d4dbf0851a49165', class: "native-wrapper" }, h("slot", { key: '5c62813869cad97aa70a1c766c5df7a8fd279258', name: "start" }), this.renderRangeSlider(), h("slot", { key: '888d5665c12debcda85af5024842f5468b086c70', name: "end" })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-refresher-content.js

@@ -54,7 +54,7 @@ const RefresherContent = /*@__PURE__*/ proxyCustomElement(class RefresherContent
         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())));
+        return (h(Host, { key: '14a4ef75a0f56d499ee0e0bb6ba23565626ad442', class: mode }, h("div", { key: 'b738ea69256548d66512744ecaa5cbf651c1f6dd', 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: '6cbcc1f90df56b53c51a99c5a63e185dba00e9b2', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { class: "refresher-refreshing-icon" }, h("ion-spinner", { name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
     }
     get el() { return this; }
 }, [0, "ion-refresher-content", {

package/components/ion-refresher.js

@@ -603,7 +603,7 @@ const Refresher = /*@__PURE__*/ proxyCustomElement(class Refresher extends HTMLE
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '460d903daa65f5549f4f75de63d185d82b9df1bc', slot: "fixed", class: {
+        return (h(Host, { key: 'b5f7ccfe964f0f970c46ae813649c36625d82a1d', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,

package/components/ion-reorder-group.js

@@ -245,7 +245,7 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '3131c13e939242f1a4e10b4fcee028440b1a04c3', class: {
+        return (h(Host, { key: '868762829627e101926293f5e7e9f4bcf54490b1', class: {
                 [mode]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,

package/components/ion-reorder.js

@@ -30,7 +30,7 @@ const Reorder = /*@__PURE__*/ proxyCustomElement(class Reorder extends HTMLEleme
     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" }))));
+        return (h(Host, { key: '068457526894b0f557537d5b85f5596781988bbd', class: mode }, h("slot", { key: '006afcb58b0c8c0e4988e58d2c1441a7f4472de1' }, h("ion-icon", { key: '25e63dd8a8eeee62e6c5095bb39f887af2c82124', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
     }
     get el() { return this; }
     static get style() { return {

package/components/ion-router-link.js

@@ -30,10 +30,10 @@ const RouterLink = /*@__PURE__*/ proxyCustomElement(class RouterLink extends HTM
             rel: this.rel,
             target: this.target,
         };
-        return (h(Host, { key: '64a8781a0e92ddc14e03a60ac3da7f21dd59a2af', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '9dac58d3edaa6b5278c3636e0e245c7ddc2cb888', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'ion-activatable': true,
-            }) }, h("a", Object.assign({ key: 'e2da87e62410c9ada5810f95ab1b9d6c489703a0' }, attrs), h("slot", { key: '201854747f5c867c8f6fadea20ef29b1d221f9db' }))));
+            }) }, h("a", Object.assign({ key: '81d2ffd44f798703da2cd6f926576c6e96a7c41f' }, attrs), h("slot", { key: '26853d510e4cdb93b436cdf70ebb5a7dca288bfb' }))));
     }
     static get style() { return IonRouterLinkStyle0; }
 }, [1, "ion-router-link", {

package/components/ion-router-outlet.js

@@ -186,7 +186,7 @@ const RouterOutlet = /*@__PURE__*/ proxyCustomElement(class RouterOutlet extends
         return true;
     }
     render() {
-        return h("slot", { key: 'b90c776f7924a88b1b36befe7e6f8943fc20dfe3' });
+        return h("slot", { key: 'f7957e6ce7311b0eb442b11257f6d98cef992b66' });
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-row.js

@@ -14,7 +14,7 @@ const Row = /*@__PURE__*/ proxyCustomElement(class Row extends HTMLElement {
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'e52c499804f7bebc1c4ab8fb69ef1b452eae58c1', class: getIonMode(this) }, h("slot", { key: '7808e8156601912e0192fe0b74bdedda2c359e1c' })));
+        return (h(Host, { key: '8b54835ea837e25c278ffa3e298238e92b095ccc', class: getIonMode(this) }, h("slot", { key: 'cb77d85c8d02fdee29a72b58f3091db8daeaf3b2' })));
     }
     static get style() { return IonRowStyle0; }
 }, [1, "ion-row"]);

package/components/ion-searchbar.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { l as debounceEvent, c as componentOnReady, r as raf } from './helpers.js';
+import { l as debounceEvent, d as inheritAttributes, c as componentOnReady, r as raf } from './helpers.js';
 import { i as isRTL } from './dir.js';
 import { c as createColorClasses } from './theme.js';
 import { b as arrowBackSharp, j as closeCircle, k as closeSharp, s as searchOutline, q as searchSharp } from './index7.js';
@@ -29,6 +29,7 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
         this.isCancelVisible = false;
         this.shouldAlignLeft = true;
         this.inputId = `ion-searchbar-${searchbarIds++}`;
+        this.inheritedAttributes = {};
         /**
          * Clears the input field and triggers the control change.
          */
@@ -129,6 +130,7 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
         this.noAnimate = true;
         this.color = undefined;
         this.animated = false;
+        this.autocapitalize = undefined;
         this.autocomplete = 'off';
         this.autocorrect = 'off';
         this.cancelButtonIcon = config.get('backButtonIcon', arrowBackSharp);
@@ -138,6 +140,8 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
         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;
@@ -147,6 +151,21 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
         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;
         /**
@@ -171,6 +190,9 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
     connectedCallback() {
         this.emitStyle();
     }
+    componentWillLoad() {
+        this.inheritedAttributes = Object.assign({}, inheritAttributes(this.el, ['lang', 'dir']));
+    }
     componentDidLoad() {
         this.originalIonInput = this.ionInput;
         this.positionElements();
@@ -369,8 +391,8 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
         const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
         const searchIcon = this.searchIcon || (mode === '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, {
+        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '66091918b5b97012b4105238b9aa1e0bc2133885', "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: 'bfe5602ce36cd82dae870b632de767bde3de2f8a', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: '8604e83a9e11f5c561c470ce4630bdc5a38f1098', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -380,17 +402,19 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
                 '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: '4d94b664e0bb7c47f094a25f26fc92b210b96ae3', class: "searchbar-input-container" }, h("input", Object.assign({ key: '78a82dcd609fdb0327ff153a49b5904a0290663d', "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)), mode === 'md' && cancelButton, h("ion-icon", { key: '4da87bc57573758ed758332789bac63f253b1678', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '410d65bac177b3534c0ef7a6ecc1fe6381b46efd', "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: 'feb89ebe3b4df01402762b9d65c56d26852ca1a6', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
     }
     get el() { return this; }
     static get watchers() { return {
+        "lang": ["onLangChanged"],
+        "dir": ["onDirChanged"],
         "debounce": ["debounceChanged"],
         "value": ["valueChanged"],
         "showCancelButton": ["showCancelButtonChanged"]
@@ -402,6 +426,7 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
 }, [34, "ion-searchbar", {
         "color": [513],
         "animated": [4],
+        "autocapitalize": [1],
         "autocomplete": [1],
         "autocorrect": [1],
         "cancelButtonIcon": [1, "cancel-button-icon"],
@@ -411,6 +436,8 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
         "disabled": [4],
         "inputmode": [1],
         "enterkeyhint": [1],
+        "maxlength": [2],
+        "minlength": [2],
         "name": [1],
         "placeholder": [1],
         "searchIcon": [1, "search-icon"],
@@ -424,6 +451,8 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
         "setFocus": [64],
         "getInputElement": [64]
     }, undefined, {
+        "lang": ["onLangChanged"],
+        "dir": ["onDirChanged"],
         "debounce": ["debounceChanged"],
         "value": ["valueChanged"],
         "showCancelButton": ["showCancelButtonChanged"]

package/components/ion-segment-button.js

@@ -82,7 +82,7 @@ const SegmentButton = /*@__PURE__*/ proxyCustomElement(class SegmentButton exten
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const mode = getIonMode(this);
         const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (h(Host, { key: 'fc2262b4b1cb0c3e38b3de672910543211779b98', class: {
+        return (h(Host, { key: 'b2c9b735e7c578e50d7a41cb0c47cf661b83aa49', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -98,10 +98,10 @@ const SegmentButton = /*@__PURE__*/ proxyCustomElement(class SegmentButton exten
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, h("button", Object.assign({ key: 'd73ffb0e52b86e41fff7aafac8bd77073b494b28', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: 'a3d76c3191a508f47782f17602d814920dc26694', class: "button-inner" }, h("slot", { key: 'ae6479c5eec1e0f4077066a6b0ca06c13af0847f' })), mode === 'md' && h("ion-ripple-effect", null)), h("div", { key: '593a4ec0d186520485073dc2fcdf23899924399b', part: "indicator", class: {
+            } }, h("button", Object.assign({ key: '1b6e56709f281be94c754a52dd80d9968d1e6bb1', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: '3a0508e0d859dffd78dc54dc574cf3ed5c03f110', class: "button-inner" }, h("slot", { key: '05f0eb4f773d2cbd929035087af4550a0f4ab038' })), mode === 'md' && h("ion-ripple-effect", null)), h("div", { key: '75370e50f989a5db5d6b8ffa80894acba1797d85', part: "indicator", class: {
                 'segment-button-indicator': true,
                 'segment-button-indicator-animated': true,
-            } }, h("div", { key: 'cfbd0d89a928cce0130da46b2be406c03ab3cddb', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, h("div", { key: '8123d414c166d97c5e3dae707b89d4e94f2c6f92', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-segment.js

@@ -428,14 +428,14 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'a0b1480e0f95ed9647871c749dbd93ef7ce5b28e', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'a5268f36524465945e66f838c1fcb7b2ca4980b5', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'segment-activated': this.activated,
                 'segment-disabled': this.disabled,
                 'segment-scrollable': this.scrollable,
-            }) }, h("slot", { key: '01b9559e574b1b194e6010295cd9bea4b6aeab1b' })));
+            }) }, h("slot", { key: 'b399f99ec57ab319cdb0635d2bb1efcd74b709bc' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-select-option.js

@@ -17,7 +17,7 @@ const SelectOption = /*@__PURE__*/ proxyCustomElement(class SelectOption extends
         this.value = undefined;
     }
     render() {
-        return h(Host, { key: 'e46b062b71c143792bb74527ba4980e02edc14b3', role: "option", id: this.inputId, class: getIonMode(this) });
+        return h(Host, { key: 'd26050569d40011a686a66ab7bc59ffa7163d264', role: "option", id: this.inputId, class: getIonMode(this) });
     }
     get el() { return this; }
     static get style() { return IonSelectOptionStyle0; }