@riverty/web-components 6.2.1 → 6.3.1

package/dist/collection/components/hint/hint.js

@@ -22,8 +22,8 @@ export class Hint {
         return this.hasIconSlot || this.iconName !== null;
     }
     render() {
-        return (h(Host, { key: '1cbe08b7b3b01fc7d870416a1b14e3b1b8525797' }, h("div", { key: '17494f3ae8bdf394858e2f9337e54bd844a467d0', class: "r-hint" }, this.hasIcon &&
-            h("div", { key: 'ed406c6ae45ea4c25e6735752ced3a988c2f2274', class: "r-hint--icon" }, h("slot", { key: '9e93b83d3f9e71f722ffdb813d46b667eec556a5', name: "icon" }, this.iconName && h("r-icon", { key: '841c3e53381a21e1341191eb7a0b32fdd696c47f', name: this.iconName, size: "s" }))), h("div", { key: '946d0813297923053452519b9871cd9a0d04679f', class: "r-hint--text" }, h("slot", { key: 'f7343fcc6a4cbe9f5584f8d94feff33cfd8f2560' })))));
+        return (h(Host, { key: 'b413c5c8e37c0918ad6d3c8b029d3f9d4df9381c' }, h("div", { key: '4de7efeccab67a041140550b01fd971c61c9aabf', class: "r-hint" }, this.hasIcon &&
+            h("div", { key: '3e4157da31557769f1aa0ef4576a40b080349f26', class: "r-hint--icon" }, h("slot", { key: '160ed96c348de4372afa0937f7c15582f7068437', name: "icon" }, this.iconName && h("r-icon", { key: '232afba86ec9215fedd795768c918e58878defb6', name: this.iconName, size: "s" }))), h("div", { key: 'f828794b26cbd73587394fd6d8b271952470a5e6', class: "r-hint--text" }, h("slot", { key: '948cdaca6c2b93b45e26333126193cb34874b303' })))));
     }
     static get is() { return "r-hint"; }
     static get encapsulation() { return "shadow"; }

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

@@ -62,11 +62,11 @@ export class IconButton {
             name,
             size
         };
