@riverty/web-components 5.8.0 → 6.1.0

package/dist/collection/components/tabs/tabs.js

@@ -180,23 +180,51 @@ export class RTabs {
         history.pushState({ tabId, tabsGroup }, '', url.toString());
     }
     _changeFocusTab(tab, keycode) {
-        var _a, _b, _c, _d;
         const tabs = Array.from(this.tabElements).filter(element => !element.disabled);
         const index = tabs.indexOf(tab);
+        let nextTab;
         switch (keycode) {
             case 'ArrowLeft':
-                index === 0 ? (_a = tabs[tabs.length - 1]) === null || _a === void 0 ? void 0 : _a.focus() : tabs[index - 1].focus();
+                nextTab = index === 0 ? tabs[tabs.length - 1] : tabs[index - 1];
                 break;
             case 'ArrowRight':
-                index === tabs.length - 1 ? (_b = tabs[0]) === null || _b === void 0 ? void 0 : _b.focus() : tabs[index + 1].focus();
+                nextTab = index === tabs.length - 1 ? tabs[0] : tabs[index + 1];
                 break;
             case 'Home':
-                (_c = tabs[0]) === null || _c === void 0 ? void 0 : _c.focus();
+                nextTab = tabs[0];
                 break;
             case 'End':
-                (_d = tabs[tabs.length - 1]) === null || _d === void 0 ? void 0 : _d.focus();
+                nextTab = tabs[tabs.length - 1];
                 break;
         }
+        if (nextTab) {
+            nextTab.focus();
+            this.scrollTabIntoView(nextTab);
+        }
+    }
+    scrollTabIntoView(tab) {
+        var _a;
+        const tabsList = this.host.querySelector('r-tabs-list');
+        if (!tabsList)
+            return;
+        const container = (_a = tabsList.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.r-tabs-list--tabs-container');
+        if (!container)
+            return;
+        const containerRect = container.getBoundingClientRect();
+        const tabRect = tab.getBoundingClientRect();
+        // Check if tab is fully visible
+        const isFullyVisible = tabRect.left >= containerRect.left - 1 &&
+            tabRect.right <= containerRect.right + 1;
+        if (isFullyVisible)
+            return;
+        // Calculate scroll offset to center the tab
+        const centerOffset = (tabRect.left - containerRect.left) -
+            (containerRect.width / 2) +
+            (tabRect.width / 2);
+        container.scrollBy({
+            left: centerOffset,
+            behavior: 'smooth'
+        });
     }
     /** Listen for "click" event on `<r-tab>` */
     tabChangeAction(event) {
@@ -233,7 +261,7 @@ export class RTabs {
         this._changeFocusTab(e.target, e.detail.keycode);
     }
     render() {
-        return (h(Host, { key: 'ddb0847ae3eb4a03c446b2dd193f2fa9603081df', class: "r-tabs" }, h("slot", { key: 'd60346bd45b58534e6ac922ac66c09c1bb04c532' })));
+        return (h(Host, { key: 'b058fd461951dad54e7eb73f7dc5df838c864ebd', class: "r-tabs" }, h("slot", { key: '8e93fded06f0f01dc326e8368aac200d36613753' })));
     }
     static get is() { return "r-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs-list/exports.js

@@ -0,0 +1,2 @@
+export const TabListVariantArray = ['expanded', 'compact'];
+export const ActiveTabBorderArray = ['standard', 'branded'];

package/dist/collection/components/tabs-list/tabs-list.css

@@ -2,15 +2,56 @@
   display: block;
 }
 
+:host([variant=compact]) {
+  --r-tabs-list--r-tab--margin-right: 0;
+  --r-tabs-list--r-tab--flex: 1;
+  --r-tab--width: 100%;
+}
+
+:host([scrollable=true]) {
+  --r-tabs-list--tabs-container--margin: -6px 4px ;
+}
+
+:host([border=branded]) {
+  --r-tab--marker--background-color: var(--r-border-brand-vanguard, #527a42);
+}
+
 .r-tabs-list {
   display: var(--r-tabs-list--display, flex);
-  margin-bottom: var(--r-tabs-list--margin-bottom, 40px);
+  margin-bottom: var(--r-tabs-list--margin-bottom, var(--r-spacing-250, 2.5rem));
   border-bottom-width: var(--r-tabs-list--border-bottom-width, 1px);
   border-bottom-style: var(--r-tabs-list--border-bottom-style, solid);
   border-bottom-color: var(--r-tabs-list--border-bottom-color, var(--r-border-softer, #c9c9c9));
 }
+.r-tabs-list--scroll-button {
+  --r-icon-button--border-radius: var(--r-tabs-list--border-radius, 0);
+  --r-icon-button--width: var(--r-tabs-list--scroll-button--width, var(--r-spacing-200, 2rem));
+  --r-icon-button--height: var(--r-tabs-list--scroll-button--height, var(--r-spacing-200, 2rem));
+}
+.r-tabs-list--tabs-container {
+  display: var(--r-tabs-list--tabs-container--display, flex);
+  flex: var(--r-tabs-list--tabs-container--flex, 1);
+  overflow: var(--r-tabs-list--tabs-container--overflow, scroll hidden);
+  scroll-snap-type: var(--r-tabs-list--tabs-container--scroll-snap-type, x proximity);
+  scrollbar-width: var(--r-tabs-list--tabs-container--scrollbar-width, none);
+  margin: var(--r-tabs-list--tabs-container--margin, -6px);
+  padding: var(--r-tabs-list--tabs-container--padding, 6px);
+}
+.r-tabs-list--scroll-button-container {
+  display: var(--r-tabs-list--scroll-button-container--display, flex);
+  align-items: var(--r-tabs-list--scroll-button-container--align-items, start);
+  gap: var(--r-tabs-list--scroll-button-container--gap, var(--r-spacing-025, 0.25rem));
+}
+.r-tabs-list--scroll-indicator {
+  margin-top: var(--r-tabs-list--scroll-indicator--margin, 2px);
+  width: var(--r-tabs-list--scroll-button--after--width, 1px);
+  height: var(--r-tabs-list--scroll-button--after--height, var(--r-spacing-175, 1.75rem));
+  background-color: var(--r-tabs-list----scroll-indicator--background-color, var(--r-border-softer, #c9c9c9));
+  z-index: var(--r-tabs-list----scroll-indicator--z-index, 1);
+}
 .r-tabs-list ::slotted(r-tab) {
-  margin-right: var(--r-tabs-list--r-tab--margin-right, 40px);
+  margin-right: var(--r-tabs-list--r-tab--margin-right, var(--r-spacing-250, 2.5rem));
+  flex: var(--r-tabs-list--r-tab--flex, none);
 }
 .r-tabs-list ::slotted(r-tab:last-of-type) {
   margin-right: var(--r-tabs-list--r-tab--last-of-type--margin-right, 0);

package/dist/collection/components/tabs-list/tabs-list.js

@@ -1,7 +1,166 @@
 import { Host, h } from "@stencil/core";
 export class RTabsList {
+    constructor() {
+        /**
+         * Visual variant of the tab list
+         * @defaulr 'expanded'
+         * */
+        this.variant = 'expanded';
+        /**
+         * Border style of the active tab
+         * @default 'standard'
+         * */
+        this.border = 'standard';
+        /** Indicates if the tab list is scrollable */
+        this.scrollable = false;
+        /** Indicates if the first tab is fully visible */
+        this.firstItemVisible = true;
+        /** Indicates if the last tab is fully visible */
+        this.lastItemVisible = false;
+        this.initiatizeResizeObserver = () => {
+            if (!this.containerRef || this.resizeObserver)
+                return;
+            this.resizeObserver = new ResizeObserver(() => this.updateScrollState());
+            this.resizeObserver.observe(this.containerRef);
+        };
+        this.updateScrollState = () => {
+            if (!this.containerRef)
+                return;
+            const { scrollWidth, clientWidth } = this.containerRef;
+            const containerRect = this.containerRef.getBoundingClientRect();
+            const tabs = Array.from(this.tabElements);
+            // Check if content is scrollable
+            this.scrollable = scrollWidth > clientWidth;
+            if (!this.scrollable || tabs.length === 0) {
+                this.firstItemVisible = true;
+                this.lastItemVisible = true;
+                return;
+            }
+            const firstTab = tabs[0];
+            const firstTabRect = firstTab.getBoundingClientRect();
+            this.firstItemVisible = firstTabRect.left >= containerRect.left - 1;
+            const lastTab = tabs[tabs.length - 1];
+            const lastTabRect = lastTab.getBoundingClientRect();
+            this.lastItemVisible = lastTabRect.right <= containerRect.right + 1;
+        };
+        this.getVisibleTabOnLeft = () => {
+            if (!this.containerRef)
+                return null;
+            const containerRect = this.containerRef.getBoundingClientRect();
+            const tabs = Array.from(this.tabElements);
+            // Find first tab that's partially or fully visible from the left
+            for (const tab of tabs) {
+                const tabRect = tab.getBoundingClientRect();
+                if (tabRect.right > containerRect.left + 1) {
+                    return tab;
+                }
+            }
+            return;
+        };
+        this.getVisibleTabOnRight = () => {
+            if (!this.containerRef)
+                return null;
+            const containerRect = this.containerRef.getBoundingClientRect();
+            const tabs = Array.from(this.tabElements);
+            for (let i = tabs.length - 1; i >= 0; i--) {
+                const tab = tabs[i];
+                const tabRect = tab.getBoundingClientRect();
+                if (tabRect.left < containerRect.right - 1) {
+                    return tab;
+                }
+            }
+            return null;
+        };
+        this.scrollLeft = () => {
+            if (!this.containerRef)
+                return;
+            const visibleTab = this.getVisibleTabOnLeft();
+            if (!visibleTab)
+                return;
+            const tabs = Array.from(this.tabElements);
+            const currentIndex = tabs.indexOf(visibleTab);
+            const prevTab = currentIndex > 0 ? tabs[currentIndex - 1] : null;
+            if (!prevTab)
+                return;
+            const containerLeft = this.containerRef.getBoundingClientRect().left;
+            const prevTabLeft = prevTab.getBoundingClientRect().left;
+            const offset = prevTabLeft - containerLeft;
+            this.containerRef.scrollBy({
+                left: offset,
+                behavior: 'smooth'
+            });
+        };
+        this.scrollRight = () => {
+            if (!this.containerRef)
+                return;
+            const visibleTab = this.getVisibleTabOnRight();
+            if (!visibleTab)
+                return;
+            const tabs = Array.from(this.tabElements);
+            const currentIndex = tabs.indexOf(visibleTab);
+            const nextTab = currentIndex < tabs.length - 1 ? tabs[currentIndex + 1] : null;
+            if (!nextTab)
+                return;
+            const containerRight = this.containerRef.getBoundingClientRect().right;
+            const nextTabRight = nextTab.getBoundingClientRect().right;
+            const offset = nextTabRight - containerRight;
+            this.containerRef.scrollBy({
+                left: offset,
+                behavior: 'smooth'
+            });
+        };
+        this.scrollToActiveTab = (activeTabElement) => {
+            if (!this.containerRef || !this.scrollable)
+                return;
+            const activeTab = activeTabElement || this.host.querySelector('r-tab[active]');
+            if (!activeTab)
+                return;
+            const containerRect = this.containerRef.getBoundingClientRect();
+            const activeTabRect = activeTab.getBoundingClientRect();
+            // Check if already fully visible
+            const isVisible = activeTabRect.left >= containerRect.left &&
+                activeTabRect.right <= containerRect.right;
+            if (isVisible)
+                return;
+            // Center the active tab
+            const offset = (activeTabRect.left - containerRect.left) -
+                (containerRect.width / 2) +
+                (activeTabRect.width / 2);
+            this.containerRef.scrollBy({
+                left: offset,
+                behavior: 'smooth'
+            });
+        };
+        this.renderScrollButton = (direction, disabled, onClick, tooltip) => {
+            const iconName = direction === 'left' ? 'angle-left' : 'angle-right';
+            const button = (h("r-icon-button", { onRClick: onClick, disabled: disabled, name: iconName, size: "s", rTabindex: -1, class: "r-tabs-list--scroll-button" }));
+            if (tooltip) {
+                return (h("r-tooltip", { text: tooltip, position: "top" }, button));
+            }
+            return button;
+        };
+    }
+    /** Listen for "click" event on `<r-tab>` */
+    tabChangeAction(event) {
+        this.scrollToActiveTab(event.target);
+    }
+    /** `<r-tab>` group of elements */
+    get tabElements() {
+        return this.host.querySelectorAll('r-tab');
+    }
+    componentDidLoad() {
+        this.updateScrollState();
+        this.initiatizeResizeObserver();
+        this.scrollToActiveTab();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     render() {
-        return (h(Host, { key: '323b36e7d276c42c72764c34f2564153d80b64d2', role: "tablist" }, h("div", { key: 'bab777186d6d538c6f541e08bda090ab228f38d3', class: "r-tabs-list" }, h("slot", { key: '60a0d80ba3ada9d218ca8058cdcdf720277e19d0' }))));
+        return (h(Host, { key: '8191b15343491c66259b583930ee73916c6bbd9e', scrollable: `${this.scrollable}`, role: "tablist" }, h("div", { key: 'e5c2a308889986b80549aba5b9a7bec8e6961891', class: "r-tabs-list" }, this.scrollable &&
+            h("div", { key: '62e6abb4a9e5ff9c553162c6de4176c8ce4c0407', "aria-hidden": "true", class: "r-tabs-list--scroll-button-container" }, this.renderScrollButton('left', this.firstItemVisible, this.scrollLeft, this.scrollLeftTooltip), !this.firstItemVisible && h("div", { key: '62e5c2ca7e76323ff367940cd9ab1cb6e5b6db74', class: "r-tabs-list--scroll-indicator" })), h("div", { key: '5f0b264eb4abaf51d4e2f3a85a92d89ff9e378f5', class: "r-tabs-list--tabs-container", ref: (el) => this.containerRef = el, onScroll: this.updateScrollState }, h("slot", { key: '38f6060007491fa9b50cf7cf7d36372c32e63d97' })), this.scrollable &&
+            h("div", { key: 'd51473735f550b81b5ba630126fe3bcc41848648', "aria-hidden": "true", class: "r-tabs-list--scroll-button-container" }, !this.lastItemVisible && h("div", { key: '89d712984dd7797cbca0df86989cf8eedcd95a61', class: "r-tabs-list--scroll-indicator" }), this.renderScrollButton('right', this.lastItemVisible, this.scrollRight, this.scrollRightTooltip)))));
     }
     static get is() { return "r-tabs-list"; }
     static get encapsulation() { return "shadow"; }
@@ -15,4 +174,121 @@ export class RTabsList {
             "$": ["tabs-list.css"]
         };
     }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "TabListVariant",
+                    "resolved": "\"compact\" | \"expanded\"",
+                    "references": {
+                        "TabListVariant": {
+                            "location": "import",
+                            "path": "./exports",
+                            "id": "src/components/tabs-list/exports.ts::TabListVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaulr",
+                            "text": "'expanded'"
+                        }],
+                    "text": "Visual variant of the tab list"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'expanded'"
+            },
+            "border": {
+                "type": "string",
+                "attribute": "border",
+                "mutable": false,
+                "complexType": {
+                    "original": "ActiveTabBorder",
+                    "resolved": "\"branded\" | \"standard\"",
+                    "references": {
+                        "ActiveTabBorder": {
+                            "location": "import",
+                            "path": "./exports",
+                            "id": "src/components/tabs-list/exports.ts::ActiveTabBorder"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'standard'"
+                        }],
+                    "text": "Border style of the active tab"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'standard'"
+            },
+            "scrollLeftTooltip": {
+                "type": "string",
+                "attribute": "scroll-left-tooltip",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip visibility for left scroll button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "scrollRightTooltip": {
+                "type": "string",
+                "attribute": "scroll-right-tooltip",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip visibility for left right button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "scrollable": {},
+            "firstItemVisible": {},
+            "lastItemVisible": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "tabChange",
+                "method": "tabChangeAction",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/components/textarea/textarea.css

@@ -76,7 +76,7 @@
   padding: var(--r-textarea--input--padding, var(--r-textarea--input--padding-top, 0.688em) var(--r-textarea--input--padding-right, 0.625em) var(--r-textarea--input--padding-bottom, 0.688em) var(--r-textarea--input--padding-left, 0.625em));
   margin-top: var(--r-textarea--input--margin-top, 0);
   resize: var(--r-textarea--input--resize, both);
-  z-index: var(--r-textarea--input--z-index, 1);
+  z-index: var(--r-textarea--input--z-index, initial);
   outline: var(--r-textarea--input--outline, none);
   outline-offset: var(--r-textarea--input--outline-offset, 0);
   pointer-events: var(--r-textarea--input--pointer-events, auto);

package/dist/collection/components/textarea/textarea.js

@@ -13,11 +13,6 @@ export class RTextarea {
         this.resize = 'none';
         /** Custom message when the character limit is reached to alert screen reader users. */
         this.characterLimitReachedMessage = "You've reached the character limit.";
-        /**
-         * _DEPRECATED_ (This property will be removed in November 2025 release.)
-         * Controls the visibility of validation indicators for the field.
-         * */
-        this.showValid = false;
         /** Custom validity state */
         this.validityState = null;
         /** Custom validity message */
@@ -180,11 +175,8 @@ export class RTextarea {
         const hasMessage = !!(this.customErrorMessage || this.validityMessage);
         return isInvalid && hasMessage;
     }
-    get hasValidationSuccess() {
-        return this.valid && this.validMessage && this.showValid;
-    }
     get hasMessage() {
-        return this.hasError || this.hasValidationError || this.hasValidationSuccess;
+        return this.hasError || this.hasValidationError;
     }
     /**
      * Determine whether this element should be ignored
@@ -225,7 +217,7 @@ export class RTextarea {
         this.disconnectFormEventListeners();
     }
     render() {
-        const { name, rows, cols, placeholder, required, showCounter, maxlength, minlength, form, value, disabled, resize, hint, invalid, label, uniqueId, fieldIndicator, tooltip, tooltipIcon, tooltipIconColor, readonly } = this;
+        const { name, rows, cols, placeholder, required, showCounter, maxlength, minlength, form, value, disabled, resize, hint, invalid, label, uniqueId, fieldIndicator, readonly } = this;
         const textareaAttrs = {
             name,
             rows,
@@ -244,14 +236,10 @@ export class RTextarea {
             'aria-invalid': `${!!invalid}`,
             'aria-required': `${!!required}`
         };
-        // DEPRECATED: will be removed in November 2025 release.
-        const tooltipAttrs = tooltip && !disabled ? {
-            tooltip,
-            tooltipIcon,
-            tooltipIconColor
+        const labelAttr = label ? {
+            label,
+            fieldIndicator
         } : {};
-        const labelAttr = label ? Object.assign({ label,
-            fieldIndicator }, tooltipAttrs) : {};
         // Filter out event listener properties based on naming convention.
         // Pass them to native element.
         const eventListeners = Object.entries(this).reduce((acc, [key, value]) => {
@@ -262,7 +250,7 @@ export class RTextarea {
         }, {});
         return (h(Host, null, h("div", { class: "r-textarea--label-container" }, h("label", { htmlFor: uniqueId }, label &&
             h("r-label", Object.assign({ id: `${uniqueId}-label` }, labelAttr), label)), h("slot", { name: "popover" })), hint &&
-            h("r-hint", { id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { class: "r-textarea--container", "data-disabled": `${!!disabled}`, "data-readonly": `${!!readonly}` }, h("textarea", Object.assign({ class: "r-textarea--input" }, textareaAttrs, eventListeners, { ref: el => this.nativeElement = el, onChange: this.onChange, onInput: this.onInput })), h("div", { class: "r-textarea--trailing" }, this.readonly && h("r-icon", { class: "r-textarea--readonly-icon", name: "pen-disabled", size: "s" }), this.hasTrailingSlot && h("slot", { name: "trailing" }))), h("div", { class: "r-textarea--messages" }, h("r-hint", { "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage), this.hasValidationSuccess && this.validMessage), showCounter && h("r-hint", { "aria-hidden": true, class: "r-textarea--messages--counter" }, `${value.length}${maxlength ? '/' : ''}${maxlength}`), maxlength &&
+            h("r-hint", { id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { class: "r-textarea--container", "data-disabled": `${!!disabled}`, "data-readonly": `${!!readonly}` }, h("textarea", Object.assign({ class: "r-textarea--input" }, textareaAttrs, eventListeners, { ref: el => this.nativeElement = el, onChange: this.onChange, onInput: this.onInput })), h("div", { class: "r-textarea--trailing" }, this.readonly && h("r-icon", { class: "r-textarea--readonly-icon", name: "pen-disabled", size: "s" }), this.hasTrailingSlot && h("slot", { name: "trailing" }))), h("div", { class: "r-textarea--messages" }, h("r-hint", { "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage)), showCounter && h("r-hint", { "aria-hidden": true, class: "r-textarea--messages--counter" }, `${value.length}${maxlength ? '/' : ''}${maxlength}`), maxlength &&
             h("div", { class: "visually-hidden", ref: el => this.characterLimitReachedAlert = el, "aria-live": "assertive" }))));
     }
     static get is() { return "r-textarea"; }
@@ -669,26 +657,6 @@ export class RTextarea {
                 "setter": false,
                 "reflect": false
             },
-            "showValid": {
-                "type": "boolean",
-                "attribute": "show-valid",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (This property will be removed in November 2025 release.)\nControls the visibility of validation indicators for the field."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "valid": {
                 "type": "boolean",
                 "attribute": "valid",
@@ -708,25 +676,6 @@ export class RTextarea {
                 "setter": false,
                 "reflect": true
             },
-            "validMessage": {
-                "type": "string",
-                "attribute": "valid-message",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (This property will be removed in November 2025 release.)\nCustom message displayed when the `<textarea>` value is valid,\nproviding positive feedback to the user."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
             "invalid": {
                 "type": "boolean",
                 "attribute": "invalid",
@@ -802,107 +751,6 @@ export class RTextarea {
                 "getter": false,
                 "setter": false,
                 "reflect": false
-            },
-            "optional": {
-                "type": "boolean",
-                "attribute": "optional",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ This property will be removed"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "optionalText": {
-                "type": "string",
-                "attribute": "optional-text",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (use `fieldIndicator` instead) Text of an additional marker in the label"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "tooltip": {
-                "type": "string",
-                "attribute": "tooltip",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nTooltip text displayed when the user hovers over the icon,\nproviding additional information."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "tooltipIcon": {
-                "type": "string",
-                "attribute": "tooltip-icon",
-                "mutable": false,
-                "complexType": {
-                    "original": "IconName",
-                    "resolved": "string",
-                    "references": {
-                        "IconName": {
-                            "location": "import",
-                            "path": "../icon/exports",
-                            "id": "src/components/icon/exports.ts::IconName"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nIcon used to trigger the tooltip for the label,\nproviding a visual cue for additional information."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "tooltipIconColor": {
-                "type": "string",
-                "attribute": "tooltip-icon-color",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nSpecifies the color of the tooltip icon from Riverty color tokens.\nDisplayed alongside the label."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
             }
         };
     }