@riverty/web-components 6.0.0 → 6.2.0

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

@@ -1,12 +1,3 @@
-@media (max-width: 48rem) {
-  :host {
-    --width: auto;
-    --right: 24px;
-    --bottom: auto;
-    --left: 24px;
-    --padding-right: 0;
-  }
-}
 :host([data-visually-hidden=true]) {
   position: absolute;
   width: 1px;
@@ -21,7 +12,7 @@
 :host {
   display: var(--display, block);
   position: var(--position, fixed);
-  top: var(--top, 32px);
+  top: var(--top, 0);
   right: var(--right, 0);
   bottom: var(--bottom, auto);
   left: var(--left, auto);
@@ -30,14 +21,17 @@
   width: var(--width, 352px);
   max-height: var(--max-height, calc(100vh - 64px));
   padding-right: var(--padding-right, 32px);
+  padding-top: var(--padding-top, 16px);
   padding-bottom: var(--padding-bottom, 32px);
   z-index: var(--z-index, 1);
 }
+:host ::slotted(r-toast) {
+  margin-top: var(--r-spacing-100, 1rem);
+}
 
 .r-toast-group {
   position: relative;
   display: var(--r-toast-group--display, flex);
   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

@@ -5,8 +5,17 @@ export class ToastGroup {
             this.host.setAttribute('data-visually-hidden', `${!this.hasChildren}`);
         };
         this.observeSlotContentChange = () => {
-            this.observer = new MutationObserver(() => {
+            this.observer = new MutationObserver(async (mutations) => {
+                var _a, _b;
                 this.updateHiddenState();
+                const addedToast = mutations
+                    .flatMap(mutation => Array.from(mutation.addedNodes))
+                    .find(node => node.nodeName === 'R-TOAST');
+                if (addedToast) {
+                    // Measure height then reveal for smooth animation
+                    await ((_a = addedToast.measureAndPrepareHeight) === null || _a === void 0 ? void 0 : _a.call(addedToast));
+                    await ((_b = addedToast.reveal) === null || _b === void 0 ? void 0 : _b.call(addedToast));
+                }
             });
             this.observer.observe(this.host, {
                 childList: true,
@@ -22,10 +31,10 @@ export class ToastGroup {
         this.observeSlotContentChange();
     }
     render() {
-        return (h(Host, { key: 'bbb13408cb02b62fe5f6ab1c09548509bfb3a195' }, h("div", { key: 'd82f7deff5b66aa8f9e19d29a5b34fc4b984c94d', class: "r-toast-group" }, h("slot", { key: '02a49bceae7197f72d5b80ba7d71374345d0f0c7' }))));
+        return (h(Host, { key: '85ab80be1fca1d1a9c3dc2e17de616747748a4dd' }, h("div", { key: 'a88670978563caeb8f500f4b5f9af2bcd0ade386', class: "r-toast-group" }, h("slot", { key: 'ab1480a47cfae0cacc45de708d51e8a77b6dfb85' }))));
     }
     static get is() { return "r-toast-group"; }
-    static get encapsulation() { return "scoped"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["toast-group.css"]

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

@@ -94,13 +94,18 @@ export class Tooltip {
             this.rTooltipFocus.emit({ element: this.element });
         };
         this.showTooltip = () => {
+            var _a;
             this.isShown = true;
             this.tooltip.classList.add('r-tooltip--content--visible');
+            const interactiveElement = this.getInteractiveElement(this.activeElement);
+            interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.setAttribute('aria-description', (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.innerText);
         };
         this.removeTooltip = () => {
             this.isShown = false;
             this.tooltip.style.width = 'max-content';
             this.tooltip.classList.remove('r-tooltip--content--visible');
+            const interactiveElement = this.getInteractiveElement(this.activeElement);
+            interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.removeAttribute('aria-description');
         };
         this.handleScroll = () => {
             if (!this.isShown) {
@@ -226,6 +231,21 @@ export class Tooltip {
     get activeElement() {
         return this.element.querySelector('r-button, r-icon-button, a, button, [tabindex]:not([tabindex="-1"])');
     }
+    /**
+     * Gets the actual interactive element (button/link) from within r-button or r-icon-button shadow DOM,
+     * or returns the element itself if it's already interactive
+     */
+    getInteractiveElement(element) {
+        if (!element)
+            return null;
+        if (element.tagName === 'R-BUTTON' || element.tagName === 'R-ICON-BUTTON') {
+            const shadowRoot = element.shadowRoot;
+            if (shadowRoot) {
+                return shadowRoot.querySelector('button, a');
+            }
+        }
+        return element;
+    }
     /**
      * Define position state
      */
@@ -314,7 +334,7 @@ export class Tooltip {
         this.adjustArrowPosition();
         this.alignTooltipPosition();
         this.alignArrowPosition();
-        // allow tooltip content wrap and recalculate position
+        // Allow tooltip content wrap and recalculate position
         if (this.tooltip.style.width === 'fit-content') {
             return;
         }
@@ -348,14 +368,14 @@ export class Tooltip {
         const triggerAttrs = {
             tabindex: !this.activeElement ? 0 : null,
             role: !this.activeElement ? 'button' : null,
-            'aria-describedby': isShown && uniqueId || null
+            'aria-describedby': !this.activeElement && isShown ? uniqueId : null
         };
         const contentAttrs = {
             id: uniqueId,
             role: 'tooltip',
             'aria-hidden': `${!isShown}`
         };
-        return (h(Host, Object.assign({ key: '1b2ce4ee1a9f9ca227b96e567fb61b560858734e' }, hostAttrs, { onMouseenter: this.handleHover, onMouseleave: this.removeTooltip }), h("div", { key: '1379aefd4bf69b312a9ce3ef443f5e9fe970f09e', class: "r-tooltip" }, h("div", Object.assign({ key: '80f00e66c8f01bb0df9107943c15d6616e4e7197', class: "r-tooltip--trigger", onFocus: this.handleFocus, onBlur: this.removeTooltip }, triggerAttrs), h("slot", { key: '42e1453731bdd404083e11d3d2f0ae4603e4c57b' })), h("div", Object.assign({ key: '00aa4f22f9c3e40d1c8e86cdd950ef1d160e29cf', class: "r-tooltip--content", ref: (el) => this.tooltip = el }, contentAttrs), text), h("div", { key: 'b717d5e45d3f970ee87f409d61a6353fb138fc7b', ref: (el) => this.arrow = el, class: "r-tooltip--arrow" }))));
+        return (h(Host, Object.assign({ key: '5d8a002a227895d5e633e8b1df95ba449a9e253a' }, hostAttrs, { onMouseenter: this.handleHover, onMouseleave: this.removeTooltip }), h("div", { key: '4e6340639dc27fc7d0e981ca7cf8a4046737527f', class: "r-tooltip" }, h("div", Object.assign({ key: 'bcf2d5c73b427b2941be8de56b9ce2f296ae07eb', class: "r-tooltip--trigger", onFocus: this.handleFocus, onBlur: this.removeTooltip }, triggerAttrs), h("slot", { key: 'be7037ba07bf11b4957910c52f4a3f329b514007' })), h("div", Object.assign({ key: '300a3ef08b7c73b6b07161c58860df518ae9a862', class: "r-tooltip--content", ref: (el) => this.tooltip = el }, contentAttrs), text), h("div", { key: '73912349289b0dc365552331197d94bd0896ff3c', ref: (el) => this.arrow = el, class: "r-tooltip--arrow" }))));
     }
     static get is() { return "r-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -388,7 +408,7 @@ export class Tooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "''"
             },
             "position": {