@riverty/web-components 5.3.0 → 5.4.0

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

@@ -82,6 +82,7 @@ export class InputDate {
                 inputmode: 'numeric',
                 disabled: this.disabled,
                 required: this.required,
+                readonly: this.readonly,
                 'aria-label': label(type),
                 'data-date-type': type
             };
@@ -91,6 +92,8 @@ export class InputDate {
             return ((_a = value.replace(/[^.\-/]/g, '')) === null || _a === void 0 ? void 0 : _a.charAt(0)) || '/';
         };
         this.updateValue = () => {
+            if (this.readonly)
+                return;
             this.delimiter = this.getDelimiter(this.format);
             this.value = this.value ? this.inputOrder.map((input) => this.getDateComponent(input)).join(this.delimiter) : '';
         };
@@ -106,6 +109,8 @@ export class InputDate {
         };
         this.handleKeyDown = (index, event) => {
             var _a, _b, _c, _d, _e, _f;
+            if (this.readonly)
+                return;
             if (event.code === 'Enter') {
                 this.validateFormElement(this.nativeElement);
                 if (this.invalid && !this.isNoValidate)
@@ -154,6 +159,8 @@ export class InputDate {
             }
         };
         this.handlePaste = (event) => {
+            if (this.readonly)
+                return;
             this.value = event.clipboardData.getData('text');
             event.preventDefault();
         };
@@ -162,6 +169,8 @@ export class InputDate {
         };
         this.handleInput = (input, index, event) => {
             var _a, _b, _c;
+            if (this.readonly)
+                return;
             const value = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.replace(/[^0-9]/g, '');
             event.target.value = value;
             this.setDateComponent(input, value);
@@ -177,11 +186,14 @@ export class InputDate {
         };
         this.handleChange = (input, event) => {
             var _a;
+            if (this.readonly)
+                return;
             const value = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.replace(/[^0-9]/g, '');
             event.target.value = value;
             this.setDateComponent(input, value);
             this.value = this.inputOrder.map((el) => this.getDateComponent(el)).join(this.delimiter);
             this.rChange.emit({ element: this.host, value: this.value });
+            this.validateFormElement(this.nativeElement);
         };
         this.getValidityStateData = (element) => {
             if (this.required && element.value.length === 0) {
@@ -212,6 +224,8 @@ export class InputDate {
             });
         };
         this.onResetForm = async () => {
+            if (this.readonly)
+                return;
             this.reset();
             this.validityState = null;
             this.validityMessage = null;
@@ -271,6 +285,8 @@ export class InputDate {
      * @returns Promise that resolves when reset is complete
      */
     async reset() {
+        if (this.readonly)
+            return;
         this.validityState = null;
         this.validityMessage = null;
         this.value = this.initial['value'];
@@ -317,6 +333,9 @@ export class InputDate {
     get firstEmptyInput() {
         return this.inputs.find(input => !input.value) || null;
     }
+    get hasTrailingSlot() {
+        return !!this.host.querySelector('[slot="trailing"]');
+    }
     componentWillLoad() {
         dayjs.extend(customParseFormat);
         this.delimiter = this.getDelimiter(this.format);
@@ -344,7 +363,7 @@ export class InputDate {
         this.disconnectFormEventListeners();
     }
     render() {
-        const { form, name, required, disabled, label, fieldIndicator, hint, tooltip, tooltipIcon, tooltipIconColor, uniqueId, invalid, valid } = this;
+        const { form, name, required, disabled, label, fieldIndicator, hint, tooltip, tooltipIcon, tooltipIconColor, uniqueId, invalid, valid, readonly } = this;
         const groupAttrs = {
             'aria-invalid': `${invalid || false}`,
             'aria-describedby': this.ariaDescribedBy
@@ -355,6 +374,7 @@ export class InputDate {
             name,
             required,
             disabled,
+            readonly,
             'aria-describedby': this.ariaDescribedBy
         };
         // DEPRECATED: will be removed in November 2025 release.
@@ -367,13 +387,14 @@ export class InputDate {
             id: `${uniqueId}-label`,
             fieldIndicator
         } : {};
-        return (h(Host, { key: '45402df1a93a99839195db652735095a5b373f35', onClick: this.onHostClick }, h("fieldset", Object.assign({ key: 'fa4328121e8a6391d7eca78445ce419a437543b1', class: "r-input-date" }, groupAttrs), h("div", { key: '50f428f5c1674d8355a803b0f093b6fcfcdaadb0', class: "r-input-date--legend-container" }, h("legend", { key: '55872125d4df627288369fa61bf3231500ba349b', class: "r-input-date--legend" }, h("label", { key: 'b051da10e21ac8d68d1fe56fe32ae2cb79b6289f', htmlFor: uniqueId }, label ?
+        return (h(Host, { key: '291b135444b1fa349daddde0f182d67688e739bb', onClick: this.onHostClick }, h("fieldset", Object.assign({ key: 'ba9bdebb80e24fff65d2b18902e97a3497c3f602', class: "r-input-date" }, groupAttrs), h("div", { key: '74ac02efb2741cc4de337133d68ad5eaf978b911', class: "r-input-date--legend-container" }, h("legend", { key: 'c3fc3b194b878e9acb717b6c70e05db55a9ad63a', class: "r-input-date--legend" }, h("label", { key: '5c7eee1fadb2c62d55b8a890eeec2c163d87d0b9', htmlFor: uniqueId }, label ?
             h("r-label", Object.assign({}, labelAttr, tooltipAttrs), label)
             :
-                h("slot", { name: "label" }))), h("slot", { key: '2f6e6d44c6a81d0e649ddc325f02575fde26c505', name: "popover" })), hint &&
-            h("r-hint", { key: '7f1aed34c0391ed1cb25db22fda839bc3bc994e6', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: 'cd02f4b4ae91e9c2dd25a3c1d72ac345d79c769f', class: "r-input-date--container" }, h("r-icon", { key: '3472d2b8753d84c387de5e39a01538bfaef635ed', name: "calendar", size: "s", class: "r-input-date--calendar-icon" }), h("div", { key: 'a8f3e0c4b986ec86e4b6f48efac093c32a359256', class: "r-input-date--inputs" }, this.inputOrder.map((input, i) => (h(Fragment, null, h("input", Object.assign({ class: "r-input-date--input" }, this.getInputAttrs(input), { key: input, value: this.getDateComponent(input), onInput: this.createInputHandler(input, i), onChange: this.createChangeHandler(input), onClick: this.onInputClick, onKeyDown: this.createKeyDownHandler(i), onPaste: this.handlePaste })), i < this.inputOrder.length - 1 &&
-            h("span", { "aria-hidden": "true", class: "r-input-date--delimiter" }, this.delimiter)))), h("input", Object.assign({ key: '2e3e7b6fb13bc961549ad147e7bbc65b330bccd2', type: "hidden" }, dateInputAttrs, { value: this.value, ref: (el) => this.nativeElement = el }))), h("div", { key: '77af892c79891b6a4893d36730135f9124cb71f7', class: "r-input-date--trailing" }, h("slot", { key: '20e5f42a09a7fdda67467a25aced264d8d1c9b1e', name: "trailing" }, valid &&
-            h("r-icon", { key: '65d84ab8a34134b267be8e54fad621b112ae4a11', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" })))), h("div", { key: '2943beb614010b8b2251bb96ded76021384fb1d7', id: `${uniqueId}-message`, "aria-live": "polite", class: "r-input-date--message" }, this.hasMessage && h("r-hint", { key: 'efb51013501de46364d3dd043813c2fd3fb5c257', variant: "error" }, this.message)))));
+                h("slot", { name: "label" }))), h("slot", { key: '0f5d78659b43177ebabfe9d5201083ca09ec34c0', name: "popover" })), hint &&
+            h("r-hint", { key: 'cc46269c0a59a29ed5f4d454316d3736febd11d8', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '407b00450575bea92bbd0ea1c8f2f7050cc5731b', class: "r-input-date--container" }, h("r-icon", { key: '192a807af7a17da42dbfc104b250008fb92f9201', name: "calendar", size: "s", class: "r-input-date--calendar-icon" }), h("div", { key: 'e97c5d40242fef7a0e7de74498415342e98a3914', class: "r-input-date--inputs" }, this.inputOrder.map((input, i) => (h(Fragment, null, h("input", Object.assign({ class: "r-input-date--input" }, this.getInputAttrs(input), { key: input, value: this.getDateComponent(input), onInput: this.createInputHandler(input, i), onChange: this.createChangeHandler(input), onClick: this.onInputClick, onKeyDown: this.createKeyDownHandler(i), onPaste: this.handlePaste })), i < this.inputOrder.length - 1 &&
+            h("span", { "aria-hidden": "true", class: "r-input-date--delimiter" }, this.delimiter)))), h("input", Object.assign({ key: 'e93adbded043a7e5cb621b3f12c25145f1110c7e', type: "hidden" }, dateInputAttrs, { value: this.value, ref: (el) => this.nativeElement = el }))), h("div", { key: '6046c334c88411bbeb36f96201e75c3af55302af', class: "r-input-date--trailing" }, this.readonly &&
+            h("r-icon", { key: '69d132c86d369d900d9d5e7f1b8b01bb5fa35203', class: "r-input-date--readonly-icon", name: "pen-disabled", size: "s" }), valid &&
+            h("r-icon", { key: '9a2ddfc73a8d9cc615abc035c5854158a3314ff3', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }), this.hasTrailingSlot && h("slot", { key: '6e7b97da07d9dd20da07cfd743c3e6e0d5e82308', name: "trailing" }))), h("div", { key: 'd0a3edff590af1893bafa7d51a41ba261f6c6215', id: `${uniqueId}-message`, "aria-live": "polite", class: "r-input-date--message" }, this.hasMessage && h("r-hint", { key: '077b7b9a115ca1c871498a8840fe4019e39deea3', variant: "error" }, this.message)))));
     }
     static get is() { return "r-input-date"; }
     static get encapsulation() { return "shadow"; }
@@ -761,6 +782,25 @@ export class InputDate {
                 "setter": false,
                 "reflect": true
             },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the date inputs read-only: users can focus and copy the value,\nbut cannot modify it (value still submitted with the form unlike disabled)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
             "required": {
                 "type": "boolean",
                 "attribute": "required",

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

@@ -37,11 +37,15 @@ export class InputPassword {
             }, 2000);
         };
         this.onInput = (event) => {
+            if (this.readonly)
+                return;
             this.value = event.detail.value;
             const { host, value } = this;
             this.rInput.emit({ element: host, value });
         };
         this.onChange = (event) => {
+            if (this.readonly)
+                return;
             this.value = event.detail.value;
             const { host, value } = this;
             this.rChange.emit({ element: host, value });
@@ -78,6 +82,8 @@ export class InputPassword {
             appendControlToFormData(this.nativeElement || this.host, event.formData);
         };
         this.onResetForm = () => {
+            if (this.readonly)
+                return;
             this.validityState = null;
             this.validityMessage = null;
             this.value = this.initial['value'];
@@ -97,6 +103,8 @@ export class InputPassword {
         };
         this.handleKeyup = async (event) => {
             var _a, _b;
+            if (this.readonly)
+                return;
             if (event.code !== 'Enter')
                 return;
             this.validateFormElement(this.nativeElement);
@@ -112,6 +120,8 @@ export class InputPassword {
             }
         };
         this.handleBlur = () => {
+            if (this.readonly)
+                return;
             this.validateFormElement(this.nativeElement);
         };
     }
@@ -191,7 +201,7 @@ export class InputPassword {
         this.disconnectFormEventListeners();
     }
     render() {
-        const { name, placeholder, required, fieldIndicator, value, disabled, form, invalid, valid, hint, label, tooltip, tooltipIcon, tooltipIconColor, fullWidth, showPasswordAriaLabel, hidePasswordAriaLabel, showed } = this;
+        const { name, placeholder, required, fieldIndicator, value, disabled, form, invalid, valid, hint, label, tooltip, tooltipIcon, tooltipIconColor, fullWidth, showPasswordAriaLabel, hidePasswordAriaLabel, showed, readonly } = this;
         const inputAttrs = {
             name,
             placeholder,
@@ -208,10 +218,11 @@ export class InputPassword {
             tooltipIcon,
             tooltipIconColor,
             fullWidth,
-            novalidate: true
+            novalidate: true,
+            readonly
         };
-        return (h(Host, { key: '8e6cba802dd16c4d3728ee18c4a99882413eb94d' }, h("r-input", Object.assign({ key: '8fe50776017dc37afe9cd06cb944fff2f17bcc22' }, inputAttrs, { ref: (el) => this.nativeElement = el, type: showed ? 'text' : 'password', onRInput: this.onInput, onRChange: this.onChange, onKeyUp: this.handleKeyup, onRBlur: this.handleBlur }), h("slot", { key: 'f8a7ad986b5945549968db08f7b98f3f3512292d', name: "popover", slot: "popover" }), h("r-icon", { key: '3adae1ce4ac77ca8db37fbdb4cf9060a84f56a23', name: "padlock-closed", size: "s", slot: "leading" }), h("r-icon-button", { key: '928a08c5250fcf01884da4f295b6b85299d7a588', slot: "trailing", name: showed ? 'eye-crossed-out' : 'eye', size: "s", disabled: disabled, label: showed ? hidePasswordAriaLabel : showPasswordAriaLabel, onClick: this.onShowClick }), this.hasMessage &&
-            h("r-hint", { key: 'fe5651e7dafc74e42f23b528510c3d18b37ac779', slot: "message", variant: "error" }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage))), h("div", { key: 'b5badae92e3eee6447a599128f71ce4d907f1425', class: "visually-hidden", ref: el => this.passwordVisibilityChangeAlertContainer = el, "aria-live": "polite" })));
+        return (h(Host, { key: 'a572ffb573f9d4ff7732c372077d1488a86fd4be' }, h("r-input", Object.assign({ key: '9296fe93c32f82c850c571dfc588d599d4fedfeb' }, inputAttrs, { ref: (el) => this.nativeElement = el, type: showed ? 'text' : 'password', onRInput: this.onInput, onRChange: this.onChange, onKeyUp: this.handleKeyup, onRBlur: this.handleBlur }), h("r-icon", { key: '4ed51719c83a3b4e90fd86d95969b982f3372d16', name: "padlock-closed", size: "s", slot: "leading" }), h("slot", { key: 'c00d7cd2254773750a7a4627c7600550590f0e03', name: "popover", slot: "popover" }), h("r-icon-button", { key: '7bf8aabd7b00a2a36038d1f6162f11114dfa72fa', slot: "trailing", name: showed ? 'eye-crossed-out' : 'eye', size: "s", disabled: disabled, label: showed ? hidePasswordAriaLabel : showPasswordAriaLabel, onClick: this.onShowClick }), this.hasMessage &&
+            h("r-hint", { key: '654c4558871e740f13ae50351ff82e3befccc83d', slot: "message", variant: "error" }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage))), h("div", { key: 'e8b5e4a4a69ddf7074e88eb18c5e9ff725e3baa5', class: "visually-hidden", ref: el => this.passwordVisibilityChangeAlertContainer = el, "aria-live": "polite" })));
     }
     static get is() { return "r-input-password"; }
     static get encapsulation() { return "shadow"; }
@@ -538,6 +549,25 @@ export class InputPassword {
                 "setter": false,
                 "reflect": true
             },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the input read-only: users can focus and copy the value,\nbut cannot modify it (value still submitted with the form unlike disabled)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
             "required": {
                 "type": "boolean",
                 "attribute": "required",

package/dist/collection/components/input-phone-number/input-phone-number.js

@@ -19,22 +19,31 @@ export class InputPhoneNumber {
          * */
         this.initial = {};
         this.handleOnInput = (event) => {
+            if (this.readonly)
+                return;
             this.phoneNumber = event.target.value;
             this.fullPhoneNumber = this.phoneNumber ? this.countryCode + this.phoneNumber : '';
             const { host, phoneNumber, countryCode, value } = this;
             this.rInput.emit({ element: host, value, countryCode, phoneNumber });
+            this.validateFormElement(this.nativeElement);
         };
         this.handleInputOnChange = (event) => {
+            if (this.readonly)
+                return;
             this.phoneNumber = event.target.value;
             this.handleValueChange();
         };
         this.handleValueChange = () => {
+            if (this.readonly)
+                return;
             this.fullPhoneNumber = this.phoneNumber ? this.countryCode + this.phoneNumber : '';
             const { host, phoneNumber, countryCode, value } = this;
             this.rChange.emit({ element: host, value, countryCode, phoneNumber });
             this.validateFormElement(this.nativeElement);
         };
         this.validateFormElement = (element) => {
+            if (this.readonly)
+                return;
             if (element === null)
                 return;
             if (this.isNoValidate)
@@ -83,6 +92,8 @@ export class InputPhoneNumber {
         };
         this.onResetForm = () => {
             var _a;
+            if (this.readonly)
+                return;
             this.validityState = null;
             this.validityMessage = null;
             this.phoneNumber = '';
@@ -121,12 +132,24 @@ export class InputPhoneNumber {
         this.validateFormElement(this.nativeElement);
     }
     handleDisabledChange() {
-        var _a;
-        (_a = this.countryCodeElement) === null || _a === void 0 ? void 0 : _a.setAttribute('disabled', `${this.disabled || false}`);
+        this.setCountryCodeElementAttributes({
+            'disabled': `${!!this.disabled}`
+        });
     }
     handleRequiredChange() {
-        var _a;
-        (_a = this.countryCodeElement) === null || _a === void 0 ? void 0 : _a.setAttribute('required', `${this.required || false}`);
+        this.setCountryCodeElementAttributes({
+            'required': `${!!this.required}`
+        });
+    }
+    handleReadonlyChange() {
+        this.setCountryCodeElementAttributes({
+            'readonly': `${!!this.readonly}`
+        });
+    }
+    handleLabelChange() {
+        this.setCountryCodeElementAttributes({
+            'label': this.countryCodeLabel
+        });
     }
     /** Identify wrapping form element */
     get parentFormEl() {
@@ -182,15 +205,16 @@ export class InputPhoneNumber {
         this.phoneNumber = value.replace(countryCode, '');
         (_b = this.countryCodeElement) === null || _b === void 0 ? void 0 : _b.setValue(countryCode);
     }
-    setCountryCodeElementAttributes() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        (_a = this.countryCodeElement) === null || _a === void 0 ? void 0 : _a.setAttribute('show-leading-icon', 'true');
-        (_b = this.countryCodeElement) === null || _b === void 0 ? void 0 : _b.setAttribute('leading-icon', 'globe');
-        (_c = this.countryCodeElement) === null || _c === void 0 ? void 0 : _c.setAttribute('placeholder', '+00');
-        (_d = this.countryCodeElement) === null || _d === void 0 ? void 0 : _d.setAttribute('disabled', `${this.disabled || false}`);
-        (_e = this.countryCodeElement) === null || _e === void 0 ? void 0 : _e.setAttribute('internal', 'true');
-        (_f = this.countryCodeElement) === null || _f === void 0 ? void 0 : _f.setAttribute('required', `${this.required || false}`);
-        (_g = this.countryCodeElement) === null || _g === void 0 ? void 0 : _g.setAttribute('label', this.countryCodeLabel);
+    setCountryCodeElementAttributes(attributes) {
+        Object.entries(attributes || {}).forEach(([key, val]) => {
+            var _a, _b;
+            if (val === false || val === null || val === undefined) {
+                (_a = this.countryCodeElement) === null || _a === void 0 ? void 0 : _a.removeAttribute(key);
+            }
+            else {
+                (_b = this.countryCodeElement) === null || _b === void 0 ? void 0 : _b.setAttribute(key, String(val));
+            }
+        });
     }
     getPhoneValidationResult(phoneNumber, countryCode = '') {
         return phone(countryCode + phoneNumber, { validateMobilePrefix: false });
@@ -213,7 +237,19 @@ export class InputPhoneNumber {
         this.initial['value'] = this.value;
         this.initial['invalid'] = this.invalid;
         this.updateValues(this.value);
-        this.setCountryCodeElementAttributes();
+        const staticAttributes = {
+            'show-leading-icon': 'true',
+            'leading-icon': 'globe',
+            'placeholder': '+00',
+            'internal': 'true'
+        };
+        const dynamicAttributes = {
+            'disabled': `${!!this.disabled}`,
+            'required': `${!!this.required}`,
+            'readonly': `${!!this.readonly}`,
+            'label': this.countryCodeLabel
+        };
+        this.setCountryCodeElementAttributes(Object.assign(Object.assign({}, staticAttributes), dynamicAttributes));
     }
     componentDidLoad() {
         this.connectEventListeners();
@@ -239,10 +275,10 @@ export class InputPhoneNumber {
             disabled,
             'aria-describedby': this.ariaDescribedBy
         };
-        return (h(Host, { key: 'd1ddc6d8dec0b98c83c65d2a0e0ad7177d4bf5e4' }, h("div", { key: '5e87d5acdf57428188dafa9e1d13b68268db7854', class: "r-input-phone-number--label-container" }, h("label", { key: 'ba8ec0808fbfd2c59115d5765d4e3e74d5fbd907', id: `${uniqueId}-label` }, label &&
-            h("r-label", Object.assign({ key: 'b4102846d72fa6b9ac928d5a846163ad8f81cc2c' }, labelAttr), label)), h("slot", { key: 'debcf23c5add7c28c56b60d3f82c29ba32d85049', name: "popover" })), hint &&
-            h("r-hint", { key: '429ed5d551ac9cb028b18919e3f7d8d4155330fe', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: 'c269f63f96d619595ae676d77448410d71a4b356', class: "r-input-phone-number", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.ariaDescribedBy }, h("slot", { key: 'eb5402152f90f5e97b68a04c511daa228e0d3c05' }), h("r-input", { key: '9aa1354f8a17087dff54ae394c8859b9a69e4b5a', label: inputLabel, value: phoneNumber, internal: true, valid: valid, invalid: invalid, required: required, novalidate: true, fullWidth: fullWidth, type: "tel", error: this.errorMessage || '', onRInput: this.handleOnInput, onRChange: this.handleInputOnChange, disabled: disabled }, valid && phoneNumber &&
-            h("r-icon", { key: '8a4a597a9177f115ccfab3a1a388d6ef7445d0fb', slot: "trailing", name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }))), h("input", Object.assign({ key: '44646c7de24094438bcbb5288ce08378bc7ed473', type: "hidden" }, inputAttrs, { value: fullPhoneNumber, ref: el => this.nativeElement = el })), h("r-hint", { key: 'a30016c4a30ab4e13a34374973b0ff2ee7369dac', "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: "error" }, this.hasError && this.error, this.hasValidationError && this.validityMessage)));
+        return (h(Host, { key: '93e31af4d248db4fe90a84b897d96207dbf9b6e9' }, h("div", { key: 'fc909eb39efe18413838c9f051d7ad7d5aa461b3', class: "r-input-phone-number--label-container" }, h("label", { key: 'b849fc5188a03e52151006fd48338fe0a07dfd83', id: `${uniqueId}-label` }, label &&
+            h("r-label", Object.assign({ key: '6bab502ebce17055ef3e2862f9063bfd2d0d1291' }, labelAttr), label)), h("slot", { key: '014cbcd421f75299935cf430a8777ded1880134c', name: "popover" })), hint &&
+            h("r-hint", { key: '4f8e473e4c70ac62618f6d651dca1880aa755c3e', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '7fa42ec6de7083cc8703f5bcbbfaabe283462d45', class: "r-input-phone-number", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.ariaDescribedBy }, h("slot", { key: '64b8a315acb0057e82d1c77dd3b35bc141378cc0' }), h("r-input", { key: '5fdaa9c0c5bb4913637b895f0979f377bac876bc', label: inputLabel, value: phoneNumber, internal: true, valid: valid, invalid: invalid, required: required, readonly: this.readonly, novalidate: true, fullWidth: fullWidth, type: "tel", error: this.errorMessage || '', onRInput: this.handleOnInput, onRChange: this.handleInputOnChange, disabled: disabled }, valid && phoneNumber &&
+            h("r-icon", { key: '6c25f0a2e473315279679c3e607691f8a3eca396', slot: "trailing", name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }))), h("input", Object.assign({ key: '39cca18332d8e6473bef33db6e395a8aac36a954', type: "hidden" }, inputAttrs, { readonly: this.readonly, value: fullPhoneNumber, ref: el => this.nativeElement = el })), h("r-hint", { key: '8feb70b56f27287b06a3ba894a554d736d9e9b4b', "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: "error" }, this.hasMessage ? (this.hasError ? this.error : this.validityMessage) : '')));
     }
     static get is() { return "r-input-phone-number"; }
     static get encapsulation() { return "shadow"; }
@@ -514,6 +550,25 @@ export class InputPhoneNumber {
                 "setter": false,
                 "reflect": true
             },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the date inputs read-only: users can focus and copy the value,\nbut cannot modify it (value still submitted with the form unlike disabled)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
             "required": {
                 "type": "boolean",
                 "attribute": "required",
@@ -843,6 +898,12 @@ export class InputPhoneNumber {
             }, {
                 "propName": "required",
                 "methodName": "handleRequiredChange"
+            }, {
+                "propName": "readonly",
+                "methodName": "handleReadonlyChange"
+            }, {
+                "propName": "label",
+                "methodName": "handleLabelChange"
             }];
     }
 }

package/dist/collection/components/label/label.js

@@ -25,9 +25,9 @@ export class RLabel {
             size: 's',
             color: tooltipIconColor
         };
-        return (h(Host, { key: '1bcaecd6616128ccab32f8a1ff4f46f1072190ac' }, h("div", { key: 'ab619a29898eb4e7a49ac5dd07f2b1b98aac17a2', class: "r-label" }, h("span", { key: 'ac0e0ea909ef6da765676b6b30ecc65d39664bcf', class: "r-label--slot" }, h("slot", { key: 'cf6014703ae7afeed874e017cef48d99aa32eddb' }), fieldIndicator &&
-            h("span", { key: '11e2435c41fbe76ca0b64d9eacc59c10ff87233d', class: "r-label--marker" }, fieldIndicator)), tooltip &&
-            h("span", { key: 'c9ed9b4fe5f084e23d24a8687dcc186bd3380b05', class: "r-label--tooltip-icon" }, h("r-tooltip", Object.assign({ key: '78f51c815bc28429edae7ad52f3150aafe3a5211' }, tooltipAttrs), h("r-icon", Object.assign({ key: 'e890282aaf5b66d805ee6212cf8c69abae3cde7e' }, tooltipIconAttrs)))))));
+        return (h(Host, { key: '06097c8d9963d79b783b245a934832e3f8e7596b' }, h("div", { key: '2a3a8ddd22fddedb8e7a7472f81c05201ea26a77', class: "r-label" }, h("span", { key: '9d1814759bb2b3f8784a73aa75b215a19985f482', class: "r-label--slot" }, h("slot", { key: 'd472e83f02841c979bbfcc36c54068141de0d380' }), fieldIndicator &&
+            h("span", { key: 'f275ed855ebd8a684a35ce9b074b0e04471dcfe2', class: "r-label--marker" }, fieldIndicator)), tooltip &&
+            h("span", { key: 'aa336cbb979d0866e8f586c1596b9d9f38925023', class: "r-label--tooltip-icon" }, h("r-tooltip", Object.assign({ key: '245cd576fadb1b31ca2041a9b3d9b5a9a63e381d' }, tooltipAttrs), h("r-icon", Object.assign({ key: 'f83ce1d9d0ab51b3c5394866b01b1998559ddc68' }, tooltipIconAttrs)))))));
     }
     static get is() { return "r-label"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,8 +6,8 @@
   --r-list-item--trailing--align-self: end;
 }
 
-:host([divider]) .r-list-item {
-  --r-list-item--border-color: var(--r-border-softer, #c9c9c9);
+:host([divider]:not([divider=false])) {
+  --r-list-item--border-color: var(--r-border-soft, #686868);
   --r-list-item--border-width: 0 0 1px 0;
 }
 
@@ -35,19 +35,17 @@
   --r-list-item--headline--font-weight: 600;
   --r-list-item--trailing-icon--transform: rotate(180deg);
   --r-list-item--trailing-icon--color: var(--r-icon-regular, #282828);
-  --r-list-item--leading-icon--color: var(--r-icon-regular, #282828);
 }
 
 :host([variant=navitem][active-parent]:not([expanded])),
 :host([variant=navitem][active]:not([expanded])) {
   --r-list-item--background-color: var(--r-background-interactive-activated, rgba(40, 40, 40, 0.08));
-  --r-list-item--leading-icon--color: var(--r-icon-regular, #282828);
 }
 
 :host([variant=subitem]) .r-list-item {
   --r-list-item--margin-left: 27px;
   --r-list-item--border-width: 0 0 0 1px;
-  --r-list-item--border-color: var(--r-border-softer, #c9c9c9);
+  --r-list-item--border-color: var(--r-border-soft, #686868);
 }
 
 :host([variant=subitem][active]) .r-list-item {
@@ -68,11 +66,12 @@
 
 :host([disabled]:not([disabled=false])) {
   cursor: not-allowed;
-}
-:host([disabled]:not([disabled=false])) .r-list-item {
-  --r-list-item--opacity: 0.4;
   --r-list-item--background-color: transparent;
-  cursor: inherit;
+}
+
+:host([disabled]:not([disabled=false])[divider]:not([divider=false])) {
+  --r-list-item--border-color: rgba(104,104,104, 0.4);
+  --r-list-item--leading-icon--color: rgba(104,104,104, 0.4);
 }
 
 :host {
@@ -102,12 +101,12 @@
   border-style: var(--r-list-item--border-style, solid);
   border-width: var(--r-list-item--border-width, 0);
   border-color: var(--r-list-item--border-color, transparent);
-  cursor: var(--r-list-item--cursor, auto);
+  cursor: var(--r-list-item--cursor, inherit);
   font-weight: var(--r-list-item--font-weight, var(--r-font-weight-regular, 400));
   outline: var(--r-list-item--outline, none);
 }
 .r-list-item--leading {
-  color: var(--r-list-item--leading--color, inherit);
+  color: var(--r-list-item--leading--color, var(--r-icon-soft, #686868));
 }
 .r-list-item--leading-icon {
   color: var(--r-list-item--leading-icon--color, var(--r-icon-soft, #686868));
@@ -141,18 +140,18 @@
   gap: var(--r-list-item--text--gap, 2px);
 }
 .r-list-item--headline {
-  font-size: var(--r-list-item--headline--font-size, inherit);
-  font-weight: var(--r-list-item--headline--font-weight, inherit);
-  line-height: var(--r-list-item--headline--line-height, inherit);
+  font-size: var(--r-list-item--headline--font-size, 1rem);
+  font-weight: var(--r-list-item--headline--font-weight, 600);
+  line-height: var(--r-list-item--headline--line-height, 1.5);
   color: var(--r-list-item--headline--color, inherit);
 }
-.r-list-item--subtext {
-  font-size: var(--r-list-item--subtext--font-size, var(--r-font-size-300, 0.875rem));
-  font-weight: var(--r-list-item--subtext--font-weight, inherit);
-  line-height: var(--r-list-item--subtext--line-height, inherit);
-  color: var(--r-list-item--subtext--color, var(--r-text-soft, #686868));
+.r-list-item--subtext, .r-list-item--description {
+  font-size: var(--r-list-item--description--font-size, var(--r-list-item--subtext--font-size, 1rem));
+  font-weight: var(--r-list-item--description--font-weight, var(--r-list-item--subtext--font-weight, 400));
+  line-height: var(--r-list-item--description--line-height, var(--r-list-item--subtext--line-height, 1.5));
+  color: var(--r-list-item--description--color, var(--r-list-item--subtext--color, var(--r-text-regular, #282828)));
 }
-.r-list-item--subtext ::slotted(a.subtext) {
-  color: var(--r-list-item--subtext--slotted--color, inherit);
-  text-decoration: var(--r-list-item--subtext--slotted--text-decoration, none);
+.r-list-item--subtext ::slotted(a.subtext), .r-list-item--description ::slotted(a.subtext) {
+  color: var(--r-list-item--description--color, var(--r-list-item--subtext--slotted--color, inherit));
+  text-decoration: var(--r-list-item--description--text-decoration, var(--r-list-item--subtext--slotted--text-decoration, none));
 }

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

@@ -44,8 +44,8 @@ export class RListItem {
     get isHeadlineSlot() {
         return this.isEl('[slot="headline"]');
     }
-    get isSubtextSlot() {
-        return this.isEl('[slot="subtext"]');
+    get isDescriptionSlot() {
+        return this.isEl('[slot="description"]') || this.isEl('[slot="subtext"]');
     }
     get hasSubitems() {
         return this.isEl('[variant="subitem"]');
@@ -74,15 +74,19 @@ export class RListItem {
     componentDidLoad() {
         this.setTabIndexOnSubItems();
     }
+    get tagName() {
+        return this.href && !this.disabled ? 'a' : 'div';
+    }
     render() {
-        const { leadingIcon, leadingIconSrc, trailingIcon, trailingIconSrc, headline, trailingText, subtext } = this;
-        const TagName = this.href && !this.disabled ? 'a' : 'div';
-        const ListItemContent = (h(TagName, Object.assign({ class: "r-list-item" }, (!this.disabled && { href: this.href })), this.isLeading &&
+        const { leadingIcon, leadingIconSrc, trailingIcon, trailingIconSrc, headline, trailingText, subtext, description } = this;
+        const TagName = this.tagName;
+        const itemAttrs = Object.assign({ href: TagName === 'a' ? this.href : null }, (this.disabled ? { role: 'link', 'aria-disabled': 'true' } : null));
+        const ListItemContent = (h(TagName, Object.assign({ class: "r-list-item" }, itemAttrs), this.isLeading &&
             h("span", { class: "r-list-item--leading" }, h("slot", { name: "leading" }, this.isLeadingIcon &&
                 h("r-icon", { class: "r-list-item--leading-icon", name: leadingIcon, src: leadingIconSrc }))), h("span", { class: "r-list-item--text" }, !this.isTextSlot ?
-            h(Fragment, null, (headline || this.isHeadlineSlot) &&
-                h("span", { class: "r-list-item--headline" }, h("slot", { name: "headline" }, headline)), (subtext || this.isSubtextSlot) &&
-                h("span", { class: "r-list-item--subtext" }, h("slot", { name: "subtext" }, subtext)))
+            h(Fragment, null, (this.isHeadlineSlot || headline) &&
+                h("span", { class: "r-list-item--headline" }, h("slot", { name: "headline" }, headline)), (description || this.isDescriptionSlot || subtext) &&
+                h("span", { class: "r-list-item--description" }, h("slot", { name: "subtext" }, subtext), h("slot", { name: "description" }, description)))
             :
                 h("slot", { name: "text" })), this.isTrailing &&
             h("span", { class: "r-list-item--trailing" }, h("slot", { name: "trailing" }, this.isTrailingIcon && !trailingText &&
@@ -119,7 +123,7 @@ export class RListItem {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The main text or title displayed in the text slot (2nd slot) of the list item."
+                    "text": "The main text or headline displayed in the text slot (2nd slot) of the list item."
                 },
                 "getter": false,
                 "setter": false,
@@ -136,6 +140,28 @@ export class RListItem {
                 },
                 "required": false,
                 "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `description` instead. Will be removed November 2025.\nSecondary text displayed below the headline (2nd slot), used for additional details or context."
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "description": {
+                "type": "string",
+                "attribute": "description",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Secondary text displayed below the headline (2nd slot), used for additional details or context."
@@ -312,7 +338,7 @@ export class RListItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": true
             },
             "disabled": {
                 "type": "boolean",

package/dist/collection/components/panel/panel.js

@@ -161,10 +161,10 @@ export class Panel {
         }
     }
     render() {
-        return (h(Host, { key: '41f14dda471fd98e8843833e3caa6814d2d14ea8', collapsed: this.isCollapsed }, h("div", { key: '5ed7abdf08500941fc6b514856456b71a2f33274', class: "r-panel" }, h("div", { key: 'f94593f5439b666da6dbd92b76a98d7d0bea071e', class: "r-panel--header" }, this.hasHeader && (h("a", { key: 'a617f6b566f29e08e689125095222f3c5dea14a2', class: "logo-wrapper", href: this.logoLink }, this.isCollapsed ?
+        return (h(Host, { key: 'f57ca21d8a782d736984c091af8ad7bede50f81b', collapsed: this.isCollapsed }, h("div", { key: '138a6e18232630123667ad328c393c93e4908cf6', class: "r-panel" }, h("div", { key: '377662f16e8fca37a557adaf4fd8329e47828303', class: "r-panel--header" }, this.hasHeader && (h("a", { key: 'f183b59e3dff6ca76905b2b52902d2e6ec6f2709', class: "logo-wrapper", href: this.logoLink }, this.isCollapsed ?
             h("slot", { name: "logo-collapsed" })
             :
-                h("slot", { name: "logo-expanded" }))), this.variant === 'modal' ? (h("r-button", { class: "r-panel--trigger", variant: "blank", title: `${this.labelCollapse}`, icon: "cross", "r-aria-label": `${this.labelCollapse}`, onClick: this.handleFullyCollapsedButtonClick })) : this.variant === 'drawer' ? (h("r-button", { class: "r-panel--trigger", variant: "blank", title: this.isCollapsed ? `${this.labelExpand}` : `${this.labelCollapse}`, icon: "angle-left", "r-aria-label": this.isCollapsed ? `${this.labelExpand}` : `${this.labelCollapse}`, onClick: this.handleSemiCollapsedButtonClick })) : this.variant === 'visible' ? (null) : null), h("div", { key: 'a2c98c21a619d955bb82de3957536cd289862994', class: "r-panel--body" }, h("slot", { key: '79a604fb1d08ad566fc75627e69f85d4a7265453' })), this.hasFooter && !this.isCollapsed && (h("div", { key: '660527840eb47c68d2d331d3f930f583bf78b743', class: "r-panel--footer" }, h("slot", { key: '34ff8e9fc74abdbe048801b4024264d7715b76d2', name: "footer" }))))));
+                h("slot", { name: "logo-expanded" }))), this.variant === 'modal' ? (h("r-button", { class: "r-panel--trigger", variant: "blank", title: `${this.labelCollapse}`, icon: "cross", "r-aria-label": `${this.labelCollapse}`, onClick: this.handleFullyCollapsedButtonClick })) : this.variant === 'drawer' ? (h("r-button", { class: "r-panel--trigger", variant: "blank", title: this.isCollapsed ? `${this.labelExpand}` : `${this.labelCollapse}`, icon: "angle-left", "r-aria-label": this.isCollapsed ? `${this.labelExpand}` : `${this.labelCollapse}`, onClick: this.handleSemiCollapsedButtonClick })) : this.variant === 'visible' ? (null) : null), h("div", { key: '0f239dc288b9c73f348341e99a06cce9e4499a0e', class: "r-panel--body" }, h("slot", { key: '6fd883065b4db924b1c245e7ea5bcf71229f0840' })), this.hasFooter && !this.isCollapsed && (h("div", { key: 'ce6a1f84358a505940d3ef04c5c218caa972b090', class: "r-panel--footer" }, h("slot", { key: 'e4422d8955e7e64babab3b3f04cfa06f32dad74a', name: "footer" }))))));
     }
     static get is() { return "r-panel"; }
     static get encapsulation() { return "shadow"; }