@riverty/web-components 5.8.0 → 6.0.0

package/dist/esm/{r-hint_3.entry.js → r-icon-button_2.entry.js}

@@ -1,66 +1,80 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-Da7qOBFr.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
 
-const hintCss = ":host{--r-hint--text--flex:1}:host([variant=information]){--r-hint--color:var(--r-text-soft, #686868)}:host([variant=success]),:host([success]){--r-hint--color:var(--r-status-success-regular, #298535)}:host([variant=warning]),:host([warning]){--r-hint--color:var(--r-status-warning-strong, #89411a)}:host([variant=error]),:host([invalid]){--r-hint--color:var(--r-status-error-regular, #b00c15)}:host([icon-position=end]){--r-hint--flex-direction:row-reverse}:host{display:block}.r-hint{display:var(--r-hint--display, flex);flex-direction:var(--r-hint--flex-direction, row);gap:var(--r-hint--gap, var(--r-spacing-050, 0.5rem));font-family:var(--r-hint--font-family, var(--r-font-family-text, system-ui));font-size:var(--r-hint--font-size, var(--r-font-size-300, 0.875rem));line-height:var(--r-hint--line-height, var(--r-line-height-m, 1.5));color:var(--r-hint--color, var(--r-text-soft, #686868));font-weight:var(--r-hint--font-weight, var(--r-font-weight-regular, 400));margin-top:var(--r-hint--margin-top, 0);margin-bottom:var(--r-hint--margin-bottom, 0)}.r-hint--icon{display:var(--r-hint--icon--display, flex);align-items:var(--r-hint--icon--align-items, start);min-width:var(--r-hint--icon--min-width, 1rem);margin-top:var(--r-hint--icon--margin-top, 0.15rem)}.r-hint--text{flex:var(--r-hint--text--flex, 1)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
+const iconButtonCss = ":host{display:inline-flex;vertical-align:top;--r-icon-button--color:inherit}:host(:hover:not([disabled]:not([disabled=false])):not(:active)){--r-icon-button--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(:active:not([disabled]:not([disabled=false]))){--r-icon-button--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host(:focus-within:not(:active):not([disabled]:not([disabled=false]))){box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);outline:2px solid var(--r-border-focused, #0071e3);outline-offset:2px}:host([disabled]:not([disabled=false])){opacity:0.4;--r-icon-button--cursor:not-allowed;--r-icon-button--box-shadow:none;--r-icon-button--background-color:transparent}:host([variant=contained]){--r-icon-button--color:var(--r-icon-inverse, #fff);--r-icon-button--background-color:var(--r-background-interactive-regular, #282828);--r-icon-button--box-shadow:none}:host([variant=contained]:hover:not([disabled]:not([disabled=false]))){--r-icon-button--color:var(--r-icon-regular, #282828);--r-icon-button--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host([variant=contained]:active:not([disabled]:not([disabled=false]))){--r-icon-button--color:var(--r-icon-regular, #282828);--r-icon-button--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([variant=contained][disabled]:not([disabled=false])){--r-icon-button--color:var(--r-icon-inverse, #fff);--r-icon-button--background-color:var(--r-background-interactive-regular, #282828)}:host([size=s]){--r-icon-button--height:1.5rem;--r-icon-button--width:1.5rem}:host([size=m]){--r-icon-button--height:2.25rem;--r-icon-button--width:2.25rem}:host([size=l]){--r-icon-button--height:2.75rem;--r-icon-button--width:2.75rem}.r-icon-button{display:var(--r-icon-button--display, inline-flex);align-items:var(--r-icon-button--align-items, center);justify-content:var(--r-icon-button--justify-content, center);outline:var(--r-icon-button--outline, none);cursor:var(--r-icon-button--cursor, pointer);pointer-events:var(--r-icon-button--pointer-events, initial);padding:var(--r-icon-button--padding, 0);border:var(--r-icon-button--border, none);color:var(--r-icon-button--color, inherit);background-color:var(--r-icon-button--background-color, transparent);box-sizing:var(--r-icon-button--box-sizing, border-box);border-width:var(--r-icon-button--border-width, 1px);border-style:var(--r-icon-button--border-style, solid);border-color:var(--r-icon-button--border-color, transparent);border-radius:var(--r-icon-button--border-radius, 50%);z-index:var(--r-icon-button--z-index, initial);width:var(--r-icon-button--width, 2.25rem);height:var(--r-icon-button--height, 2.25rem)}.r-icon-button--target-area{position:var(--r-icon-button--target-area--position, absolute);background:var(--r-icon-button--target-area--background, rgba(0, 0, 0, 0));width:var(--r-icon-button--target-area--width, 2.75rem);height:var(--r-icon-button--target-area--height, 2.75rem);z-index:var(--r-icon-button--target-area--z-index, 1)}.r-icon-button--icon{display:flex;align-items:center;justify-content:center}.visually-hidden{position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}";
 