-        const buttonTemplate = () => (h("button", Object.assign({ key: '05fbf705a760c71c292bfd0e61b56a362c8b8a36', type: "button", tabindex: !this.disabled && this.rTabindex || null, 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 ?
+        const buttonTemplate = () => (h("button", Object.assign({ key: 'df699957ba93858e755bfdf29de83a3ab9718fe3', type: "button", tabindex: !this.disabled && this.rTabindex || null, 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: '9c6d1c80c1e8cc88345a5e45b0060cb0eb285904', class: "r-icon-button--label visually-hidden" }, this.label), h("span", { key: '4ea91afe81b472b5ce5c6a993574518ab1a40d2f', class: "r-icon-button--target-area" })));
-        return (h(Host, { key: '54574ad857a36fdb0f263a3abf224c3d24955f07' }, !disabled && tooltipText ?
+                h("r-icon", { size: size, class: "r-icon-button--icon" }, h("slot", null)), h("span", { key: '86e9640751a2e75f24ba6eb1d75850251f629579', class: "r-icon-button--label visually-hidden" }, this.label), h("span", { key: '509e3f6870a4da1e788082a8af5a50c93e8360b5', class: "r-icon-button--target-area" })));
+        return (h(Host, { key: 'e829d0c5038ebe4893b998b832bbff3c62335327' }, !disabled && tooltipText ?
             h("r-tooltip", { text: tooltipText, position: tooltipPosition }, buttonTemplate())
             :
                 buttonTemplate()));

package/dist/collection/components/input/exports.js

@@ -14,3 +14,49 @@ export const inputAutocompleteArray = [
 ];
 export const enterKeyHintArray = ['enter', 'done', 'go', 'next', 'previous', 'search', 'send'];
 export const autocapitalizeArray = ['off', 'none', 'on', 'sentences', 'words', 'characters'];
+/**
+ * Native HTML input attributes that can be passed through.
+ * Using Set for O(1) lookup performance instead of O(n) array includes.
+ */
+export const nativeInputAttributesSet = new Set([
+    'accept', 'autocorrect', 'capture', 'dirname',
+    'height', 'incremental', 'list', 'multiple', 'size', 'src', 'width'
+]);
+/**
+ * Special case mappings for attributes that need custom camelCase conversion
+ * beyond simple hyphen-based transformation. Maps HTML attribute name (lowercase)
+ * to JSX property name (camelCase).
+ */
+export const attributeCamelCaseMap = {
+    'autocorrect': 'autoCorrect',
+};
+/**
+ * Component-specific props that should NOT be passed to the native input.
+ * Using Set for O(1) lookup performance.
+ */
+export const excludedAttributesSet = new Set([
+    'internal', 'full-width', 'fullwidth', 'validity-marker', 'validitymarker',
+    'error', 'valid', 'invalid', 'hint', 'field-indicator', 'fieldindicator',
+    'value-missing-message', 'valuemissingmessage', 'type-mismatch-message', 'typemismatchmessage',
+    'pattern-mismatch-message', 'patternmismatchmessage', 'too-long-message', 'toolongmessage',
+    'too-short-message', 'tooshortmessage', 'range-overflow-message', 'rangeoverflowmessage',
+    'range-underflow-message', 'rangeunderflowmessage', 'step-mismatch-message', 'stepmismatchmessage',
+    'bad-input-message', 'badinputmessage', 'custom-error-message', 'customerrormessage'
+]);
+/**
+ * Framework/DOM-specific attributes that should never be passed through.
+ */
+export const frameworkAttributesSet = new Set([
+    'class', 'style', 'id', 'slot', 'ref', 'key'
+]);
+/**
+ * ARIA attributes that are already handled explicitly by the component
+ * and should not be passed through to avoid conflicts.
+ */
+export const managedAriaAttributesSet = new Set([
+    'aria-invalid',
+    'aria-required',
+    'aria-placeholder',
+    'aria-describedby',
+    'data-value'
+]);

package/dist/collection/components/input/input.css

@@ -46,6 +46,12 @@
   --r-input--container--background-color: var(--r-status-error-soft, #fef6f6);
 }
 
+:host([size]) {
+  --r-input--width: auto;
+  --r-input--input--width: auto;
+  --r-input--container--display: inline-flex;
+}
+
 .r-input {
   display: var(--r-input--display, flex);
   flex: var(--r-input--flex, 1);

package/dist/collection/components/input/input.js

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { nativeInputAttributesSet, excludedAttributesSet, frameworkAttributesSet, managedAriaAttributesSet, attributeCamelCaseMap } from "./exports";
 import { appendControlToFormData } from "../../utils/formData";
 export class RInput {
     constructor() {
@@ -11,6 +12,8 @@ export class RInput {
          * Current value. Mutable: can be changed programmatically or through user input.
          */
         this.value = '';
+        /** Internal state for options extracted from slotted datalist */
+        this.slottedOptions = [];
         /**
          * When `true` field renders valid/invalid marker within.
         */
@@ -26,11 +29,37 @@ export class RInput {
         /** Private flag to prevent validation during reset */
         this.isResetting = false;
         this.nativeElement = null;
+        /**
+         * Helper to set the native input element ref and apply boolean properties
+         * that don't get properly set through JSX attribute spreading.
+         */
+        this.setNativeInputRef = (el) => {
+            this.nativeElement = el;
+            if (el) {
+                el.addEventListener('beforeinput', this.onBeforeInput);
+                // Manually apply boolean native attributes as properties
+                // This is necessary because Stencil's JSX doesn't always properly
+                // set boolean DOM properties when spreading attributes
+                const passthroughAttrs = this.collectNativeAttributes();
+                // List of boolean native input properties that need manual application
+                const booleanProps = ['multiple'];
+                for (const prop of booleanProps) {
+                    if (prop in passthroughAttrs && passthroughAttrs[prop] === true) {
+                        el[prop] = true;
+                    }
+                }
+            }
+        };
         this.uniqueId = `r-input-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
         /**
          * Initial attributes state
          * */
         this.initial = {};
+        /**
+         * Cache for passthrough attributes to avoid recomputing on every render.
+         * Cleared when attributes might have changed.
+         */
+        this.passthroughAttrsCache = null;
         this.getValidityStateData = (element) => {
             let validityState = '';
             let validityMessage = '';
@@ -106,9 +135,25 @@ export class RInput {
             this.host.classList.add('focused');
             this.rFocus.emit();
         };
+        this.onBeforeInput = (event) => {
+            this.rBeforeInput.emit(event);
+        };
+        this.onInvalid = (event) => {
+            this.rInvalid.emit(event);
+        };
+        this.onKeyDown = (event) => {
+            this.rKeyDown.emit(event);
+        };
+        this.onKeyUp = (event) => {
+            this.rKeyUp.emit(event);
+        };
+        this.onSelect = (event) => {
+            this.rSelect.emit(event);
+        };
         this.contributeToFormData = (event) => {
             appendControlToFormData(this.nativeElement || this.host, event.formData);
         };
+        this.datalistObserver = null;
         this.onResetForm = () => {
             if (this.readonly)
                 return;
@@ -220,6 +265,11 @@ export class RInput {
         this.value = value;
         this.validateFormElement(this.nativeElement);
     }
+    /** Validates an element, displays provided message in case value is invalid. */
+    async setCustomValidity(message) {
+        this.customErrorMessage = message;
+        this.validateFormElement(this.nativeElement);
+    }
     /**
      * Validates the input without triggering UI and returns a boolean indicating its validity.
      * @returns A boolean indicating whether the input is valid.
@@ -247,6 +297,56 @@ export class RInput {
         this.touched = false;
         this.dirty = false;
     }
+    get datalistId() {
+        return `${this.uniqueId}-list`;
+    }
+    /**
+     * Checks if an attribute should be excluded from passthrough.
+     */
+    shouldExcludeAttribute(attrName) {
+        return (frameworkAttributesSet.has(attrName) ||
+            excludedAttributesSet.has(attrName) ||
+            managedAriaAttributesSet.has(attrName));
+    }
+    /**
+     * Collects native HTML input attributes from the host element that aren't
+     * already handled by explicit props. This allows passing through attributes
+     * like 'list', 'multiple', 'size', etc. without creating explicit props.
+     * Optimized with Set lookups (O(1)) and caching.
+     */
+    collectNativeAttributes() {
+        // Return cached result if available
+        if (this.passthroughAttrsCache !== null) {
+            return this.passthroughAttrsCache;
+        }
+        const collected = {};
+        const hostAttrs = this.host.attributes;
+        // Early return if no attributes to process
+        if (!hostAttrs || hostAttrs.length === 0) {
+            this.passthroughAttrsCache = collected;
+            return collected;
+        }
+        for (const attr of Array.from(hostAttrs)) {
+            const attrName = attr.name.toLowerCase();
+            // Skip framework/component-specific attributes using helper method
+            if (this.shouldExcludeAttribute(attrName)) {
+                continue;
+            }
+            // Include data-* or native input attributes (exclude aria- - component manages ARIA via inputAttrs)
+            if (attrName.startsWith('data-') || nativeInputAttributesSet.has(attrName)) {
+                // Use special camelCase mapping for certain attributes that need it for JSX properties
+                // Otherwise keep the attribute name as-is for native HTML attributes  
+                const jsxAttrName = attributeCamelCaseMap[attrName] || attrName;
+                // Handle boolean attributes: if value is empty or matches attribute name, set to true
+                // This ensures proper JSX rendering for attributes like 'multiple'
+                const attrValue = attr.value;
+                collected[jsxAttrName] = (attrValue === '' || attrValue === attrName) ? true : attrValue;
+            }
+        }
+        // Cache the result
+        this.passthroughAttrsCache = collected;
+        return collected;
+    }
     /** Identify wrapping form element */
     get parentFormEl() {
         return this.host.closest('form') || document.querySelector(`#${this.form}`) || null;
@@ -260,7 +360,7 @@ export class RInput {
         return this.invalid && !!((_a = this.error) === null || _a === void 0 ? void 0 : _a.length);
     }
     get hasValidationError() {
-        return (this.validityState !== 'valid' || this.invalid) && !!(this.validityMessage || this.customErrorMessage);
+        return (this.validityState && this.validityState !== 'valid' || this.invalid) && !!(this.validityMessage || this.customErrorMessage);
     }
     get hasMessage() {
         return this.hasError || this.hasValidationError;
@@ -279,12 +379,52 @@ export class RInput {
         return !!this.host.querySelector('[slot="trailing"]');
     }
     get validEmailPattern() {
+        if (!this.value)
+            return false;
         const regex = new RegExp(this.pattern, 'u');
         return regex.test(this.value);
     }
     componentWillLoad() {
         this.initial['value'] = this.value;
         this.initial['invalid'] = this.invalid;
+        // Clear passthrough attributes cache to ensure fresh collection on load
+        this.passthroughAttrsCache = null;
+        // Extract options from slotted datalist
+        this.extractSlottedDatalistOptions();
+    }
+    /**
+     * Extracts options from a slotted <datalist> element.
+     * Supports both default slot and slot="datalist" usage.
+     */
+    extractSlottedDatalistOptions() {
+        // First check for slot="datalist"
+        const slottedDatalist = this.host.querySelector('datalist[slot="datalist"]');
+        if (!slottedDatalist) {
+            // Check for datalist in default slot
+            const defaultSlotDatalist = Array.from(this.host.querySelectorAll('datalist'))
+                .find(el => !el.hasAttribute('slot'));
+            if (!defaultSlotDatalist) {
+                return;
+            }
+            this.slottedOptions = this.parseDatalistOptions(defaultSlotDatalist);
+        }
+        else {
+            this.slottedOptions = this.parseDatalistOptions(slottedDatalist);
+        }
+    }
+    /**
+     * Parses options from a HTMLDataListElement into InputOption array.
+     */
+    parseDatalistOptions(datalist) {
+        const options = [];
+        const optionElements = datalist.querySelectorAll('option');
+        optionElements.forEach(opt => {
+            options.push({
+                value: opt.value,
+                label: opt.label || opt.textContent || opt.value
+            });
+        });
+        return options;
     }
     connectFormEventListeners() {
         var _a, _b, _c;
@@ -292,18 +432,49 @@ export class RInput {
         (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.addEventListener('submit', this.onSubmitForm, { capture: true });
         (_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.addEventListener('reset', this.onResetForm);
     }
-    disconnectFormEventListeners() {
-        var _a, _b, _c;
-        (_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('formdata', this.contributeToFormData);
-        (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('submit', this.onSubmitForm);
-        (_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.removeEventListener('reset', this.onResetForm);
-    }
     connectedCallback() {
         this.connectFormEventListeners();
-        !!this.autofocus && queueMicrotask(() => { var _a; return (_a = this.host.querySelector('input[autofocus]')) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); });
+        this.setupDatalistObserver();
+        if (this.autofocus && !RInput.autofocusHandled) {
+            RInput.autofocusHandled = true;
+            queueMicrotask(() => { var _a; return (_a = this.host.querySelector('input[autofocus]')) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); });
+        }
     }
     disconnectedCallback() {
+        var _a;
         this.disconnectFormEventListeners();
+        this.disconnectDatalistObserver();
+        (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('beforeinput', this.onBeforeInput);
+    }
+    setupDatalistObserver() {
+        this.extractSlottedDatalistOptions();
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.datalistObserver = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                if (mutation.type === 'childList') {
+                    this.extractSlottedDatalistOptions();
+                    break;
+                }
+            }
+        });
+        this.datalistObserver.observe(this.host, {
+            childList: true,
+            subtree: false
+        });
+    }
+    disconnectDatalistObserver() {
+        if (this.datalistObserver) {
+            this.datalistObserver.disconnect();
+            this.datalistObserver = null;
+        }
+    }
+    disconnectFormEventListeners() {
+        var _a, _b, _c;
+        (_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('formdata', this.contributeToFormData);
+        (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('submit', this.onSubmitForm);
+        (_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.removeEventListener('reset', this.onResetForm);
     }
     handleValueChange() {
         if (!this.isResetting) {
@@ -311,12 +482,18 @@ export class RInput {
         }
     }
     handleTypeChange() {
-        this.setValue(this.nativeElement.value);
+        if (this.nativeElement) {
+            this.setValue(this.nativeElement.value);
+        }
     }
     render() {
         const { name, placeholder, required, fieldIndicator, maxlength, minlength, min, max, value, disabled, form, pattern, invalid, valid, hint, label, internal, uniqueId, autocomplete, readonly, autofocus, passwordrules, enterkeyhint, spellcheck, autocapitalize, validityMarker } = this;
-        const inputAttrs = {
-            disabled,
+        // Collect any native input attributes that were set on the host element
+        const passthroughAttrs = this.collectNativeAttributes();
+        // Combine options from prop and slotted datalist (prop takes precedence)
+        const options = [...(this.slottedOptions || [])];
+        const hasDatalist = options.length > 0;
+        const inputAttrs = Object.assign(Object.assign({ disabled,
             readonly,
             required,
             label,
@@ -328,20 +505,15 @@ export class RInput {
             max,
             form,
             pattern,
-            autocomplete,
-            autofocus: autofocus || null,
-            passwordrules,
+            autocomplete, autofocus: autofocus || null, passwordrules,
             enterkeyhint,
             autocapitalize,
-            spellcheck,
-            inputmode: this.inputmode || null,
-            id: uniqueId,
-            'data-value': value,
-            'aria-placeholder': placeholder,
-            'aria-invalid': `${invalid || false}`,
-            'aria-required': `${required || false}`,
-            'aria-describedby': this.ariaDescribedBy
-        };
+            spellcheck, inputmode: this.inputmode || null, id: uniqueId }, passthroughAttrs), {
+            // Component-controlled values always win
+            'data-value': value, 'aria-invalid': `${invalid || false}`, 'aria-required': `${required || false}`, 'aria-describedby': this.ariaDescribedBy,
+            // list attribute: use internal datalist when options provided, otherwise use passthrough value (explicit takes precedence)
+            list: hasDatalist ? this.datalistId : (passthroughAttrs.list || null)
+        });
         const labelAttr = label ? {
             id: `${uniqueId}-label`,
             fieldIndicator
@@ -363,19 +535,11 @@ export class RInput {
             const iconColor = shouldShowInvalidMarker ? colors.invalid : colors.valid;
             return h("r-icon", { class: "r-input--validation-icon", "aria-hidden": "true", size: "s", name: iconName, color: iconColor });
         };
-        // Filter out event listener properties based on naming convention.
-        // Pass them to native element.
-        const eventListeners = Object.entries(this).reduce((acc, [key, value]) => {
-            if (typeof value === 'function' && key.startsWith('on')) {
-                acc[key] = value;
-            }
-            return acc;
-        }, {});
         return (h(Host, { onClick: this.handleClick, onKeyup: this.handleKeyup, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, h("div", { class: internal ? 'visually-hidden' : 'r-input--label-container' }, h("label", { htmlFor: uniqueId }, label ?
             h("r-label", Object.assign({ class: "r-input--label" }, labelAttr), label)
             :
                 h("slot", { name: "label" })), h("slot", { name: "popover" })), hint &&
-            h("r-hint", { id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { class: "r-input--container" }, h("slot", { name: "leading" }), h("input", Object.assign({ class: "r-input--input", type: this.type }, inputAttrs, eventListeners, { ref: el => this.nativeElement = el, value: this.value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus })), h("div", { class: "r-input--trailing" }, this.readonly &&
+            h("r-hint", { id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { class: "r-input--container" }, h("slot", { name: "leading" }), h("input", Object.assign({ class: "r-input--input", type: this.type }, inputAttrs, { ref: this.setNativeInputRef, value: this.value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onInvalid: this.onInvalid, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp, onSelect: this.onSelect })), hasDatalist && (h("datalist", { ref: (el) => el && (el.id = this.datalistId) }, options.map((option) => (h("option", { value: option.value }, option.label || option.value))))), h("div", { class: "r-input--trailing" }, this.readonly &&
             h("r-icon", { class: "r-input--readonly-icon", name: "pen-disabled", size: "s" }), renderValidationMarker(), this.hasTrailingSlot &&
             h("slot", { name: "trailing" }))), h("div", { id: `${uniqueId}-message`, "aria-live": !internal ? 'polite' : null, class: !internal ? 'r-input--message' : 'visually-hidden' }, h("slot", { name: "message" }, this.hasMessage && h("r-hint", { variant: valid ? 'success' : 'error' }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage))))));
     }
@@ -1209,6 +1373,7 @@ export class RInput {
     }
     static get states() {
         return {
+            "slottedOptions": {},
             "validityState": {},
             "validityMessage": {},
             "touched": {},
@@ -1321,6 +1486,108 @@ export class RInput {
                         }
                     }
                 }
+            }, {
+                "method": "rBeforeInput",
+                "name": "rBeforeInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input is about to be modified (mirrors native `beforeinput` semantics).\nUse for intercepting and preventing input before it occurs."
+                },
+                "complexType": {
+                    "original": "InputEvent",
+                    "resolved": "InputEvent",
+                    "references": {
+                        "InputEvent": {
+                            "location": "global",
+                            "id": "global::InputEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "rInvalid",
+                "name": "rInvalid",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input fails validation (mirrors native `invalid` semantics)."
+                },
+                "complexType": {
+                    "original": "Event",
+                    "resolved": "Event",
+                    "references": {
+                        "Event": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": "../../node_modules/@stencil/core/internal/stencil-core/index.d.ts::Event"
+                        }
+                    }
+                }
+            }, {
+                "method": "rKeyDown",
+                "name": "rKeyDown",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a key is pressed down (mirrors native `keydown` semantics)."
+                },
+                "complexType": {
+                    "original": "KeyboardEvent",
+                    "resolved": "KeyboardEvent",
+                    "references": {
+                        "KeyboardEvent": {
+                            "location": "global",
+                            "id": "global::KeyboardEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "rKeyUp",
+                "name": "rKeyUp",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a key is released (mirrors native `keyup` semantics)."
+                },
+                "complexType": {
+                    "original": "KeyboardEvent",
+                    "resolved": "KeyboardEvent",
+                    "references": {
+                        "KeyboardEvent": {
+                            "location": "global",
+                            "id": "global::KeyboardEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "rSelect",
+                "name": "rSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when text is selected (mirrors native `select` semantics)."
+                },
+                "complexType": {
+                    "original": "Event",
+                    "resolved": "Event",
+                    "references": {
+                        "Event": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": "../../node_modules/@stencil/core/internal/stencil-core/index.d.ts::Event"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {
@@ -1486,6 +1753,27 @@ export class RInput {
                     "tags": []
                 }
             },
+            "setCustomValidity": {
+                "complexType": {
+                    "signature": "(message: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "message",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Validates an element, displays provided message in case value is invalid.",
+                    "tags": []
+                }
+            },
             "checkValidity": {
                 "complexType": {
                     "signature": "() => Promise<boolean>",
@@ -1570,3 +1858,4 @@ export class RInput {
             }];
     }
 }
+RInput.autofocusHandled = false;

package/dist/collection/components/input-code/input-code.js

@@ -244,6 +244,11 @@ export class InputCode {
         this.values = valueArray;
         this.rChange.emit({ value: this.values.join('') });
     }
+    /** Validates an element, displays provided message in case value is invalid. */
+    async setCustomValidity(message) {
+        this.customErrorMessage = message;
+        this.validateFormElement(this.nativeElement);
+    }
     /**
      * Validates the input code without triggering UI and returns a boolean indicating its validity.
      * @returns A boolean indicating whether the input code is valid.
@@ -402,14 +407,14 @@ export class InputCode {
             id: `${uniqueId}-label`,
             fieldIndicator
         } : {};
-        return (h(Host, { key: 'c7e8e45bf54b060eaeec903857ec842f5f5909ff', value: this.value, onClick: this.onHostClick }, h("div", { key: '965e94721f83a4e0c2a21d6ead371085b5faefef', class: "r-input-code--label-container" }, h("label", { key: '4a24884c394cbdf28f98f71dd166c7f02fd6b240', htmlFor: uniqueId }, label ?
+        return (h(Host, { key: '800791debf1f1c64b666d8933dddfc9d308ef70e', value: this.value, onClick: this.onHostClick }, h("div", { key: 'b081be06e5e46fbce4764d59ee3de65091c39464', class: "r-input-code--label-container" }, h("label", { key: '4b98d9f9ea5e318943da440c1851887a9c540d50', htmlFor: uniqueId }, label ?
             h("r-label", Object.assign({}, labelAttr), label)
             :
-                h("slot", { name: "label" })), h("slot", { key: '471642b0c4c01243fb26eacec958418ef09af962', name: "popover" })), hint &&
-            h("r-hint", { key: 'efdb3d68d72666260bce9d6e9e6ba9853225a473', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '2dc16569529ac0ec9e95cfef8f353efbf2f0e929', class: "r-form-field" }, h("slot", { key: '7e3d7abc1931537ce66f6bd1c716f4046f2ca06e', name: "prefix" }), h("div", { key: '0e29ba435fe9de7b87cad793be8dc11301bf552e', class: "r-input-code--container", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.groupDescribedby }, h("slot", { key: 'eef6bda22af5d2e21f442bb010d79a60a05b4d69', 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: 'a2185f3e1b5f83e55fa5997662b55002bb251b4c', type: "hidden" }, inputAttrs, { value: this.values.join(''), ref: el => this.nativeElement = el })), h("div", { key: '7586c976c27a2c42e9d76c1cf6724ad93beac0ae', class: "r-input-code--trailing" }, this.readonly &&
-            h("r-icon", { key: 'b2829cc59cd037f62e33f980fa65887e80059984', class: "r-input-code--readonly-icon", name: "pen-disabled", size: "s" }), h("slot", { key: 'e7b996a710b4f2f5f867295518b96952d6d60444', name: "trailing" }, valid &&
-            h("r-icon", { key: '3064219d8e6846df86dc934027a561f265fcc82f', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" })))), h("slot", { key: 'de7164a83a2d8c6b8bf97583d4407cc7be7e0db4', name: "suffix" })), h("slot", { key: 'e12c343b123421fec18546f60ccdb2e4d6ceab5b', name: "message" }, this.hasMessage &&
-            h("r-hint", { key: '7fcfab6c47d841a0b695805b61f4a12a164fca3c', "aria-live": "polite", id: `${uniqueId}-message`, variant: "error" }, this.message))));
+                h("slot", { name: "label" })), h("slot", { key: 'd7949be3b99b6774529948b22a4dc9544da2057d', name: "popover" })), hint &&
+            h("r-hint", { key: 'cd46c69b0f7ca4468219bc5d5698f95a8639864b', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '3249a7836c7354a8ec8b9457d6dc0e81140710c9', class: "r-form-field" }, h("slot", { key: '9e1e2574802b9b650ba99bb971a5c0a165b0b197', name: "prefix" }), h("div", { key: '6ccba704319cc140d68a37b9bea922f62e4513b6', class: "r-input-code--container", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.groupDescribedby }, h("slot", { key: '06d57c63d11f5818f4cf2ccacca60aa64bd16a49', 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: '56e629b9f9c4a7cbf83e0ba10d3338cccb27579f', type: "hidden" }, inputAttrs, { value: this.values.join(''), ref: el => this.nativeElement = el })), h("div", { key: '1388dab339130521becb1a0c2d0005ba8e1b8fde', class: "r-input-code--trailing" }, this.readonly &&
+            h("r-icon", { key: 'ea1cbf74635a3480ec03ea16f41d8133a156219d', class: "r-input-code--readonly-icon", name: "pen-disabled", size: "s" }), h("slot", { key: '90801524b96b72fdb21b49f6c15d00d4809faba6', name: "trailing" }, valid &&
+            h("r-icon", { key: '709294d96d12dfff3c902bbac8656d59d0e6064b', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" })))), h("slot", { key: '67195193bd3d6a8c3e7aaa3ae0b5f35274971add', name: "suffix" })), h("slot", { key: '735676c16afee87dc1b121ec4eed689645e40f84', name: "message" }, this.hasMessage &&
+            h("r-hint", { key: 'f7733e7bdaa5037fa6244fb351551c9a6d7faf95', "aria-live": "polite", id: `${uniqueId}-message`, variant: "error" }, this.message))));
     }
     static get is() { return "r-input-code"; }
     static get encapsulation() { return "shadow"; }
@@ -1019,6 +1024,27 @@ export class InputCode {
                     "tags": []
                 }
             },
+            "setCustomValidity": {
+                "complexType": {
+                    "signature": "(message: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "message",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Validates an element, displays provided message in case value is invalid.",
+                    "tags": []
+                }
+            },
             "checkValidity": {
                 "complexType": {
                     "signature": "() => Promise<boolean>",