@riverty/web-components 6.1.0 → 6.2.0

package/dist/collection/components/pagination/pagination.js

@@ -26,6 +26,20 @@ export class RPagination {
         this.selectText = 'page';
         /** Position of the list box */
         this.listBoxPosition = 'top';
+        /** Label for Previous Page button. Important to ensure accessibility for screen reader users. */
+        this.previousPageButtonLabel = 'Go to the previous page';
+        /** Label for Next Page button. Important to ensure accessibility for screen reader users.*/
+        this.nextPageButtonLabel = 'Go to the next page';
+        /** Label for First Page button. Important to ensure accessibility for screen reader users.*/
+        this.firstPageButtonLabel = 'Go to the first page';
+        /** Label for Last Page button. Important to ensure accessibility for screen reader users.*/
+        this.lastPageButtonLabel = 'Go to the last page';
+        /** Label for Page number buttons. Important to ensure accessibility for screen reader users.*/
+        this.pageLabel = 'Page';
+        /** Label for Ellipsis stepper. Important to ensure accessibility for screen reader users.*/
+        this.ellipsisLabel = 'Ellipsis indicating skipped pages';
+        /** Label for Items per page select. */
+        this.itemsPerPageLabel = 'Items per page';
         this.resizeObserver = null;
         this.handleItemsPerPageChange = (event) => {
             const newItemsPerPage = parseInt(event.detail.value, 10);
@@ -50,28 +64,17 @@ export class RPagination {
             });
         };
         this.handleItemChange = e => {
-            const isKeyup = e.type === 'keyup';
-            const isEnter = e.code === 'Enter';
-            const isSpace = e.code === 'Space';
-            if (isKeyup && !isEnter && !isSpace)
-                return;
-            const buttonElement = e.target.closest('r-button');
-            if (buttonElement === null)
-                return;
+            const buttonElement = e.target.closest('r-icon-button') || e.target.closest('r-button');
             const index = Number(buttonElement.getAttribute('data-index'));
             if (index === null)
                 return;
             this._activateStep(index);
             requestAnimationFrame(() => {
-                var _a;
-                const newActiveButton = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.r-pagination--item[data-index="${index}"]`);
-                if (newActiveButton) {
-                    newActiveButton.focus(); // Ensure focus is set correctly
-                }
+                const focusTarget = this.getFocusTargetAfterNavigation(buttonElement);
+                focusTarget === null || focusTarget === void 0 ? void 0 : focusTarget.setFocus();
             });
             if (buttonElement.classList.contains('number')) {
                 this.rNumberClick.emit(this.paginationState);
-                buttonElement.blur();
             }
             if (buttonElement.classList.contains('arrow')) {
                 const direction = buttonElement.classList.contains('next') ? 'next' : 'previous';
@@ -150,6 +153,35 @@ export class RPagination {
         // Emit updated pagination state
         this.rChange.emit(this.paginationState);
     }
+    /**
+     * Determines the appropriate focus target after navigation based on button states.
+     * Handles edge cases where navigation buttons become disabled.
+     */
+    getFocusTargetAfterNavigation(buttonElement) {
+        var _a, _b, _c, _d, _e;
+        const isArrowButton = buttonElement.classList.contains('arrow');
+        const isNextButton = buttonElement.classList.contains('next');
+        const isPrevButton = buttonElement.classList.contains('previous');
+        const isFirstButton = buttonElement.classList.contains('first');
+        const isLastButton = buttonElement.classList.contains('last');
+        const willNextBeDisabled = this.next === null;
+        const willPrevBeDisabled = this.previous === null;
+        const willLastBeDisabled = this.active === this.total;
+        const willFirstBeDisabled = this.first === null;
+        if (isNextButton && willNextBeDisabled) {
+            return (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.r-pagination--item.number[data-index="${this.total}"]`);
+        }
+        if (isPrevButton && willPrevBeDisabled) {
+            return (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(`.r-pagination--item.number[data-index="1"]`);
+        }
+        if (isLastButton && willLastBeDisabled) {
+            return (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector(`.r-pagination--item.number[data-index="${this.total}"]`);
+        }
+        if (isFirstButton && willFirstBeDisabled) {
+            return (_d = this.el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.r-pagination--item.number[data-index="1"]');
+        }
+        return isArrowButton ? buttonElement : (_e = this.el.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector(`.r-pagination--item[data-index="${this.pageActive}"]`);
+    }
     componentWillLoad() {
         this.setPaginationState();
     }
@@ -168,13 +200,13 @@ export class RPagination {
         const { active, previous, next, first, itemsPerPage, itemsPerPageOptions, startText, middleText, endText, selectText, listBoxPosition } = this;
         const itemTemplate = (type, index) => {
             if (type === 'number') {
-                return (h("r-button", { class: "r-pagination--item number", "data-index": index, onClick: this.handleItemChange, onKeyUp: this.handleItemChange }, index));
+                return (h("li", null, h("r-button", { class: "r-pagination--item number", "data-index": index, variant: "secondary", onRClick: this.handleItemChange }, h("span", { class: "visually-hidden" }, this.pageLabel), " ", index)));
             }
             if (type === 'active') {
-                return (h("div", { class: "r-pagination--item number active", "aria-label": "active page" }, index));
+                return (h("li", null, h("r-button", { "data-index": index, class: "r-pagination--item number active", rAriaCurrent: "page" }, h("span", { class: "visually-hidden" }, this.pageLabel), " ", index)));
             }
             if (type === 'stepper') {
-                return (h("div", { class: "r-pagination--item stepper" }, "..."));
+                return (h("li", { "aria-label": this.ellipsisLabel, class: "r-pagination--item stepper" }, "..."));
             }
         };
         const renderNumbers = () => {
@@ -190,7 +222,7 @@ export class RPagination {
             };
             // Case: total pages are less than or equal to maxVisiblePages
             if (totalPages <= maxVisiblePages) {
-                return h(Fragment, null, [...Array(totalPages).keys()].map(_createItem));
+                return h("ul", { class: "r-pagination--items-list" }, [...Array(totalPages).keys()].map(_createItem));
             }
             // Always add startEdge
             items.push(itemTemplate(active === startEdge ? 'active' : 'number', startEdge));
@@ -249,47 +281,21 @@ export class RPagination {
                     }
                 }
             }
-            return h(Fragment, null, items);
+            return h("ul", { class: "r-pagination--items-list" }, items);
         };
         const renderHeader = () => {
             const startItem = Math.min((active - 1) * itemsPerPage + 1, this.totalResults);
             const endItem = Math.min(active * itemsPerPage, this.totalResults);
-            return (h(Fragment, null, h("div", { ref: el => (this.headerRef = el), class: "r-pagination--header" }, h("div", { class: "results-info", "aria-live": "polite" }, startText ? startText : 'Showing', " ", startItem, "\u2013", endItem, " ", middleText ? middleText : 'of', " ", this.totalResults, " ", endText ? endText : 'results'), h("div", null, h("r-select", { class: "r-pagination--header--select", value: this.itemsPerPage.toString(), id: "items-per-page", onRChange: this.handleItemsPerPageChange, label: "Items per page", "listbox-position": listBoxPosition }, itemsPerPageOptions.map(option => (h("r-select-option", { value: option.toString() }, option, "/", selectText ? selectText : 'page'))))))));
-        };
-        const getTagName = isNoPage => isNoPage ? 'div' : 'r-button';
-        const PrevTagName = getTagName(this.isNoPreviousPage);
-        const NextTagName = getTagName(this.isNoNextPage);
-        const FirstTagName = getTagName(this.isNotFirstPage);
-        const LastTagName = getTagName(this.isNotLastPage);
-        const prevArrowAttrs = {
-            class: `r-pagination--item arrow previous ${this.isNoPreviousPage ? 'disabled' : ''}`,
-            'data-index': previous,
-            'aria-label': `${PrevTagName === 'r-button' ? 'Previous Page' : ''}`
-        };
-        const nextArrowAttrs = {
-            class: `r-pagination--item arrow next ${this.isNoNextPage ? 'disabled' : ''}`,
-            'data-index': next,
-            'aria-label': `${NextTagName === 'r-button' ? 'Next Page' : ''}`
-        };
-        const firstArrowAttrs = {
-            class: `r-pagination--item arrow first ${first === null ? 'disabled' : ''}`,
-            'data-index': first,
-            'aria-label': `${first === null ? '' : 'First Page'}`
+            return (h(Fragment, null, h("div", { ref: el => (this.headerRef = el), class: "r-pagination--header" }, h("div", { class: "results-info", "aria-live": "polite" }, startText ? startText : 'Showing', " ", startItem, "\u2013", endItem, " ", middleText ? middleText : 'of', " ", this.totalResults, " ", endText ? endText : 'results'), h("div", null, h("r-select", { class: "r-pagination--header--select", value: this.itemsPerPage.toString(), id: "items-per-page", onRChange: this.handleItemsPerPageChange, label: this.itemsPerPageLabel, "listbox-position": listBoxPosition }, itemsPerPageOptions.map(option => (h("r-select-option", { value: option.toString() }, option, "/", selectText ? selectText : 'page'))))))));
         };
         const isLastPage = active === this.total;
-        const lastArrowAttrs = {
-            class: `r-pagination--item arrow last ${isLastPage ? 'disabled' : ''}`,
-            'data-index': isLastPage ? null : this.total,
-            'aria-label': isLastPage ? '' : 'Last Page',
-            tabindex: isLastPage ? '-1' : '0' // Make unfocusable when disabled
-        };
         const renderList = () => {
             if (this.variant === 'minimized') {
                 return (h(Fragment, null, h("div", { ref: el => (this.footerRef = el), class: "r-pagination--footer" }, renderNumbers())));
             }
-            return (h(Fragment, null, h("div", { ref: el => (this.footerRef = el), class: "r-pagination--footer" }, this.variant === 'maximized' && (h(FirstTagName, Object.assign({}, firstArrowAttrs, { onClick: this.handleItemChange, onKeyUp: this.handleItemChange }), h("r-icon", { name: "angle-left-with-vertical-line", size: "s" }))), h(PrevTagName, Object.assign({}, prevArrowAttrs, { onClick: this.handleItemChange, onKeyUp: this.handleItemChange }), h("r-icon", { name: "angle-left", size: "s" })), renderNumbers(), h(NextTagName, Object.assign({}, nextArrowAttrs, { onClick: this.handleItemChange, onKeyUp: this.handleItemChange }), h("r-icon", { name: "angle-right", size: "s" })), this.variant === 'maximized' && (h(LastTagName, Object.assign({}, lastArrowAttrs, { onClick: this.handleItemChange, onKeyUp: this.handleItemChange }), h("r-icon", { name: "angle-right-with-vertical-line", size: "s" }))))));
+            return (h(Fragment, null, h("div", { ref: el => (this.footerRef = el), class: "r-pagination--footer" }, this.variant === 'maximized' && (h("r-icon-button", { "data-index": first, name: "angle-left-with-vertical-line", size: "s", disabled: this.isNotFirstPage, label: this.firstPageButtonLabel, class: "r-pagination--item arrow first", onRClick: this.handleItemChange })), h("r-icon-button", { "data-index": previous, name: "angle-left", size: "s", disabled: this.isNoPreviousPage, label: this.previousPageButtonLabel, class: "r-pagination--item arrow previous", onRClick: this.handleItemChange }), renderNumbers(), h("r-icon-button", { "data-index": next, name: "angle-right", size: "s", disabled: this.isNoNextPage, label: this.nextPageButtonLabel, class: "r-pagination--item arrow next", onRClick: this.handleItemChange }), this.variant === 'maximized' && (h("r-icon-button", { "data-index": this.total, name: "angle-right-with-vertical-line", size: "s", disabled: isLastPage, label: this.lastPageButtonLabel, class: "r-pagination--item arrow last", onRClick: this.handleItemChange })))));
         };
-        return (h(Host, null, h("nav", { class: "r-pagination", "aria-label": "Pagination" }, this.resultsLine && renderHeader(), renderList())));
+        return (h(Host, { role: "navigation" }, h("div", { class: "r-pagination" }, this.resultsLine && renderHeader(), renderList())));
     }
     static get is() { return "r-pagination"; }
     static get encapsulation() { return "shadow"; }
@@ -561,6 +567,146 @@ export class RPagination {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "'top'"
+            },
+            "previousPageButtonLabel": {
+                "type": "string",
+                "attribute": "previous-page-button-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for Previous Page button. Important to ensure accessibility for screen reader users."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Go to the previous page'"
+            },
+            "nextPageButtonLabel": {
+                "type": "string",
+                "attribute": "next-page-button-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for Next Page button. Important to ensure accessibility for screen reader users."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Go to the next page'"
+            },
+            "firstPageButtonLabel": {
+                "type": "string",
+                "attribute": "first-page-button-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for First Page button. Important to ensure accessibility for screen reader users."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Go to the first page'"
+            },
+            "lastPageButtonLabel": {
+                "type": "string",
+                "attribute": "last-page-button-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for Last Page button. Important to ensure accessibility for screen reader users."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Go to the last page'"
+            },
+            "pageLabel": {
+                "type": "string",
+                "attribute": "page-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for Page number buttons. Important to ensure accessibility for screen reader users."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Page'"
+            },
+            "ellipsisLabel": {
+                "type": "string",
+                "attribute": "ellipsis-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for Ellipsis stepper. Important to ensure accessibility for screen reader users."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Ellipsis indicating skipped pages'"
+            },
+            "itemsPerPageLabel": {
+                "type": "string",
+                "attribute": "items-per-page-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for Items per page select."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Items per page'"
             }
         };
     }

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

