@riverty/web-components 6.0.0 → 6.2.0

package/dist/esm/r-radio-button.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.js';
 
 const radioButtonCss = ":host{display:inline-flex;outline:none;position:relative;pointer-events:auto;border:0.0625rem solid transparent;cursor:pointer;min-width:17.5rem}:host slot{display:contents}:host(:hover:not([disabled]:not([disabled=false])):not([checked]:not([checked=false]))){--r-radio-button--cursor:pointer;--r-radio-button--box--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(:active:not([disabled]:not([disabled=false])):not([checked]:not([checked=false]))){--r-radio-button--box--border-color:var(--r-border-regular, #282828);--r-radio-button--box--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host(:focus-within),:host(.focused){--r-radio-button--box--box-shadow:0 0 0 4px var(--r-border-focused-outlined, #fff);--r-radio-button--box--outline:2px solid var(--r-border-focused, #0071e3);--r-radio-button--box--outline-offset:1px}:host([checked]:not([checked=false])),:host([checked]:not([checked=false]):hover){cursor:default;--r-radio-button--box--border-color:var(--r-border-regular, #282828);--r-radio-button--box--background-color:var(--r-background-interactive-softest, #fff);--r-radio-button--marker--transform:scale(1)}:host([invalid]:not([invalid=false])),:host([invalid]:not([invalid=false])[checked]:not([checked=false])){--r-radio-button--box--border-color:var(--r-status-error-regular, #b00c15);--r-radio-button--box--background-color:var(--r-status-error-soft, #fef6f6)}:host([disabled]:not([disabled=false])){--r-radio-button--box--opacity:0.4;cursor:not-allowed}.r-radio-button{display:var(--r-radio-button--display, flex);flex:var(--r-radio-button--flex, 1);gap:var(--r-radio-button--gap, var(--r-spacing-075, 0.75rem));position:var(--r-radio-button--position, relative);min-height:var(--r-radio-button--min-height, 24px);user-select:var(--r-radio-button--user-select, none);box-sizing:var(--r-radio-button--box-sizing, border-box);font-family:var(--r-radio-button--font-family, var(--r-font-family-text, system-ui));font-size:var(--r-radio-button--font-size, var(--r-font-size-400, 1rem));line-height:var(--r-radio-button--line-height, var(--r-line-height-m, 1.5rem));text-align:var(--r-radio-button--text-align, left);color:var(--r-radio-button--color, var(--r-text-regular, #282828));opacity:var(--r-radio-button--opacity, 1);box-shadow:var(--r-radio-button--box-shadow, none);outline:var(--r-radio-button--outline, none);cursor:var(--r-radio-button--cursor, inherit);padding:var(--r-radio-button--padding, var(--r-spacing-100, 1rem));margin:var(--r-radio-button--margin, 0);background-color:var(--r-radio-button--background-color, transparent);border-color:var(--r-radio-button--border-color, transparent);border-width:var(--r-radio-button--border-width, 0);border-style:var(--r-radio-button--border-style, solid)}.r-radio-button--input{position:var(--r-radio-button--input--position, absolute);z-index:var(--r-radio-button--input--z-index, -1);opacity:var(--r-radio-button--input--opacity, 0)}.r-radio-button--box{position:var(--r-radio-button--box--position, relative);display:var(--r-radio-button--box--display, block);top:var(--r-radio-button--box--top, 0);left:var(--r-radio-button--box--left, 0);width:var(--r-radio-button--box--width, 1.5rem);height:var(--r-radio-button--box--height, 1.5rem);background-color:var(--r-radio-button--box--background-color, var(--r-background-interactive-softest, #fff));border-width:var(--r-radio-button--box--border-width, 0.0625rem);border-style:var(--r-radio-button--box--border-style, solid);border-color:var(--r-radio-button--box--border-color, var(--r-border-soft, #686868));border-radius:var(--r-radio-button--box--border-radius, 50%);box-sizing:var(--r-radio-button--box--box-sizing, border-box);box-shadow:var(--r-radio-button--box--box-shadow, none);outline:var(--r-radio-button--box--outline, none);outline-offset:var(--r-radio-button--box--outline-offset, 0);cursor:var(--r-radio-button--box--cursor, inherit);opacity:var(--r-radio-button--box--opacity, 1)}.r-radio-button--box::before{content:var(--r-radio-button--marker--content, \"\");display:var(--r-radio-button--marker--display, block);width:var(--r-radio-button--marker--width, 0.75rem);height:var(--r-radio-button--marker--height, 0.75rem);position:var(--r-radio-button--marker--position, absolute);top:var(--r-radio-button--marker--top, calc(50% - 0.375rem));left:var(--r-radio-button--marker--left, calc(50% - 0.375rem));border-radius:var(--r-radio-button--marker--border-radius, 50%);background-color:var(--r-radio-button--marker--background-color, var(--r-background-interactive-regular, #282828));transition:var(--r-radio-button--marker--transition, 0.1s all);transform:var(--r-radio-button--marker--transform, scale(0));transform-origin:var(--r-radio-button--marker--transform-origin, center)}.r-radio-button--text{flex:var(--r-radio-button--text--flex, 1);display:var(--r-radio-button--text--display, flex);flex-direction:var(--r-radio-button--text--flex-direction, column);gap:var(--r-radio-button--text--gap, var(--r-spacing-025, 0.25rem));font-weight:var(--r-radio-button--text--font-weight, var(--r-font-weight-semibold, 600))}.r-radio-button--leading{min-height:var(--r-radio-button--leading--min-height, var(--r-spacing-150, 1.5rem));min-width:var(--r-radio-button--leading--min-width, calc(var(--r-spacing-150, 1.5rem) + 2 * var(--r-spacing-075, 0.75rem)));color:var(--r-radio-button--leading--color, var(--r-icon-soft, #686868));display:var(--r-radio-button--leading--display, flex);justify-content:var(--r-radio-button--leading--justify-content, center);align-items:var(--r-radio-button--leading--align-items, start)}";
 
@@ -70,7 +70,8 @@ const RadioButton = class {
     /** 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}]`);
@@ -123,11 +124,11 @@ const RadioButton = class {
             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)));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/r-radio-group.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.js';
 import { a as appendControlToFormData } from './formData-DvLT8-y3.js';
 
-const radioGroupCss = ":host{display:flex;flex-direction:column;box-sizing:border-box;margin-bottom:var(--r-spacing-100)}:host ::slotted(r-radio-button){display:var(--r-radio-group--slotted-radio-button--display, flex)}:host ::slotted(.focused){--r-radio-button--box-shadow:0 0 0 3px var(--r-border-focused-outlined, #fff), inset 0 0 0 1px var(--r-border-focused-outlined, #fff);--r-radio-button--outline:2px solid var(--r-border-focused, #0071e3);--r-radio-button--outline-offset:2px}:host slot{display:contents}:host([variant=contained]) ::slotted(r-radio-button){padding:0;--r-radio-button--padding:var(--r-spacing-100, 1rem);--r-radio-button--border-color:var(--r-border-soft, #686868);--r-radio-button--border-width:1px}:host([invalid]:not([invalid=false])) ::slotted(r-radio-button){--r-radio-button--box--border-color:var(--r-status-error-regular, #b00c15);--r-radio-button--box--background-color:var(--r-status-error-soft, #fef6f6);--r-radio-button--marker--background-color:var(--r-status-error-regular, #b00c15)}:host .r-radio-group{display:var(--r-radio-group--display, flex);flex-direction:var(--r-radio-group--flex-direction, column)}:host .r-radio-group--label-container{display:var(--r-radio-group--label-container--display, flex);gap:var(--r-radio-group--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-radio-group--label-container--align-items, center);justify-content:var(--r-radio-group--label-container--justify-content, space-between)}:host .r-radio-group--label-container ::slotted([slot=popover]){display:var(--r-radio-group--popover--display, inline-flex);height:var(--r-radio-group--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-radio-group--popover--align-items, center);justify-content:var(--r-radio-group--popover--justify-content, center);margin-right:var(--r-radio-group--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-radio-group--popover-trigger--min-width, var(--r-spacing-150, 1.5));--r-popover--trigger--min-height:var(--r-radio-group--popover--trigger--min-height, var(--r-spacing-150, 1.5))}:host .r-radio-group--hint{margin-bottom:var(--r-radio-group--hint--margin-bottom, var(--r-spacing-100, 1rem))}:host .r-radio-group--content{display:var(--r-radio-group--content--display, flex);flex-direction:var(--r-radio-group--content--flex-direction, column);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{margin-top:var(--r-radio-group--hint--margin-top, var(--r-spacing-050, 0.5rem))}";
+const radioGroupCss = ":host{display:flex;flex-direction:column;box-sizing:border-box;margin-bottom:var(--r-spacing-100)}:host ::slotted(r-radio-button){display:var(--r-radio-group--slotted-radio-button--display, flex)}:host ::slotted(.focused){--r-radio-button--box-shadow:0 0 0 3px var(--r-border-focused-outlined, #fff), inset 0 0 0 1px var(--r-border-focused-outlined, #fff);--r-radio-button--outline:2px solid var(--r-border-focused, #0071e3);--r-radio-button--outline-offset:2px}:host slot{display:contents}:host([variant=contained]) ::slotted(r-radio-button){padding:0;--r-radio-button--padding:var(--r-spacing-100, 1rem);--r-radio-button--border-color:var(--r-border-soft, #686868);--r-radio-button--border-width:1px}:host([invalid]:not([invalid=false])) ::slotted(r-radio-button){--r-radio-button--box--border-color:var(--r-status-error-regular, #b00c15);--r-radio-button--box--background-color:var(--r-status-error-soft, #fef6f6);--r-radio-button--marker--background-color:var(--r-status-error-regular, #b00c15)}: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);gap:var(--r-radio-group--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-radio-group--label-container--align-items, center);justify-content:var(--r-radio-group--label-container--justify-content, space-between)}:host .r-radio-group--label-container ::slotted([slot=popover]){display:var(--r-radio-group--popover--display, inline-flex);height:var(--r-radio-group--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-radio-group--popover--align-items, center);justify-content:var(--r-radio-group--popover--justify-content, center);margin-right:var(--r-radio-group--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-radio-group--popover-trigger--min-width, var(--r-spacing-150, 1.5));--r-popover--trigger--min-height:var(--r-radio-group--popover--trigger--min-height, var(--r-spacing-150, 1.5))}:host .r-radio-group--hint{margin-bottom:var(--r-radio-group--hint--margin-bottom, var(--r-spacing-100, 1rem))}:host .r-radio-group--content{display:var(--r-radio-group--content--display, flex);flex-direction:var(--r-radio-group--content--flex-direction, column);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-radio-group--message r-hint{margin-top:var(--r-radio-group--hint--margin-top, var(--r-spacing-050, 0.5rem))}";
 
 const RadioGroup = class {
     constructor(hostRef) {
@@ -78,8 +78,36 @@ const RadioGroup = class {
         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);
     }
@@ -89,6 +117,14 @@ const RadioGroup = class {
      * 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() {
@@ -100,6 +136,7 @@ const RadioGroup = class {
         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() {
@@ -115,6 +152,14 @@ const RadioGroup = class {
     }
     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':
@@ -261,7 +306,8 @@ const RadioGroup = class {
         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;
@@ -299,6 +345,11 @@ const RadioGroup = class {
         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);
@@ -311,11 +362,28 @@ const RadioGroup = class {
         (_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;
@@ -330,18 +398,23 @@ const RadioGroup = class {
         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)))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/r-select-option.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.js';
 
 const selectOptionCss = ":host(:hover){--r-select-option--background-color:var(--r-background-interactive-hovered)}:host(:not([aria-disabled=true]):focus){outline:var(--outline, none);--r-select-option--background-color:var(--r-background-interactive-hovered);--r-select-option--border-color:var(--r-background-interactive-softest);--r-select-option--box-shadow:inset 0px 0px 0px 1px var(--r-border-focused-outlined, #fff), inset 0 0 0 3px var(--r-border-focused, #0071e3), inset 0 0 0 4px var(--r-border-focused-outlined, #fff);--r-select-option--outline:2px solid var(--r-border-focused, #0071e3);--r-select-option--outline-offset:-4px;--r-select-option--z-index:1}:host([data-focused=true]){outline:var(--outline, none);--r-select-option--background-color:var(--r-background-interactive-hovered);--r-select-option--border-color:var(--r-background-interactive-softest);--r-select-option--box-shadow:inset 0px 0px 0px 1px var(--r-border-focused-outlined, #fff), inset 0 0 0 3px var(--r-border-focused, #0071e3), inset 0 0 0 4px var(--r-border-focused-outlined, #fff);--r-select-option--outline:2px solid var(--r-border-focused, #0071e3);--r-select-option--outline-offset:-4px}:host(:not([aria-disabled=true]):active){--r-select-option--background-color:var(--r-background-interactive-pressed)}:host([aria-disabled=true]),:host([aria-disabled=true]:hover),:host([aria-disabled=true]:focus){--r-select-option--opacity:0.4;--r-select-option--background-color:transparent}:host([aria-selected=true]){--r-select-option--font-weight:600;--r-select-option--background-color:var(--r-background-interactive-hovered)}:host([aria-hidden=true]){--r-select-option--display:none}:host([icon-position=end]){--r-select-option--flex-direction:row-reverse;--r-select-option--icon--margin-left:0.75em;--r-select-option--icon--margin-right:0}.r-select-option{box-sizing:var(--r-select-option--box-sizing);position:var(--r-select-option--position);display:var(--r-select-option--display, flex);flex-direction:var(--r-select-option--flex-direction, row);min-height:var(--r-select-option--min-height, 1.125em);width:var(--r-select-option--width, auto);font-size:var(--r-select-option--font-size, 1rem);line-height:var(--r-select-option--line-height, 1.2);font-weight:var(--r-select-option--font-weight, normal);padding-top:var(--r-select-option--padding-top, 0.75em);padding-right:var(--r-select-option--padding-right, 0.75em);padding-bottom:var(--r-select-option--padding-bottom, 0.75em);padding-left:var(--r-select-option--padding-left, 0.75em);align-items:var(--r-select-option--align-items, center);color:var(--r-select-option--color, inherit);background-color:var(--r-select-option--background-color, rgba(0, 0, 0, 0));border-color:var(--r-select-option--border-color, rgba(0, 0, 0, 0));border-radius:var(--r-select-option--border-radius, 0);border-width:var(--r-select-option--border-width, 1px);border-style:var(--r-select-option--border-style, solid);box-shadow:var(--r-select-option--box-shadow, none);outline:var(--r-select-option--outline, none);outline-offset:var(--r-select-option--outline-offset, 0);transform:var(--r-select-option--transform, none);z-index:var(--r-select-option--z-index, 0);opacity:var(--r-select-option--opacity, 1)}.r-select-option--icon{display:var(--r-select-option--icon--display, inline-flex);align-items:var(--r-select-option--icon--align-items, center);justify-content:var(--r-select-option--icon--justify-content, center);margin-top:var(--r-select-option--icon--margin-top, 0.05em);margin-left:var(--r-select-option--icon--margin-left, 0);margin-right:var(--r-select-option--icon--margin-right, 0.75em)}.r-select-option--icon svg{display:var(--r-select-option--icon--svg--display, inline-flex)}.r-select-option--label{max-width:var(--r-select-option--label--max-width, 100%);text-overflow:var(--r-select-option--label--text-overflow, ellipsis);white-space:var(--r-select-option--label--white-space, normal)}";
 
@@ -119,7 +119,7 @@ const SelectOption = class {
             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' })))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/r-select.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.js';
 import { a as appendControlToFormData } from './formData-DvLT8-y3.js';
 import { S as StyleObserver } from './style-observer-4Uv3PpKT.js';
 
@@ -446,7 +446,9 @@ const Select = class {
         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();
         }
@@ -1081,8 +1083,8 @@ const Select = class {
             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))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/r-skip-link.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-Da7qOBFr.js';
+import { r as registerInstance, h, H as Host } from './index-CTxpqopm.js';
 
 const skipLinkCss = ":host{display:inline-block;position:absolute;z-index:99999}:host:has(:not(:focus-within)){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host:has(:focus-within){top:var(--r-spacing-100);padding:var(--r-spacing-100);border:1px solid var(--r-border-regular);background:var(--r-background-softest);left:var(--r-skip-link--left, 50%);transform:var(--r-skip-link--transform, translateX(-50%))}:host([position=left]){--r-skip-link--left:var(--r-spacing-100);--r-skip-link--transform:none}::slotted(*:not(:focus-within)){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";
 
@@ -9,7 +9,7 @@ const SkipLink = class {
         this.position = 'center';
     }
     render() {
-        return (h(Host, { key: '5097cfa89ded56bcfb98dc24ca0b1e42c389e4ae' }, h("slot", { key: 'bba803efc4b82b0612e270665d5f80b740a786f1' })));
+        return (h(Host, { key: '08280b6003ccf78bf96eba9778fd3ddcaebc8947' }, h("slot", { key: '7808e8156601912e0192fe0b74bdedda2c359e1c' })));
     }
 };
 SkipLink.style = skipLinkCss;

package/dist/esm/r-stepper-item.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-CTxpqopm.js';
 
-const stepperItemCss = ":host([active]){--r-stepper-item--indicator--background-color:var(--r-background-inverse, #282828);--r-stepper-item--color:var(--r-text-inverse, #FFF);--r-stepper-item--text--color:var(--r-text-regular, #282828);--r-stepper-item--indicator--border-color:transparent}:host([complete]){--r-stepper-item--indicator--background-color:var(--r-status-success-regular, #298535);--r-stepper-item--color:var(--r-text-inverse, #FFF);--r-stepper-item--text--color:var(--r-text-regular, #282828);--r-stepper-item--indicator--border-color:transparent}.r-stepper-item{display:var(--r-stepper-item--display, flex);flex-direction:var(--r-stepper-item--flex-direction, column);align-items:var(--r-stepper-item--align-items, center);justify-content:var(--r-stepper-item--justify-content, center);font-size:var(--r-stepper-item--font-size, var(--r-font-size-200, 13px));color:var(--r-stepper-item--color, var(--r-text-soft, #686868));font-family:var(--r-stepper-item--font-family, var(--r-font-family-text, system-ui));width:var(--r-stepper-item--width, 36px);white-space:var(--r-stepper-item--white-space, nowrap);gap:var(--r-stepper-item--gap, 8px)}.r-stepper-item--indicator{width:var(--r-stepper-item--indicator--width, 20px);height:var(--r-stepper-item--indicator--height, 20px);line-height:var(--r-stepper-item--indicator--line-height, 20px);border-radius:var(--r-stepper-item--indicator--border-radius, 50%);background-color:var(--r-stepper-item--indicator--background-color, transparent);display:var(--r-stepper-item--indicator--display, flex);justify-content:var(--r-stepper-item--indicator--justify-content, center);align-items:var(--r-stepper-item--indicator--align-items, center);border-width:var(--r-stepper-item--indicator--border-width, 1px);border-style:var(--r-stepper-item--indicator--border-style, solid);border-color:var(--r-stepper-item--indicator--border-color, var(--r-border-soft, #686868));margin-left:var(--r-stepper-item--indicator--margin-left, 8px);margin-right:var(--r-stepper-item--indicator--margin-right, 8px)}.r-stepper-item--indicator--step-number{vertical-align:var(--r-stepper-item--step-number--vertical-align, middle)}.r-stepper-item--text{font-size:var(--r-stepper-item--text--font-size, var(--r-font-size-200, 13px));color:var(--r-stepper-item--text--color, var(--r-text-soft, #686868));text-align:var(--r-stepper-item--text--text-align, center)}";
+const stepperItemCss = ":host([active]){--r-stepper-item--indicator--background-color:var(--r-background-inverse, #282828);--r-stepper-item--color:var(--r-text-inverse, #FFF);--r-stepper-item--text--color:var(--r-text-regular, #282828);--r-stepper-item--indicator--border-color:transparent}:host([complete]){--r-stepper-item--indicator--background-color:var(--r-status-success-regular, #298535);--r-stepper-item--color:var(--r-text-inverse, #FFF);--r-stepper-item--text--color:var(--r-text-regular, #282828);--r-stepper-item--indicator--border-color:transparent}::slotted(.visually-hidden),[data-visually-hidden-only=true],.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.r-stepper-item{display:var(--r-stepper-item--display, flex);flex-direction:var(--r-stepper-item--flex-direction, column);align-items:var(--r-stepper-item--align-items, center);justify-content:var(--r-stepper-item--justify-content, center);font-size:var(--r-stepper-item--font-size, var(--r-font-size-200, 0.8125rem));color:var(--r-stepper-item--color, var(--r-text-regular, #282828));font-family:var(--r-stepper-item--font-family, var(--r-font-family-text, system-ui));width:var(--r-stepper-item--width, var(--r-spacing-225, 2.25rem));white-space:var(--r-stepper-item--white-space, nowrap);gap:var(--r-stepper-item--gap, var(--r-spacing-100, 0.5rem))}.r-stepper-item--indicator{width:var(--r-stepper-item--indicator--width, var(--r-spacing-125, 1.25rem));height:var(--r-stepper-item--indicator--height, var(--r-spacing-125, 1.25rem));line-height:var(--r-stepper-item--indicator--line-height, var(--r-spacing-125, 1.25rem));border-radius:var(--r-stepper-item--indicator--border-radius, 50%);background-color:var(--r-stepper-item--indicator--background-color, transparent);display:var(--r-stepper-item--indicator--display, flex);justify-content:var(--r-stepper-item--indicator--justify-content, center);align-items:var(--r-stepper-item--indicator--align-items, center);border-width:var(--r-stepper-item--indicator--border-width, 1px);border-style:var(--r-stepper-item--indicator--border-style, solid);border-color:var(--r-stepper-item--indicator--border-color, var(--r-text-regular, #282828));margin-left:var(--r-stepper-item--indicator--margin-left, var(--r-spacing-100, 0.5rem));margin-right:var(--r-stepper-item--indicator--margin-right, var(--r-spacing-100, 0.5rem))}.r-stepper-item--indicator--step-number{vertical-align:var(--r-stepper-item--step-number--vertical-align, middle)}.r-stepper-item--text{font-size:var(--r-stepper-item--text--font-size, var(--r-font-size-200, 0.8125rem));color:var(--r-stepper-item--text--color, var(--r-text-regular, #282828));text-align:var(--r-stepper-item--text--text-align, center)}";
 
 const StepperItem = class {
     constructor(hostRef) {
@@ -10,13 +10,28 @@ const StepperItem = class {
         /** Defines a property active that determines whether the step is active */
         this.active = false;
     }
+    /**
+     * Checks if the slot contains only visually-hidden elements (no visible text).
+     * Returns true if only visually-hidden elements are present.
+     */
+    get hasOnlyVisuallyHiddenContent() {
+        var _a;
+        const textContent = ((_a = this.host.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+        const visuallyHiddenElement = this.host.querySelector('.visually-hidden');
+        if (!visuallyHiddenElement) {
+            return false;
+        }
+        const visuallyHiddenText = visuallyHiddenElement.textContent || '';
+        const remainingText = textContent.replace(visuallyHiddenText.trim(), '').trim();
+        return !remainingText.length;
+    }
     get hasText() {
         return this.host.textContent.trim().length > 0;
     }
     render() {
         const number = this.number || this.stepNumber;
-        return (h(Host, { key: '3613c92e8ac7583bf5e3db7e90edca9a921fa475' }, h("div", { key: 'ca2c38443d9a855baea829e99ec9c642c279a3be', class: "r-stepper-item" }, h("div", { key: '513f01a9a3ac3a87c3622b14f051765121308241', class: "r-stepper-item--indicator" }, this.complete ? (h("r-icon", { name: "check", size: "s" })) : this.icon ? (h("r-icon", { name: this.icon, size: "s" })) : number !== undefined ? (h("span", { class: "r-stepper-item--indicator--step-number" }, number)) : null), this.hasText &&
-            h("div", { key: 'cec8659e5ff31608b05c6f62798a8a1048cd7539', class: "r-stepper-item--text" }, h("slot", { key: '6a9d581948decc8a15e66401275cb85bf52bb459' })))));
+        return (h(Host, { key: '4f55b5491ec5eee7cad6313fa85e7d6cc89b2178', role: "listitem", "aria-current": this.active ? 'step' : null }, h("div", { key: '2864f0e19f2f11af0f8674b9a701cd948024c085', class: "r-stepper-item" }, h("div", { key: 'de896ec98a13a4b20965a3ca58c5517a30de1f74', class: "r-stepper-item--indicator" }, this.complete ? (h("r-icon", { name: "check", size: "s" })) : this.icon ? (h("r-icon", { name: this.icon, iconAriaLabel: this.label, size: "s" })) : number !== undefined ? (h("span", { "aria-hidden": `${!this.hasOnlyVisuallyHiddenContent}`, class: "r-stepper-item--indicator--step-number" }, number)) : null), this.hasText &&
+            h("div", { key: 'cf3b6b5e3f4454830ecce06a6b6c16225aadd93e', "data-visually-hidden-only": `${this.hasOnlyVisuallyHiddenContent}`, class: "r-stepper-item--text" }, h("slot", { key: '65bd1f231c445f9681750c71ef156297edbf05fb' })))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/r-stepper.entry.js

@@ -1,7 +1,8 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-CTxpqopm.js';
 
-const stepperCss = ".r-stepper{display:var(--r-stepper--display, flex);align-items:var(--r-stepper--align-items, top)}.r-stepper>r-stepper-item,.r-stepper ::slotted(r-stepper-item){display:var(--r-stepper--slotted--stepper-item--display, flex)}.r-stepper>r-stepper-item:not(:last-of-type),.r-stepper ::slotted(r-stepper-item:not(:last-child)){flex:var(--r-stepper--slotted--stepper-item--flex, 1)}.r-stepper>r-stepper-item:not(:last-of-type)::after,.r-stepper ::slotted(r-stepper-item:not(:last-child))::after{content:var(--r-stepper-divider--content, \"\");display:var(--r-stepper-divider--display, block);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))}";
+const stepperCss = ".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){display:var(--r-stepper--slotted--stepper-item--display, flex)}.r-stepper>r-stepper-item:not(:last-of-type),.r-stepper ::slotted(r-stepper-item:not(:last-child)){flex:var(--r-stepper--slotted--stepper-item--flex, 1)}.r-stepper>r-stepper-item:not(:last-of-type)::after,.r-stepper ::slotted(r-stepper-item:not(:last-child))::after{content:var(--r-stepper-divider--content, \"\");display:var(--r-stepper-divider--display, block);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, 0.625rem);background-color:var(--r-stepper-divider--background-color, var(--r-text-regular, #282828))}";
 
+const OFFSET = 20;
 const Stepper = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -9,15 +10,87 @@ const Stepper = class {
         this.completed = 0;
         /** _DEPRECATED_ (use `completed` instead) Completed steps. Default value 0 */
         this.completeSteps = 0;
+        /** Label for completed steps for screen reader users. */
+        this.completedStepsLabel = 'Completed';
+        this.handleSlotChange = () => {
+            this.setStepStatus();
+            this.updateVisibilityOfStepText();
+        };
+    }
+    handleCompletedStepsLabelChange() {
+        this.setStepStatus();
+    }
+    onResize() {
+        this.updateVisibilityOfStepText();
     }
     get hasSteps() {
         return this.host.querySelectorAll('r-stepper-item').length > 0;
     }
+    componentDidLoad() {
+        this.setStepStatus();
+        this.updateVisibilityOfStepText();
+    }
+    setStepStatus() {
+        var _a;
+        const innerSteps = ((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('r-stepper-item')) || [];
+        const slotSteps = this.host.querySelectorAll('r-stepper-item') || [];
+        const allSteps = [...Array.from(innerSteps), ...Array.from(slotSteps)];
+        allSteps === null || allSteps === void 0 ? void 0 : allSteps.forEach((step) => {
+            const existingSpan = step.querySelector('.visually-hidden');
+            if (existingSpan) {
+                existingSpan.remove();
+            }
+            const span = document.createElement('span');
+            span.className = 'visually-hidden';
+            span.textContent = `${step.complete ? `${this.completedStepsLabel}.` : ''}`;
+            step.prepend(span);
+        });
+    }
+    getTextElementWidth(stepElement) {
+        var _a;
+        const textElement = (_a = stepElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.r-stepper-item--text');
+        if (!textElement)
+            return 0;
+        // Temporarily remove visually-hidden to get the natural width
+        const wasHidden = textElement.classList.contains('visually-hidden');
+        if (wasHidden) {
+            textElement.classList.remove('visually-hidden');
+        }
+        const width = textElement.offsetWidth;
+        // Restore the previous state
+        if (wasHidden) {
+            textElement.classList.add('visually-hidden');
+        }
+        return width;
+    }
+    updateVisibilityOfStepText() {
+        const slotSteps = this.host.querySelectorAll('r-stepper-item') || [];
+        let totalWidth = 0;
+        slotSteps.forEach((step) => {
+            totalWidth += this.getTextElementWidth(step) + OFFSET;
+        });
+        const isOverflowing = totalWidth >= this.host.offsetWidth;
+        if (isOverflowing) {
+            slotSteps.forEach((step) => {
+                var _a;
+                (_a = step.shadowRoot.querySelector('.r-stepper-item--text')) === null || _a === void 0 ? void 0 : _a.classList.add('visually-hidden');
+            });
+        }
+        else {
+            slotSteps.forEach((step) => {
+                var _a;
+                (_a = step.shadowRoot.querySelector('.r-stepper-item--text')) === null || _a === void 0 ? void 0 : _a.classList.remove('visually-hidden');
+            });
+        }
+    }
     render() {
         const completed = this.completed || this.completeSteps;
-        return (h(Host, { key: '196ddb8922499f7222418d19cd6ddc994c211119' }, h("div", { key: '2220fcb8ec2125a15db198ec7948780d8d331e50', class: "r-stepper" }, !this.hasSteps && Array.from({ length: this.total }, (_, index) => (h("r-stepper-item", { number: index + 1, complete: completed > index, active: completed === index, key: index }))), h("slot", { key: '69c7eb87d53b67b19efc6da0ab489debc7e6b06c' }))));
+        return (h(Host, { key: '9a8684fe78d610b90c824a8bd06371efc222b94a' }, h("ol", { key: '89c37db27cab79946f29e5302784f3a17c853cef', class: "r-stepper", "aria-label": this.label || null }, !this.hasSteps && Array.from({ length: this.total }, (_, index) => (h("r-stepper-item", { number: index + 1, complete: completed > index, active: completed === index, key: index }))), h("slot", { key: '92d043648fb9c12ca5222a569ec40a917798af5a', onSlotchange: this.handleSlotChange }))));
     }
     get host() { return getElement(this); }
+    static get watchers() { return {
+        "completedStepsLabel": ["handleCompletedStepsLabelChange"]
+    }; }
 };
 Stepper.style = stepperCss;
 

package/dist/esm/r-tab-panel.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-Da7qOBFr.js';
+import { r as registerInstance, h, H as Host } from './index-CTxpqopm.js';
 
 const tabPanelCss = ":host([active]:not([active=false])){display:block}:host{display:none;outline:none}:host(:focus-visible){box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);outline:2px solid var(--r-border-focused, #0071e3);outline-offset:2px}.r-tab-panel{font-family:var(--r-tab-panel--font-family, var(--r-font-family-text, system-ui));font-size:var(--r-tab-panel--font-size, var(--r-font-size-text-400, 1rem))}";
 
@@ -16,7 +16,7 @@ const RTabPanel = class {
             active,
             'aria-labelledby': tabId
         };
-        return (h(Host, Object.assign({ key: 'de50044bd0be5598615c2f84e66f5a552edb4ab9', class: "r-typography" }, hostAttrs), h("div", { key: 'e4db4fd5b115c96474f31d9d16881f496b8f4fd2', class: "r-tab-panel" }, h("slot", { key: 'd2ad80745f97933fb173f6ecd3635829d3c890ac' }))));
+        return (h(Host, Object.assign({ key: 'f58718704b5625e82bfa531bcbf2b6c94c2e1ae3', class: "r-typography" }, hostAttrs), h("div", { key: '75dc2720b47da749a4d1e168e20338b94724a369', class: "r-tab-panel" }, h("slot", { key: '9710a7fc07751091c4ec0c97ae1d205ae540fdfd' }))));
     }
 };
 RTabPanel.style = tabPanelCss;

package/dist/esm/r-tab.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.js';
 
-const tabCss = ":host{display:flex;outline:none;opacity:1;cursor:pointer}:host(:hover:not([disabled]:not([disabled=false]))){--r-tab--color:var(--r-text-strong);--r-tab--marker--height:5px;--r-tab--marker--background-color:var(--r-border-softer, #c9c9c9);--r-tab--marker--visibility:visible}:host(:active:not([disabled]:not([disabled=false]))){--r-tab--background-color:var(--r-background-interactive-pressed, rgba(40,40,40,0.12))}:host(:focus-visible){--r-tab--marker--visibility:visible;--r-tab--marker--height:5px;--r-tab--marker--background-color:var(--r-background-interactive-pressed, rgba(40,40,40,0.12));--r-tab--slot--box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);--r-tab--slot--outline:2px solid var(--r-border-focused, #0071e3);--r-tab--slot--outline-offset:2px}:host([active]:not([active=false])){cursor:default;--r-tab--font-weight:var(--r-font-weight-semibold, 600);--r-tab--color:var(--r-text-strong, #000);--r-tab--padding-left:0.5625rem;--r-tab--padding-right:0.5625rem;--r-tab--marker--background-color:var(--r-border-regular, #282828);--r-tab--marker--visibility:visible;--r-tab--marker--height:3px}:host([disabled]:not([disabled=false])){opacity:0.4;cursor:not-allowed;--r-tab--pointer-events:none;--r-tab--marker--visibility:hidden;--r-tab--slot--box-shadow:none}.r-tab{position:var(--r-tab--position, relative);font-family:var(--r-tab--font-family, var(--r-font-family-text, system-ui));font-weight:var(--r-tab--font-weight, var(--r-font-weight-regular, 400));font-size:var(--r-tab--font-size, var(--r-font-size-400, 1rem));line-height:var(--r-tab--line-height, 1);cursor:var(--r-tab--cursor, inherit);pointer-events:var(--r-tab--pointer-events, initial);padding-top:var(--r-tab--padding-top, 0);padding-right:var(--r-tab--padding-right, 0.625rem);padding-bottom:var(--r-tab--padding-bottom, 1.25rem);padding-left:var(--r-tab--padding-left, 0.625rem);opacity:var(--r-tab--opacity, 1);background:var(--r-tab--background, none);color:var(--r-tab--color, var(--r-text-regular, #282828));border:var(--r-tab--border, none);box-shadow:var(--r-tab--box-shadow, none);outline:var(--r-tab--outline, none)}.r-tab::after{content:var(--r-tab--marker--content, \"\");width:var(--r-tab--marker--width, 100%);height:var(--r-tab--marker--height, 3px);position:var(--r-tab--marker--position, absolute);bottom:var(--r-tab--marker--bottom, 0);left:var(--r-tab--marker--left, 0);visibility:var(--r-tab--marker--visibility, hidden);background-color:var(--r-tab--marker--background-color, rgba(0, 0, 0, 0));transition:var(--r-tab--marker--transition, all 0.1s ease-in)}.r-tab--slot{box-shadow:var(--r-tab--slot--box-shadow, none);outline:var(--r-tab--slot--outline, none);outline-offset:var(--r-tab--slot--outline-offset, 0)}";
+const tabCss = ":host{display:flex;outline:none;opacity:1;cursor:pointer}:host(:hover:not([disabled]:not([disabled=false]))){--r-tab--background:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(:active:not([disabled]:not([disabled=false]))){--r-tab--background:var(--r-background-interactive-pressed, rgba(40,40,40,0.12))}:host(:focus-visible){--r-tab--box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);--r-tab--outline:2px solid var(--r-border-focused, #0071e3);--r-tab--outline-offset:2px}:host([active]:not([active=false])){cursor:default;--r-tab--font-weight:var(--r-font-weight-semibold, 600);--r-tab--marker--visibility:visible}:host([disabled]:not([disabled=false])){cursor:not-allowed;--r-tab--pointer-events:none;--r-tab--color:var(--r-text-soft, #686868);--r-tab--marker--background-color:var(--r-border-soft, #686868)}.r-tab{position:var(--r-tab--position, relative);font-family:var(--r-tab--font-family, var(--r-font-family-text, system-ui));font-weight:var(--r-tab--font-weight, var(--r-font-weight-regular, 400));font-size:var(--r-tab--font-size, var(--r-font-size-400, 1rem));line-height:var(--r-tab--line-height, var(--r-line-height-m, 1.5));cursor:var(--r-tab--cursor, inherit);pointer-events:var(--r-tab--pointer-events, initial);display:var(--r-tab--display, flex);align-items:var(--r-tab--align-items, center);justify-content:var(--r-tab--justify-content, center);gap:var(--r-tab--gap, var(--r-spacing-050, 0.5rem));width:var(--r-tab--width, auto);padding-top:var(--r-tab--padding-top, var(--r-spacing-025, 0.25rem));padding-right:var(--r-tab--padding-right, var(--r-spacing-050, 0.5rem));padding-bottom:var(--r-tab--padding-bottom, var(--r-spacing-100, 1rem));padding-left:var(--r-tab--padding-left, var(--r-spacing-050, 0.5rem));margin-bottom:var(--r-tab--margin-bottom, -1px);opacity:var(--r-tab--opacity, 1);background:var(--r-tab--background, none);color:var(--r-tab--color, var(--r-text-regular, #282828));border:var(--r-tab--border, none);box-shadow:var(--r-tab--box-shadow, none);outline:var(--r-tab--outline, none);outline-offset:var(--r-tab--outline-offset, 0)}.r-tab::after{content:var(--r-tab--marker--content, \"\");width:var(--r-tab--marker--width, 100%);height:var(--r-tab--marker--height, 3px);position:var(--r-tab--marker--position, absolute);bottom:var(--r-tab--marker--bottom, 0);left:var(--r-tab--marker--left, 0);visibility:var(--r-tab--marker--visibility, hidden);background-color:var(--r-tab--marker--background-color, var(--r-border-regular, #282828));transition:var(--r-tab--marker--transition, all 0.1s ease-in)}.r-tab--disabled-icon,.r-tab ::slotted([slot=icon]){color:var(--r-tab--icon--color, var(--r-icon-soft, #686868))}@media (prefers-reduced-motion){.r-tab::after{transition:none}}";
 
 const RTab = class {
     constructor(hostRef) {
@@ -28,6 +28,8 @@ const RTab = class {
             if (this.disabled)
                 return;
             switch (event.code) {
+                case 'ArrowLeft':
+                case 'ArrowRight':
                 case 'Space':
                 case 'Home':
                 case 'End':
@@ -47,7 +49,9 @@ const RTab = class {
             'aria-selected': `${active}`,
             'aria-disabled': `${disabled}`
         };
-        return (h(Host, Object.assign({ key: '04af619a56c41414b02e942d9d5bba11ef5eb1a0', onClick: this.handleClick, onKeyUp: this.handleKeyup, onKeyDown: this.handleKeydown }, hostAttrs), h("span", { key: 'e3fcc9b084de339aafcf98d8c5ca06f0e9615916', class: "r-tab" }, h("span", { key: 'bb52bf58758c2404a61b595706ecb3e3f71942ee', class: "r-tab--slot" }, h("slot", { key: '939a0e9618875e4909dbb763290f5f439122e312' })))));
+        return (h(Host, Object.assign({ key: '270a02c942f223ef5ac0f9f83d33c51bfd88c1c7', onClick: this.handleClick, onKeyUp: this.handleKeyup, onKeyDown: this.handleKeydown }, hostAttrs), h("span", { key: '60bbf17ad69478028579b61d03ca316a55ce52ea', class: "r-tab" }, disabled ?
+            h("r-icon", { class: "r-tab--disabled-icon", size: "s", name: "circle-slash" })
+            : h("slot", { name: "icon" }), h("slot", { key: '5b0582bebdf14a0de908d23d2a08d80cf1850b50' }))));
     }
     get host() { return getElement(this); }
 };