@riverty/web-components 5.3.0 → 5.5.0

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class RTabsList {
     render() {
-        return (h(Host, { key: '6b64e5f6ce9384c27c5696138d969a653d0fe6d0', role: "tablist" }, h("div", { key: '6eb8b3c835b53024dd3f7276bba262792343ef5c', class: "r-tabs-list" }, h("slot", { key: 'abc630715235329501d151ac5c232566751c3424' }))));
+        return (h(Host, { key: '323b36e7d276c42c72764c34f2564153d80b64d2', role: "tablist" }, h("div", { key: 'bab777186d6d538c6f541e08bda090ab228f38d3', class: "r-tabs-list" }, h("slot", { key: '60a0d80ba3ada9d218ca8058cdcdf720277e19d0' }))));
     }
     static get is() { return "r-tabs-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -34,8 +34,8 @@
 }
 
 :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--container--background-color: var(--r-status-error-soft, #fef6f6);
+  --r-textarea--container--border-color: var(--r-status-error-regular, #da1e28);
 }
 
 .r-textarea--label-container {
@@ -52,26 +52,11 @@
   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 {
+  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);
@@ -80,16 +65,16 @@
   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));
+  background-color: var(--r-textarea--input--background-color, transparent);
   opacity: var(--r-textarea--input--opacity, 1);
-  border-width: var(--r-textarea--input--border-width, 1px);
+  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, var(--r-spacing-025, 0.25rem));
+  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);
@@ -97,6 +82,49 @@
   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));
@@ -104,6 +132,9 @@
 .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;

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