@@ -161,10 +161,10 @@ export class Panel {
         }
     }
     render() {
-        return (h(Host, { key: 'aace877d6d376afd9cbac880bdc7d462ccee34e7', role: "navigation", collapsed: this.isCollapsed }, h("div", { key: 'c07a80d9fbefa984af49e105c37675585241dc96', class: "r-panel" }, h("div", { key: '6b16c3af37e340153a9449704bee1d9925309fd6', class: "r-panel--header" }, this.hasHeader && (h("a", { key: '56d04db007a0305db77010fc59b23467c4ab347a', class: "logo-wrapper", href: this.logoLink }, this.isCollapsed ?
+        return (h(Host, { key: '0404a2c3acbba8414d7baffc8c0f861e512fe7cb', role: "navigation", collapsed: this.isCollapsed }, h("div", { key: 'b93d1555f060793b7137fd6aac0de2a1a1f35436', class: "r-panel" }, h("div", { key: 'b7dd2dee4c145a21a5a963750e8b26ab2d8b9bbe', class: "r-panel--header" }, this.hasHeader && (h("a", { key: 'dbb02cd6271fba2a5d4a783a20d5e6d9e34ee734', class: "logo-wrapper", href: this.logoLink }, this.isCollapsed ?
             h("slot", { name: "logo-collapsed" })
             :
-                h("slot", { name: "logo-expanded" }))), this.variant === 'modal' ? (h("r-button", { class: "r-panel--trigger", variant: "blank", icon: "cross", rAriaLabel: `${this.labelCollapse}`, onClick: this.handleFullyCollapsedButtonClick })) : this.variant === 'drawer' ? (h("r-button", { class: "r-panel--trigger", variant: "blank", icon: "angle-left", rAriaLabel: this.isCollapsed ? `${this.labelExpand}` : `${this.labelCollapse}`, onClick: this.handleSemiCollapsedButtonClick })) : this.variant === 'visible' ? (null) : null), h("div", { key: '4d88759343c8172d7b0c8f4750ba3bbb0d027586', class: "r-panel--body" }, h("slot", { key: '8a238430717fa44459b784a27b45f12dcb0b20d3' })), this.hasFooter && !this.isCollapsed && (h("div", { key: '74bc26fe68ea907ea844f1b36ab78be45ffd1540', class: "r-panel--footer" }, h("slot", { key: 'bd294360e84e060493088d42b6dd022e4d3058a9', name: "footer" }))))));
+                h("slot", { name: "logo-expanded" }))), this.variant === 'modal' ? (h("r-button", { class: "r-panel--trigger", variant: "blank", icon: "cross", rAriaLabel: `${this.labelCollapse}`, onClick: this.handleFullyCollapsedButtonClick })) : this.variant === 'drawer' ? (h("r-button", { class: "r-panel--trigger", variant: "blank", icon: "angle-left", rAriaLabel: this.isCollapsed ? `${this.labelExpand}` : `${this.labelCollapse}`, onClick: this.handleSemiCollapsedButtonClick })) : this.variant === 'visible' ? (null) : null), h("div", { key: 'bb3d86b7a4b0890709d4a4637eca033ddaec24a6', class: "r-panel--body" }, h("slot", { key: '201aa3f616d3d239fc7b0edc23565a6618304ce5' })), this.hasFooter && !this.isCollapsed && (h("div", { key: 'a15f34fbb86ad8b16c6d036b885c7c8b13655fc6', class: "r-panel--footer" }, h("slot", { key: '41de73edf832d3a5ca93e4f9a79a62780fdcd68b', name: "footer" }))))));
     }
     static get is() { return "r-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/popover/popover.css

@@ -1,7 +1,6 @@
 :host {
   position: relative;
   overflow: visible;
-  color: var(--r-text-inverse);
   font-family: var(--r-font-family-text, system-ui);
   font-weight: var(--r-font-weight-regular, 400);
   font-size: var(--r-font-size-400, 1rem);

package/dist/collection/components/popover/popover.js

@@ -60,12 +60,17 @@ export class Popover {
             this.isOpen = false;
             requestAnimationFrame(() => {
                 this.setBlur();
-                this.triggerElement.focus();
+                const interactiveElement = this.getInteractiveElement(this.activeElement || this.triggerElement);
+                interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.focus();
             });
         };
         this.onClickDismiss = () => {
             this.hide();
         };
+        this.updateTriggerAttributes = () => {
+            const interactiveElement = this.getInteractiveElement(this.activeElement);
+            interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.setAttribute('aria-expanded', `${this.isOpen}`);
+        };
         this.onKeyDown = async (event) => {
             if (event.key === 'Tab') {
                 event.preventDefault();
@@ -165,6 +170,7 @@ export class Popover {
             (_h = (_g = this.hidePopover) === null || _g === void 0 ? void 0 : _g.emit) === null || _h === void 0 ? void 0 : _h.call(_g);
         }
         (_k = (_j = this.popoverOpenChange) === null || _j === void 0 ? void 0 : _j.emit) === null || _k === void 0 ? void 0 : _k.call(_j);
+        this.updateTriggerAttributes();
     }
     handlePreferredPositionChange() {
         this.renderPosition();
@@ -194,6 +200,30 @@ export class Popover {
         var _a;
         return (_a = this.boardElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
     }
+    get activeElement() {
+        var _a;
+        return (_a = this.host.querySelector('r-popover-trigger')) === null || _a === void 0 ? void 0 : _a.querySelector('r-button, r-icon-button, a, button, [tabindex]:not([tabindex="-1"])');
+    }
+    get headlineSlotContent() {
+        var _a;
+        const el = this.host.querySelector('[slot="headline"]');
+        return (_a = el === null || el === void 0 ? void 0 : el.textContent) === null || _a === void 0 ? void 0 : _a.trim();
+    }
+    /**
+     * 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;
+    }
     /** Position logic */
     renderPosition() {
         if (!this.triggerRect)
@@ -276,12 +306,23 @@ export class Popover {
         this.host.setAttribute('data-horizontal', horizontalPosition);
         return this;
     }
+    setTriggerInitialAttributes() {
+        const interactiveElement = this.getInteractiveElement(this.activeElement);
+        interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.setAttribute('aria-haspopup', 'dialog');
+        interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.setAttribute('aria-expanded', `${this.isOpen}`);
+    }
     componentDidLoad() {
+        var _a;
         this.open ? this.show() : this.hide();
+        this.setTriggerInitialAttributes();
+        (_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => {
+            this.toggle();
+        });
     }
     render() {
-        return (h(Host, { key: '13318df823b3f54e05823c9fc9821839f56583b2', id: this.uniqueId, "data-position": this.positionState, "data-open": `${this.isOpen}`, open: this.isOpen }, h("div", { key: '3f750ac2a82236f6a4074fa419b44f0c42f2b7e6', class: "r-popover" }, h("button", { key: '46e4bb247c2eda0e0cc0c4774acac6daf8801bc4', class: "r-popover--trigger", "aria-label": this.triggerAriaLabel, ref: el => this.triggerElement = el, popoverTarget: `${this.uniqueId}-board`, popoverTargetAction: this.triggerAction }, h("slot", { key: 'fac2e6d0ee9ac8830df16d379a0ec5e873becd58', name: "trigger" })), h("div", { key: '636c2ee45476903dc8b812924081f3b45499b18a', class: "r-popover--board", id: `${this.uniqueId}-board`, popover: this.dismissMode, ref: el => this.boardElement = el, onToggle: this.onToggle, onKeyDown: this.onKeyDown }, this.hasDismiss &&
-            h("r-icon-button", { key: '4f6a1168587faf500cddb85981f0dd7209af4020', ref: el => this.dismissElement = el, class: "r-popover--dismiss", name: "cross", onClick: this.onClickDismiss, label: this.dismissAriaLabel }), h("div", { key: 'bfa17c2df8022a01192550c315ba32e3a5247e3f', class: "r-popover--board-content" }, h("slot", { key: '001d74737028aee0d413e9ed679ff853070d5559', name: "headline" }), h("slot", { key: '9a33119f2e2f6bf10f0005f83283a1e964332583', name: "content" }), h("slot", { key: '2ff477aed3ef83d6bfff4fb3fdaeb3501dfba7c7', name: "action" })), h("div", { key: '6c0b891bc2e9def0892f65fe8882deef565b2037', class: "r-popover--board-pointer", "aria-hidden": "true" }, h("svg", { key: 'e9da72e80bb395041f4a9cc269cf835b643a335c', width: "16", height: "8", viewBox: "0 0 16 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '44eb8e0fa2c3d294074787595097fcdf82311052', d: "M8 8L0 0L16 0L8 8Z", fill: "currentColor" })))))));
+        const TAG = !this.activeElement ? 'button' : 'div';
+        return (h(Host, { key: 'f836d35a44519d273dc399d0ae6142f17e78888e', id: this.uniqueId, "data-position": this.positionState, "data-open": `${this.isOpen}`, open: this.isOpen }, h("div", { key: '88146350c8695487a18028a20bf1313052b35870', class: "r-popover" }, h(TAG, { key: 'de1a53f1f921acc223ebd0276b46e43832e5a82f', class: "r-popover--trigger", "aria-label": !this.activeElement ? this.triggerAriaLabel : null, ref: el => this.triggerElement = el, "aria-haspopup": "dialog", popoverTarget: !this.activeElement ? `${this.uniqueId}-board` : null, popoverTargetAction: !this.activeElement ? this.triggerAction : null }, h("slot", { key: '2946f68024273f6b7bbb250faca7794eb712cc58', name: "trigger" })), h("div", { key: 'cf44066fb1ec34178d73b812f5bcca3b1977575d', class: "r-popover--board", id: `${this.uniqueId}-board`, role: "dialog", "aria-label": this.headlineSlotContent, popover: this.dismissMode, ref: el => this.boardElement = el, onToggle: this.onToggle, onKeyDown: this.onKeyDown }, this.hasDismiss &&
+            h("r-icon-button", { key: '41e3e2bef98b88328984233271e7378a767eaf76', ref: el => this.dismissElement = el, class: "r-popover--dismiss", name: "cross", onClick: this.onClickDismiss, label: this.dismissAriaLabel }), h("div", { key: '9d47e8f5e2cb4d27118b64cfcf3eb83dd7d84ff0', class: "r-popover--board-content" }, h("slot", { key: '68f384a418a32a14b01adb7e3d407e4e46f8ca95', name: "headline" }), h("slot", { key: '3536f9f3aa738919115c1ad017cd0f66438fb044', name: "content" }), h("slot", { key: '4ecbf5d23cb23f9adaade04f3694a6d17f773365', name: "action" })), h("div", { key: '1c3acee058d689e106b9fca008d77229d52b2aea', class: "r-popover--board-pointer", "aria-hidden": "true" }, h("svg", { key: 'bb211b28714acc84753bbaaafee1ab1624d51b6c', width: "16", height: "8", viewBox: "0 0 16 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '0ad29cb4ef8d2d7f62738af3b1749c5b5e007d87', d: "M8 8L0 0L16 0L8 8Z", fill: "currentColor" })))))));
     }
     static get is() { return "r-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/popover-action/popover-action.js

@@ -64,7 +64,7 @@ export class PopoverAction {
         return focusableElements(this.host);
     }
     render() {
-        return (h(Host, { key: '898d4a649622403956b34ea5065ca5135e67c595', slot: "action" }, h("slot", { key: 'f61e085a1797778c33f07eaf3987cd743d56a662', onSlotchange: this.handleSlotChange })));
+        return (h(Host, { key: '8e0de158033b48c66aa49930911e1f383c2010ae', slot: "action" }, h("slot", { key: 'b9c762d2c1774600a29306559253125abc21cbcd', onSlotchange: this.handleSlotChange })));
     }
     static get is() { return "r-popover-action"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/popover-content/popover-content.js

@@ -44,7 +44,7 @@ export class PopoverContent {
         return focusableElements(this.host);
     }
     render() {
-        return (h(Host, { key: 'b85780e40b627c6d859af763113bc88e21768f88', slot: "content", class: "r-typography" }, h("slot", { key: '7bd5e6152e29a4e20d837c21e1df7bff68a673da' })));
+        return (h(Host, { key: 'f05a31b3948094f5f7ca657f4bd81474af2fcb6e', slot: "content", class: "r-typography" }, h("slot", { key: '0ecbe8de6c0ec200499aead61fc883804c4c4dd7' })));
     }
     static get is() { return "r-popover-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/popover-headline/popover-headline.js

@@ -10,7 +10,7 @@ export class PopoverHeadline {
         stopInverseThemeAwareness(this.host, themeContextElement);
     }
     render() {
-        return (h(Host, { key: '6b604401e4e82c17a300f00d6af33902b38f493c', slot: "headline" }, h("slot", { key: '64c8c6ff661e0317ba3ae0d4f32f6424d91fccbe' })));
+        return (h(Host, { key: '21f1656241f40201d5eb98cfb454d9c509f6cfe1', slot: "headline" }, h("slot", { key: 'fa9861bd13bcb23b420c5b5aa085ba6ceecb3df4' })));
     }
     static get is() { return "r-popover-headline"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/popover-trigger/popover-trigger.js

@@ -53,7 +53,7 @@ export class PopoverTrigger {
         (_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
     }
     render() {
-        return (h(Host, { key: 'fe285ee3a91600ee0e0cebeb9f5818eb30d89f06', slot: "trigger", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("slot", { key: '3782871f7aac634d3c1ccef2f516cdf00916b4f6' })));
+        return (h(Host, { key: '313cccef6d7f463a6088581b2efc3057a97d61b2', slot: "trigger", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("slot", { key: '65ff3ba6c677c693445c0c82feae795a94768cf8' })));
     }
     static get is() { return "r-popover-trigger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-bar/progress-bar.js

@@ -11,7 +11,7 @@ export class ProgressBar {
             max: '100',
             'aria-label': rAriaLabel
         };
-        return (h(Host, { key: 'f79c73155a42eef63910abde1fc2cebd147b7129' }, h("progress", Object.assign({ key: 'ce94e9a20124fa8cd1561612e2797e17f0ebe19f' }, progressBarAttrs, { class: "r-progress-bar" }))));
+        return (h(Host, { key: '8d8307ebac0b8a231569bd86c35175d9f11e14ac' }, h("progress", Object.assign({ key: '631b8ecaaca4fde5c14ddabb74ff076610557832' }, progressBarAttrs, { class: "r-progress-bar" }))));
     }
     static get is() { return "r-progress-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio-button/radio-button.js

@@ -64,7 +64,8 @@ export class RadioButton {
     /** Reference to the radio button elements */
     get radioElements() {
         if (this.groupEl) {
-            return this.groupEl.querySelectorAll(`r-radio-button`);
+            // Use :scope > to only select direct children, excluding nested radio-group buttons
+            return this.groupEl.querySelectorAll(`:scope > r-radio-button`);
         }
         if (this.parentFormEl) {
             return this.parentFormEl.querySelectorAll(`r-radio-button[name=${this.name}]`);
@@ -117,11 +118,11 @@ export class RadioButton {
             required,
             autofocus
         };
-        return (h(Host, { key: '718b29840798212b4a31a2250fe79620554a9fb5' }, h("label", { key: 'ab86d4ca9bb300628a5b7f4bf10ba2ce88656d6d', class: "r-radio-button", onClick: this.onClick, onKeyDown: this.onKeydown }, h("input", Object.assign({ key: '529324a5ae32238b56ab9443a9ba3dd67b9b76bd' }, inputAttrs, { id: `${uniqueId}-input`, class: "r-radio-button--input", ref: el => this.nativeEl = el, onFocus: this.onFocus, onBlur: this.onBlur })), h("span", { key: 'a90a3704b4fc2d431482cca0c4064241001e09d2', class: "r-radio-button--box" }), this.isLeading &&
-            h("div", { key: '8a067dc10dc0f764c507be6610a8bf6f80565f8b', class: "r-radio-button--leading" }, h("slot", { key: 'db99a204cdf0932b203a65698f6167ede11309c4', name: "leading" }, this.icon && h("r-icon", { key: '8f6b1c585e0dcfcee9bb471e59f4d911ff72e7bc', name: this.icon, size: "m" }))), h("div", { key: 'b2ec0c20df6bffa599c5331016f3c52ce5661a17', class: "r-radio-button--text" }, h("slot", { key: '82ed5be7758c72ece18d4df27c0dbeb7e00ab1fc', name: "title" }, h("div", { key: '9c839853016eb5e7a3940bea0f9c5c755933ae55', style: { display: 'contents' } }, h("slot", { key: '78875045c000e5dcd0375fe2143e3032bf3a5226' }))), h("slot", { key: 'd75f2511dc33c734eb34c0d8953ed5be2f4cb7ea', name: "description" }, this.description)), this.isTrailing &&
-            h("div", { key: 'fd204a1c99ac54d60fc4479de3ca650d8ecf6508', class: "r-radio-button--trailing" }, h("slot", { key: '9a82590bc860567d1a60f9125622b1e63471ad94', name: "trailing" }))), invalid && error &&
-            h("r-hint", { key: '1fc760af1aff4ca5aaa595270c294b492fdb14e3', role: "alert", variant: "error", id: `${uniqueId}-hint` }, this.error), hint &&
-            h("r-hint", { key: '079a060908d285505f7093820933c173194f2348', role: "note", variant: "information", id: `${uniqueId}-hint` }, hint)));
+        return (h(Host, { key: 'cf6b1b5db202773a2c6eea4df6a9303275054a73' }, h("label", { key: '4e203583a2b779e239c2893eadccc3514f84b0c4', class: "r-radio-button", onClick: this.onClick, onKeyDown: this.onKeydown }, h("input", Object.assign({ key: '14e89b050928abd51b66e8637c39bbd8da8e9856' }, inputAttrs, { id: `${uniqueId}-input`, class: "r-radio-button--input", ref: el => this.nativeEl = el, onFocus: this.onFocus, onBlur: this.onBlur })), h("span", { key: 'ee55afd60c5dbb947e9c12fffc401f7acfcefada', class: "r-radio-button--box" }), this.isLeading &&
+            h("div", { key: 'eabd27b399dee0bc2cef0fb7a92adad55095708b', class: "r-radio-button--leading" }, h("slot", { key: '5ec99653141268456cf9c8b2398f70c7b1afd36d', name: "leading" }, this.icon && h("r-icon", { key: '47662e84ad1aac02e867ddd040b5b7e1890ba986', name: this.icon, size: "m" }))), h("div", { key: 'bcaaf67c6cdf95a0bfa0dd5784d69c237e551a0e', class: "r-radio-button--text" }, h("slot", { key: 'a54f1823afe368d85f9bd4743ac0aa1df7298049', name: "title" }, h("div", { key: 'b531b659b920d7f064f10e622b83099d14270935', style: { display: 'contents' } }, h("slot", { key: 'b51f3e83234681804c49cb1043d90de70e4929db' }))), h("slot", { key: 'd217abfd3675898afd5b41a543200f7104019aed', name: "description" }, this.description)), this.isTrailing &&
+            h("div", { key: '664ddcc19dba3029343532caa13b05a6e3834977', class: "r-radio-button--trailing" }, h("slot", { key: 'b4ec626236a01c9c74b20ae09194ea414bc7699c', name: "trailing" }))), invalid && error &&
+            h("r-hint", { key: 'bd60d4337984662f410613b470b6e3be695343f5', role: "alert", variant: "error", id: `${uniqueId}-hint` }, this.error), hint &&
+            h("r-hint", { key: '31c5712fe6f2164219e28484a40ce5452a836743', role: "note", variant: "information", id: `${uniqueId}-hint` }, hint)));
     }
     static get is() { return "r-radio-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio-button-description/radio-button-description.js

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class RadioButtonDescription {
     render() {
-        return (h(Host, { key: 'cd678f2b6c1e00e95ecfc56b1e460b3b3ab37597', slot: "description" }, h("div", { key: 'a19901417798ef6dacd6ad82c9eab7e2a8227cd5', class: "r-radio-button-description", style: { display: 'contents' } }, h("slot", { key: 'ba9308abf507f84affb24bb7eb8a43c8da4fd613' }))));
+        return (h(Host, { key: '0cc8dafb54d3b65f6c3af977bde4019ac413042d', slot: "description" }, h("div", { key: '7347ec0238fbf3c8471cdcf6fb3cf303a0f9c4e7', class: "r-radio-button-description", style: { display: 'contents' } }, h("slot", { key: '940714dd9b350c10b47486454139506d38fa0366' }))));
     }
     static get is() { return "r-radio-button-description"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio-button-leading/radio-button-leading.js

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class RadioButtonLeading {
     render() {
-        return (h(Host, { key: '272870387e6e1abe3db2a67a38cfcd502a0e5aac', slot: "leading" }, h("div", { key: '7fd29eb8b31cda51e7a3bebebf8d80c7b0a79622', class: "r-radio-button-leading", style: { display: 'contents' } }, h("slot", { key: '542afc33263c2f06007b1c50225457af3e1b9051' }))));
+        return (h(Host, { key: '2f4f3dae827959cebf6a5b5797d8942b6fbbeded', slot: "leading" }, h("div", { key: '6dfda6f9bf0c88056d3d46f095b1f30e615ac5d7', class: "r-radio-button-leading", style: { display: 'contents' } }, h("slot", { key: 'd909c93595d5f43ad3d8b93262134b52fbfde23c' }))));
     }
     static get is() { return "r-radio-button-leading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio-button-title/radio-button-title.js

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class RadioButtonTitle {
     render() {
-        return (h(Host, { key: '705ecfa00df2a6e5f1976e1e45dca02c2d63d0fb', slot: "title" }, h("div", { key: '9845596a7638b53995157c26ee89be55677ff2e9', class: "r-radio-button-title", style: { display: 'contents' } }, h("slot", { key: '5ec9a59d7d71f976513dddb471676d640e13e239' }))));
+        return (h(Host, { key: '2d2ae73f63409f55e0d5920c351cfed20d3b69d9', slot: "title" }, h("div", { key: '8f0ed8680798a41ddf827e74b245e43464f51eb0', class: "r-radio-button-title", style: { display: 'contents' } }, h("slot", { key: '336df52466bdad5baa93b1ed6abb192bee958e30' }))));
     }
     static get is() { return "r-radio-button-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio-button-trailing/radio-button-trailing.js

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class RadioButtonTrailing {
     render() {
-        return (h(Host, { key: '844ad8251f30a4b0b6e700d0864798957e53750b', slot: "trailing" }, h("div", { key: '26a3458b5a448a9d8a687081325a5aa93c83e512', class: "r-radio-button-trailing", style: { display: 'contents' } }, h("slot", { key: 'fc1634011f555127d3281351a8ba9d7fdc1a7a38' }))));
+        return (h(Host, { key: '628b87d2952aad3e25f8fd6b0b61c6db06a15959', slot: "trailing" }, h("div", { key: '93d2888f3e10e6346fda143ba8d0757d2913a503', class: "r-radio-button-trailing", style: { display: 'contents' } }, h("slot", { key: '5929143a1c1b54e9e3f082dd54c2e1376a80dece' }))));
     }
     static get is() { return "r-radio-button-trailing"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,6 +32,9 @@
 :host .r-radio-group {
   display: var(--r-radio-group--display, flex);
   flex-direction: var(--r-radio-group--flex-direction, column);
+  padding: var(--r-radio-group--padding, 0);
+  margin: var(--r-radio-group--margin, 0);
+  border: var(--r-radio-group--border, none);
 }
 :host .r-radio-group--label-container {
   display: var(--r-radio-group--label-container--display, flex);
@@ -57,6 +60,6 @@
   flex-wrap: var(--r-radio-group--content--flex-wrap, nowrap);
   gap: var(--r-radio-group--content--gap, var(--r-spacing-050, 0.5rem));
 }
-:host .r-radio-group + r-hint {
+:host .r-radio-group + .r-radio-group--message r-hint {
   margin-top: var(--r-radio-group--hint--margin-top, var(--r-spacing-050, 0.5rem));
 }