@riverty/web-components 6.0.0 → 6.2.0

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

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

@@ -71,8 +71,36 @@ export class RadioGroup {
         this.contributeToFormData = (event) => {
             appendControlToFormData(this.host, event.formData);
         };
+        /**
+         * Handles parent radio group value changes for nested groups.
+         * If this is a nested group with a parentValue specified, it will reset when
+         * the parent group's value changes to something other than the parentValue.
+         */
+        this.onParentGroupChange = (event) => {
+            // Only proceed if this group has a parentValue specified (indicating it's nested)
+            if (!this.parentValue)
+                return;
+            const parentNewValue = event.detail.value;
+            // If parent changed to a different value than our parentValue, reset this nested group
+            if (parentNewValue !== this.parentValue) {
+                this.clearValue();
+                // Emit rReset event to notify that the nested group was automatically reset
+                this.rReset.emit({
+                    element: this.host,
+                    value: null
+                });
+            }
+        };
     }
     rChangeAction(event) {
+        // Only handle events from direct children, not from nested radio-groups
+        const targetElement = event.target;
+        const isDirectChild = targetElement.parentElement === this.host;
+        if (!isDirectChild) {
+            return; // Ignore events from nested radio-groups
+        }
+        // Stop event from bubbling to parent radio-groups
+        event.stopPropagation();
         this.resetValidity();
         this.setValue(event.detail.value);
     }