@@ -29,6 +29,8 @@ export class RTextarea {
         /** 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;
@@ -41,6 +43,8 @@ export class RTextarea {
             }
         };
         this.onChange = event => {
+            if (this.readonly)
+                return;
             this.value = event.target.value;
             this.validateFormElement(this.nativeElement);
             const { host, value } = this;
@@ -56,6 +60,8 @@ export class RTextarea {
             }
         };
         this.onResetForm = () => {
+            if (this.readonly)
+                return;
             // Return to initial state
             this.validityState = null;
             this.validityMessage = null;
@@ -99,6 +105,8 @@ export class RTextarea {
     }
     /** Sets the value of the element. */
     async setValue(value) {
+        if (this.readonly)
+            return;
         this.value = value;
     }
     /** Gets the value of the element. */
@@ -107,6 +115,8 @@ export class RTextarea {
     }
     /** Resets value and validity state to initial. */
     async reset() {
+        if (this.readonly)
+            return;
         this.validityState = null;
         this.validityMessage = null;
         this.value = this.initial['value'];
@@ -173,6 +183,9 @@ export class RTextarea {
             this.novalidate ||
             false);
     }
+    get hasTrailingSlot() {
+        return !!this.host.querySelector('[slot="trailing"]');
+    }
     get textareaSlotValue() {
         return this.host.textContent;
     }
@@ -199,7 +212,7 @@ export class RTextarea {
         this.disconnectFormEventListeners();
     }
     render() {
-        const { name, rows, cols, placeholder, required, showCounter, maxlength, minlength, form, value, disabled, resize, hint, invalid, label, uniqueId, fieldIndicator, tooltip, tooltipIcon, tooltipIconColor } = 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,
@@ -212,6 +225,7 @@ export class RTextarea {
             value,
             disabled,
             resize,
+            readonly,
             id: uniqueId,
             'aria-describedby': this.ariaDescribedBy,
             'aria-invalid': `${!!invalid}`,
@@ -235,7 +249,7 @@ export class RTextarea {
         }, {});
         return (h(Host, null, h("div", { class: "r-textarea--label-container" }, h("label", { htmlFor: uniqueId }, label &&
             h("r-label", Object.assign({ id: `${uniqueId}-label` }, labelAttr), label)), h("slot", { name: "popover" })), hint &&
-            h("r-hint", { id: `${uniqueId}-hint`, role: "note" }, hint), h("textarea", Object.assign({ class: "r-textarea--input" }, textareaAttrs, eventListeners, { ref: el => this.nativeElement = el, onChange: this.onChange, onInput: this.onInput })), h("div", { class: "r-textarea--messages" }, h("r-hint", { "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage), this.hasValidationSuccess && this.validMessage), showCounter && h("r-hint", { "aria-hidden": true, class: "r-textarea--messages--counter" }, value.length, "/", maxlength), maxlength &&
+            h("r-hint", { id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { class: "r-textarea--container", "data-disabled": `${!!disabled}`, "data-readonly": `${!!readonly}` }, h("textarea", Object.assign({ class: "r-textarea--input" }, textareaAttrs, eventListeners, { ref: el => this.nativeElement = el, onChange: this.onChange, onInput: this.onInput })), h("div", { class: "r-textarea--trailing" }, this.readonly && h("r-icon", { class: "r-textarea--readonly-icon", name: "pen-disabled", size: "s" }), this.hasTrailingSlot && h("slot", { name: "trailing" }))), h("div", { class: "r-textarea--messages" }, h("r-hint", { "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage), this.hasValidationSuccess && this.validMessage), showCounter && h("r-hint", { "aria-hidden": true, class: "r-textarea--messages--counter" }, `${value.length}${maxlength ? '/' : ''}${maxlength}`), maxlength &&
             h("div", { class: "visually-hidden", ref: el => this.characterLimitReachedAlert = el, "aria-live": "assertive" }))));
     }
     static get is() { return "r-textarea"; }
@@ -432,6 +446,25 @@ export class RTextarea {
                 "setter": false,
                 "reflect": false
             },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether the `<textarea>` is read-only, allowing focus and text selection\nwhile preventing the user from modifying its value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
             "hint": {
                 "type": "string",
                 "attribute": "hint",
@@ -521,7 +554,7 @@ export class RTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Specifies if the character counter should be visible."
+                    "text": "Specifies if the character counter should be visible.\n\nNote: The counter will only be rendered when a `maxlength` value is provided."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/toast/toast.css

@@ -30,7 +30,7 @@
   --r-toast--content--margin-top: var(--r-spacing-050, 0.5rem);
 }
 
-:host([aria-hidden=true]) {
+:host([data-visually-hidden=true]) {
   --r-toast--host--transition: all 0.15s;
   --r-toast--host--transition-delay: 0.15s;
   --r-toast--host--opacity: 0;
@@ -82,6 +82,12 @@
 :host .r-toast--trailing-button:active {
   --r-button--transform: scale(0.94);
 }
+@media (prefers-reduced-motion) {
+  :host {
+    --r-toast--transition: none;
+    --r-toast--host--animation-name: none;
+  }
+}
 
 .r-toast {
   font-family: var(--r-toast--font-family, var(--r-font-family-text, system-ui));
@@ -90,7 +96,7 @@
   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));
+  padding: var(--r-toast--padding, 16px);
   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));
@@ -103,12 +109,13 @@
 }
 .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);
+  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 {

package/dist/collection/components/toast/toast.js

@@ -22,6 +22,12 @@ export class Toast {
          * @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';
@@ -152,14 +158,14 @@ export class Toast {
             name: trailingIcon,
             size: 'm'
         };
-        return (h(Host, { key: '735ca672ada6e0f18e779c7e7c4e91b6b43eb0ee', id: this.uniqueId, role: `${this.isError ? 'alert' : 'status'}`, "aria-live": "polite", "aria-label": `${headline}`, "aria-hidden": `${this.isOpen ? 'false' : 'true'}` }, h("div", { key: '19111d35a3c74aad69c8eeb5a154110036bc2329', class: "r-toast" }, this.hasLeading &&
-            h("div", { key: '32487682215fc8f91c7bb965bc23c5d02b50bf90', class: "r-toast--leading" }, this.hasLeadingSlot && h("slot", { key: '505a8ecdd125547c5cad80551874550242185246', name: "leading" }), this.hasLeadingIcon && h("r-icon", Object.assign({ key: '174bf4165ce4f8248487a7da3c71893fe8504643', class: "r-toast--leading-icon" }, leadingIconAttrs))), h("div", { key: '74afa923a018a691e447fbdf1c06cd5bdf7b5595', class: "r-toast--main" }, this.hasHeadline &&
-            h("h2", { key: '0ecdf558a2b39e63dc9b266d5a26f9072fc44393', class: "r-toast--headline" }, h("slot", { key: '39d80961d678b1be93967947376bdb1437eef085', name: "headline" }, headline)), this.hasContent &&
-            h("div", { key: 'b411b3ae8ccb35d5ce842ccbe58945551449e046', class: "r-toast--content r-typography" }, h("slot", { key: 'f9caff50220e64aa8bfd3af06dac4459bd2a9e82', onSlotchange: this.handleSlotChange })), this.hasAction &&
-            h("div", { key: '1146e7225be5beaf570eceffff1a436e149949e0', class: "r-toast--action" }, h("slot", { key: 'eabb6a214421c354a6981a27f515c609ef2b5c57', name: "action" }, this.hasActionLink &&
-                h("a", Object.assign({ key: '953f8df836eea20e60cc3d91b0eaa244343890dc', class: "r-toast--action-link" }, actionAttrs), action)))), this.hasTrailing &&
-            h("div", { key: 'e085ed23280a9d055827465832cc9f1f13929c8e', class: "r-toast--trailing" }, this.hasTrailingSlot && h("slot", { key: 'dfc64ef44af689f3d86eaa1a56afbbc8fd7cca9d', name: "trailing" }), this.isDismissManual &&
-                h("r-icon-button", Object.assign({ key: 'c3037f5d1a0226786d0c8a349cb7788058d5882e' }, trailingIconAttrs, { class: "r-toast--trailing-button", onClick: this.handleTrailingButtonClick, "aria-label": this.dismissLabel }), h("slot", { key: '217cdf1724599ca9d59e87209f4ca31b738394a5', name: "dismiss" }))))));
+        return (h(Host, { key: 'd89f4e9245d32cd1f622beed7c053442c1977e7f', id: this.uniqueId, role: "alert", "aria-live": `${this.isError ? 'assertive' : 'polite'}`, "data-visually-hidden": `${this.isOpen ? 'false' : 'true'}` }, h("div", { key: '5292d419fa8122136b8694a47140418a2c3bbf1c', class: "r-toast" }, this.hasLeading &&
+            h("div", { key: '39d348a25e1dffb2c0dc6c550d94e0ee5a791089', class: "r-toast--leading" }, this.hasLeadingSlot && h("slot", { key: '92693e79818ea57423bd56364bad96c4e85a8fb7', name: "leading" }), this.hasLeadingIcon && h("r-icon", Object.assign({ key: 'a6c8491b3bf1af387c228ab110775d380dc33afd', class: "r-toast--leading-icon" }, leadingIconAttrs))), h("div", { key: '78e914e294adb359116045937146caaf9f82b4e6', class: "r-toast--main" }, this.hasHeadline &&
+            h("h2", { key: 'f33e94e74a2f93dc7bfb28f83120d79f07d3b254', class: "r-toast--headline" }, h("slot", { key: '3e61d7eb3b319dd00205bd010074edd1f2f809ba', name: "headline" }, headline)), this.hasContent &&
+            h("div", { key: '6d098697465a8c84c5dca4abcf5b7eab04ff4a23', class: "r-toast--content r-typography" }, h("slot", { key: '8ad7f7ce97edcbd601a7e08b48a2cd766d32e8bf', onSlotchange: this.handleSlotChange })), this.hasAction &&
+            h("div", { key: '7b0df2b4f747b7436ddaa34c87b876d5d8023921', class: "r-toast--action" }, h("slot", { key: '9811a95fc1261f7565d31b2a54ca97a9a36ec236', name: "action" }, this.hasActionLink &&
+                h("a", Object.assign({ key: 'bbbd7f3f63da45f374d40152269fe68b359e298d', class: "r-toast--action-link" }, actionAttrs), action)))), this.hasTrailing &&
+            h("div", { key: '6a000a3e1e6dfbbbfe83b64ad550b39df030bef3', class: "r-toast--trailing" }, this.hasTrailingSlot && h("slot", { key: '90ab154036ef2206394d1c43ad48a4973eec520f', name: "trailing" }), this.isDismissManual &&
+                h("r-icon-button", Object.assign({ key: '1433d0151fb3673d98b51f476e8bbe43d8f7ebd6' }, trailingIconAttrs, { class: "r-toast--trailing-button", onClick: this.handleTrailingButtonClick, "aria-label": this.dismissLabel }), h("slot", { key: 'c47c59fbc4097fdaf4f3a4f27beab833dcef4f0e', name: "dismiss" }))))));
     }
     static get is() { return "r-toast"; }
     static get encapsulation() { return "shadow"; }
@@ -405,8 +411,11 @@ export class Toast {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": ""
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"auto\""
+                        }],
+                    "text": "Defines the behavior of the component's dismissing.\n- `auto`: The component will be dismissed automatically after number of ms set by `delay` property.\n- `manual`: The component requires explicit user action to close."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/toast-group/toast-group.css

@@ -1,4 +1,4 @@
-@media (max-width: 767px) {
+@media (max-width: 48rem) {
   :host {
     --width: auto;
     --right: 24px;
@@ -7,12 +7,19 @@
     --padding-right: 0;
   }
 }
-:host([aria-hidden=false]) {
-  --display: block;
+:host([data-visually-hidden=true]) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
 }
 
 :host {
-  display: var(--display, none);
+  display: var(--display, block);
   position: var(--position, fixed);
   top: var(--top, 32px);
   right: var(--right, 0);
@@ -30,13 +37,7 @@
 .r-toast-group {
   position: relative;
   display: var(--r-toast-group--display, flex);
-  flex-direction: var(--r-toast-group--flex-direction, column-reverse);
-  justify-content: var(--r-toast-group--justify-content, flex-end);
-  gap: var(--r-toast-group--gap, 16px);
-}
-.r-toast-group ::slotted(r-toast[aria-hidden=true]) {
-  --animation-name: slideOut;
-}
-.r-toast-group ::slotted(r-toast[aria-hidden=false]) {
-  --animation-name: slideIn;
+  flex-direction: var(--r-toast-group--flex-direction, column);
+  justify-content: var(--r-toast-group--justify-content, flex-start);
+  gap: var(--r-toast-group--gap, var(--r-spacing-100, 1rem));
 }

package/dist/collection/components/toast-group/toast-group.js

@@ -2,20 +2,30 @@ import { Host, h } from "@stencil/core";
 export class ToastGroup {
     constructor() {
         this.updateHiddenState = () => {
-            this.host.setAttribute('aria-hidden', `${this.hasChildren}`);
+            this.host.setAttribute('data-visually-hidden', `${!this.hasChildren}`);
+        };
+        this.observeSlotContentChange = () => {
+            this.observer = new MutationObserver(() => {
+                this.updateHiddenState();
+            });
+            this.observer.observe(this.host, {
+                childList: true,
+                subtree: true
+            });
         };
     }
     get hasChildren() {
-        return this.host.children.length < 1;
+        return this.host.querySelectorAll('r-toast').length > 0;
     }
     componentWillLoad() {
         this.updateHiddenState();
+        this.observeSlotContentChange();
     }
     render() {
-        return (h(Host, { key: '08295a30da71cd722c6bac43859958b73ba66f67' }, h("div", { key: '74153035c46d0dd8951e7e380d28dcf924d2772b', class: "r-toast-group" }, h("slot", { key: '5f550f96d9dad032c71f5f99194b15c133d08cc3', onSlotchange: this.updateHiddenState }))));
+        return (h(Host, { key: '95e0b29bb1b6a45aabb4e7f5da283997c6b707a8' }, h("div", { key: '4b42e40646381d78f2b812f483ea993992ec7f12', class: "r-toast-group" }, h("slot", { key: 'db3cca9551652a78d9c1579532894fc86ca02b73' }))));
     }
     static get is() { return "r-toast-group"; }
-    static get encapsulation() { return "shadow"; }
+    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["toast-group.css"]

package/dist/collection/components/tooltip/tooltip.js

@@ -253,7 +253,7 @@ export class Tooltip {
             role: 'tooltip',
             'aria-hidden': `${!isShown}`
         };
-        return (h(Host, Object.assign({ key: '19402aacbdc178fff3e8eb00f1cd72d38b6c18a6' }, hostAttrs, { onMouseenter: this.handleHover, onMouseleave: this.removeTooltip }), h("div", { key: '4ab3a49a4ef39602f6936ae07fbac05ed8021c0d', class: "r-tooltip" }, h("div", Object.assign({ key: 'ea44584afdecdbfec1911f76d3303f79f4806150', class: "r-tooltip--trigger", onFocus: this.handleFocus, onBlur: this.removeTooltip }, triggerAttrs), h("slot", { key: '8fb43cf1df37d799c7a043dd7f5bfa8757482cb9' })), h("div", Object.assign({ key: 'd418113c21d2605237010626470483d29e8f3187', class: "r-tooltip--content" }, contentAttrs), text), h("div", { key: '373a2d65a2f8a77af0931c3de90f1302c7aca557', class: "r-tooltip--arrow" }))));
+        return (h(Host, Object.assign({ key: 'e168f9f1212433eb17769c11260f546e441ca274' }, hostAttrs, { onMouseenter: this.handleHover, onMouseleave: this.removeTooltip }), h("div", { key: 'b8ea713c2b09b6053af73ac7d26a30f210c90e94', class: "r-tooltip" }, h("div", Object.assign({ key: '19cc679ec640dc98f167077e0bab16423e186258', class: "r-tooltip--trigger", onFocus: this.handleFocus, onBlur: this.removeTooltip }, triggerAttrs), h("slot", { key: '17266fefef386f3b417d8e7d112e0345aa98e878' })), h("div", Object.assign({ key: 'e53283c02be43833362277fc8fe78e99c4a9adba', class: "r-tooltip--content" }, contentAttrs), text), h("div", { key: '98f1caf44ec7bd286cb8126022692d825f4ab617', class: "r-tooltip--arrow" }))));
     }
     static get is() { return "r-tooltip"; }
     static get encapsulation() { return "shadow"; }