-const Hint = class {
+const IconButton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-    }
-    get iconName() {
-        if (this.icon)
-            return this.icon;
-        const variantIcons = {
-            'error': 'circled-exclamation-mark',
-            'warning': 'circled-cross',
-            'success': 'circled-check'
+        this.rClick = createEvent(this, "rClick");
+        /**
+         * Defines the size of the icon used within the button.
+         */
+        this.size = 'm';
+        /**
+         * @deprecated Use the `<r-tooltip>` component as a wrapper instead.
+         * Sets position for the tooltip.
+         * - `top`: Tooltip appears above the button.
+         * - `bottom`: Tooltip appears below the button.
+         * - `left`: Tooltip appears to the left of the button.
+         * - `right`: Tooltip appears to the right of the button.
+         */
+        this.tooltipPosition = 'top';
+        /**
+         * Defines the visual style of the button.
+         * - `standard`: Default button style.
+         * - `contained`: Button with a contained background.
+         */
+        this.variant = 'standard';
+        this._handleClick = (event) => {
+            if (this.disabled) {
+                event.preventDefault();
+                return;
+            }
+            this.rClick.emit();
+        };
+        this.onFocus = () => {
+            this.setFocus();
+        };
+        this.onBlur = () => {
+            this.setBlur();
         };
-        return (this.variant in variantIcons) ? variantIcons[this.variant] : null;
-    }
-    get hasIconSlot() {
-        return !!this.host.querySelector('[slot="icon"]');
     }
-    get hasIcon() {
-        return this.hasIconSlot || this.iconName !== null;
+    /** Simulate a button click */
+    async triggerClick() {
+        var _a;
+        (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.click();
     }
-    render() {
-        return (h(Host, { key: '77951c878faf0f74385c72dfdfa11adc9d38da73' }, h("div", { key: '577c8674ce57e8ad8c784b926eff21b201af4bb2', class: "r-hint" }, this.hasIcon &&
-            h("div", { key: '7cba7116b04a7894aae4f2a3026324e15a95c9c5', class: "r-hint--icon" }, h("slot", { key: 'dba72b1442b9f0d27ca6d6387572b044468b54cb', name: "icon" }, this.iconName && h("r-icon", { key: 'a7cdb025298dc8b6f4290efcd366a03dc8135bb0', name: this.iconName, size: "s" }))), h("div", { key: 'bd96a4d4ec4a5c0f0e029b86e3a423b20e0a7341', class: "r-hint--text" }, h("slot", { key: 'e763e051b3d598fd78e777607f21a6358edc0dc2' })))));
+    /** Set focus on the button */
+    async setFocus() {
+        var _a;
+        (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.focus();
     }
-    get host() { return getElement(this); }
-};
-Hint.style = hintCss;
-
-const labelCss = "@charset \"UTF-8\";:host([field-indicator]){--r-label--marker--display:inline}.r-label{display:var(--r-label--display, flex);flex-direction:var(--r-label--flex-direction, row);gap:var(--r-label--gap, var(--r-spacing-100, 1rem));cursor:var(--r-label--cursor, default);color:var(--r-label--color, var(--r-text-regular, #282828));margin-bottom:var(--r-label--margin-bottom, 0)}.r-label--slot{flex:var(--r-label--slot--flex, 1);line-height:var(--r-label--line-height, var(--r-line-height-m, 1.5));font-family:var(--r-label--font-family, var(--r-font-family-text, system-ui));font-size:var(--r-label--font-size, var(--r-font-size-regular, 1rem));font-weight:var(--r-label--font-weight, var(--r-font-weight-regular, 400))}.r-label--marker{display:var(--r-label--marker--display, none);color:var(--r-label--marker--color, var(--r-text-soft, #686868));font-size:var(--r-label--marker--font-size, var(--r-font-size-300, 0.875rem));font-style:var(--r-label--marker--font-style, normal);font-weight:var(--r-label--marker--font-weight, var(--r-font-weight-regular, 400));margin-left:var(--r-label--marker--margin-left, var(--r-spacing-075, 0.75rem))}.r-label--marker::before{content:var(--r-label--marker--before--content, \"– \")}.r-label--tooltip-icon{color:var(--r-label--tooltip-icon--color, var(--r-text-regular, inherit));display:var(--r-label--tooltip-icon--display, inline-flex);line-height:var(--r-label--tooltip-icon--line-height, 1);align-items:var(--r-label--tooltip-icon--align-items, center);justify-content:var(--r-label--tooltip-icon--justify-content, center)}";
-
-const RLabel = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        /**
-         * _DEPRECATED_ (This property will be removed in November 2025 release.)
-         * Defines preferable position of the tooltip */
-        this.tooltipPosition = 'right';
-        /**
-         * _DEPRECATED_ (This property will be removed in November 2025 release.)
-         * Icon tooltip trigger by name from the set */
-        this.tooltipIcon = 'circled-question-mark';
+    /** Remove focus from the button */
+    async setBlur() {
+        var _a;
+        (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.blur();
     }
     render() {
-        const { tooltip, tooltipPosition, tooltipIcon, tooltipIconColor, fieldIndicator } = this;
-        const tooltipAttrs = {
-            text: tooltip,
-            position: tooltipPosition
+        const { name, size, disabled, tooltipText, tooltipPosition } = this;
+        const buttonAttrs = {
+            disabled,
         };
-        const tooltipIconAttrs = {
-            name: tooltipIcon,
-            size: 's',
-            color: tooltipIconColor
+        const iconAttrs = {
+            name,
+            size
         };
-        return (h(Host, { key: '2d7da94197a774e5b3399ff59dba01f946f0d8df' }, h("div", { key: '56baaf39a736e1f504502c9f49b4cf5fbff2f911', class: "r-label" }, h("span", { key: '5b0032c31e83b628d73a207eeaa915368edc7237', class: "r-label--slot" }, h("slot", { key: 'fbcd30c185b9eef55ea43c8ca8b082a0308953e2' }), fieldIndicator &&
-            h("span", { key: '0d355d5857e515e735dc543d3416540e0a0ffdba', class: "r-label--marker" }, fieldIndicator)), tooltip &&
-            h("span", { key: 'b450b3e7ee2b33dbdc02d9fce04bd2ef6a97713d', class: "r-label--tooltip-icon" }, h("r-tooltip", Object.assign({ key: 'a1b2a24a312b7eabd5acd43273658bce3199ef1b' }, tooltipAttrs), h("r-icon", Object.assign({ key: 'c22f6349b9c67a82b29f4a5758a77fb1b2910b75' }, tooltipIconAttrs)))))));
+        const buttonTemplate = () => (h("button", Object.assign({ key: '911b0a6390b2dfa0084bda96e12f0968859a31e4', type: "button", class: "r-icon-button", "aria-label": this.host.getAttribute('aria-label') || null }, buttonAttrs, { onClick: this._handleClick, onFocus: this.onFocus, onBlur: this.onBlur, ref: (el) => (this.nativeElement = el) }), name ?
+            h("r-icon", Object.assign({}, iconAttrs))
+            :
+                h("r-icon", { size: size, class: "r-icon-button--icon" }, h("slot", null)), h("span", { key: '2306cd32340a99653bb02c86de43324a2c0ca35b', class: "r-icon-button--label visually-hidden" }, this.label), h("span", { key: '9cb523d0c82caf25d472b8969a0afee41ad776aa', class: "r-icon-button--target-area" })));
+        return (h(Host, { key: '2710af0c77ea56a4cf69e29c09221ba7d913bc9d' }, !disabled && tooltipText ?
+            h("r-tooltip", { text: tooltipText, position: tooltipPosition }, buttonTemplate())
+            :
+                buttonTemplate()));
     }
+    get host() { return getElement(this); }
 };
-RLabel.style = labelCss;
+IconButton.style = iconButtonCss;
 
 const tooltipCss = ":host{display:inline-block;--r-tooltip--position:relative;--r-tooltip--content--position:fixed;--r-tooltip--content--display:none;--r-tooltip--content--color:var(--r-text-inverse);--r-tooltip--content--background-color:var(--r-background-inverse);--r-tooltip--content--font-family:var(--r-font-family-text);--r-tooltip--content--font-weight:var(--r-font-weight-regular);--r-tooltip--content--font-size:var(--r-font-size-200);--r-tooltip--content--line-height:var(--r-line-height-s);--r-tooltip--content--min-width:32px;--r-tooltip--content--max-width:300px;--r-tooltip--content--min-height:32px;--r-tooltip--content--padding:var(--r-spacing-050) var(--r-spacing-100);--r-tooltip--content--width:max-width;--r-tooltip--content--word-break:break-word;--r-tooltip--content--box-sizing:border-box;--r-tooltip--content--justify-content:center;--r-tooltip--content--align-items:center;--r-tooltip--content--z-index:0;--r-tooltip--arrow--display:none;--r-tooltip--arrow--position:fixed;--r-tooltip--arrow--width:12px;--r-tooltip--arrow--height:12px;--r-tooltip--arrow--transform:rotate(180deg);--r-tooltip--arrow--inner-content:\"\";--r-tooltip--arrow--inner--width:12px;--r-tooltip--arrow--inner--height:6px;--r-tooltip--arrow--inner--background-color:var(--r-tooltip--content--background-color);--r-tooltip--arrow--inner--clip-path:polygon(50% 0%, 0% 100%, 100% 100%);--r-tooltip--arrow--inner--border-radius:0;--r-tooltip--arrow--inner--align-self:flex-end}:host slot{display:contents}:host([data-position=bottom]){--r-tooltip--arrow--transform:rotate(0)}:host([data-position=right]){--r-tooltip--arrow--transform:rotate(270deg)}:host([data-position=left]){--r-tooltip--arrow--transform:rotate(90deg)}.r-tooltip{position:var(--r-tooltip--position)}.r-tooltip:has(.r-tooltip--content--visible){--r-tooltip--content--width:max-content;--r-tooltip--content--display:flex;--r-tooltip--content--z-index:1060;--r-tooltip--arrow--display:flex;--r-tooltip--arrow--inner--display:block}.r-tooltip--trigger{color:var(--r-tooltip--trigger--color, inherit);box-shadow:var(--r-tooltip--trigger--box-shadow, none);outline:var(--r-tooltip--trigger--outline, none);outline-offset:var(--r-tooltip--trigger--outline-offset, 0)}.r-tooltip--trigger:focus{--r-tooltip--trigger--box-shadow:0 0 0 6px var(--r-border-focused-outlined);--r-tooltip--trigger--outline:2px solid var(--r-border-focused);--r-tooltip--trigger--outline-offset:2px}.r-tooltip--content{position:var(--r-tooltip--content--position);display:var(--r-tooltip--content--display);color:var(--r-tooltip--content--color);background-color:var(--r-tooltip--content--background-color);font-family:var(--r-tooltip--content--font-family);font-weight:var(--r-tooltip--content--font-weight);font-size:var(--r-tooltip--content--font-size);line-height:var(--r-tooltip--content--line-height);min-width:var(--r-tooltip--content--min-width);max-width:var(--r-tooltip--content--max-width);min-height:var(--r-tooltip--content--min-height);padding:var(--r-tooltip--content--padding);width:var(--r-tooltip--content--width);word-break:var(--r-tooltip--content--word-break);box-sizing:var(--r-tooltip--content--box-sizing);z-index:var(--r-tooltip--content--z-index)}.r-tooltip--arrow{display:var(--r-tooltip--arrow--display);position:var(--r-tooltip--arrow--position);width:var(--r-tooltip--arrow--width);height:var(--r-tooltip--arrow--height);transform:var(--r-tooltip--arrow--transform)}.r-tooltip--arrow:after{content:var(--r-tooltip--arrow--inner-content);display:var(--r-tooltip--arrow--inner--display);width:var(--r-tooltip--arrow--inner--width);height:var(--r-tooltip--arrow--inner--height);background-color:var(--r-tooltip--arrow--inner--background-color);clip-path:var(--r-tooltip--arrow--inner--clip-path);border-radius:var(--r-tooltip--arrow--inner--border-radius);align-self:var(--r-tooltip--arrow--inner--align-self)}";
 
@@ -418,7 +432,7 @@ const Tooltip = class {
             role: 'tooltip',
             'aria-hidden': `${!isShown}`
         };
-        return (h(Host, Object.assign({ key: 'f0b2e0117f0604d325becbcc05686433fbd3d506' }, hostAttrs, { onMouseenter: this.handleHover, onMouseleave: this.removeTooltip }), h("div", { key: '2f5ff7638dedddd04dac78a2131438457211354b', class: "r-tooltip" }, h("div", Object.assign({ key: 'cb562089f6e7ac27b99ba09953c2f28f29e3e649', class: "r-tooltip--trigger", onFocus: this.handleFocus, onBlur: this.removeTooltip }, triggerAttrs), h("slot", { key: '2e09b16563b9aa325ff64f10af1ad5f4728a2417' })), h("div", Object.assign({ key: 'ffe53881e5ec5335073a7adf2ed5479f3a56f00f', class: "r-tooltip--content", ref: (el) => this.tooltip = el }, contentAttrs), text), h("div", { key: '3f85fb76e934b18d5963d125699d00776c6abbac', ref: (el) => this.arrow = el, class: "r-tooltip--arrow" }))));
+        return (h(Host, Object.assign({ key: '1b2ce4ee1a9f9ca227b96e567fb61b560858734e' }, hostAttrs, { onMouseenter: this.handleHover, onMouseleave: this.removeTooltip }), h("div", { key: '1379aefd4bf69b312a9ce3ef443f5e9fe970f09e', class: "r-tooltip" }, h("div", Object.assign({ key: '80f00e66c8f01bb0df9107943c15d6616e4e7197', class: "r-tooltip--trigger", onFocus: this.handleFocus, onBlur: this.removeTooltip }, triggerAttrs), h("slot", { key: '42e1453731bdd404083e11d3d2f0ae4603e4c57b' })), h("div", Object.assign({ key: '00aa4f22f9c3e40d1c8e86cdd950ef1d160e29cf', class: "r-tooltip--content", ref: (el) => this.tooltip = el }, contentAttrs), text), h("div", { key: 'b717d5e45d3f970ee87f409d61a6353fb138fc7b', ref: (el) => this.arrow = el, class: "r-tooltip--arrow" }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -427,4 +441,4 @@ const Tooltip = class {
 };
 Tooltip.style = tooltipCss;
 
-export { Hint as r_hint, RLabel as r_label, Tooltip as r_tooltip };
+export { IconButton as r_icon_button, Tooltip as r_tooltip };

package/dist/esm/r-input-code.entry.js

@@ -9,18 +9,32 @@ const InputCode = class {
         this.rChange = createEvent(this, "rChange");
         this.rValidate = createEvent(this, "rValidate");
         this.rReset = createEvent(this, "rReset");
-        /** Specifies a name for an input for submittion within formData object. */
+        /** Specifies a name for an input for submission within formData object. */
         this.name = 'input-code';
-        /** Number of digits (typically 4–6) */
+        /** Number of digits (typically 4–6).
+         * @default: 4
+         */
         this.length = 4;
-        /** Label for accessibility */
+        /** Label for accessibility.
+         * @default: 'Verification code'
+         */
         this.label = 'Verification code';
-        /** Set custom message for `tooShort` property of a ValidityState object (set by `minlength`) within Constrain Validation API */
-        this.tooShortMessage = `All ${this.length} characters must be filled.`;
         /** Defines initial value */
         this.value = '';
+        /** Specifies the input mode for the virtual keyboard on mobile devices. Default is 'numeric' for OTP codes.
+         * @default: 'numeric'
+         */
+        this.inputmode = 'numeric';
+        /** Specifies the enter key hint for the virtual keyboard. Default is 'done' for OTP completion.
+         * @default: 'done'
+        */
+        this.enterkeyhint = 'done';
+        /** Specifies the autocomplete behavior. Default is 'one-time-code' for SMS OTP autofill.
+         * @default: 'one-time-code'
+        */
+        this.autocomplete = 'one-time-code';
         /** Holds the current values of each input box */
-        this.values = new Array(this.length).fill('');
+        this.values = [];
         /** Validity state passed from validateFormElement function after validation */
         this.validityState = '';
         /** Validity message passed from validateFormElement function after validation */
@@ -107,6 +121,10 @@ const InputCode = class {
         this.getValidityStateData = (element) => {
             let validityState = '';
             let validityMessage = '';
+            if (!element) {
+                validityState = 'valid';
+                return { validityState, validityMessage };
+            }
             if (this.required && element.value.length === 0) {
                 validityState = 'valueMissing';
                 validityMessage = this.valueMissingMessage;
@@ -114,7 +132,7 @@ const InputCode = class {
             }
             if (element.value.length > 0 && element.value.length < this.length) {
                 validityState = 'tooShort';
-                validityMessage = this.tooShortMessage;
+                validityMessage = this.tooShortMessage || `All ${this.length} characters must be filled.`;
                 return { validityState, validityMessage };
             }
             validityState = 'valid';
@@ -139,7 +157,7 @@ const InputCode = class {
         this.onResetForm = async () => {
             if (this.readonly)
                 return;
-            this.reset();
+            await this.reset();
             this.validityState = null;
             this.validityMessage = null;
             this.invalid = null;
@@ -162,6 +180,19 @@ const InputCode = class {
             appendControlToFormData(this.nativeElement || this.host, event.formData);
         };
     }
+    /**
+     * Validates segment index and throws descriptive errors if invalid.
+     * @param index - The index to validate
+     * @throws Error if index is not an integer or out of bounds
+     */
+    validateSegmentIndex(index) {
+        if (typeof index !== 'number' || !Number.isInteger(index)) {
+            throw new Error('Index must be an integer');
+        }
+        if (index < 0 || index >= this.length) {
+            throw new Error(`Index out of bounds: must be between 0 and ${this.length - 1}`);
+        }
+    }
     /**
      * Gets the current complete code value by joining all individual digit values.
      * @returns Promise that resolves to the complete code string
@@ -189,6 +220,10 @@ const InputCode = class {
             return;
         }
         const valueArray = Array.from(value).slice(0, this.length).map(char => String(char));
+        // Pad with empty strings if value is shorter than length
+        while (valueArray.length < this.length) {
+            valueArray.push('');
+        }
         this.values = valueArray;
         this.rChange.emit({ value: this.values.join('') });
     }
@@ -200,9 +235,68 @@ const InputCode = class {
         const { validityState } = this.getValidityStateData(this.nativeElement);
         return validityState === 'valid';
     }
+    /**
+     * Focuses a specific segment (input) by index.
+     * @param index - The zero-based index of the segment to focus (0 to length-1)
+     * @returns Promise that resolves when focus is set, or rejects if index is invalid
+     */
+    async focusSegment(index) {
+        this.validateSegmentIndex(index);
+        const input = this.inputs[index];
+        if (input) {
+            input.focus();
+            // Select the content if it exists
+            if (this.values[index]) {
+                setTimeout(() => {
+                    // Check if setSelectionRange exists (not available in some test environments)
+                    if (typeof input.setSelectionRange === 'function') {
+                        input.setSelectionRange(0, 1);
+                    }
+                }, 0);
+            }
+        }
+    }
+    /**
+     * Gets the value of a specific segment by index.
+     * @param index - The zero-based index of the segment (0 to length-1)
+     * @returns Promise that resolves to the segment value (single character string or empty string)
+     */
+    async getSegmentValue(index) {
+        this.validateSegmentIndex(index);
+        return this.values[index] || '';
+    }
+    /**
+     * Sets the value of a specific segment by index.
+     * @param index - The zero-based index of the segment (0 to length-1)
+     * @param value - The value to set (will be truncated to first character if longer)
+     */
+    async setSegmentValue(index, value) {
+        this.validateSegmentIndex(index);
+        // Take only the first character, or empty string if value is empty
+        const newValue = value ? value.charAt(0) : '';
+        this.values[index] = newValue;
+        this.values = [...this.values];
+        // Update the input element's value to reflect the change
+        const input = this.inputs[index];
+        if (input) {
+            input.value = newValue;
+        }
+    }
     handleValuesChange() {
         this.value = this.values.join('');
     }
+    handleLengthChange(newLength) {
+        // Adjust values array when length changes
+        if (this.values.length !== newLength) {
+            const newValues = new Array(newLength).fill('');
+            // Copy existing values up to the new length
+            for (let i = 0; i < Math.min(this.values.length, newLength); i++) {
+                newValues[i] = this.values[i];
+            }
+            this.values = newValues;
+            this.inputs = [];
+        }
+    }
     get firstEmptyInput() {
         return this.inputs.find(input => !input.value) || null;
     }
@@ -215,7 +309,7 @@ const InputCode = class {
             return null;
         }
         return (this.validityState && this.validityState !== 'valid' ?
-            (this.customErrorMessage || this.validityMessage)
+            (this.customErrorMessage || this.validityMessage || `All ${this.length} characters must be filled.`)
             : null);
     }
     get ariaDescribedBy() {
@@ -293,19 +387,20 @@ const InputCode = class {
             id: `${uniqueId}-label`,
             fieldIndicator
         } : {};
-        return (h(Host, { key: '2babfeef172a7d6b76c734f3170ede3a7a8d3392', value: this.value, onClick: this.onHostClick }, h("div", { key: '712d241caa9d80f982f831633009a8452c472a3c', class: "r-input-code--label-container" }, h("label", { key: '5a6be87bb1ab122cea9e2c7cefaf2781c39a9465', htmlFor: uniqueId }, label ?
+        return (h(Host, { key: '4d744320f4bf03760e4b11dd38934c0f7ce05223', value: this.value, onClick: this.onHostClick }, h("div", { key: 'f047f6669b243f301a2a462188d24721ccb565a5', class: "r-input-code--label-container" }, h("label", { key: 'a5acdd7308cca3981a78619c480d79c499ebc58a', htmlFor: uniqueId }, label ?
             h("r-label", Object.assign({}, labelAttr), label)
             :
-                h("slot", { name: "label" })), h("slot", { key: 'd7afacaedc1741fdf703f5263eda57dc3591b36d', name: "popover" })), hint &&
-            h("r-hint", { key: 'd49faa30ca4ebbefe7e88217392ef7f6a9487e7f', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '89deb68a39134cdacc1009e83113c589aafc311e', class: "r-input-code--container", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.groupDescribedby }, h("slot", { key: '170f25027ccf4d3603474a77a92c5ff24579e46e', name: "leading" }), Array.from({ length: this.length }).map((_, i) => (h("input", { class: "r-input-code--input", key: i, id: `${uniqueId}-input-section-${i}`, "aria-label": `${this.ariaCharacterLabel || 'Character'}: ${i + 1}`, "aria-invalid": `${this.invalid || false}`, value: this.values[i], ref: el => this.inputs[i] = el, maxlength: 1, disabled: this.disabled, required: this.required, readonly: readonly, onInput: this.createInputHandler(i), onKeyDown: this.createKeyDownHandler(i), onPaste: this.handlePaste }))), h("input", Object.assign({ key: '482c544b68d48b089f7177846cee7f5fc279bbd9', type: "hidden" }, inputAttrs, { value: this.values.join(''), ref: el => this.nativeElement = el })), h("div", { key: '73f393a98b3ca5e830e7b35c360cd9e242564d8e', class: "r-input-code--trailing" }, this.readonly &&
-            h("r-icon", { key: '751fb71619d0d0ea808332de4cc9e1b1f2dff59d', class: "r-input-code--readonly-icon", name: "pen-disabled", size: "s" }), this.hasTrailingSlot &&
-            h("slot", { key: '072e2f141e1ef3fbf931e9c0abf24d6c42f64ec5', name: "trailing" }, valid &&
-                h("r-icon", { key: '45b17f30472b9a5cc2e2101261f7884bd96d1d72', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" })))), h("slot", { key: 'b8be9bc6d2c14fa04312313709a7911d8339c735', name: "message" }, this.hasMessage &&
-            h("r-hint", { key: 'f76a1e5aa6d542790bdc01c7e931eda9a986a14b', "aria-live": "polite", id: `${uniqueId}-message`, variant: "error" }, this.message))));
+                h("slot", { name: "label" })), h("slot", { key: '696554954e2b29b49a8d639aa79d80abeaa6a729', name: "popover" })), hint &&
+            h("r-hint", { key: '58b3e011e49b4a3bd4dd31050ab554483fba0fc4', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '6f4668b5bda975b59ff269759e2d3ae3306b09c4', class: "r-input-code--container", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.groupDescribedby }, h("slot", { key: '59206e0ed6e335735b610c44a925ea70b137ffe0', name: "leading" }), Array.from({ length: this.length }).map((_, i) => (h("input", { class: "r-input-code--input", key: i, id: `${uniqueId}-input-section-${i}`, "aria-label": `${this.ariaCharacterLabel || 'Character'}: ${i + 1}`, "aria-invalid": `${this.invalid || false}`, value: this.values[i], ref: el => this.inputs[i] = el, maxlength: 1, disabled: this.disabled, required: this.required, readonly: readonly, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, autocomplete: this.autocomplete, onInput: this.createInputHandler(i), onKeyDown: this.createKeyDownHandler(i), onPaste: this.handlePaste }))), h("input", Object.assign({ key: '815da7a7566b0cefdbdfda32c990637385eba304', type: "hidden" }, inputAttrs, { value: this.values.join(''), ref: el => this.nativeElement = el })), h("div", { key: 'b03d7e03bd6c91d441f4377d53bb7d845edf498d', class: "r-input-code--trailing" }, this.readonly &&
+            h("r-icon", { key: '53796d1b572ff2eac8297a0fad8e22d3a95f1bee', class: "r-input-code--readonly-icon", name: "pen-disabled", size: "s" }), this.hasTrailingSlot &&
+            h("slot", { key: '9becd49e7d79f824fcd79e7afbc3040a1b0f33a3', name: "trailing" }, valid &&
+                h("r-icon", { key: 'a31379d7e8eb6ad66bbf1567d4cd4f9526962226', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" })))), h("slot", { key: 'a38ac5d9dda2017a443ec2b58cffbdd0db952239', name: "message" }, this.hasMessage &&
+            h("r-hint", { key: '39e47e0fdf23b1ebab5a0384447a965a8890d77f', "aria-live": "polite", id: `${uniqueId}-message`, variant: "error" }, this.message))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "values": ["handleValuesChange"]
+        "values": ["handleValuesChange"],
+        "length": ["handleLengthChange"]
     }; }
 };
 InputCode.style = inputCodeCss;

package/dist/esm/r-input-date.entry.js

@@ -479,7 +479,7 @@ const InputDate = class {
         this.disconnectFormEventListeners();
     }
     render() {
-        const { form, name, required, disabled, label, fieldIndicator, hint, tooltip, tooltipIcon, tooltipIconColor, uniqueId, invalid, valid, readonly } = this;
+        const { form, name, required, disabled, label, fieldIndicator, hint, uniqueId, invalid, valid, readonly } = this;
         const groupAttrs = {
             'aria-invalid': `${invalid || false}`,
             'aria-describedby': this.ariaDescribedBy
@@ -493,24 +493,18 @@ const InputDate = class {
             readonly,
             'aria-describedby': this.ariaDescribedBy
         };
-        // DEPRECATED: will be removed in November 2025 release.
-        const tooltipAttrs = tooltip ? {
-            tooltip,
-            'tooltip-icon': tooltipIcon,
-            'tooltip-icon-color': tooltipIconColor,
-        } : {};
         const labelAttr = label ? {
             id: `${uniqueId}-label`,
             fieldIndicator
         } : {};
-        return (h(Host, { key: '00e6bbea2dcaf1e88b4587fa9df6165a2c28c134', onClick: this.onHostClick, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, h("fieldset", Object.assign({ key: '94d107ad0f00608263df3f47b0c2240d93a01c4e', class: "r-input-date" }, groupAttrs), h("div", { key: '3ac5991c7b8754f2fa94c8053f60af17a99301e0', class: "r-input-date--legend-container" }, h("legend", { key: '62fc7c2b6af2f7911c11f135432323621dd278b8', class: "r-input-date--legend" }, h("label", { key: 'd161f2b149ca1295c6e96746520c6ef1cf2e23ba', htmlFor: uniqueId }, label ?
-            h("r-label", Object.assign({}, labelAttr, tooltipAttrs), label)
+        return (h(Host, { key: '1a8a9175148f43758ec6b9d905c4bd2f619ffd7f', onClick: this.onHostClick, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, h("fieldset", Object.assign({ key: 'fb004332d8578b8da74df643bd93f93d062973bb', class: "r-input-date" }, groupAttrs), h("div", { key: '128e65638dc21d95c8b4b92669b0bd6733a653f6', class: "r-input-date--legend-container" }, h("legend", { key: '63e7e858c38930fecbe71d819f1a0b49bf711911', class: "r-input-date--legend" }, h("label", { key: 'ccd6a5434f5df91bf9b2c121bb182c152302d864', htmlFor: uniqueId }, label ?
+            h("r-label", Object.assign({}, labelAttr), label)
             :
-                h("slot", { name: "label" }))), h("slot", { key: '81c9e7753273c5e7d6db5d6a1f0fad8398a57c0a', name: "popover" })), hint &&
-            h("r-hint", { key: '0814c3ef100ed6a8512b2f15d5b59e01664bd811', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '65247f18a297ef6a5751ab86e1123271ed8759f7', class: "r-input-date--container" }, h("r-icon", { key: 'fce4150b7c1b801752e1a67339b1a599728b0631', name: "calendar", size: "s", class: "r-input-date--calendar-icon" }), h("div", { key: '3b5e4776102b06acd9626477c702d2dc52ef681c', class: "r-input-date--inputs" }, this.inputOrder.map((input, i) => (h(Fragment, null, h("input", Object.assign({ class: "r-input-date--input" }, this.getInputAttrs(input), { key: input, value: this.getDateComponent(input), onInput: this.createInputHandler(input, i), onChange: this.createChangeHandler(input), onClick: this.onInputClick, onBlur: this.handleBlur, onKeyDown: this.createKeyDownHandler(i), onPaste: this.handlePaste })), i < this.inputOrder.length - 1 &&
-            h("span", { "aria-hidden": "true", class: "r-input-date--delimiter" }, this.delimiter)))), h("input", Object.assign({ key: '2c181871c97962a35988eb406c09a05c8f27181d', type: "hidden" }, dateInputAttrs, { value: this.value, ref: (el) => this.nativeElement = el }))), h("div", { key: '8c694c11cc7ea4ecc23484d3f014cc865e0c56ad', class: "r-input-date--trailing" }, this.readonly &&
-            h("r-icon", { key: '8ed65eaef19f280381b7c0fae206163f3adeb5f4', class: "r-input-date--readonly-icon", name: "pen-disabled", size: "s" }), valid &&
-            h("r-icon", { key: 'aef55123b4b001576b482e0be4eff0df6dc97930', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }), this.hasTrailingSlot && h("slot", { key: 'd92dcda80b7434af1f8ed781329ce8f2e6734225', name: "trailing" }))), h("div", { key: '139792ccc090b29f041e3a731f65e5916379b911', id: `${uniqueId}-message`, "aria-live": "polite", class: "r-input-date--message" }, this.hasMessage && h("r-hint", { key: '74d444c9748c032e844c0772b8758873bdaef391', variant: "error" }, this.message)))));
+                h("slot", { name: "label" }))), h("slot", { key: '4be5c643d1b0532d27f4b82692cb6ca937291d6b', name: "popover" })), hint &&
+            h("r-hint", { key: '07a912c146dff97ef991a6e375f4aeb8cd0ba45e', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '386dfb87cface9333c93d5fe8165cbe52a9a83c4', class: "r-input-date--container" }, h("r-icon", { key: '9ff075723ac54f6d7c2325ba59f833422404bee6', name: "calendar", size: "s", class: "r-input-date--calendar-icon" }), h("div", { key: 'ebcb76a92ab1591c3128a60d6620bea5b0c517ec', class: "r-input-date--inputs" }, this.inputOrder.map((input, i) => (h(Fragment, null, h("input", Object.assign({ class: "r-input-date--input" }, this.getInputAttrs(input), { key: input, value: this.getDateComponent(input), onInput: this.createInputHandler(input, i), onChange: this.createChangeHandler(input), onClick: this.onInputClick, onBlur: this.handleBlur, onKeyDown: this.createKeyDownHandler(i), onPaste: this.handlePaste })), i < this.inputOrder.length - 1 &&
+            h("span", { "aria-hidden": "true", class: "r-input-date--delimiter" }, this.delimiter)))), h("input", Object.assign({ key: 'e5736ffa215662436c539332be1414cc409ce448', type: "hidden" }, dateInputAttrs, { value: this.value, ref: (el) => this.nativeElement = el }))), h("div", { key: '45ccffbb4111f2fd906d9b687f62f4adc83b62aa', class: "r-input-date--trailing" }, this.readonly &&
+            h("r-icon", { key: '3a5433e3d601a83154687bdd55feeeef0ef04215', class: "r-input-date--readonly-icon", name: "pen-disabled", size: "s" }), valid &&
+            h("r-icon", { key: '03de3e49b8b51690e4fb6c2edbb7a53ca1a71f76', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }), this.hasTrailingSlot && h("slot", { key: 'db4911a4421b296effdd37ca08c96d8a0096e5e6', name: "trailing" }))), h("div", { key: 'd21f19188462be93812487702eb8a07fd3a91cea', id: `${uniqueId}-message`, "aria-live": "polite", class: "r-input-date--message" }, this.hasMessage && h("r-hint", { key: '6937f2d48a634308c97d33e59daa0a7242bd39fd', variant: "error" }, this.message)))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/r-input-password.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
 import { a as appendControlToFormData } from './formData-DvLT8-y3.js';
 
-const inputPasswordCss = ":host{display:inline-flex;flex-direction:column;vertical-align:top}:host([full-width]:not([full-width=false])){display:block}:host([disabled]:not([disabled=false])) r-icon-button{opacity:1}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
+const inputPasswordCss = ":host{display:inline-flex;flex-direction:column;vertical-align:top;--r-input--validation-icon--display:none}:host([full-width]:not([full-width=false])){display:block}:host([disabled]:not([disabled=false])) r-icon-button{opacity:1}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
 
 const InputPassword = class {
     constructor(hostRef) {
@@ -10,6 +10,7 @@ const InputPassword = class {
         this.rInput = createEvent(this, "rInput");
         this.rChange = createEvent(this, "rChange");
         this.rReset = createEvent(this, "rReset");
+        this.rVisibilityChange = createEvent(this, "rVisibilityChange");
         /** The value of the password input */
         this.value = '';
         /**
@@ -150,6 +151,7 @@ const InputPassword = class {
     async showPassword() {
         this.showed = true;
         this.alertOnPasswordVisibilityChange();
+        this.rVisibilityChange.emit({ element: this.host, visible: true });
     }
     /**
      * Hide password text.
@@ -157,6 +159,7 @@ const InputPassword = class {
     async hidePassword() {
         this.showed = false;
         this.alertOnPasswordVisibilityChange();
+        this.rVisibilityChange.emit({ element: this.host, visible: false });
     }
     /** Get the input value */
     async getValue() {
@@ -225,11 +228,14 @@ const InputPassword = class {
         this.disconnectFormEventListeners();
     }
     render() {
-        const { name, placeholder, required, fieldIndicator, value, disabled, form, invalid, valid, hint, label, tooltip, tooltipIcon, tooltipIconColor, fullWidth, showPasswordAriaLabel, hidePasswordAriaLabel, showed, readonly } = this;
+        const { name, placeholder, required, minlength, maxlength, pattern, fieldIndicator, value, disabled, form, invalid, valid, hint, label, fullWidth, showPasswordAriaLabel, hidePasswordAriaLabel, showed, readonly, passwordrules, autocomplete, tooLongMessage, tooShortMessage, patternMismatchMessage } = this;
         const inputAttrs = {
             name,
             placeholder,
             required,
+            minlength,
+            maxlength,
+            pattern,
             fieldIndicator,
             value,
             disabled,
@@ -238,15 +244,17 @@ const InputPassword = class {
             valid,
             hint,
             label,
-            tooltip,
-            tooltipIcon,
-            tooltipIconColor,
             fullWidth,
             novalidate: true,
-            readonly
+            readonly,
+            passwordrules,
+            autocomplete,
+            tooLongMessage,
+            tooShortMessage,
+            patternMismatchMessage
         };
-        return (h(Host, { key: '810ae74cdcdcd8a4289255e2b99b6cfc213330ac' }, h("r-input", Object.assign({ key: '55027ca5cd8b8ba4eade60067ac182e38eaf1bfa' }, inputAttrs, { ref: (el) => this.nativeElement = el, type: showed ? 'text' : 'password', onRInput: this.onInput, onRChange: this.onChange, onKeyUp: this.handleKeyup, onRBlur: this.handleBlur }), h("r-icon", { key: '935aa481c0eff444462e6be6d8e6975db8a24708', name: "padlock-closed", size: "s", slot: "leading" }), h("slot", { key: 'df29bd4fa96db1c1f5f70be9c44fab1b9c5f02be', name: "popover", slot: "popover" }), h("r-icon-button", { key: '95d5f3c5e64eb7b43364db7aff943d35fbdc4d2d', slot: "trailing", name: showed ? 'eye-crossed-out' : 'eye', size: "s", disabled: disabled, label: showed ? hidePasswordAriaLabel : showPasswordAriaLabel, onClick: this.onShowClick }), this.hasMessage &&
-            h("r-hint", { key: '7390d667a69c4ae5c2c6ae480eaf5f879ad6ed78', slot: "message", variant: "error" }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage))), h("div", { key: 'c70c38f1249c80973bb2fe2a25ddf7d88835c686', class: "visually-hidden", ref: el => this.passwordVisibilityChangeAlertContainer = el, "aria-live": "polite" })));
+        return (h(Host, { key: '15d9cac9269a816de47d1ae4d3818a99f6229979' }, h("r-input", Object.assign({ key: 'eea64612b319eae93c0fc6591c22020bf2e3d4fb' }, inputAttrs, { ref: (el) => this.nativeElement = el, type: showed ? 'text' : 'password', onRInput: this.onInput, onRChange: this.onChange, onKeyUp: this.handleKeyup, onRBlur: this.handleBlur }), h("r-icon", { key: 'd7a425d45f7897d7f6f11b7bf37595e25da3295b', name: "padlock-closed", size: "s", slot: "leading" }), h("slot", { key: '6ae8e4dc4633e692ae4280d9cd1420bf7e02d0c0', name: "popover", slot: "popover" }), h("r-icon-button", { key: 'e51d43f5966477dc1c35bf6a8114d5b206a58187', slot: "trailing", name: showed ? 'eye-crossed-out' : 'eye', size: "s", disabled: disabled, label: showed ? hidePasswordAriaLabel : showPasswordAriaLabel, onClick: this.onShowClick }), this.hasMessage &&
+            h("r-hint", { key: 'bcee0a5b7f75a4ddd2e2fa6a2dd44cd0392170dc', slot: "message", variant: "error" }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage))), h("div", { key: '995e229dfab56b03e0a177c6952c2135777f7899', class: "visually-hidden", ref: el => this.passwordVisibilityChangeAlertContainer = el, "aria-live": "polite" })));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/r-input-phone-number.entry.js

@@ -2492,14 +2492,10 @@ const InputPhoneNumber = class {
         this.disconnectEventListeners();
     }
     render() {
-        const { label, fieldIndicator, hint, name, form, inputLabel, tooltip, tooltipIcon, tooltipIconColor, disabled, uniqueId, required, valid, invalid, novalidate, phoneNumber, fullPhoneNumber, fullWidth } = this;
-        // DEPRECATED: will be removed in November 2025 release.
-        const tooltipAttrs = tooltip ? {
-            tooltip,
-            'tooltip-icon': tooltipIcon,
-            'tooltip-icon-color': tooltipIconColor,
-        } : {};
-        const labelAttr = Object.assign({ fieldIndicator }, tooltipAttrs);
+        const { label, fieldIndicator, hint, name, form, inputLabel, disabled, uniqueId, required, valid, invalid, novalidate, phoneNumber, fullPhoneNumber, fullWidth } = this;
+        const labelAttr = {
+            fieldIndicator
+        };
         const inputAttrs = {
             id: uniqueId,
             form,
@@ -2509,10 +2505,9 @@ const InputPhoneNumber = class {
             disabled,
             'aria-describedby': this.ariaDescribedBy
         };
-        return (h(Host, { key: '4551070926e1974ddf3fcb8cc435570ddde50276' }, h("div", { key: 'a076fb01b4e0563ec2d30a5680a6ccd48b2f6895', class: "r-input-phone-number--label-container" }, h("label", { key: 'a8ad943efeca2ac3b5a63857ea0a52b19c32f09c', id: `${uniqueId}-label` }, label &&
-            h("r-label", Object.assign({ key: 'ac0d2a1c12cb85ec03e6596b9bb2e28328026eac' }, labelAttr), label)), h("slot", { key: 'cadd98a33c32bfb60be0a3448772eac483630bdf', name: "popover" })), hint &&
-            h("r-hint", { key: '23874cabee60dc0a5e620066eed92de809cac1eb', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '800b3a389ce815c5e137077dd5766177c317a05d', class: "r-input-phone-number", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.ariaDescribedBy }, h("slot", { key: '6106007980212ef05cd11304da2a4d0cc28ddf4f' }), h("r-input", { key: 'd65b4d9ca8761c7e6dd08359ff02f3c88c57aa66', label: inputLabel, value: phoneNumber, internal: true, valid: valid, invalid: invalid, required: required, readonly: this.readonly, novalidate: true, fullWidth: fullWidth, type: "tel", error: this.errorMessage || '', onRInput: this.handleOnInput, onRChange: this.handleInputOnChange, disabled: disabled }, valid && phoneNumber &&
-            h("r-icon", { key: '09c721cb014d6d7ece724bcf7de9ec5928624dac', slot: "trailing", name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }))), h("input", Object.assign({ key: 'e2eef2512f9125f0dd3d1b09120cbb77955350bd', type: "hidden" }, inputAttrs, { readonly: this.readonly, value: fullPhoneNumber, ref: el => this.nativeElement = el })), h("r-hint", { key: 'a12e9640bcf2df7b754de4e54b111e4ead2d023e', "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: "error" }, this.hasMessage ? (this.hasError ? this.error : this.validityMessage) : '')));
+        return (h(Host, { key: '97edc0f9bbc4a3823e628bb08be3b3abbbcfe6ec' }, h("div", { key: '8a5236c58655d47368bfaa9bcea6bde3c39c6a22', class: "r-input-phone-number--label-container" }, h("label", { key: 'ae6e6e72381864d67d98f4429856cf5b1943943c', id: `${uniqueId}-label` }, label &&
+            h("r-label", Object.assign({ key: 'd760960dbf5806084b0a10d14fef218ca5e4cd79' }, labelAttr), label)), h("slot", { key: '4f9bcaba34f2f49592a3167958bd091eeac9f6be', name: "popover" })), hint &&
+            h("r-hint", { key: '0c3f402b7f9369dcea2c84478e12ed0ea241fd0a', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '43e5dbd9ca897cfc2ca05e6ab020c321871f3961', class: "r-input-phone-number", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.ariaDescribedBy }, h("slot", { key: '4e3f891eb21f15927d6a33e7ba6728c09d20e981' }), h("r-input", { key: '6bd6e929e396bf515511fdd978d00df9de54cc37', label: inputLabel, value: phoneNumber, internal: true, valid: valid, invalid: invalid, required: required, readonly: this.readonly, novalidate: true, fullWidth: fullWidth, type: "tel", error: this.errorMessage || '', onRInput: this.handleOnInput, onRChange: this.handleInputOnChange, disabled: disabled })), h("input", Object.assign({ key: 'f113123ef2fa2096b686d132ce11ca11970ab1be', type: "hidden" }, inputAttrs, { readonly: this.readonly, value: fullPhoneNumber, ref: el => this.nativeElement = el })), h("r-hint", { key: 'd00477c3a27f999c4a3079710c34266ed47e0e57', "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: "error" }, this.hasMessage ? (this.hasError ? this.error : this.validityMessage) : '')));
     }
     get host() { return getElement(this); }
     static get watchers() { return {