@riverty/web-components 5.7.0 → 6.0.0

package/dist/cjs/r-radio-button-trailing.cjs.entry.js

@@ -9,7 +9,7 @@ const RadioButtonTrailing = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'a1c1c9d525cd2fb7b6223677f216b8398c3dac9f', slot: "trailing" }, index.h("div", { key: '554e798bcd117d7a56024097041609dc532ad2c1', class: "r-radio-button-trailing", style: { display: 'contents' } }, index.h("slot", { key: 'f48cef26f06bedf6e37439dd1f406d5c789b06a0' }))));
+        return (index.h(index.Host, { key: '844ad8251f30a4b0b6e700d0864798957e53750b', slot: "trailing" }, index.h("div", { key: '26a3458b5a448a9d8a687081325a5aa93c83e512', class: "r-radio-button-trailing", style: { display: 'contents' } }, index.h("slot", { key: 'fc1634011f555127d3281351a8ba9d7fdc1a7a38' }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/r-radio-button.cjs.entry.js

@@ -14,6 +14,8 @@ const RadioButton = class {
         this.radioButtonDeselect = index.createEvent(this, "radioButtonDeselect");
         /** Value of element data within a form */
         this.value = this.slotTextValue;
+        /** Automatically focus the radio button when the component is mounted. Note: Only one element per page should have autofocus set to true, following browser standard behavior. */
+        this.autofocus = false;
         /** Unique id */
         this.uniqueId = `r-radio-button-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
         this.onClick = (event) => {
@@ -34,18 +36,25 @@ const RadioButton = class {
         this.onBlur = () => {
             this.host.classList.remove('focused');
         };
+        this.applyAutofocus = () => {
+            queueMicrotask(() => {
+                this.setFocus();
+            });
+        };
     }
     /** Sets focus on the radio button element */
     async setFocus() {
-        this.nativeEl.focus();
+        var _a;
+        (_a = this.nativeEl) === null || _a === void 0 ? void 0 : _a.focus();
     }
     /** Blurs the radio button element */
     async setBlur() {
-        this.nativeEl.blur();
+        var _a;
+        (_a = this.nativeEl) === null || _a === void 0 ? void 0 : _a.blur();
     }
     /** Selects the radio button element */
     async select() {
-        var _a;
+        var _a, _b, _c;
         if (this.checked)
             return;
         if (this.disabled)
@@ -55,8 +64,8 @@ const RadioButton = class {
             radio.shadowRoot.querySelector('.r-radio-button--input').setAttribute('tabindex', '-1');
         });
         this.checked = true;
-        this.nativeEl.setAttribute('tabindex', '0');
-        this.nativeEl.focus();
+        (_b = this.nativeEl) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '0');
+        (_c = this.nativeEl) === null || _c === void 0 ? void 0 : _c.focus();
         const { host, value, checked } = this;
         this.rChange.emit({ element: host, value, checked });
     }
@@ -90,6 +99,9 @@ const RadioButton = class {
     get isTrailing() {
         return this.host.querySelector('[slot="trailing"]') !== null || this.host.querySelector('r-radio-button-trailing') !== null;
     }
+    get shouldAutofocus() {
+        return this.autofocus && (!this.groupEl || !this.groupEl.autofocus);
+    }
     componentWillLoad() {
         if (!this.initialState)
             this.initialState = this.checked;
@@ -97,8 +109,12 @@ const RadioButton = class {
             this.name = this.groupEl.name;
         }
     }
+    componentDidLoad() {
+        if (this.shouldAutofocus)
+            this.applyAutofocus();
+    }
     render() {
-        const { name, value, checked, disabled, hint, uniqueId, required, invalid, error } = this;
+        const { name, value, checked, disabled, hint, uniqueId, required, invalid, error, autofocus } = this;
         const inputAttrs = {
             type: 'radio',
             tabindex: '-1',
@@ -106,13 +122,14 @@ const RadioButton = class {
             value,
             disabled,
             checked,
-            required
+            required,
+            autofocus
         };
-        return (index.h(index.Host, { key: '862574a20e04e55e3e7e0b8cb48131652f029030' }, index.h("label", { key: 'b916e9d5740605bad9a1f88c6bb07d0564b63f16', class: "r-radio-button", onClick: this.onClick, onKeyDown: this.onKeydown }, index.h("input", Object.assign({ key: 'd0ca90e85e619d8c5b9a8c71ae1582db65562036' }, inputAttrs, { id: `${uniqueId}-input`, class: "r-radio-button--input", ref: el => this.nativeEl = el, onFocus: this.onFocus, onBlur: this.onBlur })), index.h("span", { key: 'f77f3e56e88c5e3ad1f3e36e5f96715edb7e91cc', class: "r-radio-button--box" }), this.isLeading &&
-            index.h("div", { key: '60d6a15880fafd8007d20a80137b30f19d4f641e', class: "r-radio-button--leading" }, index.h("slot", { key: '9329c56d97e5e357ea70d165ee11ac171c605519', name: "leading" }, this.icon && index.h("r-icon", { key: 'ace86d3b61cd39f05ca3146e54d3ae4820d7b66d', name: this.icon, size: "m" }))), index.h("div", { key: '7773e0c5b2348245e4b4dafc06a6b10a6dc245c3', class: "r-radio-button--text" }, index.h("slot", { key: 'f060b0853a7a6ed0108d0182669807fd0236da33', name: "title" }, index.h("div", { key: '1ca5059e718a0bda9a53e2e0f630a617d0252638', style: { display: 'contents' } }, index.h("slot", { key: 'cb9128b915d2a71cff7e8960d5bd86973c615232' }))), index.h("slot", { key: 'f07a62e2caa36ceb27bc547cf86c7dfcdce1c5b4', name: "description" }, this.description)), this.isTrailing &&
-            index.h("div", { key: 'cc5e6dff1c324fdce239f8d4e553e154bdb73eac', class: "r-radio-button--trailing" }, index.h("slot", { key: '3d5e862c5830adb7a480fbb71ff92fef054bf1f7', name: "trailing" }))), invalid && error &&
-            index.h("r-hint", { key: '997b440b69a23cb432b8376b0351a947ec3b162e', role: "alert", variant: "error", id: `${uniqueId}-hint` }, this.error), hint &&
-            index.h("r-hint", { key: 'd3c41065b4924f42a2971d1cb91154e8e3041238', role: "note", variant: "information", id: `${uniqueId}-hint` }, hint)));
+        return (index.h(index.Host, { key: '718b29840798212b4a31a2250fe79620554a9fb5' }, index.h("label", { key: 'ab86d4ca9bb300628a5b7f4bf10ba2ce88656d6d', class: "r-radio-button", onClick: this.onClick, onKeyDown: this.onKeydown }, index.h("input", Object.assign({ key: '529324a5ae32238b56ab9443a9ba3dd67b9b76bd' }, inputAttrs, { id: `${uniqueId}-input`, class: "r-radio-button--input", ref: el => this.nativeEl = el, onFocus: this.onFocus, onBlur: this.onBlur })), index.h("span", { key: 'a90a3704b4fc2d431482cca0c4064241001e09d2', class: "r-radio-button--box" }), this.isLeading &&
+            index.h("div", { key: '8a067dc10dc0f764c507be6610a8bf6f80565f8b', class: "r-radio-button--leading" }, index.h("slot", { key: 'db99a204cdf0932b203a65698f6167ede11309c4', name: "leading" }, this.icon && index.h("r-icon", { key: '8f6b1c585e0dcfcee9bb471e59f4d911ff72e7bc', name: this.icon, size: "m" }))), index.h("div", { key: 'b2ec0c20df6bffa599c5331016f3c52ce5661a17', class: "r-radio-button--text" }, index.h("slot", { key: '82ed5be7758c72ece18d4df27c0dbeb7e00ab1fc', name: "title" }, index.h("div", { key: '9c839853016eb5e7a3940bea0f9c5c755933ae55', style: { display: 'contents' } }, index.h("slot", { key: '78875045c000e5dcd0375fe2143e3032bf3a5226' }))), index.h("slot", { key: 'd75f2511dc33c734eb34c0d8953ed5be2f4cb7ea', name: "description" }, this.description)), this.isTrailing &&
+            index.h("div", { key: 'fd204a1c99ac54d60fc4479de3ca650d8ecf6508', class: "r-radio-button--trailing" }, index.h("slot", { key: '9a82590bc860567d1a60f9125622b1e63471ad94', name: "trailing" }))), invalid && error &&
+            index.h("r-hint", { key: '1fc760af1aff4ca5aaa595270c294b492fdb14e3', role: "alert", variant: "error", id: `${uniqueId}-hint` }, this.error), hint &&
+            index.h("r-hint", { key: '079a060908d285505f7093820933c173194f2348', role: "note", variant: "information", id: `${uniqueId}-hint` }, hint)));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/r-radio-group.cjs.entry.js

@@ -11,15 +11,13 @@ const RadioGroup = class {
         this.rValidate = index.createEvent(this, "rValidate");
         this.rChange = index.createEvent(this, "rChange");
         this.rReset = index.createEvent(this, "rReset");
-        /**
-         * _DEPRECATED_ (This property will be removed in November 2025 release.)
-         * Indicates whether to show the validation state.
-         * When set to `true`, the component will display validation feedback.
-         * Defaults to `false`.
-         */
-        this.showValid = false;
         /** Controls the style variation of the radio buttons. */
         this.variant = 'standard';
+        /**
+         * When set to `true`, automatically focuses the first enabled radio button in the group on mount.
+         * This will focus the selected radio button if one exists, or the first enabled radio button otherwise.
+         */
+        this.autofocus = false;
         this.validityState = '';
         this.validityMessage = '';
         /**
@@ -29,18 +27,21 @@ const RadioGroup = class {
         /** Unique id */
         this.uniqueId = `r-radio-group-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
         this.getValidityStateData = element => {
+            let validityState = '';
+            let validityMessage = '';
             if (element === null)
-                return;
+                return { validityState, validityMessage };
             for (const state in element.validity) {
                 if (element.validity[state]) {
-                    this.validityState = state;
+                    validityState = state;
                     if (this[state + 'Message']) {
-                        this.validityMessage = this[state + 'Message'];
-                        return;
+                        validityMessage = this[state + 'Message'];
+                        return { validityState, validityMessage };
                     }
-                    this.validityMessage = element.validationMessage;
+                    validityMessage = element.validationMessage;
                 }
             }
+            return { validityState, validityMessage };
         };
         this.validateFormElement = (element = null) => {
             if (element === null)
@@ -49,7 +50,9 @@ const RadioGroup = class {
                 return;
             if (this.error)
                 return;
-            this.getValidityStateData(element);
+            const { validityState, validityMessage } = this.getValidityStateData(element);
+            this.validityState = validityState;
+            this.validityMessage = validityMessage;
             const isValid = this.validityState === 'valid';
             this.valid = isValid;
             this.invalid = !isValid;
@@ -206,14 +209,13 @@ const RadioGroup = class {
         this.value = null;
     }
     /**
-     * Validates the radio group and returns a boolean indicating its validity.
-     *
+     * Validates the radio group without triggering UI and returns a boolean indicating its validity.
      * @returns A boolean indicating whether the radio group is valid.
      */
     async checkValidity() {
         const element = this.nativeSelectedEl || this.nativeFirstEl || null;
-        this.getValidityStateData(element);
-        return this.validityState === 'valid';
+        const { validityState } = this.getValidityStateData(element);
+        return validityState === 'valid';
     }
     /**
      * Validates the radio group and displays the validity state.
@@ -264,10 +266,10 @@ const RadioGroup = class {
         return this.host.querySelectorAll('r-radio-button:not([disabled]:not([disabled="false"]))');
     }
     get selectedRadioButtonElement() {
-        return Array.from(this.radioButtonElements).find(el => el.hasAttribute('checked')) || null;
+        return Array.from(this.radioButtonElements).find(el => el.checked || el.hasAttribute('checked')) || null;
     }
     get hasSelected() {
-        return Array.from(this.radioButtonElements).some(el => el.hasAttribute('checked'));
+        return Array.from(this.radioButtonElements).some(el => el.checked || el.hasAttribute('checked'));
     }
     get nativeSelectedEl() {
         var _a, _b;
@@ -329,21 +331,19 @@ const RadioGroup = class {
         const { name, required } = this;
         this.passPropsToGroupItems({ name, required });
         this.setTabindex();
+        if (this.autofocus) {
+            queueMicrotask(() => {
+                this.setFocus();
+            });
+        }
     }
     render() {
-        const { label, hint, fieldIndicator, tooltip, tooltipIcon, tooltipIconColor, error, uniqueId, invalid } = this;
-        // DEPRECATED: will be removed in November 2025 release.
-        const labelAttr = {
-            tooltip,
-            'tooltip-icon': tooltipIcon,
-            'tooltip-icon-color': tooltipIconColor
-        };
-        return (index.h(index.Host, { key: '0a209644dc2a122c793a38e1f624eccf3ca0b884' }, index.h("div", { key: 'b4d8dbe5fb3d1e11d87a7902addcc801852e3554', class: "r-radio-group", onClick: this.onLabelClick }, label &&
-            index.h("div", { key: 'c77bc88a07ddad6f45671c869b99b3fa5c4d0e2a', class: "r-radio-group--label-container" }, index.h("r-label", Object.assign({ key: '1dbfc739da13dbae04481912203a53837941b8e0', id: `${uniqueId}-label`, class: "r-radio-group--label", "field-indicator": fieldIndicator }, labelAttr), label), index.h("slot", { key: '2f1b6a50b2f7d7b1becef2cc95a4d7f6a26d970d', name: "popover" })), hint &&
-            index.h("r-hint", { key: 'c3c4310d3550d17d34ee26fa308cb3957a19dfd3', id: `${uniqueId}-hint`, class: "r-radio-group--hint", role: "note" }, hint), index.h("div", { key: '891beaea14680a2d629fa59f4597a968b8c2b695', class: "r-radio-group--content" }, index.h("slot", { key: '1d107723f7c363564e488309fdcb586ff43046ff' }))), invalid && error &&
-            index.h("r-hint", { key: 'de64c7c8a42136b7ac3ca93536a7654dc1d274fa', "aria-live": "polite", id: `${uniqueId}-message`, role: "alert", variant: "error" }, error), this.validityState !== 'valid' && this.validityMessage &&
-            index.h("r-hint", { key: 'c40eba0d5b6c47276ca91ca1631948d11f950c86', "aria-live": "polite", id: `${uniqueId}-message`, role: "alert", variant: "error" }, this.customErrorMessage || this.validityMessage), this.valid && this.validMessage && this.showValid &&
-            index.h("r-hint", { key: '0b13cc722509fe66231f18bd2783b29b798882ef', role: "alert", variant: "success" }, this.validMessage)));
+        const { label, hint, fieldIndicator, error, uniqueId, invalid } = this;
+        return (index.h(index.Host, { key: '598a714f75ce283c76278d52fb7684c5818700f9' }, index.h("div", { key: '0c691e6738d11dcc8b621fe90b356980944ce5ec', class: "r-radio-group", onClick: this.onLabelClick }, label &&
+            index.h("div", { key: '3071e2dedc5e9935bd6f80cc3e01883d8bffacc6', class: "r-radio-group--label-container" }, index.h("r-label", { key: '6175d4620468c3d2b06790baf11673c47e797bd7', id: `${uniqueId}-label`, class: "r-radio-group--label", "field-indicator": fieldIndicator }, label), index.h("slot", { key: '9c3595a94234b99bec2001c9667c53cd41d8fdde', name: "popover" })), hint &&
+            index.h("r-hint", { key: '8d9ef5dbaacac8a9cae05a633c942c8009b3d686', id: `${uniqueId}-hint`, class: "r-radio-group--hint", role: "note" }, hint), index.h("div", { key: '9206c8f841cc20ee632f58da3775e1d967730c58', class: "r-radio-group--content" }, index.h("slot", { key: '1f7edd0e36e16956acf7dbe5dd17c16a43b39666' }))), invalid && error &&
+            index.h("r-hint", { key: 'e4780947cede5a39e553d639eb37aeb842f1cda3', "aria-live": "polite", id: `${uniqueId}-message`, role: "alert", variant: "error" }, error), this.validityState !== 'valid' && this.validityMessage &&
+            index.h("r-hint", { key: '4c9867129f7da323cc9e99b350332ac1d5740a0e', "aria-live": "polite", id: `${uniqueId}-message`, role: "alert", variant: "error" }, this.customErrorMessage || this.validityMessage)));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/r-select-option.cjs.entry.js

@@ -121,7 +121,7 @@ const SelectOption = class {
             size: iconSize,
             color: iconColor
         };
-        return (index.h(index.Host, { key: '1f3440961f3c606f5b2b1eef77ae3c53fc1ea4a0', id: uniqueId, role: "option", onClick: this.handleClick, onKeydown: this.handleKeydown, "aria-disabled": `${disabled}`, "aria-selected": `${this.isSelected}`, "data-value": this.definedValue, "data-focused": `${this.isFocused}` }, index.h("div", { key: '9a29dd16478d39c905f8cb54ca603e6982c3a24e', class: "r-select-option" }, icon && index.h("span", { key: 'fdcecb70781424749e0527f06eff5140a8a79ccc', class: "r-select-option--icon" }, index.h("r-icon", Object.assign({ key: '5a1906d39a27bc70729d26e93fd8f0d77e80e972' }, iconAttributes))), !icon && hasIconSlot && index.h("span", { key: '572b0e90b5695e0233505f28fb7c9b3dbc90a73f', class: "r-select-option--icon" }, index.h("slot", { key: 'bc04c317491e690281b0f4442aaff3f86a5ddb12', name: "icon" })), index.h("span", { key: '77bf634b415a36d8463212918cf200fda8647f85', class: "r-select-option--label" }, index.h("slot", { key: '83dd97fa580d18f4a9e27beca4835adf6c746240' })))));
+        return (index.h(index.Host, { key: 'd059d75cec11ef39ddea8c4ddc9ce8bc9d1a57e7', id: uniqueId, role: "option", onClick: this.handleClick, onKeydown: this.handleKeydown, "aria-disabled": `${disabled}`, "aria-selected": `${this.isSelected}`, "data-value": this.definedValue, "data-focused": `${this.isFocused}` }, index.h("div", { key: '70fa5c2fc9194d197b4124b6afad296d2849032c', class: "r-select-option" }, icon && index.h("span", { key: '07bdfeb2d8330c989e6b59c34ee85cac029135cb', class: "r-select-option--icon" }, index.h("r-icon", Object.assign({ key: '358748199ca580e8a9d397ed4f5642a722703441' }, iconAttributes))), !icon && hasIconSlot && index.h("span", { key: '60a4e6059188b27d0fbe6e9b0134882cea803d90', class: "r-select-option--icon" }, index.h("slot", { key: '08b11beec2c086b21ab92ad6cab080bae1cd0eac', name: "icon" })), index.h("span", { key: '4397696c7b8ec172098d9bd82e0c89c55781bb91', class: "r-select-option--label" }, index.h("slot", { key: 'b9dddec8b9c455f130ed38577c9321cb6aced0dd' })))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/r-select.cjs.entry.js

@@ -12,19 +12,8 @@ const Select = class {
         this.rValidate = index.createEvent(this, "rValidate");
         this.rChange = index.createEvent(this, "rChange");
         this.rReset = index.createEvent(this, "rReset");
-        /** Controls the visibility of validation indicators for the field. */
-        this.showValid = false;
         /** Define if select should render as a text item or a block */
         this.fullWidth = false;
-        /** _DEPRECATED_ (This property will be removed in November 2025 release. Use `leading slot` instead)
-         * Define size of an icon that serves as leading icon in select */
-        this.leadingIconSize = 's';
-        /** _DEPRECATED_ (This property will be removed in November 2025 release.)
-         * Defines the trailing icon defined by name for select, Default: 'andle-down' */
-        this.trailingIcon = 'angle-down';
-        /** _DEPRECATED_ (This property will be removed in November 2025 release.)
-         * Define size of an icon that serves as trailing icon in select */
-        this.tralingIconSize = 's';
         /** Define wether listbox appears on top or at the bottom of the select  */
         this.listboxPosition = 'bottom';
         /**
@@ -51,10 +40,13 @@ const Select = class {
         this.valueToDisplay = '';
         this.isInitializing = false;
         this.isResetting = false;
-        this.isNewValue = false;
         this.focusedOption = null;
         this.isValueFocused = false;
         this.isNoResultsFound = false;
+        /** Indicates if the user has interacted with the select (focused/clicked) */
+        this.touched = false;
+        /** Indicates if the value has been changed by user interaction */
+        this.dirty = false;
         this.handleSlotChange = () => {
             setTimeout(() => {
                 this.initialize();
@@ -68,16 +60,19 @@ const Select = class {
         /** Unique id */
         this.uniqueId = `r-select-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
         this.getValidityStateData = (element) => {
+            let validityState = '';
+            let validityMessage = '';
             for (const state in element.validity) {
                 if (element.validity[state]) {
-                    this.validityState = state;
+                    validityState = state;
                     if (this[state + 'Message']) {
-                        this.validityMessage = this[state + 'Message'];
-                        return;
+                        validityMessage = this[state + 'Message'];
+                        return { validityState, validityMessage };
                     }
-                    this.validityMessage = element.validationMessage;
+                    validityMessage = element.validationMessage;
                 }
             }
+            return { validityState, validityMessage };
         };
         this.validateFormElement = (element = null) => {
             if (element === null)
@@ -86,7 +81,9 @@ const Select = class {
                 return;
             if (this.error)
                 return;
-            this.getValidityStateData(element);
+            const { validityState, validityMessage } = this.getValidityStateData(element);
+            this.validityState = validityState;
+            this.validityMessage = validityMessage;
             const isValid = this.validityState === 'valid';
             this.valid = isValid;
             this.invalid = !isValid;
@@ -108,6 +105,8 @@ const Select = class {
                 return;
             e.preventDefault();
             e.stopPropagation();
+            // Mark as touched when user clicks on the select
+            this.touched = true;
             this.toggle();
             if (!this.isExpanded)
                 return;
@@ -122,7 +121,11 @@ const Select = class {
                     return () => {
                         var _a;
                         if (this.isExpanded) {
-                            this.setValue(((_a = this.focusedOption) === null || _a === void 0 ? void 0 : _a.value) || '');
+                            const newValue = ((_a = this.focusedOption) === null || _a === void 0 ? void 0 : _a.value) || '';
+                            if (newValue !== this.currentValue) {
+                                this.dirty = true;
+                            }
+                            this.setValueFromUserInteraction(newValue);
                             return;
                         }
                         this.expand();
@@ -143,7 +146,11 @@ const Select = class {
                             return;
                         }
                         if (this.focusedOption && altKey) {
-                            this.setValue(((_a = this.focusedOption) === null || _a === void 0 ? void 0 : _a.value) || '');
+                            const newValue = ((_a = this.focusedOption) === null || _a === void 0 ? void 0 : _a.value) || '';
+                            if (newValue !== this.currentValue) {
+                                this.dirty = true;
+                            }
+                            this.setValueFromUserInteraction(newValue);
                             return;
                         }
                         if (!this.combobox && this.focusedOption === this.optionElements[0])
@@ -217,7 +224,14 @@ const Select = class {
                     };
                 }
                 case 'Tab':
-                    return () => { var _a; return this.setValue(((_a = this.focusedOption) === null || _a === void 0 ? void 0 : _a.value) || ''); };
+                    return () => {
+                        var _a;
+                        const newValue = ((_a = this.focusedOption) === null || _a === void 0 ? void 0 : _a.value) || '';
+                        if (newValue !== this.currentValue) {
+                            this.dirty = true;
+                        }
+                        this.setValueFromUserInteraction(newValue);
+                    };
                 default:
                     // No matching key handler: intentional no-op
                     return () => { };
@@ -289,7 +303,11 @@ const Select = class {
                         return;
                     }
                     this.valueElement.value = '';
-                    this.setValue('');
+                    const newValue = '';
+                    if (newValue !== this.currentValue) {
+                        this.dirty = true;
+                    }
+                    this.setValueFromUserInteraction(newValue);
                     this.reportValidity();
                     break;
                 default:
@@ -306,6 +324,8 @@ const Select = class {
         };
         this.onValueFocus = () => {
             this.isValueFocused = true;
+            // Mark as touched when user focuses on the select
+            this.touched = true;
         };
         this.filterOptionsListByComboboxValue = (value = '') => {
             const options = Array.from(this.host.querySelectorAll('r-select-option:not([data-no-results="true"])'));
@@ -351,6 +371,8 @@ const Select = class {
         this.onResetForm = () => {
             // Clear validation results
             this.resetValidation();
+            // Reset touched and dirty states
+            this.markAsPristine();
             // Restore initial value
             this.setValue(this.initial['value']);
             // Emit rReset
@@ -390,15 +412,24 @@ const Select = class {
     handleValueChange(value, oldValue) {
         if (this.isInitializing)
             return;
-        this.isNewValue = oldValue !== value;
-        this.isNewValue && this.setValue(value);
+        // Only process if this is not the initial load (oldValue is defined)
+        if (oldValue !== undefined && oldValue !== value) {
+            // This is a programmatic change from parent attribute
+            // Do NOT mark as dirty, do NOT emit rChange
+            this._renderSelected(value, false);
+            this.clearComboboxOptions();
+        }
     }
     /** Listen for custom event triggered by "onClick" event on `<r-select-option>` */
     optionSelectAction(e) {
         e.stopPropagation();
         if (this.disabled)
             return;
-        this.setValue(e.target.value);
+        // Mark as dirty only if value actually changes
+        if (e.target.value !== this.currentValue) {
+            this.dirty = true;
+        }
+        this.setValueFromUserInteraction(e.target.value);
     }
     tooltipFocusAction() {
         this.collapse();
@@ -438,11 +469,28 @@ const Select = class {
         if (this.isExpanded)
             this.defineListboxPositionState();
     }
-    /** Set value of the select */
+    /**
+     * Set value of the select programmatically.
+     * Does NOT mark as dirty or emit change events.
+     * Use this for programmatic value updates.
+     */
     async setValue(value = '') {
         // Clear validation results
         this.resetValidation();
-        this._renderSelected(value, this.currentValue !== value);
+        // Don't emit change event for programmatic updates
+        this._renderSelected(value, false);
+        this.clearComboboxOptions();
+    }
+    /**
+     * Internal method to set value from user interaction.
+     * Assumes dirty flag is already set by the caller.
+     * Will emit rChange if dirty flag is true.
+     */
+    setValueFromUserInteraction(value = '') {
+        // Clear validation results
+        this.resetValidation();
+        // Emit change event for user interactions (if dirty is set)
+        this._renderSelected(value, true);
         this.clearComboboxOptions();
     }
     /** Set value of the select */
@@ -453,6 +501,8 @@ const Select = class {
     async reset() {
         // Clear validation results
         this.resetValidation();
+        // Reset touched and dirty states
+        this.markAsPristine();
         // Collapse options listbox
         this.collapse();
         // Restore unfiltered list
@@ -485,6 +535,35 @@ const Select = class {
         this.invalid = this.initial['invalid'];
         this.valid = !this.invalid;
     }
+    /**
+     * Returns whether the select has been touched (focused/clicked by user).
+     * @returns A boolean indicating whether the select has been touched.
+     */
+    async isTouched() {
+        return this.touched;
+    }
+    /**
+     * Returns whether the select value has been changed by user interaction.
+     * @returns A boolean indicating whether the select is dirty.
+     */
+    async isDirty() {
+        return this.dirty;
+    }
+    /**
+     * Marks the select as untouched and pristine (not dirty).
+     */
+    async markAsPristine() {
+        this.touched = false;
+        this.dirty = false;
+    }
+    /**
+     * Validates the textarea without triggering UI and returns a boolean indicating its validity.
+     * @returns A boolean indicating whether the textarea is valid.
+     */
+    async checkValidity() {
+        const { validityState } = this.getValidityStateData(this.nativeElement);
+        return validityState === 'valid';
+    }
     /** Check validity and reveal validation state and message */
     async reportValidity() {
         this.validateFormElement(this.nativeElement);
@@ -617,7 +696,11 @@ const Select = class {
         if (!this.isBusy) {
             this.reportValidity();
         }
-        if (emitValue) {
+        // Only emit rChange if:
+        // 1. emitValue is true
+        // 2. Not during initialization or reset
+        // 3. The component is dirty (user has interacted)
+        if (emitValue && !this.isBusy && this.dirty) {
             this.rChange.emit({
                 element: this.host,
                 value: value
@@ -934,11 +1017,8 @@ const Select = class {
         var _a;
         return this.validityState !== 'valid' && ((_a = this.validityMessage) === null || _a === void 0 ? void 0 : _a.length) > 0;
     }
-    get hasValidationSuccess() {
-        return this.valid && this.validMessage && this.showValid;
-    }
     get hasMessage() {
-        return this.hasError || this.hasValidationError || this.hasValidationSuccess;
+        return this.hasError || this.hasValidationError;
     }
     get isInteractive() {
         return !this.disabled && !this.isReadonly;
@@ -973,14 +1053,10 @@ const Select = class {
     }
     render() {
         var _a;
-        const { uniqueId, disabled, isExpanded, fieldIndicator, invalid, placeholder, required, hint, label, internal, tooltip, tooltipIcon, tooltipIconColor } = this;
-        // DEPRECATED: will be removed in November 2025 release.
-        const tooltipAttrs = tooltip && !disabled ? {
-            tooltip,
-            'tooltip-icon': tooltipIcon,
-            'tooltip-icon-color': tooltipIconColor,
+        const { uniqueId, disabled, isExpanded, fieldIndicator, invalid, placeholder, required, hint, label, internal } = this;
+        const labelAttr = label ? {
+            fieldIndicator
         } : {};
-        const labelAttr = label ? Object.assign({ fieldIndicator }, tooltipAttrs) : {};
         const isRequired = this.isInteractive ? !!required : false;
         const comboboxAttrs = {
             id: `${uniqueId}-value`,
@@ -1007,8 +1083,8 @@ const Select = class {
             disabled,
             required: isRequired
         };
-        return (index.h(index.Host, { key: '4faff470b9b6b8b7d61e3076e92791ef59337a48', "data-value": this.currentValue, expanded: !this.disabled && this.isExpanded, "data-listbox-position": this.listboxPositionState, "data-initial-value": this.initial['value'], "data-is-placeholder": `${!!this.isPlaceholder}`, "data-value-focused": `${!!this.isValueFocused}`, "data-option-focused": `${!!this.focusedOption}`, "data-validity-state": `${this.validityState || ''}`, "data-validity-message": `${this.validityMessage || ''}`, "data-readonly": `${!!this.isReadonly}` }, index.h("div", { key: '0e171d25d2210017b79c8e4298e24335087f0528', class: `r-select--label ${!internal ? 'r-select--label__margin-bottom' : ''}` }, index.h("div", { key: 'd23c28cea13b76464697eadca26ba34a3d1009cd', class: internal ? 'visually-hidden' : 'r-select--label-container' }, index.h("label", { key: '5eed04830b9339a2c274f79eda156fa48eaa8249', id: `${uniqueId}-label`, onClick: this.isInteractive ? this.onValueClick : null }, index.h("r-label", Object.assign({ key: '85c9eecfbff6e3d5412c99faafc142bf495aedb4' }, labelAttr), label)), index.h("slot", { key: '72a93bf0defe9a3f41d7b7be5cf3415e95874141', name: "popover" })), hint &&
-            index.h("r-hint", { key: 'd0b4a4bd2ca88ba642285dc85920d57f73298bb5', id: `${uniqueId}-hint`, class: "r-select--hint" }, hint)), index.h("div", { key: 'd859fdbd5f21ab2ec625712e5704f7e594ecff05', class: "r-select" }, index.h("select", Object.assign({ key: '388cf0c3f3234c2547aec144060f0d700df2fa57', class: "r-select--native", ref: el => this.nativeElement = el }, nativeAttrs)), index.h("div", { key: 'e2409bf6c794e8360089fc113144dfcd7dffbbe2', class: "r-select--container" }, this.combobox ? this.renderCombobox(comboboxAttrs) : this.renderSelect(comboboxAttrs), index.h("div", Object.assign({ key: '8b813027f707bf37ccdf022c852838eb4801e03e', role: "listbox", tabindex: "-1", id: `${uniqueId}-list`, class: "r-select--options", ref: el => this.listboxElement = el }, listboxAttrs), (this.isNoResultsFound || !((_a = this.optionElements) === null || _a === void 0 ? void 0 : _a.length)) && index.h("r-select-option", { key: 'b6aa6ab7eb6390b05ac6d475546ca9647edb1a02', "data-no-results": "true", value: "no_results" }, this.noResultsFound), index.h("slot", { key: 'e84ce6b5e610147962c25a930967e1554a91f2a1', onSlotchange: this.handleSlotChange })))), index.h("div", { key: '92a91fc11ac5c98330bd677a97ab76a88af48f3b', id: `${uniqueId}-message`, "aria-live": "polite", "aria-atomic": "true", ref: (el) => this.messageContainer = el, class: this.hasMessage && !internal ? 'r-select--message' : 'visually-hidden' }, this.hasMessage && index.h("r-hint", { key: 'c23f0cc7347fb7ceb61c4696d527534ececec403', variant: this.invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && this.validityMessage, this.hasValidationSuccess && this.validMessage))));
+        return (index.h(index.Host, { key: '7f1fb8ee95b7da1cd7aad0d212d1efa9da744dc2', "data-value": this.currentValue, expanded: !this.disabled && this.isExpanded, "data-listbox-position": this.listboxPositionState, "data-initial-value": this.initial['value'], "data-is-placeholder": `${!!this.isPlaceholder}`, "data-value-focused": `${!!this.isValueFocused}`, "data-option-focused": `${!!this.focusedOption}`, "data-validity-state": `${this.validityState || ''}`, "data-validity-message": `${this.validityMessage || ''}`, "data-readonly": `${!!this.isReadonly}`, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, index.h("div", { key: 'cb2a21da12f1f1c0dc298f42338d32b709f62375', class: `r-select--label ${!internal ? 'r-select--label__margin-bottom' : ''}` }, index.h("div", { key: 'd293ba41b9846d24ba4a2c44fb8fcb9895637c03', class: internal ? 'visually-hidden' : 'r-select--label-container' }, index.h("label", { key: 'b562d22174f435deed545a94d0fd7ce0233ba3de', id: `${uniqueId}-label`, onClick: this.isInteractive ? this.onValueClick : null }, index.h("r-label", Object.assign({ key: '2412f39f04b62a1fac018b588fb463efc9760ae0' }, labelAttr), label)), index.h("slot", { key: '99c5c78534118199fc1e99daac2737b78d55bc28', name: "popover" })), hint &&
+            index.h("r-hint", { key: '74f3cf98c25ba600e8faf8a1793d56ab14c01466', id: `${uniqueId}-hint`, class: "r-select--hint" }, hint)), index.h("div", { key: '1960780639c8896bc52d1b62269d9453645132ef', class: "r-select" }, index.h("select", Object.assign({ key: '2b9d75c37066bfeb8e06b4097ecc73bd96358702', class: "r-select--native", ref: el => this.nativeElement = el }, nativeAttrs)), index.h("div", { key: '3eff5f8f263a013e0ba7ba64eace1da6167b6d1f', class: "r-select--container" }, this.combobox ? this.renderCombobox(comboboxAttrs) : this.renderSelect(comboboxAttrs), index.h("div", Object.assign({ key: 'bbfb28e905d17feee0bd2693faac327d8ef97894', role: "listbox", tabindex: "-1", id: `${uniqueId}-list`, class: "r-select--options", ref: el => this.listboxElement = el }, listboxAttrs), (this.isNoResultsFound || !((_a = this.optionElements) === null || _a === void 0 ? void 0 : _a.length)) && index.h("r-select-option", { key: '319993c58f2133c271c2db357d22132497751958', "data-no-results": "true", value: "no_results" }, this.noResultsFound), index.h("slot", { key: 'bbb21659679bb22e3aeb9471a34e3e007ab835d8', onSlotchange: this.handleSlotChange })))), index.h("div", { key: '5971e5c4f3bbb453dcae9f3ecbdf2c2f14cf0293', id: `${uniqueId}-message`, "aria-live": "polite", "aria-atomic": "true", ref: (el) => this.messageContainer = el, class: this.hasMessage && !internal ? 'r-select--message' : 'visually-hidden' }, this.hasMessage && index.h("r-hint", { key: '1c1aba3c4f3baa93cd6ecab59dd40d99ad5bd0b2', variant: this.invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && this.validityMessage))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/r-skip-link.cjs.entry.js

@@ -11,7 +11,7 @@ const SkipLink = class {
         this.position = 'center';
     }
     render() {
-        return (index.h(index.Host, { key: '7ca2f29a347197be2951841e6b59807360e76f9d' }, index.h("slot", { key: '6d26f29f7dbec9d60e302de3cbbf0d8d2afd3009' })));
+        return (index.h(index.Host, { key: '5097cfa89ded56bcfb98dc24ca0b1e42c389e4ae' }, index.h("slot", { key: 'bba803efc4b82b0612e270665d5f80b740a786f1' })));
     }
 };
 SkipLink.style = skipLinkCss;

package/dist/cjs/r-stepper-item.cjs.entry.js

@@ -17,8 +17,8 @@ const StepperItem = class {
     }
     render() {
         const number = this.number || this.stepNumber;
-        return (index.h(index.Host, { key: 'a5004ade661b4abfacb920a256f6a12bbd32a6ea' }, index.h("div", { key: '1358044cc918c2988a2f32198b0a8260cf439ec0', class: "r-stepper-item" }, index.h("div", { key: 'ec2afea7c0b6d603ebce7dda25e93246fafb248a', class: "r-stepper-item--indicator" }, this.complete ? (index.h("r-icon", { name: "check", size: "s" })) : this.icon ? (index.h("r-icon", { name: this.icon, size: "s" })) : number !== undefined ? (index.h("span", { class: "r-stepper-item--indicator--step-number" }, number)) : null), this.hasText &&
-            index.h("div", { key: '6cf7607d13bdd0bd58885e5cc4c74c0068448dfc', class: "r-stepper-item--text" }, index.h("slot", { key: '8c47f057e435924f8c004be5f3112743127bf885' })))));
+        return (index.h(index.Host, { key: '3613c92e8ac7583bf5e3db7e90edca9a921fa475' }, index.h("div", { key: 'ca2c38443d9a855baea829e99ec9c642c279a3be', class: "r-stepper-item" }, index.h("div", { key: '513f01a9a3ac3a87c3622b14f051765121308241', class: "r-stepper-item--indicator" }, this.complete ? (index.h("r-icon", { name: "check", size: "s" })) : this.icon ? (index.h("r-icon", { name: this.icon, size: "s" })) : number !== undefined ? (index.h("span", { class: "r-stepper-item--indicator--step-number" }, number)) : null), this.hasText &&
+            index.h("div", { key: 'cec8659e5ff31608b05c6f62798a8a1048cd7539', class: "r-stepper-item--text" }, index.h("slot", { key: '6a9d581948decc8a15e66401275cb85bf52bb459' })))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/r-stepper.cjs.entry.js

@@ -17,7 +17,7 @@ const Stepper = class {
     }
     render() {
         const completed = this.completed || this.completeSteps;
-        return (index.h(index.Host, { key: 'd501495c36f83cfc14c706f46936d5acc925d6d2' }, index.h("div", { key: 'a2952de15ea74093ea41663438bc8fec866d428b', class: "r-stepper" }, !this.hasSteps && Array.from({ length: this.total }, (_, index$1) => (index.h("r-stepper-item", { number: index$1 + 1, complete: completed > index$1, active: completed === index$1, key: index$1 }))), index.h("slot", { key: '4834a5947ae40241607131dcbb3dfa56354fdc13' }))));
+        return (index.h(index.Host, { key: '196ddb8922499f7222418d19cd6ddc994c211119' }, index.h("div", { key: '2220fcb8ec2125a15db198ec7948780d8d331e50', class: "r-stepper" }, !this.hasSteps && Array.from({ length: this.total }, (_, index$1) => (index.h("r-stepper-item", { number: index$1 + 1, complete: completed > index$1, active: completed === index$1, key: index$1 }))), index.h("slot", { key: '69c7eb87d53b67b19efc6da0ab489debc7e6b06c' }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/r-tab-panel.cjs.entry.js

@@ -18,7 +18,7 @@ const RTabPanel = class {
             active,
             'aria-labelledby': tabId
         };
-        return (index.h(index.Host, Object.assign({ key: '042aba1f5eebeafdff7035d8ad5afc9ec204eb8a', class: "r-typography" }, hostAttrs), index.h("div", { key: '0e9c72a859b07c1e4c2cb4a5d936fbadc07f23ca', class: "r-tab-panel" }, index.h("slot", { key: '2d588c5c67cfd26d7762a2be0c8400faa12a96c8' }))));
+        return (index.h(index.Host, Object.assign({ key: 'de50044bd0be5598615c2f84e66f5a552edb4ab9', class: "r-typography" }, hostAttrs), index.h("div", { key: 'e4db4fd5b115c96474f31d9d16881f496b8f4fd2', class: "r-tab-panel" }, index.h("slot", { key: 'd2ad80745f97933fb173f6ecd3635829d3c890ac' }))));
     }
 };
 RTabPanel.style = tabPanelCss;

package/dist/cjs/r-tab.cjs.entry.js

@@ -49,7 +49,7 @@ const RTab = class {
             'aria-selected': `${active}`,
             'aria-disabled': `${disabled}`
         };
-        return (index.h(index.Host, Object.assign({ key: '2e2b2d84376e097c80a84a1e7224c0f026c16277', onClick: this.handleClick, onKeyUp: this.handleKeyup, onKeyDown: this.handleKeydown }, hostAttrs), index.h("span", { key: 'c38098d413b17ba8b8ddd3436687879d1b37114f', class: "r-tab" }, index.h("span", { key: '3f7bfedd8a933da7ec52f34dd64f3a4e862cb836', class: "r-tab--slot" }, index.h("slot", { key: 'bc056a0d06188ddd1b47c3c062a4d51367e48393' })))));
+        return (index.h(index.Host, Object.assign({ key: '04af619a56c41414b02e942d9d5bba11ef5eb1a0', onClick: this.handleClick, onKeyUp: this.handleKeyup, onKeyDown: this.handleKeydown }, hostAttrs), index.h("span", { key: 'e3fcc9b084de339aafcf98d8c5ca06f0e9615916', class: "r-tab" }, index.h("span", { key: 'bb52bf58758c2404a61b595706ecb3e3f71942ee', class: "r-tab--slot" }, index.h("slot", { key: '939a0e9618875e4909dbb763290f5f439122e312' })))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/r-tabs-list.cjs.entry.js

@@ -9,7 +9,7 @@ const RTabsList = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '323b36e7d276c42c72764c34f2564153d80b64d2', role: "tablist" }, index.h("div", { key: 'bab777186d6d538c6f541e08bda090ab228f38d3', class: "r-tabs-list" }, index.h("slot", { key: '60a0d80ba3ada9d218ca8058cdcdf720277e19d0' }))));
+        return (index.h(index.Host, { key: '98a63f5b2df8649a90efc639cf745537eb903446', role: "tablist" }, index.h("div", { key: 'f1f0ce63461fed127e2e0789e941404545265b51', class: "r-tabs-list" }, index.h("slot", { key: 'e8302171cd66fba6332ed3301be7370dff43e69d' }))));
     }
 };
 RTabsList.style = tabsListCss;