@riverty/web-components 5.4.0 → 5.5.0

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

@@ -18,14 +18,13 @@ export class RListItem {
         this.expanded = !this.expanded;
     }
     get isLeadingIcon() {
-        var _a, _b;
-        return ((_a = this.leadingIcon) === null || _a === void 0 ? void 0 : _a.length) > 0 || ((_b = this.leadingIconSrc) === null || _b === void 0 ? void 0 : _b.length) > 0;
+        return !!this.leadingIcon || !!this.leadingIconSrc;
     }
     get isLeadingSlot() {
         return this.isEl('[slot="leading"]');
     }
     get isLeading() {
-        return this.isLeadingIcon || this.isLeadingSlot;
+        return (this.isLeadingIcon && !this.hideLeadingIcon) || this.isLeadingSlot;
     }
     get isTrailingIcon() {
         var _a, _b;
@@ -82,7 +81,7 @@ export class RListItem {
         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("span", { class: "r-list-item--leading" }, h("slot", { name: "leading" }, this.isLeadingIcon && !this.hideLeadingIcon &&
                 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, (this.isHeadlineSlot || headline) &&
                 h("span", { class: "r-list-item--headline" }, h("slot", { name: "headline" }, headline)), (description || this.isDescriptionSlot || subtext) &&
@@ -170,6 +169,25 @@ export class RListItem {
                 "setter": false,
                 "reflect": false
             },
+            "truncateDescription": {
+                "type": "boolean",
+                "attribute": "truncate-description",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When enabled, the description is limited to a single line and truncated with an ellipsis if it overflows."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "leadingIcon": {
                 "type": "string",
                 "attribute": "leading-icon",
@@ -214,6 +232,25 @@ export class RListItem {
                 "setter": false,
                 "reflect": false
             },
+            "hideLeadingIcon": {
+                "type": "boolean",
+                "attribute": "hide-leading-icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines if the leading icon shall become hidden."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "trailingIcon": {
                 "type": "string",
                 "attribute": "trailing-icon",

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));

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

@@ -158,14 +158,14 @@ export class Toast {
             name: trailingIcon,
             size: 'm'
         };
-        return (h(Host, { key: 'f5413c4a9e1335b4a4e2f37cef036acbc7c05770', id: this.uniqueId, role: `${this.isError ? 'alert' : 'status'}`, "aria-live": "polite", "aria-label": `${headline}`, "aria-hidden": `${this.isOpen ? 'false' : 'true'}` }, h("div", { key: '3a222a7eaac62655c1cc7361865321c6a130f1fc', class: "r-toast" }, this.hasLeading &&
-            h("div", { key: '91d8dd470641658118be1e7c99c4e2cf648fce5f', class: "r-toast--leading" }, this.hasLeadingSlot && h("slot", { key: '2c877ff1c79839e66c5f7ec79926a4f5eb807d02', name: "leading" }), this.hasLeadingIcon && h("r-icon", Object.assign({ key: 'f238d9fc8eb6f0360bc97587e0b3ab9b2d077314', class: "r-toast--leading-icon" }, leadingIconAttrs))), h("div", { key: '568bb66c165a3f3d9e52c74fc51673283e3789f8', class: "r-toast--main" }, this.hasHeadline &&
-            h("h2", { key: '2267cbc787dfe1d9de4b35bc81981c3fe0df8deb', class: "r-toast--headline" }, h("slot", { key: '0a64068708db344d785db7d94fdb7edfcdf4fb7e', name: "headline" }, headline)), this.hasContent &&
-            h("div", { key: 'e4b198949b659f7724ca2191145da9e577546bdf', class: "r-toast--content r-typography" }, h("slot", { key: 'bd063b802fd04ee1606e4934511a2f48ec2c9304', onSlotchange: this.handleSlotChange })), this.hasAction &&
-            h("div", { key: '38c9af908aa62379cf9c914426bfb7d7ba707608', class: "r-toast--action" }, h("slot", { key: 'e25437e3a9298f21a9e6c7fd1b86cccaa096b44d', name: "action" }, this.hasActionLink &&
-                h("a", Object.assign({ key: '9cae694c50dd9aab6acde4924dce66ec7823c5b9', class: "r-toast--action-link" }, actionAttrs), action)))), this.hasTrailing &&
-            h("div", { key: 'fd7207cb911423a81a3ac80a26cbc025e5689e16', class: "r-toast--trailing" }, this.hasTrailingSlot && h("slot", { key: '5bcd5167e2299f62c20ed80be93dd06a8303dcab', name: "trailing" }), this.isDismissManual &&
-                h("r-icon-button", Object.assign({ key: 'c33a87247c3ff02dc3ed4d4205f20fcdf2259f2e' }, trailingIconAttrs, { class: "r-toast--trailing-button", onClick: this.handleTrailingButtonClick, "aria-label": this.dismissLabel }), h("slot", { key: '05ddb2629df06aaa350c88b442df7894a2f4bcd7', 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"; }

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: 'cd72702e1eee0d746e85c2022038972dea391dba' }, h("div", { key: '86bce60683eab444715fa266d39cada11bf19ce4', class: "r-toast-group" }, h("slot", { key: '594c29dc3b2ba4762d8a5b7876a47923d11f6f86', 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"]