voyager-ionic-core 7.7.2 → 7.8.6

package/dist/collection/components/range/range.js

@@ -58,8 +58,14 @@ export class Range {
                     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),
                 });
@@ -242,33 +248,93 @@ export class Range {
         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) });
@@ -295,6 +361,16 @@ export class Range {
         // 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);
     }
@@ -497,7 +573,36 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         if (!this.legacyFormController.hasLegacyControl() && 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: {

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

@@ -594,7 +594,7 @@ export class Refresher {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '9cf8e306e367e0ffd99f8a242dce0c9d78f96317', slot: "fixed", class: {
+        return (h(Host, { key: '96f4f595ebdb92a12755b642398691bcaab9f7c1', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,

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

@@ -52,7 +52,7 @@ export class RefresherContent {
         const pullingIcon = this.pullingIcon;
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
         const mode = getIonMode(this);
-        return (h(Host, { key: '537e4d601fd09804d072e9fed9b2c6ba8d890548', class: mode }, h("div", { key: '67f46df746f7da2fc60c47da9216a2920c25166f', 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: '216f96af452e1567df7906c4d9e6fbf8c397ad21', 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: 'cf3caa51c4aba8a95622f6d32cafa90b683b9d6e', class: mode }, h("div", { key: '5ad70801104bbea873d3525206660c52e4447903', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: '0f95df169fd367528bfaa5d9ccf6690a613609c4', class: "refresher-pulling-icon" }, h("div", { key: '4b8f0465a19f017751b207807c32e1fe00fda433', class: "spinner-arrow-container" }, h("ion-spinner", { key: '77e60179d76f0d17f8f2dc3518f97a2a924418e6', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { key: 'f78f63f08f071bead1bfe655bae6394f8a219d91', class: "arrow-container" }, h("ion-icon", { key: '4d833d134d2b221cae2dfb0611d4029f2d664db5', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: 'e6db19d7fa324363d2a7c3c046510f4c8461f7e6', class: "refresher-pulling-icon" }, h("ion-icon", { key: '66c2ef1a53c5809f49891de515da5f55d9bf8dcc', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: '80c413e21d362a5bb0419fcd13092453b3445cee', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: '0d5511f9644de26332a1a9ed39b160691fab74d9', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '54e4a96b081c7b453a98e00cceea7c086268a450', 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

@@ -20,7 +20,7 @@ export class Reorder {
     render() {
         const mode = getIonMode(this);
         const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
-        return (h(Host, { key: 'e625707b1810f93f5c667e38b8e2904988a3cff0', class: mode }, h("slot", { key: 'fd0c3167e8a7955a6f841b338345de0528535ff5' }, h("ion-icon", { key: '3fc7bb1adb0dde839ec4898361e359c640e81067', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        return (h(Host, { key: '5747b63aa64b05bfed96bbce8087186c7e14c6d5', class: mode }, h("slot", { key: 'a745f29a23c905cd0bff572acb755b597a3fb3c3' }, h("ion-icon", { key: '48f433e85a3a68c16bc426623b2b74957b4b2eb7', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
     }
     static get is() { return "ion-reorder"; }
     static get encapsulation() { return "shadow"; }

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

@@ -238,7 +238,7 @@ export class ReorderGroup {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '067b8ff26887c4e458163f70f7308723c90a53f8', class: {
+        return (h(Host, { key: '68b5e5fa00a0531c74597964d84c82da8bc3252f', class: {
                 [mode]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,

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

@@ -59,7 +59,7 @@ export class RippleEffect {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'a9ff1956627908ee4071002ca018eaa80f87cd59', role: "presentation", class: {
+        return (h(Host, { key: 'f1129019a6d556b008c754aeb79618c69baea9f8', role: "presentation", class: {
                 [mode]: true,
                 unbounded: this.unbounded,
             } }));

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

@@ -23,10 +23,10 @@ export class RouterLink {
             rel: this.rel,
             target: this.target,
         };
-        return (h(Host, { key: '9944573e56abecc47afd2df03b386e38fc7ed2f3', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'e69892f4c6a6baf040a20c429afdec0e4db2dc0e', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'ion-activatable': true,
-            }) }, h("a", Object.assign({ key: '383de10c02eb9ab87e27890548ef681dccf2a765' }, attrs), h("slot", { key: '584a5a52e2b116f3827596cc5869a3557d6bcb6b' }))));
+            }) }, h("a", Object.assign({ key: '648cb22526f2933abe0865c86da6f30eac3ccb87' }, attrs), h("slot", { key: 'd6bc2e28b7c5cc228caedffebe653bde35934b67' }))));
     }
     static get is() { return "ion-router-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -178,7 +178,7 @@ export class RouterOutlet {
         return true;
     }
     render() {
-        return h("slot", { key: '5e31ebd99536453783f5b6f9119d7fa2bf8a5aad' });
+        return h("slot", { key: '3fe520ecae37af68e07a51f3a3223ea454035a59' });
     }
     static get is() { return "ion-router-outlet"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Row {
     render() {
-        return (h(Host, { key: 'de94b93c001a93b2a88bcb8e959f421fd5ad4a65', class: getIonMode(this) }, h("slot", { key: '41fa951758d3644bb77d80002caf6e25a79393ce' })));
+        return (h(Host, { key: '242c9a45b0bb39af2aebf412fdfa9a176babc834', class: getIonMode(this) }, h("slot", { key: 'd9015d663d631bbf20bd3e0821fed874cd6c5156' })));
     }
     static get is() { return "ion-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,7 +2,7 @@
  * (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";
@@ -16,6 +16,7 @@ export class Searchbar {
         this.isCancelVisible = false;
         this.shouldAlignLeft = true;
         this.inputId = `ion-searchbar-${searchbarIds++}`;
+        this.inheritedAttributes = {};
         /**
          * Clears the input field and triggers the control change.
          */
@@ -116,6 +117,7 @@ export class Searchbar {
         this.noAnimate = true;
         this.color = undefined;
         this.animated = false;
+        this.autocapitalize = 'default';
         this.autocomplete = 'off';
         this.autocorrect = 'off';
         this.cancelButtonIcon = config.get('backButtonIcon', arrowBackSharp);
@@ -125,6 +127,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 +138,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 +177,9 @@ export class Searchbar {
     connectedCallback() {
         this.emitStyle();
     }
+    componentWillLoad() {
+        this.inheritedAttributes = Object.assign({}, inheritAttributes(this.el, ['lang', 'dir']));
+    }
     componentDidLoad() {
         this.originalIonInput = this.ionInput;
         this.positionElements();
@@ -350,14 +372,14 @@ export class Searchbar {
         return true;
     }
     render() {
-        const { cancelButtonText } = this;
+        const { cancelButtonText, autocapitalize } = 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 shouldShowCancelButton = this.shouldShowCancelButton();
-        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '1de9b9bc6bad708bafcf4d31fa82838355120486', "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: 'e5178016e17104a80732edbae73c0dfc264bfe52', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: '2c88a7b6ec7f33ada7dae560881210d7a8800f76', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '9c7b4d2e86d9bcd12e57c9a96723d3da598a3773', "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: '1c25268a776134cccd29eb752898cb8ac0eed30f', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: 'feef9fc7e405656e134a76dc037aaaa1a4ce36b4', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -367,14 +389,14 @@ export class Searchbar {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, h("div", { key: '8e914264a99453748a2bf370943e4047a0a587fb', class: "searchbar-input-container" }, h("input", { key: 'd772f3e8d42301e50fbd6c9deb332fbdf3c435ac', "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: '8d9b461c2c34729b1bb562c227868cf817a353bc', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: 'bcc39be721f4b825af31aae4dfb3058722d889a8', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, h("div", { key: '92e3925dc0de468e5665705902153837105dfa57', class: "searchbar-input-container" }, h("input", Object.assign({ key: 'fb74faf81b347a62338ccdac981525df1c52b322', "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: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, h("ion-icon", { key: 'd58c3636dac1d2e4135989f4c07dc95c51492e60', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '1cece7c63ca5ca4b8799e15ee6d2bac100ef0d5e', "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: '9a6478e1f1482aa6e62c88bd96cd19cacbfb8d60', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: 'fe3c2b9cac29002f69e95a89b554c7504e2df050', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
     }
     static get is() { return "ion-searchbar"; }
     static get encapsulation() { return "scoped"; }
@@ -433,6 +455,24 @@ export class Searchbar {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "autocapitalize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "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,
+                "defaultValue": "'default'"
+            },
             "autocomplete": {
                 "type": "string",
                 "mutable": false,
@@ -597,6 +637,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,
@@ -922,6 +996,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"
             }, {

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

@@ -4,12 +4,30 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { Searchbar } from "../searchbar";
 describe('searchbar: rendering', () => {
-    it('should inherit attributes', async () => {
+    it('should inherit properties on load', async () => {
         const page = await newSpecPage({
             components: [Searchbar],
-            html: '<ion-searchbar name="search"></ion-searchbar>',
+            html: '<ion-searchbar autocapitalize="off" maxlength="4" minlength="2" name="search"></ion-searchbar>',
         });
         const nativeEl = page.body.querySelector('ion-searchbar input');
         expect(nativeEl.getAttribute('name')).toBe('search');
+        expect(nativeEl.getAttribute('maxlength')).toBe('4');
+        expect(nativeEl.getAttribute('minlength')).toBe('2');
+        expect(nativeEl.getAttribute('autocapitalize')).toBe('off');
+    });
+    it('should inherit watched attributes', async () => {
+        const page = await newSpecPage({
+            components: [Searchbar],
+            html: '<ion-searchbar dir="ltr" lang="en-US"></ion-searchbar>',
+        });
+        const searchbarEl = page.body.querySelector('ion-searchbar');
+        const nativeEl = searchbarEl.querySelector('input');
+        expect(nativeEl.getAttribute('lang')).toBe('en-US');
+        expect(nativeEl.getAttribute('dir')).toBe('ltr');
+        searchbarEl.setAttribute('lang', 'es-ES');
+        searchbarEl.setAttribute('dir', 'rtl');
+        await page.waitForChanges();
+        expect(nativeEl.getAttribute('lang')).toBe('es-ES');
+        expect(nativeEl.getAttribute('dir')).toBe('rtl');
     });
 });

package/dist/collection/components/segment/segment.js

@@ -420,14 +420,14 @@ export class Segment {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '971e62fdaef3b6380aa1bf214605a5bfde662abf', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '01c94f9fcc51fb5a7612588c87155a130b7c8a9d', 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: 'eaa7a8a3d5237c8bbc03f57690fd0aa7e4c124e3' })));
+            }) }, h("slot", { key: 'b0afdfcb7506a765df42d1d6eb4e1d81bf8fd92a' })));
     }
     static get is() { return "ion-segment"; }
     static get encapsulation() { return "shadow"; }

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

@@ -78,7 +78,7 @@ export class SegmentButton {
         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: 'b50b375ed817b47720b743078202f38c737a4034', class: {
+        return (h(Host, { key: 'daed55711fdb550747d2ad5fb6e012bff6f6b176', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -94,10 +94,10 @@ export class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, h("button", Object.assign({ key: '402f6467ec9ce97aa1df2c72382d07242b51c114', "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: '4f5a1988296c4e59e64255feff264bbbe2ccc312', class: "button-inner" }, h("slot", { key: '35b2a26cca8c76a111e447fa8cae464c504fcb97' })), mode === 'md' && h("ion-ripple-effect", null)), h("div", { key: 'adca0f1e0efcf18b575013d4fb2f22814c81c147', part: "indicator", class: {
+            } }, h("button", Object.assign({ key: '851a4b8ff7e45f5fc559c4d8e9c3102441dbd10e', "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: 'b2dc87747e81ce49dfa1269355027d9380226a6a', class: "button-inner" }, h("slot", { key: '00e21fdcafb533605518beebb9557c724fc88e76' })), mode === 'md' && h("ion-ripple-effect", { key: '358c90ab1b43aae3bc6eb1e58fb38d4892894a68' })), h("div", { key: '20fd3f7c43dd117541314e852d894af855050707', part: "indicator", class: {
                 'segment-button-indicator': true,
                 'segment-button-indicator-animated': true,
-            } }, h("div", { key: '8a23ffe49dc115ee0603e298bb6a39834b910b67', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, h("div", { key: 'bebdeb84466c404d52ce48feda1ece5fb1f202b0', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     static get is() { return "ion-segment-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -3,7 +3,7 @@
  */
 import { Host, h, forceUpdate } from "@stencil/core";
 import { compareOptions, createLegacyFormController, createNotchController, isOptionSelected } from "../../utils/forms/index";
-import { findItemLabel, focusElement, getAriaLabel, renderHiddenInput, inheritAttributes } from "../../utils/helpers";
+import { findItemLabel, focusVisibleElement, getAriaLabel, renderHiddenInput, inheritAttributes } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { actionSheetController, alertController, popoverController } from "../../utils/overlays";
 import { isRTL } from "../../utils/rtl/index";
@@ -158,7 +158,7 @@ export class Select {
             if (indexOfSelected > -1) {
                 const selectedItem = overlay.querySelector(`.select-interface-option:nth-child(${indexOfSelected + 1})`);
                 if (selectedItem) {
-                    focusElement(selectedItem);
+                    focusVisibleElement(selectedItem);
                     /**
                      * Browsers such as Firefox do not
                      * correctly delegate focus when manually
@@ -182,7 +182,7 @@ export class Select {
                  */
                 const firstEnabledOption = overlay.querySelector('ion-radio:not(.radio-disabled), ion-checkbox:not(.checkbox-disabled)');
                 if (firstEnabledOption) {
-                    focusElement(firstEnabledOption.closest('ion-item'));
+                    focusVisibleElement(firstEnabledOption.closest('ion-item'));
                     /**
                      * Focus the option for the same reason as we do above.
                      */

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

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

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

@@ -102,7 +102,7 @@ export class SelectPopover {
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        return (h(Host, { key: '9d3995131364d4f1d282e0a1fc34e778e94c9f98', class: getIonMode(this) }, h("ion-list", { key: '14244dcd6375eb61d65f3a9450d42a5d7b2d6541' }, header !== undefined && h("ion-list-header", null, header), hasSubHeaderOrMessage && (h("ion-item", null, h("ion-label", { class: "ion-text-wrap" }, subHeader !== undefined && h("h3", null, subHeader), message !== undefined && h("p", null, message)))), this.renderOptions(options))));
+        return (h(Host, { key: 'ddf45e058c75aae175f8589e3539ff152a5b47ad', class: getIonMode(this) }, h("ion-list", { key: '52dbf712bf6cbdcb9d2e6223b99c67ecc90977ff' }, header !== undefined && h("ion-list-header", { key: '692fc85c97591f09a2a9b0bccc8f71e97681cc09' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: 'ecab23444eaadc3ed21e7053d50890db1012475f' }, h("ion-label", { key: '639f08137d7066fd79316f63e850ddcc6a3b54a7', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: 'dc501101ac9d68b1d0ce80679b339a2b132d1ae9' }, subHeader), message !== undefined && h("p", { key: '5ead8c1a2e90d29fe0f05e04a9fa65c7e9e62ca5' }, message)))), this.renderOptions(options))));
     }
     static get is() { return "ion-select-popover"; }
     static get encapsulation() { return "scoped"; }

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

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