@@ -82,6 +110,14 @@ export class RadioGroup {
      * to their initial values.
      */
     radioButtonClickAction(event) {
+        // Only handle events from direct children, not from nested radio-groups
+        const targetElement = event.target;
+        const isDirectChild = targetElement.parentElement === this.host;
+        if (!isDirectChild) {
+            return; // Ignore events from nested radio-groups
+        }
+        // Stop event from bubbling to parent radio-groups
+        event.stopPropagation();
         !event.target.disabled && event.target.select();
     }
     get selectedIndex() {
@@ -93,6 +129,7 @@ export class RadioGroup {
         return isnativeFirstElement || isNoSelected ? this.radioButtonElements.length - 1 : this.selectedIndex - 1;
     }
     get focusedRadioButtonEl() {
+        // Query all descendants to find focused element, but it will only be used for direct children
         return this.host.querySelector('r-radio-button.focused');
     }
     get focusedRadioButtonElIndex() {
@@ -108,6 +145,14 @@ export class RadioGroup {
     }
     radioButtonKeydownAction(event) {
         var _a;
+        // Only handle events from direct children, not from nested radio-groups
+        const targetElement = event.target;
+        const isDirectChild = targetElement.parentElement === this.host;
+        if (!isDirectChild) {
+            return; // Ignore events from nested radio-groups
+        }
+        // Stop event from bubbling to parent radio-groups
+        event.stopPropagation();
         switch (event.detail.code) {
             case 'ArrowUp':
             case 'ArrowLeft':
@@ -254,7 +299,8 @@ export class RadioGroup {
         return this.host.closest('form') || document.querySelector(`#${this.form}`) || null;
     }
     get radioButtonElements() {
-        return this.host.querySelectorAll('r-radio-button:not([disabled]:not([disabled="false"]))');
+        // Use :scope > to only select direct children, excluding nested radio-group buttons
+        return this.host.querySelectorAll(':scope > r-radio-button:not([disabled]:not([disabled="false"]))');
     }
     get selectedRadioButtonElement() {
         return Array.from(this.radioButtonElements).find(el => el.checked || el.hasAttribute('checked')) || null;
@@ -292,6 +338,11 @@ export class RadioGroup {
         const el = this.nativeSelectedEl || this.nativeFirstEl;
         el === null || el === void 0 ? void 0 : el.setAttribute('tabindex', '0');
     }
+    get parentRadioGroup() {
+        var _a;
+        // Find the parent radio group element
+        return ((_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.closest('r-radio-group')) || null;
+    }
     connectFormEventListeners() {
         var _a, _b, _c;
         (_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.addEventListener('formdata', this.contributeToFormData);
@@ -304,11 +355,28 @@ export class RadioGroup {
         (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('reset', this.onResetForm);
         (_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.removeEventListener('submit', this.onSubmitForm);
     }
+    connectParentGroupListener() {
+        // Only connect if this is a nested group (has parentValue specified)
+        if (this.parentValue && this.parentRadioGroup) {
+            this.parentRadioGroup.addEventListener('rChange', this.onParentGroupChange);
+        }
+    }
+    disconnectParentGroupListener() {
+        if (this.parentValue && this.parentRadioGroup) {
+            this.parentRadioGroup.removeEventListener('rChange', this.onParentGroupChange);
+        }
+    }
+    get ariaDescribedBy() {
+        const messageId = `${this.uniqueId}-message`;
+        return this.hint ? `${this.uniqueId}-hint ${messageId}` : messageId;
+    }
     connectedCallback() {
         this.connectFormEventListeners();
+        this.connectParentGroupListener();
     }
     disconnectedCallback() {
         this.disconnectFormEventListeners();
+        this.disconnectParentGroupListener();
     }
     componentWillLoad() {
         const { required, name } = this;
@@ -323,18 +391,23 @@ export class RadioGroup {
         this.passPropsToGroupItems({ name, required });
         this.setTabindex();
         if (this.autofocus) {
-            queueMicrotask(() => {
+            // Use setTimeout to ensure setValue has completed and checked state is synced
+            setTimeout(() => {
                 this.setFocus();
-            });
+            }, 0);
         }
     }
     render() {
         const { label, hint, fieldIndicator, error, uniqueId, invalid } = this;
-        return (h(Host, { key: '598a714f75ce283c76278d52fb7684c5818700f9' }, h("div", { key: '0c691e6738d11dcc8b621fe90b356980944ce5ec', class: "r-radio-group", onClick: this.onLabelClick }, label &&
-            h("div", { key: '3071e2dedc5e9935bd6f80cc3e01883d8bffacc6', class: "r-radio-group--label-container" }, h("r-label", { key: '6175d4620468c3d2b06790baf11673c47e797bd7', id: `${uniqueId}-label`, class: "r-radio-group--label", "field-indicator": fieldIndicator }, label), h("slot", { key: '9c3595a94234b99bec2001c9667c53cd41d8fdde', name: "popover" })), hint &&
-            h("r-hint", { key: '8d9ef5dbaacac8a9cae05a633c942c8009b3d686', id: `${uniqueId}-hint`, class: "r-radio-group--hint", role: "note" }, hint), h("div", { key: '9206c8f841cc20ee632f58da3775e1d967730c58', class: "r-radio-group--content" }, h("slot", { key: '1f7edd0e36e16956acf7dbe5dd17c16a43b39666' }))), invalid && error &&
-            h("r-hint", { key: 'e4780947cede5a39e553d639eb37aeb842f1cda3', "aria-live": "polite", id: `${uniqueId}-message`, role: "alert", variant: "error" }, error), this.validityState !== 'valid' && this.validityMessage &&
-            h("r-hint", { key: '4c9867129f7da323cc9e99b350332ac1d5740a0e', "aria-live": "polite", id: `${uniqueId}-message`, role: "alert", variant: "error" }, this.customErrorMessage || this.validityMessage)));
+        const fieldsetAttrs = {
+            'aria-invalid': `${invalid || false}`,
+            'aria-describedby': this.ariaDescribedBy
+        };
+        return (h(Host, { key: 'bd1b1d42f3efab78cf0a2cce7b1a1e2568f21765' }, h("fieldset", Object.assign({ key: 'c449667b014cf8aeea4176b0d94c82573b661182', class: "r-radio-group" }, fieldsetAttrs, { onClick: this.onLabelClick }), label &&
+            h("legend", { key: '212e27fd8d20b31cf6d84078870ec59796bb59c6', class: "r-radio-group--label-container" }, h("r-label", { key: '69907b0e2bdb49bcdea00d1849bc0c5c4d3404ae', id: `${uniqueId}-label`, class: "r-radio-group--label", "field-indicator": fieldIndicator }, label), h("slot", { key: 'd208c147248154ba26ecc5b412233d2cf479bb68', name: "popover" })), hint &&
+            h("r-hint", { key: 'b409e053226d88ac3619524b2d63864b49972985', id: `${uniqueId}-hint`, class: "r-radio-group--hint", role: "note" }, hint), h("div", { key: 'c8e98214e9b14f6fdcf97677b392abd14d653a56', class: "r-radio-group--content" }, h("slot", { key: '5e4aa07801e8f1bd7ec3262511d28f553d8740a7' })), h("div", { key: 'a576e8c91d33877eb677d5551ac18d10924586fd', id: `${uniqueId}-message`, "aria-live": "polite", role: "alert", class: "r-radio-group--message" }, invalid && error &&
+            h("r-hint", { key: '98f7fa6855c0803ae5d31a3a248c146679204af9', variant: "error" }, error), this.validityState !== 'valid' && this.validityMessage &&
+            h("r-hint", { key: 'de1997af842a7e5fdb887a830fd0fe701e4fa5ce', variant: "error" }, this.customErrorMessage || this.validityMessage)))));
     }
     static get is() { return "r-radio-group"; }
     static get encapsulation() { return "shadow"; }
@@ -642,6 +715,25 @@ export class RadioGroup {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "parentValue": {
+                "type": "string",
+                "attribute": "parent-value",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "For nested radio groups: specifies the parent radio button value that this nested group belongs to.\nWhen the parent group's value changes to a different value, this nested group will be automatically reset.\nThis ensures nested selections are only maintained when their parent context is active."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }

package/dist/collection/components/select/select.js

@@ -445,7 +445,9 @@ export class Select {
         if (!this.isExpanded)
             return;
         e.stopPropagation();
-        if (!this.host.contains(e.target)) {
+        const path = e.composedPath ? e.composedPath() : [];
+        const isInsideSelect = path.includes(this.host);
+        if (!isInsideSelect) {
             this.collapse();
             this.reportValidity();
         }
@@ -1080,8 +1082,8 @@ export class Select {
             disabled,
             required: isRequired
         };
-        return (h(Host, { key: '7f1fb8ee95b7da1cd7aad0d212d1efa9da744dc2', "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}`, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, h("div", { key: 'cb2a21da12f1f1c0dc298f42338d32b709f62375', class: `r-select--label ${!internal ? 'r-select--label__margin-bottom' : ''}` }, h("div", { key: 'd293ba41b9846d24ba4a2c44fb8fcb9895637c03', class: internal ? 'visually-hidden' : 'r-select--label-container' }, h("label", { key: 'b562d22174f435deed545a94d0fd7ce0233ba3de', id: `${uniqueId}-label`, onClick: this.isInteractive ? this.onValueClick : null }, h("r-label", Object.assign({ key: '2412f39f04b62a1fac018b588fb463efc9760ae0' }, labelAttr), label)), h("slot", { key: '99c5c78534118199fc1e99daac2737b78d55bc28', name: "popover" })), hint &&
-            h("r-hint", { key: '74f3cf98c25ba600e8faf8a1793d56ab14c01466', id: `${uniqueId}-hint`, class: "r-select--hint" }, hint)), h("div", { key: '1960780639c8896bc52d1b62269d9453645132ef', class: "r-select" }, h("select", Object.assign({ key: '2b9d75c37066bfeb8e06b4097ecc73bd96358702', class: "r-select--native", ref: el => this.nativeElement = el }, nativeAttrs)), h("div", { key: '3eff5f8f263a013e0ba7ba64eace1da6167b6d1f', class: "r-select--container" }, this.combobox ? this.renderCombobox(comboboxAttrs) : this.renderSelect(comboboxAttrs), h("div", Object.assign({ key: 'bbfb28e905d17feee0bd2693faac327d8ef97894', 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)) && h("r-select-option", { key: '319993c58f2133c271c2db357d22132497751958', "data-no-results": "true", value: "no_results" }, this.noResultsFound), h("slot", { key: 'bbb21659679bb22e3aeb9471a34e3e007ab835d8', onSlotchange: this.handleSlotChange })))), h("div", { key: '5971e5c4f3bbb453dcae9f3ecbdf2c2f14cf0293', 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 && h("r-hint", { key: '1c1aba3c4f3baa93cd6ecab59dd40d99ad5bd0b2', variant: this.invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && this.validityMessage))));
+        return (h(Host, { key: 'f52fa96bdacace6070cd2baa15f8fab939d05916', "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}`, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, h("div", { key: '80326d43674f8caac11678ca4d5a6ca8178f9454', class: `r-select--label ${!internal ? 'r-select--label__margin-bottom' : ''}` }, h("div", { key: '25fa25960350a338c7c9156d38c974c0ad8a0861', class: internal ? 'visually-hidden' : 'r-select--label-container' }, h("label", { key: 'b52ac4d91e32df39459492bbeaf166d2a71d165c', id: `${uniqueId}-label`, onClick: this.isInteractive ? this.onValueClick : null }, h("r-label", Object.assign({ key: 'ac75955086f424e781baf66e6853cbc89ec20d56' }, labelAttr), label)), h("slot", { key: '4cd953da5c64a473070ce4b8a3e5721a36561685', name: "popover" })), hint &&
+            h("r-hint", { key: '2d6a2e9eae51d56f31886725274c637e76ab4d75', id: `${uniqueId}-hint`, class: "r-select--hint" }, hint)), h("div", { key: '8107a1d2475d11d6e827d7394ade84f9c4c85ea5', class: "r-select" }, h("select", Object.assign({ key: 'd7a60a4ff2f8f568da1ea90d859d5de78a1e73ef', class: "r-select--native", ref: el => this.nativeElement = el }, nativeAttrs)), h("div", { key: '9d49470c7e4cc179dfd93cb1233e2bbf86ac7641', class: "r-select--container" }, this.combobox ? this.renderCombobox(comboboxAttrs) : this.renderSelect(comboboxAttrs), h("div", Object.assign({ key: '9594f3439c7591a4e4ef359a205a55d1c56dbb80', 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)) && h("r-select-option", { key: 'ae0ef701ff3e7db4c17aba7d57265122c3bf6587', "data-no-results": "true", value: "no_results" }, this.noResultsFound), h("slot", { key: '012fcee55283c7bc5a3230ff23b692eca33d853b', onSlotchange: this.handleSlotChange })))), h("div", { key: '94fc769d8eeb0bd92f1d12d553b033a3de9ad8dc', 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 && h("r-hint", { key: '881e60130bd3cbc9004aacbb027911357286a516', variant: this.invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && this.validityMessage))));
     }
     static get is() { return "r-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select-option/select-option.js

@@ -128,7 +128,7 @@ export class SelectOption {
             size: iconSize,
             color: iconColor
         };
-        return (h(Host, { key: 'd059d75cec11ef39ddea8c4ddc9ce8bc9d1a57e7', 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}` }, h("div", { key: '70fa5c2fc9194d197b4124b6afad296d2849032c', class: "r-select-option" }, icon && h("span", { key: '07bdfeb2d8330c989e6b59c34ee85cac029135cb', class: "r-select-option--icon" }, h("r-icon", Object.assign({ key: '358748199ca580e8a9d397ed4f5642a722703441' }, iconAttributes))), !icon && hasIconSlot && h("span", { key: '60a4e6059188b27d0fbe6e9b0134882cea803d90', class: "r-select-option--icon" }, h("slot", { key: '08b11beec2c086b21ab92ad6cab080bae1cd0eac', name: "icon" })), h("span", { key: '4397696c7b8ec172098d9bd82e0c89c55781bb91', class: "r-select-option--label" }, h("slot", { key: 'b9dddec8b9c455f130ed38577c9321cb6aced0dd' })))));
+        return (h(Host, { key: 'd75c7a753d325360d4bee79ef7b96fbedd2d9b96', 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}` }, h("div", { key: '8d8d449a5352f90d7731df10ea011856537b02f4', class: "r-select-option" }, icon && h("span", { key: 'f74192805472c8023b921f0a2869772f4c007d78', class: "r-select-option--icon" }, h("r-icon", Object.assign({ key: '6ac112921c222e83df33b2cf0113f3b158a98407' }, iconAttributes))), !icon && hasIconSlot && h("span", { key: '8c5779ab3446a8d4b8880bf1f9958f02d32ca5e4', class: "r-select-option--icon" }, h("slot", { key: '05647b1a0f7fb6f3c996461a825d8d60bb966b50', name: "icon" })), h("span", { key: 'a4de330d788288995da81cd7cbe7a9f8e9ba44c0', class: "r-select-option--label" }, h("slot", { key: '2cb6ac3d005a3bf9b75b0c23d27cbf1930bc15cc' })))));
     }
     static get is() { return "r-select-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/skip-link/skip-link.js

@@ -5,7 +5,7 @@ export class SkipLink {
         this.position = 'center';
     }
     render() {
-        return (h(Host, { key: '5097cfa89ded56bcfb98dc24ca0b1e42c389e4ae' }, h("slot", { key: 'bba803efc4b82b0612e270665d5f80b740a786f1' })));
+        return (h(Host, { key: '08280b6003ccf78bf96eba9778fd3ddcaebc8947' }, h("slot", { key: '7808e8156601912e0192fe0b74bdedda2c359e1c' })));
     }
     static get is() { return "r-skip-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stepper/stepper.css

@@ -1,6 +1,9 @@
 .r-stepper {
   display: var(--r-stepper--display, flex);
   align-items: var(--r-stepper--align-items, top);
+  list-style-type: var(--r-stepper--list-style-type, none);
+  padding: var(--r-stepper--padding, 0);
+  margin: var(--r-stepper--margin, 0);
 }
 .r-stepper > r-stepper-item,
 .r-stepper ::slotted(r-stepper-item) {
@@ -17,6 +20,6 @@
   position: var(--r-stepper-divider--position, relative);
   width: var(--r-stepper-divider--width, 100%);
   height: var(--r-stepper-divider--height, 1px);
-  top: var(--r-stepper-divider--top, 10px);
-  background-color: var(--r-stepper-divider--background-color, var(--r-border-soft, #686868));
+  top: var(--r-stepper-divider--top, 0.625rem);
+  background-color: var(--r-stepper-divider--background-color, var(--r-text-regular, #282828));
 }