npm - @riverty/web-components - Versions diffs - 5.3.0 → 5.4.0 - Mend

@riverty/web-components 5.3.0 → 5.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (182) hide show

package/dist/cjs/r-popover.cjs.entry.js CHANGED Viewed

@@ -290,8 +290,8 @@ const Popover = class {
         this.open ? this.show() : this.hide();
     }
     render() {
-        return (index.h(index.Host, { key: '97457cdfa24c287c9344d06431d8ec24b0f60f2c', id: this.uniqueId, "data-position": this.positionState, "data-open": `${this.isOpen}`, open: this.isOpen }, index.h("div", { key: '5259a78e27f84a434690b6986d2b68a2cd86eae8', class: "r-popover" }, index.h("button", { key: 'a7a88bd38781fe32a65b0bcb0ebb248bd900d535', class: "r-popover--trigger", "aria-label": this.triggerAriaLabel, ref: el => this.triggerElement = el, popoverTarget: `${this.uniqueId}-board`, popoverTargetAction: this.triggerAction }, index.h("slot", { key: '410a0acd97eb45f8b50e0e4f4ea55a5bfa2fc30a', name: "trigger" })), index.h("div", { key: '2bbf7b67e1bcd75f55df613a06e29bf1091437a5', class: "r-popover--board", id: `${this.uniqueId}-board`, popover: this.dismissMode, ref: el => this.boardElement = el, onToggle: this.onToggle, onKeyDown: this.onKeyDown }, this.hasDismiss &&
-            index.h("r-icon-button", { key: '4123f71340a6faa796b502359748f7e50b8a7e2b', ref: el => this.dismissElement = el, class: "r-popover--dismiss", name: "cross", onClick: this.onClickDismiss, label: this.dismissAriaLabel }), index.h("div", { key: '8d6d141a95e876c6b4b9b9f3b905745b185bceb3', class: "r-popover--board-content" }, index.h("slot", { key: '26ac7820a39f25ef10d36bdc20e29e18470e9042', name: "headline" }), index.h("slot", { key: '64294c1c622c0bc74ca1c07513aabb6e5ece6aef', name: "content" }), index.h("slot", { key: '275addac9a634745f3cef561016a07588c5c13d5', name: "action" })), index.h("div", { key: '3b6008e840e72a5f504d6b3afdc04bd5e16660e8', class: "r-popover--board-pointer", "aria-hidden": "true" }, index.h("svg", { key: '92f668019fe87ec8c3ff0531358c214703501f2f', width: "16", height: "8", viewBox: "0 0 16 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'a9c13600596604977bee488b7cc6ac9351278eac', d: "M8 8L0 0L16 0L8 8Z", fill: "currentColor" })))))));
+        return (index.h(index.Host, { key: 'da45eae6a21cc01596344d33afc5def4da57967f', id: this.uniqueId, "data-position": this.positionState, "data-open": `${this.isOpen}`, open: this.isOpen }, index.h("div", { key: 'ad832de894e0af250cc93bdf3158032bc252740f', class: "r-popover" }, index.h("button", { key: '28c4938bb02cb7c4eaed074178dda00c2c39a0b7', class: "r-popover--trigger", "aria-label": this.triggerAriaLabel, ref: el => this.triggerElement = el, popoverTarget: `${this.uniqueId}-board`, popoverTargetAction: this.triggerAction }, index.h("slot", { key: '0a74ac9d6a7ecdba54771e733f8db5af1709e7fb', name: "trigger" })), index.h("div", { key: 'dbdb43df6a9823f5d8c954146347f40438bbf053', class: "r-popover--board", id: `${this.uniqueId}-board`, popover: this.dismissMode, ref: el => this.boardElement = el, onToggle: this.onToggle, onKeyDown: this.onKeyDown }, this.hasDismiss &&
+            index.h("r-icon-button", { key: '99cb4c1c050cdf197346ef84f7c610f5f6ed0b4c', ref: el => this.dismissElement = el, class: "r-popover--dismiss", name: "cross", onClick: this.onClickDismiss, label: this.dismissAriaLabel }), index.h("div", { key: 'fe7e18bd38a4f3879aada14169bfa50f84cd2eac', class: "r-popover--board-content" }, index.h("slot", { key: 'b5674f8f2f72340cf5af712f513a20bda9e04b47', name: "headline" }), index.h("slot", { key: '024ce9cc17f041df172d853176d09f4ec493df20', name: "content" }), index.h("slot", { key: '437ca7707856b7c6db59240d7b4378c74dc8fda8', name: "action" })), index.h("div", { key: '93184bd493520dbea03c7c63bbfe8c4ae788cde3', class: "r-popover--board-pointer", "aria-hidden": "true" }, index.h("svg", { key: '779d8b7df8f92ea14517ce9ce5099a73a4fdeac8', width: "16", height: "8", viewBox: "0 0 16 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '53b9fee3e6a34cf184d8818ac272122f04193ff6', d: "M8 8L0 0L16 0L8 8Z", fill: "currentColor" })))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/r-progress-bar.cjs.entry.js CHANGED Viewed

@@ -17,7 +17,7 @@ const ProgressBar = class {
             max: '100',
             'aria-label': rAriaLabel
         };
-        return (index.h(index.Host, { key: 'e8868dda542215eaef7976754f9458cd11b294ca' }, index.h("progress", Object.assign({ key: '21e30cf663e41166cc2713ddf6f8fce0c1637f4c' }, progressBarAttrs, { class: "r-progress-bar" }))));
+        return (index.h(index.Host, { key: '81203123d2df8fb029855f39dc359b98991630ee' }, index.h("progress", Object.assign({ key: 'f766b44c2c4088ab67d69b57de074fee15be166c' }, progressBarAttrs, { class: "r-progress-bar" }))));
     }
 };
 ProgressBar.style = progressBarCss;

package/dist/cjs/r-radio-button-description.cjs.entry.js CHANGED Viewed

@@ -9,7 +9,7 @@ const RadioButtonDescription = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '03dc8dcc6c436f7f5bc5071d07a646c61043dde2', slot: "description" }, index.h("div", { key: 'ba783c5bab50ebdcffa305656794ae9118ecea8f', class: "r-radio-button-description", style: { display: 'contents' } }, index.h("slot", { key: 'e48291f926854844aee6349e36881389dd51340b' }))));
+        return (index.h(index.Host, { key: '83668642a70a083a0db012ad4e80aa31eeb08b85', slot: "description" }, index.h("div", { key: '12530fbda5f2789443e7d78237ba633922d97683', class: "r-radio-button-description", style: { display: 'contents' } }, index.h("slot", { key: 'a62b23dc0e9ea5f80660e9e97a45a4f1aef50c24' }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/r-radio-button-leading.cjs.entry.js CHANGED Viewed

@@ -9,7 +9,7 @@ const RadioButtonLeading = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '34fe967634986121059a0b8450ee562a6ac6d573', slot: "leading" }, index.h("div", { key: '67c2b15bc226b8409dcfc2fb853d86c81855dcf3', class: "r-radio-button-leading", style: { display: 'contents' } }, index.h("slot", { key: 'e09bdd431f1d0b37dd9a4dbe644ca812443a7a85' }))));
+        return (index.h(index.Host, { key: '802f0d0c98c87abb566dd2ef0388d6d6237dba68', slot: "leading" }, index.h("div", { key: '4c0296adc5dd6839dd150450f0be62e92a810d7c', class: "r-radio-button-leading", style: { display: 'contents' } }, index.h("slot", { key: '16b6131307cbaa02e1182b204ded280fa903da0a' }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/r-radio-button-title.cjs.entry.js CHANGED Viewed

@@ -9,7 +9,7 @@ const RadioButtonTitle = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'd06b4027ea034b9ca1acb6735127c3d0c1c65657', slot: "title" }, index.h("div", { key: 'fc132609c9d5836bf9da84acdf5773dfde0aaf66', class: "r-radio-button-title", style: { display: 'contents' } }, index.h("slot", { key: '5cc06ddda7c68040eae436706b516f9ab4814c19' }))));
+        return (index.h(index.Host, { key: '623feed7834a4702b83257202de4505b6c08145d', slot: "title" }, index.h("div", { key: 'ca7b90c670583ba4a874df1da73dad9db67d0bf7', class: "r-radio-button-title", style: { display: 'contents' } }, index.h("slot", { key: 'fd7ac8a7ee5e2cd05dab3d061328eecb5ee14800' }))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -9,7 +9,7 @@ const RadioButtonTrailing = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '814f19c2ea6d57005b483d90f7d3fb1ec2a544e8', slot: "trailing" }, index.h("div", { key: '1a0b931732af9cf8c124498b86f49f10f28bbbac', class: "r-radio-button-trailing", style: { display: 'contents' } }, index.h("slot", { key: '8bf011bdb804a7c570feed9f9dfcf693a0b1fbd1' }))));
+        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' }))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -108,11 +108,11 @@ const RadioButton = class {
             checked,
             required
         };
-        return (index.h(index.Host, { key: '5fd29cf01b56497cb4b472a68c6f8e282f714504' }, index.h("label", { key: '92f10d15e5adde0b15ba4d845934b72c5cf82f1d', class: "r-radio-button", onClick: this.onClick, onKeyDown: this.onKeydown }, index.h("input", Object.assign({ key: '353161af87ff131f731f0392c857870dd2c4aa63' }, inputAttrs, { id: `${uniqueId}-input`, class: "r-radio-button--input", ref: el => this.nativeEl = el, onFocus: this.onFocus, onBlur: this.onBlur })), index.h("span", { key: '405a2464a8f02bfc336d24b2fabb89b279177d1a', class: "r-radio-button--box" }), this.isLeading &&
-            index.h("div", { key: '591ad269746081f555b01042a15a70f4e6190019', class: "r-radio-button--leading" }, index.h("slot", { key: '73ce02de7748b5a52a178f23878894cd3d547526', name: "leading" }, this.icon && index.h("r-icon", { key: 'eef064fa4aa3e5e8afb47ff236d1fd61808b562c', name: this.icon, size: "m" }))), index.h("div", { key: '598e907e04f2e608b0b5797419e0c1dbfb3d1027', class: "r-radio-button--text" }, index.h("slot", { key: '727d28f61edcedd691811deb4d11b04f28d4d94e', name: "title" }, index.h("div", { key: '7c28eea698f22ef148521c593b29967faa1894b5', style: { display: 'contents' } }, index.h("slot", { key: '2baf89cb3b504485e66cfc078aaed56702faa542' }))), index.h("slot", { key: 'f597341e0193cdd16823f034d13afdfa2df67816', name: "description" }, this.description)), this.isTrailing &&
-            index.h("div", { key: 'c3fd194482bff5ae857ddd8dcfb66d40469a15db', class: "r-radio-button--trailing" }, index.h("slot", { key: 'b10cfea0a55b071a1917af1dd54dec0d4cc52eec', name: "trailing" }))), invalid && error &&
-            index.h("r-hint", { key: '6394f698090d9560afd362e17d01aec2866d20c3', role: "alert", variant: "error", id: `${uniqueId}-hint` }, this.error), hint &&
-            index.h("r-hint", { key: '991941fa0d633872e37e7028ea78ed7914aa8f69', role: "note", variant: "information", id: `${uniqueId}-hint` }, hint)));
+        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)));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -338,12 +338,12 @@ const RadioGroup = class {
             'tooltip-icon': tooltipIcon,
             'tooltip-icon-color': tooltipIconColor
         };
-        return (index.h(index.Host, { key: '93b34ec896a3a8eff21f5134388970485ac8dd53' }, index.h("div", { key: '24a685577ca7d38602b5a68200d349b4ccf6ef7f', class: "r-radio-group", onClick: this.onLabelClick }, label &&
-            index.h("div", { key: '983a9797b4fa2dca5f3702018942a38e3e2efeb4', class: "r-radio-group--label-container" }, index.h("r-label", Object.assign({ key: 'cef4c2d592f245400865ae5401e08c4d1212d0d9', id: `${uniqueId}-label`, class: "r-radio-group--label", "field-indicator": fieldIndicator }, labelAttr), label), index.h("slot", { key: '07c1e821c658750bee2421e993e162f58f9b8c92', name: "popover" })), hint &&
-            index.h("r-hint", { key: '3dac68fd457583d6e9d00a76ac62413dc67fcaf1', id: `${uniqueId}-hint`, class: "r-radio-group--hint", role: "note" }, hint), index.h("div", { key: '42b55825383b7a2d1229ef744899c9297a8db2d5', class: "r-radio-group--content" }, index.h("slot", { key: '7eb4e0536b93390f97e260c827a9fd0729828f09' }))), invalid && error &&
-            index.h("r-hint", { key: '88afb96001867cc0a111fcc0629cc98961181b29', "aria-live": "polite", id: `${uniqueId}-message`, role: "alert", variant: "error" }, error), this.validityState !== 'valid' && this.validityMessage &&
-            index.h("r-hint", { key: 'ed9bec675b28bf7fa7df3c3270f193b2645a7f2a', "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: 'd4e1d4cc3bf26f6e0cf167b16cb547463083ccdf', role: "alert", variant: "success" }, this.validMessage)));
+        return (index.h(index.Host, { key: '899b3d8d509fa3d6f37a81279e6fc58b98e1314c' }, index.h("div", { key: 'dc1c47c966aac6ebaab2b8ec9061342b6c1e81e3', class: "r-radio-group", onClick: this.onLabelClick }, label &&
+            index.h("div", { key: '5b39dcc6952d971f8c03e2dab554b25bb1be3ccf', class: "r-radio-group--label-container" }, index.h("r-label", Object.assign({ key: '7f13b1571bccb986a0e36903399c8f15536de539', id: `${uniqueId}-label`, class: "r-radio-group--label", "field-indicator": fieldIndicator }, labelAttr), label), index.h("slot", { key: 'bfd151ce64e670722a6a1f3254763b6f514c99ab', name: "popover" })), hint &&
+            index.h("r-hint", { key: 'edb8bbe44470579a5638e5dbee0b7b843cc998b4', id: `${uniqueId}-hint`, class: "r-radio-group--hint", role: "note" }, hint), index.h("div", { key: '1727429f1c36de0fd13567af448aed7c84f7c7b1', class: "r-radio-group--content" }, index.h("slot", { key: 'f7d712be6351c44e5f072f85a407b5e73837b48b' }))), invalid && error &&
+            index.h("r-hint", { key: '71feb492e87164e485bb10a0e856d86ef3c57a7d', "aria-live": "polite", id: `${uniqueId}-message`, role: "alert", variant: "error" }, error), this.validityState !== 'valid' && this.validityMessage &&
+            index.h("r-hint", { key: '0ddc4636948329a97e8140c9efc267a4a054ff3b', "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: 'e7cfa4eccf754e90ad30b22b24dd9f2ce1fcadc8', role: "alert", variant: "success" }, this.validMessage)));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -121,7 +121,7 @@ const SelectOption = class {
             size: iconSize,
             color: iconColor
         };
-        return (index.h(index.Host, { key: '467ac8b74264d2f2f740b5b6f96d039dc115ddb7', 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: '87d196b275c294484a231e5552eb42a5af7c5ad1', class: "r-select-option" }, icon && index.h("span", { key: '9183fe3aec0f7f5c2603d5b99fd093dc36fd3c32', class: "r-select-option--icon" }, index.h("r-icon", Object.assign({ key: 'f62b4f8737a9b11a80d6e22fc446e40a3bb71878' }, iconAttributes))), !icon && hasIconSlot && index.h("span", { key: 'c9345f92aa2792f3d4a0389b3830c431f655e066', class: "r-select-option--icon" }, index.h("slot", { key: 'caef47ad8b2c00405f1bf104e780b135e511f8a3', name: "icon" })), index.h("span", { key: '595b5714234cedf49b62261d14f00d4e1fd5a9ac', class: "r-select-option--label" }, index.h("slot", { key: 'a9b5ac0c55b56455d7383fad563a20e7b9ad91a9' })))));
+        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' })))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -867,8 +867,9 @@ const Select = class {
         const isTopSpace = ((_b = this.listboxElement) === null || _b === void 0 ? void 0 : _b.offsetHeight) < this.top;
         const isTop = this.listboxPosition === 'top';
         const isBottom = this.listboxPosition === 'bottom';
-        // Don't change the position if there is sufficient space for the listbox
-        // or insufficient space for another position.
+        /** Don't change the position if there is sufficient space for the listbox
+         * or insufficient space for another position.
+         * */
         if ((isTop && (isTopSpace || !isBottomSpace)) || (isBottom && (isBottomSpace || !isTopSpace))) {
             this.listboxPositionState = this.listboxPosition;
             return;
@@ -1006,8 +1007,8 @@ const Select = class {
             disabled,
             required: isRequired
         };
-        return (index.h(index.Host, { key: '919d154342bf1d30326cd32187ed227e6955b460', "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: '4e9002080a63a939414c9aa36ffd3e5e0a02ebc4', class: `r-select--label ${!internal ? 'r-select--label__margin-bottom' : ''}` }, index.h("div", { key: '4a214d8293680bfee404cb584cde7afcb0580e90', class: internal ? 'visually-hidden' : 'r-select--label-container' }, index.h("label", { key: 'bf2baabc8e75e774e80c7db3bdaa112224f6d47b', id: `${uniqueId}-label`, onClick: this.isInteractive ? this.onValueClick : null }, index.h("r-label", Object.assign({ key: 'bfdf31db17b8ac9bdf966d63d828d19e1711c6d6' }, labelAttr), label)), index.h("slot", { key: '3889db21fdeb08954f17cbc4fa8dca259cb8f6f3', name: "popover" })), hint &&
-            index.h("r-hint", { key: 'c311478949c31e1be31d3c0ff2311a5611c46dce', id: `${uniqueId}-hint`, class: "r-select--hint" }, hint)), index.h("div", { key: '0d39becaf6e1031e19d4a20d2b76a32b3469a24a', class: "r-select" }, index.h("select", Object.assign({ key: '879cbe707b655cfd212d4977ab745c1d4920ba74', class: "r-select--native", ref: el => this.nativeElement = el }, nativeAttrs)), index.h("div", { key: '0603eb24d1f9b06789e877a3d2a9370a22d29552', class: "r-select--container" }, this.combobox ? this.renderCombobox(comboboxAttrs) : this.renderSelect(comboboxAttrs), index.h("div", Object.assign({ key: '1fbf379f5b1dc9685f255b337430fdc0d060e2ba', 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: '8fc9b2ab331af1723d2698b9d226255237d1e71b', "data-no-results": "true", value: "no_results" }, this.noResultsFound), index.h("slot", { key: '545bf9aa13ccc535f6974550fd982e7b34069c13', onSlotchange: this.handleSlotChange })))), index.h("div", { key: 'f3d0eb3adfd818070a1f4dcc6eb8b5d7e2eef042', 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: 'c1068cc9ddd6e7d77fb579e8bceb1daf4295a8a0', variant: this.invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && this.validityMessage, this.hasValidationSuccess && this.validMessage))));
+        return (index.h(index.Host, { key: 'aca9ddac308a41221f08de7fde92f45fcd89162f', "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: '34c00c70c0b73cdd7afdcd65f175a94e82c900d2', class: `r-select--label ${!internal ? 'r-select--label__margin-bottom' : ''}` }, index.h("div", { key: '5a2b30341687b152eb17c2fc5ca2f65b1fda886f', class: internal ? 'visually-hidden' : 'r-select--label-container' }, index.h("label", { key: '10021c02cfe8a697ee3a0e452e0052044f2b80a7', id: `${uniqueId}-label`, onClick: this.isInteractive ? this.onValueClick : null }, index.h("r-label", Object.assign({ key: 'cc7173f5b427c9fca7e08a12552227d3f20ad64c' }, labelAttr), label)), index.h("slot", { key: '625e1bd9f1fa11950ff75e1875e03510f55022c0', name: "popover" })), hint &&
+            index.h("r-hint", { key: '6d22db79a4375ddd901f5ea6b25d9c456e8f1ab2', id: `${uniqueId}-hint`, class: "r-select--hint" }, hint)), index.h("div", { key: 'a243a731bdd150386ea47ad0897831b37eed6621', class: "r-select" }, index.h("select", Object.assign({ key: 'e1878ed06636fad3768d8b4b1f4a944d30730346', class: "r-select--native", ref: el => this.nativeElement = el }, nativeAttrs)), index.h("div", { key: 'b47cd423033129e827a99f8fcff39173f4c74ed9', class: "r-select--container" }, this.combobox ? this.renderCombobox(comboboxAttrs) : this.renderSelect(comboboxAttrs), index.h("div", Object.assign({ key: '04db58929d97226614d344f7f419c3e8aa7e250d', 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: 'b23380c2c75c33e6a8a99737189c43400e29940b', "data-no-results": "true", value: "no_results" }, this.noResultsFound), index.h("slot", { key: '83e215daafbd8909f9788e8918691b08417a5f2d', onSlotchange: this.handleSlotChange })))), index.h("div", { key: '57acdd7994fa67813e60641493e99f29afafcaf4', 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: 'f14bc3026b6bee74b1192f37af64381958c0c87b', variant: this.invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && this.validityMessage, this.hasValidationSuccess && this.validMessage))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

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

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

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

@@ -17,8 +17,8 @@ const StepperItem = class {
     }
     render() {
         const number = this.number || this.stepNumber;
-        return (index.h(index.Host, { key: 'da138932ffd8de4f13e7d50862fa99d279c0a10d' }, index.h("div", { key: 'f4f1f7c771468414dc17e0e6334221420090997a', class: "r-stepper-item" }, index.h("div", { key: '55feda971e674ca7acff8fa61e394054d292f891', 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: '4bf7e992a5420fe8b4333cf95c128ff13e4fd89f', class: "r-stepper-item--text" }, index.h("slot", { key: '4aa4a9bf18fc17cdf15db2b922349f8b4a29e0d8' })))));
+        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' })))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -17,7 +17,7 @@ const Stepper = class {
     }
     render() {
         const completed = this.completed || this.completeSteps;
-        return (index.h(index.Host, { key: '188b896d5ce5a5380c8258e7c9e39e968badc0e6' }, index.h("div", { key: 'b7f8f02949bb732a88fef51176b25c21fbfface1', 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: 'fc60a9cefbce012cfb21ba8c041eb585a357624c' }))));
+        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' }))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -18,7 +18,7 @@ const RTabPanel = class {
             active,
             'aria-labelledby': tabId
         };
-        return (index.h(index.Host, Object.assign({ key: '26f9bb415d9162e2a82eaa61be9ac1477c91d51e', class: "r-typography" }, hostAttrs), index.h("div", { key: '46be39dbd6394e5a872284cc864add5dd8d79854', class: "r-tab-panel" }, index.h("slot", { key: '3a513eb00287cf979c2ba3351d783b90e374be24' }))));
+        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' }))));
     }
 };
 RTabPanel.style = tabPanelCss;

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

@@ -49,7 +49,7 @@ const RTab = class {
             'aria-selected': `${active}`,
             'aria-disabled': `${disabled}`
         };
-        return (index.h(index.Host, Object.assign({ key: '37eb79a81d963b2a5b4f89043dd831b036b2a339', onClick: this.handleClick, onKeyUp: this.handleKeyup, onKeyDown: this.handleKeydown }, hostAttrs), index.h("span", { key: '20fd97865f8fd74912cdf857b52bc566238575b0', class: "r-tab" }, index.h("span", { key: '2b24c42f48edc27363fe2e8ed1c6851abd2a0dc1', class: "r-tab--slot" }, index.h("slot", { key: 'aaffeb47872fd819f1a24fce1dcd36f8b22347e2' })))));
+        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' })))));
     }
     get host() { return index.getElement(this); }
 };

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

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

package/dist/cjs/r-tabs.cjs.entry.js CHANGED Viewed

@@ -70,8 +70,8 @@ const RTabs = class {
             var _a, _b;
             const label = this.transliterateToKebabCase(tab.textContent);
             // Unique id per each tab-panel pair
-            const tabId = `${label}`;
-            const panelId = `${label}`;
+            const tabId = `r-tab-${label}`;
+            const panelId = `r-tab-panel-${label}`;
             // Assign `id` and `panel-id` to each tab
             tab.setAttribute('id', tabId);
             tab.setAttribute('panel-id', panelId);
@@ -240,7 +240,7 @@ const RTabs = class {
         this._changeFocusTab(e.target, e.detail.keycode);
     }
     render() {
-        return (index.h(index.Host, { key: 'b2d361ad869c33389b918cf967fe06f58ba8f6f1', class: "r-tabs" }, index.h("slot", { key: 'bcaa889ee5a556693916b78a67dcfa2805894cbf' })));
+        return (index.h(index.Host, { key: 'ddb0847ae3eb4a03c446b2dd193f2fa9603081df', class: "r-tabs" }, index.h("slot", { key: 'd60346bd45b58534e6ac922ac66c09c1bb04c532' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/r-textarea.cjs.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@
 var index = require('./index-BnETQtSf.js');
 var formData = require('./formData-B2DZyLxP.js');
-const textareaCss = ":host{opacity:1;display:block;outline:none;--r-label--margin-bottom:0}:host(:focus-visible){outline:none}:host([resize=none]){--r-textarea--input--resize:none}:host([resize=both]){--r-textarea--input--resize:both}:host([resize=horizontal]){--r-textarea--input--resize:horizontal}:host([resize=vertical]){--r-textarea--input--resize:vertical}:host([resize=initial]){--r-textarea--input--resize:initial}:host([resize=inherit]){--r-textarea--input--resize:inherit}:host([invalid]:not([invalid=false])){--r-textarea--input--background-color:var(--r-status-error-soft, #fef6f6);--r-textarea--input--border-color:var(--r-status-error-regular, #da1e28)}.r-textarea--label-container{display:var(--r-textarea--label-container--display, flex);gap:var(--r-textarea--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-textarea--label-container--align-items, center);justify-content:var(--r-textarea--label-container--align-items, space-between)}.r-textarea--label-container ::slotted([slot=popover]){display:var(--r-textarea--popover--display, inline-flex);height:var(--r-textarea--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-textarea--popover--align-items, center);justify-content:var(--r-textarea--popover--justify-content, center);margin-right:var(--r-textarea--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-textarea--popover-trigger--min-width, var(--r-spacing-150, 1.5))}.r-textarea--input:hover:not([disabled]:not([disabled=false])){--r-textarea--input--background-color:var(--r-background-interactive-hovered)}.r-textarea--input:active:not([disabled]:not([disabled=false])){--r-textarea--input--background-color:var(--r-background-interactive-pressed)}.r-textarea--input:focus-visible{--r-textarea--input--box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);--r-textarea--input--outline:2px solid var(--r-border-focused, #0071e3);--r-textarea--input--outline-offset:2px}.r-textarea--input::placeholder{color:var(--r-textarea--input--placeholder--color, var(--r-text-soft, #686868))}.r-textarea--input[disabled]:not([disabled=false]),.r-textarea--input[disabled]:not([disabled=false]):hover{--r-textarea--input--opacity:0.4;--r-textarea--input--cursor:not-allowed;--r-textarea--input--pointer-events:none}.r-textarea--input{width:var(--r-textarea--input--width, 100%);max-width:var(--r-textarea--input--max-width, 100%);min-height:var(--r-textarea--input--min-height, 8.875em);font-family:var(--r-textarea--input--font-family, var(--r-font-family-text, system-ui));font-weight:var(--r-textarea--input--font-weight, var(--r-font-weight-regular, 400));font-size:var(--r-textarea--input--font-size, var(--r-font-size-400, 1rem));line-height:var(--r-textarea--input--line-height, var(--r-line-height-m, 1.5));color:var(--r-textarea--input--color, var(--r-text-regular, #282828));background-color:var(--r-textarea--input--background-color, var(--r-background-interactive-softest, #f7f7f7));opacity:var(--r-textarea--input--opacity, 1);border-width:var(--r-textarea--input--border-width, 1px);border-style:var(--r-textarea--input--border-style, solid);border-color:var(--r-textarea--input--border-color, var(--r-border-soft, #686868));border-radius:var(--r-textarea--input--border-radius, 0);box-sizing:var(--r-textarea--input--box-sizing, border-box);box-shadow:var(--r-textarea--input--box-shadow, none);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, var(--r-spacing-025, 0.25rem));resize:var(--r-textarea--input--resize, both);z-index:var(--r-textarea--input--z-index, 1);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);cursor:var(--r-textarea--input--cursor, inherit)}.r-textarea--messages{display:flex;gap:var(--r-textarea--messages--gap, var(--r-spacing-025, 0.25rem))}.r-textarea--messages--counter{margin-left:auto}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
+const textareaCss = ":host{opacity:1;display:block;outline:none;--r-label--margin-bottom:0}:host(:focus-visible){outline:none}:host([resize=none]){--r-textarea--input--resize:none}:host([resize=both]){--r-textarea--input--resize:both}:host([resize=horizontal]){--r-textarea--input--resize:horizontal}:host([resize=vertical]){--r-textarea--input--resize:vertical}:host([resize=initial]){--r-textarea--input--resize:initial}:host([resize=inherit]){--r-textarea--input--resize:inherit}:host([invalid]:not([invalid=false])){--r-textarea--container--background-color:var(--r-status-error-soft, #fef6f6);--r-textarea--container--border-color:var(--r-status-error-regular, #da1e28)}.r-textarea--label-container{display:var(--r-textarea--label-container--display, flex);gap:var(--r-textarea--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-textarea--label-container--align-items, center);justify-content:var(--r-textarea--label-container--align-items, space-between)}.r-textarea--label-container ::slotted([slot=popover]){display:var(--r-textarea--popover--display, inline-flex);height:var(--r-textarea--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-textarea--popover--align-items, center);justify-content:var(--r-textarea--popover--justify-content, center);margin-right:var(--r-textarea--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-textarea--popover-trigger--min-width, var(--r-spacing-150, 1.5))}.r-textarea--input::placeholder{color:var(--r-textarea--input--placeholder--color, var(--r-text-soft, #686868))}.r-textarea--input{vertical-align:top;width:var(--r-textarea--input--width, 100%);max-width:var(--r-textarea--input--max-width, 100%);min-height:var(--r-textarea--input--min-height, 8.875em);font-family:var(--r-textarea--input--font-family, var(--r-font-family-text, system-ui));font-weight:var(--r-textarea--input--font-weight, var(--r-font-weight-regular, 400));font-size:var(--r-textarea--input--font-size, var(--r-font-size-400, 1rem));line-height:var(--r-textarea--input--line-height, var(--r-line-height-m, 1.5));color:var(--r-textarea--input--color, var(--r-text-regular, #282828));background-color:var(--r-textarea--input--background-color, transparent);opacity:var(--r-textarea--input--opacity, 1);border-width:var(--r-textarea--input--border-width, 0px);border-style:var(--r-textarea--input--border-style, solid);border-color:var(--r-textarea--input--border-color, var(--r-border-soft, #686868));border-radius:var(--r-textarea--input--border-radius, 0);box-sizing:var(--r-textarea--input--box-sizing, border-box);box-shadow:var(--r-textarea--input--box-shadow, none);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);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);cursor:var(--r-textarea--input--cursor, inherit)}.r-textarea--container{display:flex;align-items:start;overflow:visible;background-color:var(--r-textarea--container--background-color, var(--r-background-interactive-softest, #f7f7f7));border-width:var(--r-textarea--container--border-width, 1px);border-style:var(--r-textarea--container--border-style, solid);border-color:var(--r-textarea--container--border-color, var(--r-border-soft, #686868));padding:var(--r-textarea--container--padding, 0);margin-top:var(--r-textarea--container--margin-top, var(--r-spacing-025, 0.25rem));box-shadow:var(--r-textarea--container--box-shadow, none);outline:var(--r-textarea--container--outline, none);outline-offset:var(--r-textarea--container--outline-offset, none)}.r-textarea--container[data-readonly=true]{--r-textarea--container--background-color:var(--r-background-soft, #f3f1f0);--r-textarea--container--border-color:transparent transparent var(--r-border-soft, #686868) transparent;--r-textarea--container--cursor:text}.r-textarea--container:hover:not([data-disabled=true]):not([data-readonly=true]){--r-textarea--container--background-color:var(--r-background-interactive-hovered)}.r-textarea--container:active:not([data-disabled=true]):not([data-readonly=true]){--r-textarea--container--background-color:var(--r-background-interactive-pressed)}.r-textarea--container:focus-within{--r-textarea--container--box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);--r-textarea--container--outline:2px solid var(--r-border-focused, #0071e3);--r-textarea--container--outline-offset:2px}.r-textarea--trailing{display:var(--r-textarea--trailing--display, flex);margin-top:var(--r-textarea--trailing--margin-top, 0.688em);margin-right:var(--r-textarea--trailing--margin-right, 0.625em);margin-left:var(--r-textarea--trailing--margin-left, auto);gap:var(--r-textarea--trailing--gap, 0.625rem)}.r-textarea--trailing:empty{display:none}.r-textarea--readonly-icon{color:var(--r-textarea--readonly-icon--color, var(--r-icon-soft, #686868))}.r-textarea--messages{display:flex;gap:var(--r-textarea--messages--gap, var(--r-spacing-025, 0.25rem))}.r-textarea--messages--counter{margin-left:auto}.r-textarea--messages:has(r-hint){margin-top:var(--r-spacing-025, 0.25rem)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
 const RTextarea = class {
     constructor(hostRef) {
@@ -39,6 +39,8 @@ const RTextarea = class {
         /** Unique id */
         this.uniqueId = `r-textarea-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
         this.onInput = event => {
+            if (this.readonly)
+                return;
             this.value = event.target.value;
             this.validateFormElement(this.nativeElement);
             const { host, value } = this;
@@ -51,6 +53,8 @@ const RTextarea = class {
             }
         };
         this.onChange = event => {
+            if (this.readonly)
+                return;
             this.value = event.target.value;
             this.validateFormElement(this.nativeElement);
             const { host, value } = this;
@@ -66,6 +70,8 @@ const RTextarea = class {
             }
         };
         this.onResetForm = () => {
+            if (this.readonly)
+                return;
             // Return to initial state
             this.validityState = null;
             this.validityMessage = null;
@@ -109,6 +115,8 @@ const RTextarea = class {
     }
     /** Sets the value of the element. */
     async setValue(value) {
+        if (this.readonly)
+            return;
         this.value = value;
     }
     /** Gets the value of the element. */
@@ -117,6 +125,8 @@ const RTextarea = class {
     }
     /** Resets value and validity state to initial. */
     async reset() {
+        if (this.readonly)
+            return;
         this.validityState = null;
         this.validityMessage = null;
         this.value = this.initial['value'];
@@ -183,6 +193,9 @@ const RTextarea = class {
             this.novalidate ||
             false);
     }
+    get hasTrailingSlot() {
+        return !!this.host.querySelector('[slot="trailing"]');
+    }
     get textareaSlotValue() {
         return this.host.textContent;
     }
@@ -209,7 +222,7 @@ const RTextarea = class {
         this.disconnectFormEventListeners();
     }
     render() {
-        const { name, rows, cols, placeholder, required, showCounter, maxlength, minlength, form, value, disabled, resize, hint, invalid, label, uniqueId, fieldIndicator, tooltip, tooltipIcon, tooltipIconColor } = this;
+        const { name, rows, cols, placeholder, required, showCounter, maxlength, minlength, form, value, disabled, resize, hint, invalid, label, uniqueId, fieldIndicator, tooltip, tooltipIcon, tooltipIconColor, readonly } = this;
         const textareaAttrs = {
             name,
             rows,
@@ -222,6 +235,7 @@ const RTextarea = class {
             value,
             disabled,
             resize,
+            readonly,
             id: uniqueId,
             'aria-describedby': this.ariaDescribedBy,
             'aria-invalid': `${!!invalid}`,
@@ -245,7 +259,7 @@ const RTextarea = class {
         }, {});
         return (index.h(index.Host, null, index.h("div", { class: "r-textarea--label-container" }, index.h("label", { htmlFor: uniqueId }, label &&
             index.h("r-label", Object.assign({ id: `${uniqueId}-label` }, labelAttr), label)), index.h("slot", { name: "popover" })), hint &&
-            index.h("r-hint", { id: `${uniqueId}-hint`, role: "note" }, hint), index.h("textarea", Object.assign({ class: "r-textarea--input" }, textareaAttrs, eventListeners, { ref: el => this.nativeElement = el, onChange: this.onChange, onInput: this.onInput })), index.h("div", { class: "r-textarea--messages" }, index.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 && index.h("r-hint", { "aria-hidden": true, class: "r-textarea--messages--counter" }, value.length, "/", maxlength), maxlength &&
+            index.h("r-hint", { id: `${uniqueId}-hint`, role: "note" }, hint), index.h("div", { class: "r-textarea--container", "data-disabled": `${!!disabled}`, "data-readonly": `${!!readonly}` }, index.h("textarea", Object.assign({ class: "r-textarea--input" }, textareaAttrs, eventListeners, { ref: el => this.nativeElement = el, onChange: this.onChange, onInput: this.onInput })), index.h("div", { class: "r-textarea--trailing" }, this.readonly && index.h("r-icon", { class: "r-textarea--readonly-icon", name: "pen-disabled", size: "s" }), this.hasTrailingSlot && index.h("slot", { name: "trailing" }))), index.h("div", { class: "r-textarea--messages" }, index.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 && index.h("r-hint", { "aria-hidden": true, class: "r-textarea--messages--counter" }, `${value.length}${maxlength ? '/' : ''}${maxlength}`), maxlength &&
             index.h("div", { class: "visually-hidden", ref: el => this.characterLimitReachedAlert = el, "aria-live": "assertive" }))));
     }
     get host() { return index.getElement(this); }

package/dist/cjs/r-toast-group.cjs.entry.js CHANGED Viewed

@@ -18,7 +18,7 @@ const ToastGroup = class {
         this.updateHiddenState();
     }
     render() {
-        return (index.h(index.Host, { key: '08295a30da71cd722c6bac43859958b73ba66f67' }, index.h("div", { key: '74153035c46d0dd8951e7e380d28dcf924d2772b', class: "r-toast-group" }, index.h("slot", { key: '5f550f96d9dad032c71f5f99194b15c133d08cc3', onSlotchange: this.updateHiddenState }))));
+        return (index.h(index.Host, { key: 'cd72702e1eee0d746e85c2022038972dea391dba' }, index.h("div", { key: '86bce60683eab444715fa266d39cada11bf19ce4', class: "r-toast-group" }, index.h("slot", { key: '594c29dc3b2ba4762d8a5b7876a47923d11f6f86', onSlotchange: this.updateHiddenState }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/r-toast.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 var index = require('./index-BnETQtSf.js');
-const toastCss = ":host([status=info]){--r-toast--border-color:var(--r-status-info-regular, #466882);--r-toast--background-color:var(--r-status-info-soft, #f8fafb);--r-toast--leading-icon--color:var(--r-status-info-regular, #466882)}:host([status=warning]){--r-toast--border-color:var(--r-status-warning-regular, #f26a20);--r-toast--background-color:var(--r-status-warning-soft, #fef9f5);--r-toast--leading-icon--color:var(--r-status-warning-strong, #89411A)}:host([status=error]){--r-toast--border-color:var(--r-status-error-regular, #da1e28);--r-toast--background-color:var(--r-status-error-soft, #fef6f6);--r-toast--leading-icon--color:var(--r-status-error-regular, #da1e28)}:host([status=success]){--r-toast--border-color:var(--r-status-success-regular, #298535);--r-toast--background-color:var(--r-status-success-soft, #f7fdf8);--r-toast--leading-icon--color:var(--r-status-success-regular, #298535)}:host([is-content=false]){--r-toast--content--display:none}:host([headline]){--r-toast--content--margin-top:var(--r-spacing-050, 0.5rem)}:host([aria-hidden=true]){--r-toast--host--transition:all 0.15s;--r-toast--host--transition-delay:0.15s;--r-toast--host--opacity:0;--r-toast--host--height-expanded:0}:host{animation-duration:var(--r-toast--host--animation-duration, 0.3s);animation-fill-mode:var(--r-toast--host--animation-fill-mode, forwards);animation-name:var(--r-toast--host--animation-name, none);box-sizing:var(--r-toast--host--box-sizing, border-box);display:var(--r-toast--host--display, block);height:var(--r-toast--host--height, var(--r-toast--host--height-expanded, auto));opacity:var(--r-toast--host--opacity, 1);overflow:var(--r-toast--host--overflow, hidden);position:var(--r-toast--host--position, relative);transition:var(--r-toast--host--transition, all 0.3s);transition-delay:var(--r-toast--host--transition-delay, 0s)}:host ::slotted(p){margin:0}:host ::slotted(p+p),:host ::slotted(p+ul),:host ::slotted(p+ol){margin-top:1rem}:host .r-toast--action-link:hover{--r-toast--action--color:var(--r-text-strong, #000000)}:host .r-toast--action-link:focus{outline:var(--r-toast--action-link--outline, 2px solid var(--r-border-focused, #0071e3));box-shadow:var(--r-toast--action-link--box-shadow, 0 0 0 1px var(--r-border-focused-outlined, #fff), 0 0 0 3px var(--r-border-focused, #0071e3), 0 0 0 4px var(--r-border-focused-outlined, #fff))}:host .r-toast--trailing-button{--r-button--width:2.75rem;--r-button--height:2.75rem;--r-button--color:var(--r-text-regular, #282828);--r-button--border-color:transparent;--r-button--background-color:transparent;position:relative;top:-8px;right:-8px}:host .r-toast--trailing-button:hover{--r-button--color:var(--r-text-strong, #000000);--r-button--background-color:var(--r-background-interactive-hovered, #000000)}:host .r-toast--trailing-button:active{--r-button--transform:scale(0.94)}.r-toast{font-family:var(--r-toast--font-family, var(--r-font-family-text, system-ui));font-size:var(--r-toast--font-size, var(--r-font-size-400, 1rem));display:var(--r-toast--display, flex);flex-direction:var(--r-toast--flex-direction, row);align-items:var(--r-toast--align-items, stretch);gap:var(--r-toast--gap, var(--r-spacing-075, 0.75rem));padding:var(--r-toast--padding, var(--r-spacing-100, 1rem));border-width:var(--r-toast--border-width, 1px);border-style:var(--r-toast--border-style, solid);border-color:var(--r-toast--border-color, var(--r-status-info-regular, #466882));background-color:var(--r-toast--background-color, var(--r-status-info-soft, #f8fafb));box-sizing:var(--r-toast--box-sizing, border-box);transition:var(--r-toast--transition, all 0.3s)}.r-toast--main{flex:var(--r-toast--content--flex, 1)}.r-toast--leading-icon{color:var(--r-toast--leading-icon--color, var(--r-status-info-regular, #466882));margin-top:var(--r-toast--leading-icon--margin-top, 0.05em)}.r-toast--headline{color:var(--r-toast--headline--color, var(--r-text-regular, #282828));font-size:var(--r-toast--headline--font-size, var(--r-font-size-400, 1rem));font-weight:var(--r-toast--headline--font-weight, var(--r-font-weight-semibold, 600));margin:var(--r-toast--headline--margin, 0)}.r-toast--content{display:var(--r-toast--content--display, block);color:var(--r-toast--content--color, var(--r-text-regular, #282828));line-height:var(--r-toast--content--line-height, var(--r-line-height-m, 1.5));font-size:var(--r-toast--content--font-size, var(--r-font-size-300, 0.875rem));font-weight:var(--r-toast--content--font-weight, var(--r-font-weight-light, 300));margin-top:var(--r-toast--content--margin-top, 0)}.r-toast--action{display:var(--r-toast--action--display, flex);margin-top:var(--r-toast--action--margin-top, var(--r-spacing-050, 0.5rem));color:var(--r-toast--action--color, var(--r-text-regular, #282828));font-size:var(--r-toast--action--font-size, var(--r-font-size-300, 0.875rem));font-weight:var(--r-toast--action--font-weight, var(--r-font-weight-light, 300))}.r-toast--action-link{color:var(--r-toast--action--color, var(--r-text-regular, #282828))}.r-toast--action ::slotted(*){font-size:inherit;color:inherit}.r-toast--action ::slotted(a){color:var(--r-toast--action--color, var(--r-text-regular, #282828))}";
+const toastCss = ":host([status=info]){--r-toast--border-color:var(--r-status-info-regular, #466882);--r-toast--background-color:var(--r-status-info-soft, #f8fafb);--r-toast--leading-icon--color:var(--r-status-info-regular, #466882)}:host([status=warning]){--r-toast--border-color:var(--r-status-warning-regular, #f26a20);--r-toast--background-color:var(--r-status-warning-soft, #fef9f5);--r-toast--leading-icon--color:var(--r-status-warning-strong, #89411A)}:host([status=error]){--r-toast--border-color:var(--r-status-error-regular, #da1e28);--r-toast--background-color:var(--r-status-error-soft, #fef6f6);--r-toast--leading-icon--color:var(--r-status-error-regular, #da1e28)}:host([status=success]){--r-toast--border-color:var(--r-status-success-regular, #298535);--r-toast--background-color:var(--r-status-success-soft, #f7fdf8);--r-toast--leading-icon--color:var(--r-status-success-regular, #298535)}:host([is-content=false]){--r-toast--content--display:none}:host([headline]){--r-toast--content--margin-top:var(--r-spacing-050, 0.5rem)}:host([aria-hidden=true]){--r-toast--host--transition:all 0.15s;--r-toast--host--transition-delay:0.15s;--r-toast--host--opacity:0;--r-toast--host--height-expanded:0}:host{animation-duration:var(--r-toast--host--animation-duration, 0.3s);animation-fill-mode:var(--r-toast--host--animation-fill-mode, forwards);animation-name:var(--r-toast--host--animation-name, none);box-sizing:var(--r-toast--host--box-sizing, border-box);display:var(--r-toast--host--display, block);height:var(--r-toast--host--height, var(--r-toast--host--height-expanded, auto));opacity:var(--r-toast--host--opacity, 1);overflow:var(--r-toast--host--overflow, hidden);position:var(--r-toast--host--position, relative);transition:var(--r-toast--host--transition, all 0.3s);transition-delay:var(--r-toast--host--transition-delay, 0s)}:host ::slotted(p){margin:0}:host ::slotted(p+p),:host ::slotted(p+ul),:host ::slotted(p+ol){margin-top:1rem}:host .r-toast--action-link:hover{--r-toast--action--color:var(--r-text-strong, #000000)}:host .r-toast--action-link:focus{outline:var(--r-toast--action-link--outline, 2px solid var(--r-border-focused, #0071e3));box-shadow:var(--r-toast--action-link--box-shadow, 0 0 0 1px var(--r-border-focused-outlined, #fff), 0 0 0 3px var(--r-border-focused, #0071e3), 0 0 0 4px var(--r-border-focused-outlined, #fff))}:host .r-toast--trailing-button{--r-button--width:2.75rem;--r-button--height:2.75rem;--r-button--color:var(--r-text-regular, #282828);--r-button--border-color:transparent;--r-button--background-color:transparent;position:relative;top:-8px;right:-8px}:host .r-toast--trailing-button:hover{--r-button--color:var(--r-text-strong, #000000);--r-button--background-color:var(--r-background-interactive-hovered, #000000)}:host .r-toast--trailing-button:active{--r-button--transform:scale(0.94)}.r-toast{font-family:var(--r-toast--font-family, var(--r-font-family-text, system-ui));font-size:var(--r-toast--font-size, var(--r-font-size-400, 1rem));display:var(--r-toast--display, flex);flex-direction:var(--r-toast--flex-direction, row);align-items:var(--r-toast--align-items, stretch);gap:var(--r-toast--gap, var(--r-spacing-075, 0.75rem));padding:var(--r-toast--padding, var(--r-spacing-100, 1rem));border-width:var(--r-toast--border-width, 1px);border-style:var(--r-toast--border-style, solid);border-color:var(--r-toast--border-color, var(--r-status-info-regular, #466882));background-color:var(--r-toast--background-color, var(--r-status-info-soft, #f8fafb));box-sizing:var(--r-toast--box-sizing, border-box);transition:var(--r-toast--transition, all 0.3s)}.r-toast--main{flex:var(--r-toast--content--flex, 1)}.r-toast--leading-icon{color:var(--r-toast--leading-icon--color, var(--r-status-info-regular, #466882));margin-top:var(--r-toast--leading-icon--margin-top, 0)}.r-toast--headline{color:var(--r-toast--headline--color, var(--r-text-regular, #282828));font-size:var(--r-toast--headline--font-size, var(--r-font-size-400, 1rem));font-weight:var(--r-toast--headline--font-weight, var(--r-font-weight-semibold, 600));line-height:var(--r-toast--headline--line-height, 1);margin:var(--r-toast--headline--margin, 0)}.r-toast--content{display:var(--r-toast--content--display, block);color:var(--r-toast--content--color, var(--r-text-regular, #282828));line-height:var(--r-toast--content--line-height, var(--r-line-height-m, 1.5));font-size:var(--r-toast--content--font-size, var(--r-font-size-300, 0.875rem));font-weight:var(--r-toast--content--font-weight, var(--r-font-weight-light, 300));margin-top:var(--r-toast--content--margin-top, 0)}.r-toast--action{display:var(--r-toast--action--display, flex);margin-top:var(--r-toast--action--margin-top, var(--r-spacing-050, 0.5rem));color:var(--r-toast--action--color, var(--r-text-regular, #282828));font-size:var(--r-toast--action--font-size, var(--r-font-size-300, 0.875rem));font-weight:var(--r-toast--action--font-weight, var(--r-font-weight-light, 300))}.r-toast--action-link{color:var(--r-toast--action--color, var(--r-text-regular, #282828))}.r-toast--action ::slotted(*){font-size:inherit;color:inherit}.r-toast--action ::slotted(a){color:var(--r-toast--action--color, var(--r-text-regular, #282828))}";
 const Toast = class {
     constructor(hostRef) {
@@ -32,6 +32,12 @@ const Toast = class {
          * @default 3000
         */
         this.delay = 3000;
+        /**
+         * Defines the behavior of the component's dismissing.
+         * - `auto`: The component will be dismissed automatically after number of ms set by `delay` property.
+         * - `manual`: The component requires explicit user action to close.
+         * @default "auto"
+         */
         this.dismissMode = 'auto';
         /** Provides content for `aria-label` attribute of the dismiss button. */
         this.dismissLabel = 'Dismiss the toast';
@@ -162,14 +168,14 @@ const Toast = class {
             name: trailingIcon,
             size: 'm'
         };
-        return (index.h(index.Host, { key: '735ca672ada6e0f18e779c7e7c4e91b6b43eb0ee', id: this.uniqueId, role: `${this.isError ? 'alert' : 'status'}`, "aria-live": "polite", "aria-label": `${headline}`, "aria-hidden": `${this.isOpen ? 'false' : 'true'}` }, index.h("div", { key: '19111d35a3c74aad69c8eeb5a154110036bc2329', class: "r-toast" }, this.hasLeading &&
-            index.h("div", { key: '32487682215fc8f91c7bb965bc23c5d02b50bf90', class: "r-toast--leading" }, this.hasLeadingSlot && index.h("slot", { key: '505a8ecdd125547c5cad80551874550242185246', name: "leading" }), this.hasLeadingIcon && index.h("r-icon", Object.assign({ key: '174bf4165ce4f8248487a7da3c71893fe8504643', class: "r-toast--leading-icon" }, leadingIconAttrs))), index.h("div", { key: '74afa923a018a691e447fbdf1c06cd5bdf7b5595', class: "r-toast--main" }, this.hasHeadline &&
-            index.h("h2", { key: '0ecdf558a2b39e63dc9b266d5a26f9072fc44393', class: "r-toast--headline" }, index.h("slot", { key: '39d80961d678b1be93967947376bdb1437eef085', name: "headline" }, headline)), this.hasContent &&
-            index.h("div", { key: 'b411b3ae8ccb35d5ce842ccbe58945551449e046', class: "r-toast--content r-typography" }, index.h("slot", { key: 'f9caff50220e64aa8bfd3af06dac4459bd2a9e82', onSlotchange: this.handleSlotChange })), this.hasAction &&
-            index.h("div", { key: '1146e7225be5beaf570eceffff1a436e149949e0', class: "r-toast--action" }, index.h("slot", { key: 'eabb6a214421c354a6981a27f515c609ef2b5c57', name: "action" }, this.hasActionLink &&
-                index.h("a", Object.assign({ key: '953f8df836eea20e60cc3d91b0eaa244343890dc', class: "r-toast--action-link" }, actionAttrs), action)))), this.hasTrailing &&
-            index.h("div", { key: 'e085ed23280a9d055827465832cc9f1f13929c8e', class: "r-toast--trailing" }, this.hasTrailingSlot && index.h("slot", { key: 'dfc64ef44af689f3d86eaa1a56afbbc8fd7cca9d', name: "trailing" }), this.isDismissManual &&
-                index.h("r-icon-button", Object.assign({ key: 'c3037f5d1a0226786d0c8a349cb7788058d5882e' }, trailingIconAttrs, { class: "r-toast--trailing-button", onClick: this.handleTrailingButtonClick, "aria-label": this.dismissLabel }), index.h("slot", { key: '217cdf1724599ca9d59e87209f4ca31b738394a5', name: "dismiss" }))))));
+        return (index.h(index.Host, { key: 'f5413c4a9e1335b4a4e2f37cef036acbc7c05770', id: this.uniqueId, role: `${this.isError ? 'alert' : 'status'}`, "aria-live": "polite", "aria-label": `${headline}`, "aria-hidden": `${this.isOpen ? 'false' : 'true'}` }, index.h("div", { key: '3a222a7eaac62655c1cc7361865321c6a130f1fc', class: "r-toast" }, this.hasLeading &&
+            index.h("div", { key: '91d8dd470641658118be1e7c99c4e2cf648fce5f', class: "r-toast--leading" }, this.hasLeadingSlot && index.h("slot", { key: '2c877ff1c79839e66c5f7ec79926a4f5eb807d02', name: "leading" }), this.hasLeadingIcon && index.h("r-icon", Object.assign({ key: 'f238d9fc8eb6f0360bc97587e0b3ab9b2d077314', class: "r-toast--leading-icon" }, leadingIconAttrs))), index.h("div", { key: '568bb66c165a3f3d9e52c74fc51673283e3789f8', class: "r-toast--main" }, this.hasHeadline &&
+            index.h("h2", { key: '2267cbc787dfe1d9de4b35bc81981c3fe0df8deb', class: "r-toast--headline" }, index.h("slot", { key: '0a64068708db344d785db7d94fdb7edfcdf4fb7e', name: "headline" }, headline)), this.hasContent &&
+            index.h("div", { key: 'e4b198949b659f7724ca2191145da9e577546bdf', class: "r-toast--content r-typography" }, index.h("slot", { key: 'bd063b802fd04ee1606e4934511a2f48ec2c9304', onSlotchange: this.handleSlotChange })), this.hasAction &&
+            index.h("div", { key: '38c9af908aa62379cf9c914426bfb7d7ba707608', class: "r-toast--action" }, index.h("slot", { key: 'e25437e3a9298f21a9e6c7fd1b86cccaa096b44d', name: "action" }, this.hasActionLink &&
+                index.h("a", Object.assign({ key: '9cae694c50dd9aab6acde4924dce66ec7823c5b9', class: "r-toast--action-link" }, actionAttrs), action)))), this.hasTrailing &&
+            index.h("div", { key: 'fd7207cb911423a81a3ac80a26cbc025e5689e16', class: "r-toast--trailing" }, this.hasTrailingSlot && index.h("slot", { key: '5bcd5167e2299f62c20ed80be93dd06a8303dcab', name: "trailing" }), this.isDismissManual &&
+                index.h("r-icon-button", Object.assign({ key: 'c33a87247c3ff02dc3ed4d4205f20fcdf2259f2e' }, trailingIconAttrs, { class: "r-toast--trailing-button", onClick: this.handleTrailingButtonClick, "aria-label": this.dismissLabel }), index.h("slot", { key: '05ddb2629df06aaa350c88b442df7894a2f4bcd7', name: "dismiss" }))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {