@riverty/web-components 5.7.0 → 6.0.0

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
 
-const popoverCss = ":host{position:relative;overflow:visible;color:var(--r-text-inverse);font-family:var(--r-font-family-text, system-ui);font-weight:var(--r-font-weight-regular, 400);font-size:var(--r-font-size-400, 1rem);text-align:left;--board--shift:1rem;--board--min-width:304px;--board--max-width:504px;--board--max-height:320px;--pointer--width:1rem;--pointer--height:0.5rem;--pointer--spacer:0.25rem}:host slot{display:contents}:host([size=s]){--r-popover--board--max-width:375px}:host([size=l]){--r-popover--board--max-width:500px}:host([data-open=true]){--r-popover--pointer--display:block;--r-popover--board--visibility:visible;--r-popover--board--left:var(--r-popover--trigger--left);--r-popover--board--top:var(--r-popover--trigger--top)}:host([data-open=true]) ::slotted([slot=trigger]){--r-popover--trigger--display:none}:host([data-vertical=top]){--r-popover--pointer--top:100%;--r-popover--pointer--transform:rotate(0deg) translate(0,-1px)}:host([data-vertical=bottom]){--r-popover--pointer--bottom:100%;--r-popover--pointer--transform:rotate(180deg)}:host([data-vertical=middle]){--r-popover--pointer--top:calc(50% - var(--pointer--height)/2);--r-popover--pointer--bottom:auto}:host([data-horizontal=left]){--r-popover--board--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0) + var(--board--shift));--r-popover--pointer--left:calc(100% - var(--r-popover--trigger--width, 0)/2 - var(--board--shift) - var(--pointer--width)/2)}:host([data-horizontal=right]){--r-popover--pointer--left:calc(var(--r-popover--trigger--width, 0)/2 + var(--pointer--width)/2)}:host([data-horizontal=center]){--r-popover--pointer--left:calc(50% - var(--pointer--width)/2)}:host([data-vertical=top][data-horizontal=left]){--r-popover--board--transform:translate(-100%, calc(-100% - var(--pointer--spacer) - var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=top][data-horizontal=right]){--r-popover--board--transform:translate(calc(0px - var(--board--shift)), calc(-100% - var(--pointer--spacer) - var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=top][data-horizontal=center]){--r-popover--board--transform:translate(calc(-50% + var(--r-popover--trigger--width, 0)/2), calc(-100% - var(--pointer--spacer) - var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=top][data-horizontal=cover]){--r-popover--pointer--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0)/2 - var(--r-popover--pointer--width, var(--pointer--width))/2);--r-popover--board--left:0;--r-popover--board--transform:translate(0, calc(-100% - var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=middle][data-horizontal=left]){--r-popover--board--left:var(--r-popover--trigger--left, 0);--r-popover--board--transform:translate(calc(-100% - var(--pointer--height) - var(--pointer--spacer)), calc(-50% + var(--r-popover--trigger--height, 0)/2));--r-popover--pointer--left:100%;--r-popover--pointer--right:auto;--r-popover--pointer--transform:rotate(-90deg) translate(0, calc(0px - var(--pointer--spacer)))}:host([data-vertical=middle][data-horizontal=right]){--r-popover--board--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0) + var(--pointer--height) + var(--pointer--spacer));--r-popover--board--transform:translate(0, calc(-50% + var(--r-popover--trigger--height, 0)/2));--r-popover--pointer--top:calc(50% - var(--pointer--height)/2);--r-popover--pointer--left:auto;--r-popover--pointer--right:100%;--r-popover--pointer--transform:rotate(90deg) translate(0, calc(0px - var(--pointer--spacer)))}:host([data-vertical=middle][data-horizontal=center]){--r-popover--pointer--display:none;--r-popover--board--transform:translate(calc(-50% + var(--r-popover--trigger--width, 0)/2), calc(-50% + var(--r-popover--trigger--height, 0)/2))}:host([data-vertical=middle][data-horizontal=cover]){--r-popover--pointer--display:none;--r-popover--board--left:0;--r-popover--board--transform:translate(0, calc(-50% + var(--r-popover--trigger--height, 0)/2))}:host([data-vertical=bottom][data-horizontal=left]){--r-popover--board--transform:translate(-100%, calc(var(--r-popover--trigger--height, 0) + var(--pointer--spacer) + var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=bottom][data-horizontal=right]){--r-popover--board--transform:translate(calc(0px - var(--board--shift)), calc(var(--r-popover--trigger--height, 0) + var(--r-popover--pointer--height, var(--pointer--height)) + var(--pointer--spacer)))}:host([data-vertical=bottom][data-horizontal=center]){--r-popover--board--transform:translate(calc(-50% + var(--r-popover--trigger--width, 0)/2), calc(var(--r-popover--trigger--height, 0) + var(--pointer--spacer) + var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=bottom][data-horizontal=cover]){--r-popover--pointer--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0)/2 - var(--r-popover--pointer--width, var(--pointer--width))/2);--r-popover--board--left:0;--r-popover--board--transform:translate(0, calc(var(--r-popover--trigger--height, 0) + var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=cover]){--r-popover--board--top:0;--r-popover--board--height:100%;--r-popover--board-content--height:100%;--r-popover--pointer--top:calc(var(--r-popover--trigger--top, 0) + var(--r-popover--trigger--height)/2 - var(--pointer--height)/2);--r-popover--pointer--bottom:auto}:host([data-vertical=cover][data-content-has-scroll=false]){--r-popover--board--top:var(--r-popover--trigger--top, 0)}:host([data-vertical=cover][data-horizontal=left]){--r-popover--board--left:var(--r-popover--trigger--left, 0);--r-popover--board--transform:translate(calc(-100% - var(--pointer--spacer) - var(--pointer--height)), 0);--r-popover--pointer--left:100%;--r-popover--pointer--right:auto;--r-popover--pointer--transform:rotate(-90deg) translate(0, calc(0px - var(--pointer--spacer)))}:host([data-vertical=cover][data-horizontal=right]){--r-popover--board--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0) + var(--pointer--width));--r-popover--pointer--left:auto;--r-popover--pointer--right:100%;--r-popover--pointer--transform:rotate(90deg) translate(0, calc(0px - var(--pointer--spacer)))}:host([data-vertical=cover][data-horizontal=center]),:host([data-vertical=cover][data-horizontal=cover]){--r-popover--pointer--display:none;--r-popover--board--transform:translate(calc(-50% + var(--r-popover--trigger--width, 0)/2), 0)}:host([data-vertical=cover][data-horizontal=cover]){--r-popover--pointer--display:none;--r-popover--board--transform:none;--r-popover--board--height:100%;--r-popover--board--width:100%;--r-popover--board--left:0}:host([data-fixed-top=true]){--r-popover--board-container--height:var(--r-popover--trigger--top, var(--board--max-height))}:host([dismiss-mode=manual]){--r-popover--board-content--padding:1.5rem 3.5rem 1.5rem 1.5rem}.r-popover{position:var(--r-popover--position, relative);display:var(--r-popover--display, inline-flex)}.r-popover--dismiss{position:var(--r-popover--dismiss--position, absolute);top:var(--r-popover--dismiss--top, 20px);right:var(--r-popover--dismiss--right, 20px);color:var(--r-text-inverse)}.r-popover--trigger{border:var(--r-popover--trigger--border, none);background:var(--r-popover--trigger--background, none);padding:var(--r-popover--trigger--padding, 0);cursor:var(--r-popover--trigger--cursor, pointer);display:var(--r-popover--trigger--display, inline-flex);align-items:var(--r-popover--trigger--align-items, center);justify-content:var(--r-popover--trigger--justify-content, center);min-width:var(--r-popover--trigger--min-width, unset);min-height:var(--r-popover--trigger--min-height, unset)}.r-popover--trigger:focus{box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);outline:2px solid var(--r-border-focused, #0071e3);outline-offset:2px}.r-popover--board{position:var(--r-popover--board--position, fixed);top:var(--r-popover--board--top, -1000em);right:var(--r-popover--board--right, auto);bottom:var(--r-popover--board--bottom, auto);left:var(--r-popover--board--left, -1000em);visibility:var(--r-popover--board--visibility, hidden);width:var(--r-popover--board--width, 100%);min-width:var(--r-popover--board--max-width, var(--board--min-width));max-width:var(--r-popover--board--max-width, var(--board--max-width));height:var(--r-popover--board--height, auto);max-height:var(--r-popover--board--max-height, var(--board--max-height));background-color:var(--r-popover--board--background-color, var(--r-background-inverse));color:var(--r-popover--board--color, var(--r-text-inverse));border:var(--r-popover--board--border, none);transform:var(--r-popover--board--transform, none);box-sizing:var(--r-popover--board--box-sizing, border-box);padding:var(--r-popover--board--padding, 0);margin:var(--r-popover--board--margin, 0);overflow:var(--r-popover--board--overflow, visible)}.r-popover--board-content{display:var(--r-popover--board-content--display, flex);flex-direction:var(--r-popover--board-content--flex-direction, column);gap:var(--r-popover--board-content--gap, 1.5rem);overflow:var(--r-popover--board-content--overflow, auto);height:var(--r-popover--board-content--height, auto);max-height:var(--r-popover--board-content--max-height, var(--board--max-height));padding:var(--r-popover--board-content--padding, 1.5rem);box-sizing:var(--r-popover--board-content--box-sizing, border-box)}.r-popover--board-pointer{display:var(--r-popover--pointer--display, flex);width:var(--r-popover--pointer--width, var(--pointer--width));height:var(--r-popover--pointer--height, var(--pointer--height));position:var(--r-popover--pointer--position, absolute);top:var(--r-popover--pointer--top, auto);right:var(--r-popover--pointer--right, auto);bottom:var(--r-popover--pointer--bottom, auto);left:var(--r-popover--pointer--left, auto);color:var(--r-popover--pointer--color, var(--r-background-inverse));transform:var(--r-popover--pointer--transform, none);transform-origin:var(--r-popover--pointer--transform-origin, center)}.r-popover--board-pointer>svg{display:flex}";
+const popoverCss = ":host{position:relative;overflow:visible;color:var(--r-text-inverse);font-family:var(--r-font-family-text, system-ui);font-weight:var(--r-font-weight-regular, 400);font-size:var(--r-font-size-400, 1rem);text-align:left}:host slot{display:contents}:host{--board--shift:1rem;--board--min-width:304px;--board--max-width:504px;--board--max-height:320px;--pointer--width:1rem;--pointer--height:0.5rem;--pointer--spacer:0.25rem}:host([data-open=true]){--r-popover--pointer--display:block;--r-popover--board--visibility:visible;--r-popover--board--left:var(--r-popover--trigger--left);--r-popover--board--top:var(--r-popover--trigger--top)}:host([data-open=true]) ::slotted([slot=trigger]){--r-popover--trigger--display:none}:host([data-vertical=top]){--r-popover--pointer--top:100%;--r-popover--pointer--transform:rotate(0deg) translate(0,-1px)}:host([data-vertical=bottom]){--r-popover--pointer--bottom:100%;--r-popover--pointer--transform:rotate(180deg)}:host([data-vertical=middle]){--r-popover--pointer--top:calc(50% - var(--pointer--height)/2);--r-popover--pointer--bottom:auto}:host([data-horizontal=left]){--r-popover--board--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0) + var(--board--shift));--r-popover--pointer--left:calc(100% - var(--r-popover--trigger--width, 0)/2 - var(--board--shift) - var(--pointer--width)/2)}:host([data-horizontal=right]){--r-popover--pointer--left:calc(var(--r-popover--trigger--width, 0)/2 + var(--pointer--width)/2)}:host([data-horizontal=center]){--r-popover--pointer--left:calc(50% - var(--pointer--width)/2)}:host([data-vertical=top][data-horizontal=left]){--r-popover--board--transform:translate(-100%, calc(-100% - var(--pointer--spacer) - var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=top][data-horizontal=right]){--r-popover--board--transform:translate(calc(0px - var(--board--shift)), calc(-100% - var(--pointer--spacer) - var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=top][data-horizontal=center]){--r-popover--board--transform:translate(calc(-50% + var(--r-popover--trigger--width, 0)/2), calc(-100% - var(--pointer--spacer) - var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=top][data-horizontal=cover]){--r-popover--pointer--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0)/2 - var(--r-popover--pointer--width, var(--pointer--width))/2);--r-popover--board--left:0;--r-popover--board--transform:translate(0, calc(-100% - var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=middle][data-horizontal=left]){--r-popover--board--left:var(--r-popover--trigger--left, 0);--r-popover--board--transform:translate(calc(-100% - var(--pointer--height) - var(--pointer--spacer)), calc(-50% + var(--r-popover--trigger--height, 0)/2));--r-popover--pointer--left:100%;--r-popover--pointer--right:auto;--r-popover--pointer--transform:rotate(-90deg) translate(0, calc(0px - var(--pointer--spacer)))}:host([data-vertical=middle][data-horizontal=right]){--r-popover--board--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0) + var(--pointer--height) + var(--pointer--spacer));--r-popover--board--transform:translate(0, calc(-50% + var(--r-popover--trigger--height, 0)/2));--r-popover--pointer--top:calc(50% - var(--pointer--height)/2);--r-popover--pointer--left:auto;--r-popover--pointer--right:100%;--r-popover--pointer--transform:rotate(90deg) translate(0, calc(0px - var(--pointer--spacer)))}:host([data-vertical=middle][data-horizontal=center]){--r-popover--pointer--display:none;--r-popover--board--transform:translate(calc(-50% + var(--r-popover--trigger--width, 0)/2), calc(-50% + var(--r-popover--trigger--height, 0)/2))}:host([data-vertical=middle][data-horizontal=cover]){--r-popover--pointer--display:none;--r-popover--board--left:0;--r-popover--board--transform:translate(0, calc(-50% + var(--r-popover--trigger--height, 0)/2))}:host([data-vertical=bottom][data-horizontal=left]){--r-popover--board--transform:translate(-100%, calc(var(--r-popover--trigger--height, 0) + var(--pointer--spacer) + var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=bottom][data-horizontal=right]){--r-popover--board--transform:translate(calc(0px - var(--board--shift)), calc(var(--r-popover--trigger--height, 0) + var(--r-popover--pointer--height, var(--pointer--height)) + var(--pointer--spacer)))}:host([data-vertical=bottom][data-horizontal=center]){--r-popover--board--transform:translate(calc(-50% + var(--r-popover--trigger--width, 0)/2), calc(var(--r-popover--trigger--height, 0) + var(--pointer--spacer) + var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=bottom][data-horizontal=cover]){--r-popover--pointer--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0)/2 - var(--r-popover--pointer--width, var(--pointer--width))/2);--r-popover--board--left:0;--r-popover--board--transform:translate(0, calc(var(--r-popover--trigger--height, 0) + var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=cover]){--r-popover--board--top:0;--r-popover--board--height:100%;--r-popover--board-content--height:100%;--r-popover--pointer--top:calc(var(--r-popover--trigger--top, 0) + var(--r-popover--trigger--height)/2 - var(--pointer--height)/2);--r-popover--pointer--bottom:auto}:host([data-vertical=cover][data-content-has-scroll=false]){--r-popover--board--top:var(--r-popover--trigger--top, 0)}:host([data-vertical=cover][data-horizontal=left]){--r-popover--board--left:var(--r-popover--trigger--left, 0);--r-popover--board--transform:translate(calc(-100% - var(--pointer--spacer) - var(--pointer--height)), 0);--r-popover--pointer--left:100%;--r-popover--pointer--right:auto;--r-popover--pointer--transform:rotate(-90deg) translate(0, calc(0px - var(--pointer--spacer)))}:host([data-vertical=cover][data-horizontal=right]){--r-popover--board--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0) + var(--pointer--width));--r-popover--pointer--left:auto;--r-popover--pointer--right:100%;--r-popover--pointer--transform:rotate(90deg) translate(0, calc(0px - var(--pointer--spacer)))}:host([data-vertical=cover][data-horizontal=center]),:host([data-vertical=cover][data-horizontal=cover]){--r-popover--pointer--display:none;--r-popover--board--transform:translate(calc(-50% + var(--r-popover--trigger--width, 0)/2), 0)}:host([data-vertical=cover][data-horizontal=cover]){--r-popover--pointer--display:none;--r-popover--board--transform:none;--r-popover--board--height:100%;--r-popover--board--width:100%;--r-popover--board--left:0}:host([data-fixed-top=true]){--r-popover--board-container--height:var(--r-popover--trigger--top, var(--board--max-height))}:host([dismiss-mode=manual]){--r-popover--board-content--padding:1.5rem 3.5rem 1.5rem 1.5rem}.r-popover{position:var(--r-popover--position, relative);display:var(--r-popover--display, inline-flex)}.r-popover--dismiss{position:var(--r-popover--dismiss--position, absolute);top:var(--r-popover--dismiss--top, 20px);right:var(--r-popover--dismiss--right, 20px);color:var(--r-text-inverse)}.r-popover--dismiss:hover{--r-icon-button--background-color:var(--r-background-interactive-hovered-inverse, rgba(243, 241, 240, 0.04))}.r-popover--dismiss:active{--r-icon-button--background-color:var(--r-background-interactive-pressed-inverse, rgba(243, 241, 240, 0.12))}.r-popover--trigger{border:var(--r-popover--trigger--border, none);background:var(--r-popover--trigger--background, none);padding:var(--r-popover--trigger--padding, 0);cursor:var(--r-popover--trigger--cursor, pointer);display:var(--r-popover--trigger--display, inline-flex);align-items:var(--r-popover--trigger--align-items, center);justify-content:var(--r-popover--trigger--justify-content, center);min-width:var(--r-popover--trigger--min-width, unset);min-height:var(--r-popover--trigger--min-height, unset)}.r-popover--trigger:focus{box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);outline:2px solid var(--r-border-focused, #0071e3);outline-offset:2px}.r-popover--board{position:var(--r-popover--board--position, fixed);top:var(--r-popover--board--top, -1000em);right:var(--r-popover--board--right, auto);bottom:var(--r-popover--board--bottom, auto);left:var(--r-popover--board--left, -1000em);visibility:var(--r-popover--board--visibility, hidden);width:var(--r-popover--board--width, 100%);min-width:var(--board--min-width);max-width:var(--board--max-width);height:var(--r-popover--board--height, auto);max-height:var(--r-popover--board--max-height, var(--board--max-height));background-color:var(--r-popover--board--background-color, var(--r-background-inverse));color:var(--r-popover--board--color, var(--r-text-inverse));border:var(--r-popover--board--border, none);transform:var(--r-popover--board--transform, none);box-sizing:var(--r-popover--board--box-sizing, border-box);padding:var(--r-popover--board--padding, 0);margin:var(--r-popover--board--margin, 0);overflow:var(--r-popover--board--overflow, visible)}.r-popover--board-content{display:var(--r-popover--board-content--display, flex);flex-direction:var(--r-popover--board-content--flex-direction, column);gap:var(--r-popover--board-content--gap, 1.5rem);overflow:var(--r-popover--board-content--overflow, auto);height:var(--r-popover--board-content--height, auto);max-height:var(--r-popover--board-content--max-height, var(--board--max-height));padding:var(--r-popover--board-content--padding, 1.5rem);box-sizing:var(--r-popover--board-content--box-sizing, border-box)}.r-popover--board-pointer{display:var(--r-popover--pointer--display, flex);width:var(--r-popover--pointer--width, var(--pointer--width));height:var(--r-popover--pointer--height, var(--pointer--height));position:var(--r-popover--pointer--position, absolute);top:var(--r-popover--pointer--top, auto);right:var(--r-popover--pointer--right, auto);bottom:var(--r-popover--pointer--bottom, auto);left:var(--r-popover--pointer--left, auto);color:var(--r-popover--pointer--color, var(--r-background-inverse));transform:var(--r-popover--pointer--transform, none);transform-origin:var(--r-popover--pointer--transform-origin, center)}.r-popover--board-pointer>svg{display:flex}";
 
 const Popover = class {
     constructor(hostRef) {
@@ -288,8 +288,8 @@ const Popover = class {
         this.open ? this.show() : this.hide();
     }
     render() {
-        return (h(Host, { key: 'da45eae6a21cc01596344d33afc5def4da57967f', id: this.uniqueId, "data-position": this.positionState, "data-open": `${this.isOpen}`, open: this.isOpen }, h("div", { key: 'ad832de894e0af250cc93bdf3158032bc252740f', class: "r-popover" }, h("button", { key: '28c4938bb02cb7c4eaed074178dda00c2c39a0b7', class: "r-popover--trigger", "aria-label": this.triggerAriaLabel, ref: el => this.triggerElement = el, popoverTarget: `${this.uniqueId}-board`, popoverTargetAction: this.triggerAction }, h("slot", { key: '0a74ac9d6a7ecdba54771e733f8db5af1709e7fb', name: "trigger" })), h("div", { key: 'dbdb43df6a9823f5d8c954146347f40438bbf053', 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: '99cb4c1c050cdf197346ef84f7c610f5f6ed0b4c', ref: el => this.dismissElement = el, class: "r-popover--dismiss", name: "cross", onClick: this.onClickDismiss, label: this.dismissAriaLabel }), h("div", { key: 'fe7e18bd38a4f3879aada14169bfa50f84cd2eac', class: "r-popover--board-content" }, h("slot", { key: 'b5674f8f2f72340cf5af712f513a20bda9e04b47', name: "headline" }), h("slot", { key: '024ce9cc17f041df172d853176d09f4ec493df20', name: "content" }), h("slot", { key: '437ca7707856b7c6db59240d7b4378c74dc8fda8', name: "action" })), h("div", { key: '93184bd493520dbea03c7c63bbfe8c4ae788cde3', class: "r-popover--board-pointer", "aria-hidden": "true" }, h("svg", { key: '779d8b7df8f92ea14517ce9ce5099a73a4fdeac8', width: "16", height: "8", viewBox: "0 0 16 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '53b9fee3e6a34cf184d8818ac272122f04193ff6', d: "M8 8L0 0L16 0L8 8Z", fill: "currentColor" })))))));
+        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" })))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/r-progress-bar.entry.js

@@ -15,7 +15,7 @@ const ProgressBar = class {
             max: '100',
             'aria-label': rAriaLabel
         };
-        return (h(Host, { key: '81203123d2df8fb029855f39dc359b98991630ee' }, h("progress", Object.assign({ key: 'f766b44c2c4088ab67d69b57de074fee15be166c' }, progressBarAttrs, { class: "r-progress-bar" }))));
+        return (h(Host, { key: 'f79c73155a42eef63910abde1fc2cebd147b7129' }, h("progress", Object.assign({ key: 'ce94e9a20124fa8cd1561612e2797e17f0ebe19f' }, progressBarAttrs, { class: "r-progress-bar" }))));
     }
 };
 ProgressBar.style = progressBarCss;

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

@@ -7,7 +7,7 @@ const RadioButtonDescription = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '83668642a70a083a0db012ad4e80aa31eeb08b85', slot: "description" }, h("div", { key: '12530fbda5f2789443e7d78237ba633922d97683', class: "r-radio-button-description", style: { display: 'contents' } }, h("slot", { key: 'a62b23dc0e9ea5f80660e9e97a45a4f1aef50c24' }))));
+        return (h(Host, { key: 'cd678f2b6c1e00e95ecfc56b1e460b3b3ab37597', slot: "description" }, h("div", { key: 'a19901417798ef6dacd6ad82c9eab7e2a8227cd5', class: "r-radio-button-description", style: { display: 'contents' } }, h("slot", { key: 'ba9308abf507f84affb24bb7eb8a43c8da4fd613' }))));
     }
     get host() { return getElement(this); }
 };

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

@@ -7,7 +7,7 @@ const RadioButtonLeading = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '802f0d0c98c87abb566dd2ef0388d6d6237dba68', slot: "leading" }, h("div", { key: '4c0296adc5dd6839dd150450f0be62e92a810d7c', class: "r-radio-button-leading", style: { display: 'contents' } }, h("slot", { key: '16b6131307cbaa02e1182b204ded280fa903da0a' }))));
+        return (h(Host, { key: '272870387e6e1abe3db2a67a38cfcd502a0e5aac', slot: "leading" }, h("div", { key: '7fd29eb8b31cda51e7a3bebebf8d80c7b0a79622', class: "r-radio-button-leading", style: { display: 'contents' } }, h("slot", { key: '542afc33263c2f06007b1c50225457af3e1b9051' }))));
     }
     get host() { return getElement(this); }
 };

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

@@ -7,7 +7,7 @@ const RadioButtonTitle = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '623feed7834a4702b83257202de4505b6c08145d', slot: "title" }, h("div", { key: 'ca7b90c670583ba4a874df1da73dad9db67d0bf7', class: "r-radio-button-title", style: { display: 'contents' } }, h("slot", { key: 'fd7ac8a7ee5e2cd05dab3d061328eecb5ee14800' }))));
+        return (h(Host, { key: '705ecfa00df2a6e5f1976e1e45dca02c2d63d0fb', slot: "title" }, h("div", { key: '9845596a7638b53995157c26ee89be55677ff2e9', class: "r-radio-button-title", style: { display: 'contents' } }, h("slot", { key: '5ec9a59d7d71f976513dddb471676d640e13e239' }))));
     }
     get host() { return getElement(this); }
 };

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

@@ -7,7 +7,7 @@ const RadioButtonTrailing = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'a1c1c9d525cd2fb7b6223677f216b8398c3dac9f', slot: "trailing" }, h("div", { key: '554e798bcd117d7a56024097041609dc532ad2c1', class: "r-radio-button-trailing", style: { display: 'contents' } }, h("slot", { key: 'f48cef26f06bedf6e37439dd1f406d5c789b06a0' }))));
+        return (h(Host, { key: '844ad8251f30a4b0b6e700d0864798957e53750b', slot: "trailing" }, h("div", { key: '26a3458b5a448a9d8a687081325a5aa93c83e512', class: "r-radio-button-trailing", style: { display: 'contents' } }, h("slot", { key: 'fc1634011f555127d3281351a8ba9d7fdc1a7a38' }))));
     }
     get host() { return getElement(this); }
 };

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

@@ -12,6 +12,8 @@ const RadioButton = class {
         this.radioButtonDeselect = createEvent(this, "radioButtonDeselect");
         /** Value of element data within a form */
         this.value = this.slotTextValue;
+        /** Automatically focus the radio button when the component is mounted. Note: Only one element per page should have autofocus set to true, following browser standard behavior. */
+        this.autofocus = false;
         /** Unique id */
         this.uniqueId = `r-radio-button-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
         this.onClick = (event) => {
@@ -32,18 +34,25 @@ const RadioButton = class {
         this.onBlur = () => {
             this.host.classList.remove('focused');
         };
+        this.applyAutofocus = () => {
+            queueMicrotask(() => {
+                this.setFocus();
+            });
+        };
     }
     /** Sets focus on the radio button element */
     async setFocus() {
-        this.nativeEl.focus();
+        var _a;
+        (_a = this.nativeEl) === null || _a === void 0 ? void 0 : _a.focus();
     }
     /** Blurs the radio button element */
     async setBlur() {
-        this.nativeEl.blur();
+        var _a;
+        (_a = this.nativeEl) === null || _a === void 0 ? void 0 : _a.blur();
     }
     /** Selects the radio button element */
     async select() {
-        var _a;
+        var _a, _b, _c;
         if (this.checked)
             return;
         if (this.disabled)
@@ -53,8 +62,8 @@ const RadioButton = class {
             radio.shadowRoot.querySelector('.r-radio-button--input').setAttribute('tabindex', '-1');
         });
         this.checked = true;
-        this.nativeEl.setAttribute('tabindex', '0');
-        this.nativeEl.focus();
+        (_b = this.nativeEl) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '0');
+        (_c = this.nativeEl) === null || _c === void 0 ? void 0 : _c.focus();
         const { host, value, checked } = this;
         this.rChange.emit({ element: host, value, checked });
     }
@@ -88,6 +97,9 @@ const RadioButton = class {
     get isTrailing() {
         return this.host.querySelector('[slot="trailing"]') !== null || this.host.querySelector('r-radio-button-trailing') !== null;
     }
+    get shouldAutofocus() {
+        return this.autofocus && (!this.groupEl || !this.groupEl.autofocus);
+    }
     componentWillLoad() {
         if (!this.initialState)
             this.initialState = this.checked;
@@ -95,8 +107,12 @@ const RadioButton = class {
             this.name = this.groupEl.name;
         }
     }
+    componentDidLoad() {
+        if (this.shouldAutofocus)
+            this.applyAutofocus();
+    }
     render() {
-        const { name, value, checked, disabled, hint, uniqueId, required, invalid, error } = this;
+        const { name, value, checked, disabled, hint, uniqueId, required, invalid, error, autofocus } = this;
         const inputAttrs = {
             type: 'radio',
             tabindex: '-1',
@@ -104,13 +120,14 @@ const RadioButton = class {
             value,
             disabled,
             checked,
-            required
+            required,
+            autofocus
         };
-        return (h(Host, { key: '862574a20e04e55e3e7e0b8cb48131652f029030' }, h("label", { key: 'b916e9d5740605bad9a1f88c6bb07d0564b63f16', class: "r-radio-button", onClick: this.onClick, onKeyDown: this.onKeydown }, h("input", Object.assign({ key: 'd0ca90e85e619d8c5b9a8c71ae1582db65562036' }, inputAttrs, { id: `${uniqueId}-input`, class: "r-radio-button--input", ref: el => this.nativeEl = el, onFocus: this.onFocus, onBlur: this.onBlur })), h("span", { key: 'f77f3e56e88c5e3ad1f3e36e5f96715edb7e91cc', class: "r-radio-button--box" }), this.isLeading &&
-            h("div", { key: '60d6a15880fafd8007d20a80137b30f19d4f641e', class: "r-radio-button--leading" }, h("slot", { key: '9329c56d97e5e357ea70d165ee11ac171c605519', name: "leading" }, this.icon && h("r-icon", { key: 'ace86d3b61cd39f05ca3146e54d3ae4820d7b66d', name: this.icon, size: "m" }))), h("div", { key: '7773e0c5b2348245e4b4dafc06a6b10a6dc245c3', class: "r-radio-button--text" }, h("slot", { key: 'f060b0853a7a6ed0108d0182669807fd0236da33', name: "title" }, h("div", { key: '1ca5059e718a0bda9a53e2e0f630a617d0252638', style: { display: 'contents' } }, h("slot", { key: 'cb9128b915d2a71cff7e8960d5bd86973c615232' }))), h("slot", { key: 'f07a62e2caa36ceb27bc547cf86c7dfcdce1c5b4', name: "description" }, this.description)), this.isTrailing &&
-            h("div", { key: 'cc5e6dff1c324fdce239f8d4e553e154bdb73eac', class: "r-radio-button--trailing" }, h("slot", { key: '3d5e862c5830adb7a480fbb71ff92fef054bf1f7', name: "trailing" }))), invalid && error &&
-            h("r-hint", { key: '997b440b69a23cb432b8376b0351a947ec3b162e', role: "alert", variant: "error", id: `${uniqueId}-hint` }, this.error), hint &&
-            h("r-hint", { key: 'd3c41065b4924f42a2971d1cb91154e8e3041238', role: "note", variant: "information", id: `${uniqueId}-hint` }, hint)));
+        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)));
     }
     get host() { return getElement(this); }
 };

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

@@ -9,15 +9,13 @@ const RadioGroup = class {
         this.rValidate = createEvent(this, "rValidate");
         this.rChange = createEvent(this, "rChange");
         this.rReset = createEvent(this, "rReset");
-        /**
-         * _DEPRECATED_ (This property will be removed in November 2025 release.)
-         * Indicates whether to show the validation state.
-         * When set to `true`, the component will display validation feedback.
-         * Defaults to `false`.
-         */
-        this.showValid = false;
         /** Controls the style variation of the radio buttons. */
         this.variant = 'standard';
+        /**
+         * When set to `true`, automatically focuses the first enabled radio button in the group on mount.
+         * This will focus the selected radio button if one exists, or the first enabled radio button otherwise.
+         */
+        this.autofocus = false;
         this.validityState = '';
         this.validityMessage = '';
         /**
@@ -27,18 +25,21 @@ const RadioGroup = class {
         /** Unique id */
         this.uniqueId = `r-radio-group-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
         this.getValidityStateData = element => {
+            let validityState = '';
+            let validityMessage = '';
             if (element === null)
-                return;
+                return { validityState, validityMessage };
             for (const state in element.validity) {
                 if (element.validity[state]) {
-                    this.validityState = state;
+                    validityState = state;
                     if (this[state + 'Message']) {
-                        this.validityMessage = this[state + 'Message'];
-                        return;
+                        validityMessage = this[state + 'Message'];
+                        return { validityState, validityMessage };
                     }
-                    this.validityMessage = element.validationMessage;
+                    validityMessage = element.validationMessage;
                 }
             }
+            return { validityState, validityMessage };
         };
         this.validateFormElement = (element = null) => {
             if (element === null)
@@ -47,7 +48,9 @@ const RadioGroup = class {
                 return;
             if (this.error)
                 return;
-            this.getValidityStateData(element);
+            const { validityState, validityMessage } = this.getValidityStateData(element);
+            this.validityState = validityState;
+            this.validityMessage = validityMessage;
             const isValid = this.validityState === 'valid';
             this.valid = isValid;
             this.invalid = !isValid;
@@ -204,14 +207,13 @@ const RadioGroup = class {
         this.value = null;
     }
     /**
-     * Validates the radio group and returns a boolean indicating its validity.
-     *
+     * Validates the radio group without triggering UI and returns a boolean indicating its validity.
      * @returns A boolean indicating whether the radio group is valid.
      */
     async checkValidity() {
         const element = this.nativeSelectedEl || this.nativeFirstEl || null;
-        this.getValidityStateData(element);
-        return this.validityState === 'valid';
+        const { validityState } = this.getValidityStateData(element);
+        return validityState === 'valid';
     }
     /**
      * Validates the radio group and displays the validity state.
@@ -262,10 +264,10 @@ const RadioGroup = class {
         return this.host.querySelectorAll('r-radio-button:not([disabled]:not([disabled="false"]))');
     }
     get selectedRadioButtonElement() {
-        return Array.from(this.radioButtonElements).find(el => el.hasAttribute('checked')) || null;
+        return Array.from(this.radioButtonElements).find(el => el.checked || el.hasAttribute('checked')) || null;
     }
     get hasSelected() {
-        return Array.from(this.radioButtonElements).some(el => el.hasAttribute('checked'));
+        return Array.from(this.radioButtonElements).some(el => el.checked || el.hasAttribute('checked'));
     }
     get nativeSelectedEl() {
         var _a, _b;
@@ -327,21 +329,19 @@ const RadioGroup = class {
         const { name, required } = this;
         this.passPropsToGroupItems({ name, required });
         this.setTabindex();
+        if (this.autofocus) {
+            queueMicrotask(() => {
+                this.setFocus();
+            });
+        }
     }
     render() {
-        const { label, hint, fieldIndicator, tooltip, tooltipIcon, tooltipIconColor, error, uniqueId, invalid } = this;
-        // DEPRECATED: will be removed in November 2025 release.
-        const labelAttr = {
-            tooltip,
-            'tooltip-icon': tooltipIcon,
-            'tooltip-icon-color': tooltipIconColor
-        };
-        return (h(Host, { key: '0a209644dc2a122c793a38e1f624eccf3ca0b884' }, h("div", { key: 'b4d8dbe5fb3d1e11d87a7902addcc801852e3554', class: "r-radio-group", onClick: this.onLabelClick }, label &&
-            h("div", { key: 'c77bc88a07ddad6f45671c869b99b3fa5c4d0e2a', class: "r-radio-group--label-container" }, h("r-label", Object.assign({ key: '1dbfc739da13dbae04481912203a53837941b8e0', id: `${uniqueId}-label`, class: "r-radio-group--label", "field-indicator": fieldIndicator }, labelAttr), label), h("slot", { key: '2f1b6a50b2f7d7b1becef2cc95a4d7f6a26d970d', name: "popover" })), hint &&
-            h("r-hint", { key: 'c3c4310d3550d17d34ee26fa308cb3957a19dfd3', id: `${uniqueId}-hint`, class: "r-radio-group--hint", role: "note" }, hint), h("div", { key: '891beaea14680a2d629fa59f4597a968b8c2b695', class: "r-radio-group--content" }, h("slot", { key: '1d107723f7c363564e488309fdcb586ff43046ff' }))), invalid && error &&
-            h("r-hint", { key: 'de64c7c8a42136b7ac3ca93536a7654dc1d274fa', "aria-live": "polite", id: `${uniqueId}-message`, role: "alert", variant: "error" }, error), this.validityState !== 'valid' && this.validityMessage &&
-            h("r-hint", { key: 'c40eba0d5b6c47276ca91ca1631948d11f950c86', "aria-live": "polite", id: `${uniqueId}-message`, role: "alert", variant: "error" }, this.customErrorMessage || this.validityMessage), this.valid && this.validMessage && this.showValid &&
-            h("r-hint", { key: '0b13cc722509fe66231f18bd2783b29b798882ef', role: "alert", variant: "success" }, this.validMessage)));
+        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)));
     }
     get host() { return getElement(this); }
 };

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

@@ -119,7 +119,7 @@ const SelectOption = class {
             size: iconSize,
             color: iconColor
         };
-        return (h(Host, { key: '1f3440961f3c606f5b2b1eef77ae3c53fc1ea4a0', 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: '9a29dd16478d39c905f8cb54ca603e6982c3a24e', class: "r-select-option" }, icon && h("span", { key: 'fdcecb70781424749e0527f06eff5140a8a79ccc', class: "r-select-option--icon" }, h("r-icon", Object.assign({ key: '5a1906d39a27bc70729d26e93fd8f0d77e80e972' }, iconAttributes))), !icon && hasIconSlot && h("span", { key: '572b0e90b5695e0233505f28fb7c9b3dbc90a73f', class: "r-select-option--icon" }, h("slot", { key: 'bc04c317491e690281b0f4442aaff3f86a5ddb12', name: "icon" })), h("span", { key: '77bf634b415a36d8463212918cf200fda8647f85', class: "r-select-option--label" }, h("slot", { key: '83dd97fa580d18f4a9e27beca4835adf6c746240' })))));
+        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' })))));
     }
     get host() { return getElement(this); }
 };