@riverty/web-components 6.3.0 → 6.3.1

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

@@ -0,0 +1,78 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-CTxpqopm.js';
+import { s as setupInverseThemeAwareness, a as stopInverseThemeAwareness } from './theming-DD2IrjpG.js';
+import { f as focusableElements } from './focusable-ky1yonnS.js';
+import './style-observer-4Uv3PpKT.js';
+
+const popoverActionCss = ":host slot{display:contents}::slotted(r-button){--r-button--color:var(--r-text-regular);--r-button--border-width:0;--r-button--background-color:rgba(0,0,0,0);--r-button--slot--position:relative;--r-button--slot--text-decoration:underline;--r-button--padding:10px 2px 18px 2px;--r-button--slot--text-underline-offset:9px}::slotted(r-button:hover:not([disabled]):not([disabled=false])){--r-button--background-color:var(--r-background-interactive-hovered)}::slotted(r-button:active:not([disabled]):not([disabled=false])){--r-button--background-color:var(--r-background-interactive-pressed)}";
+
+const PopoverAction = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.handleSlotChange = () => {
+            this.setButtonDefaults();
+        };
+    }
+    connectedCallback() {
+        // Apply default properties to any buttons
+        this.setButtonDefaults();
+        const themeContextElement = this.host.closest('r-popover');
+        setupInverseThemeAwareness(this.host, themeContextElement);
+    }
+    disconnectedCallback() {
+        const themeContextElement = this.host.closest('r-popover');
+        stopInverseThemeAwareness(this.host, themeContextElement);
+    }
+    setButtonDefaults() {
+        const buttons = this.host.querySelectorAll('r-button');
+        // Set default attributes on each button
+        buttons.forEach(button => {
+            // Default size="small"
+            if (!button.hasAttribute('size')) {
+                button.setAttribute('size', 'small');
+            }
+            // Default variant="text-inline"
+            if (!button.hasAttribute('variant')) {
+                button.setAttribute('variant', 'text-inline');
+            }
+        });
+    }
+    /**
+     * Set focus on the first focusable element within the popover action
+     * @returns {Promise<HTMLElement | null>} The focused element or null if no element is found
+     */
+    async setFocus() {
+        if (!this.activeElement)
+            return;
+        if ('setFocus' in this.activeElement && typeof this.activeElement.setFocus === 'function') {
+            await this.activeElement.setFocus();
+            return;
+        }
+        this.activeElement.focus();
+        return this.activeElement;
+    }
+    /**
+     * Remove focus from the first focusable element within the popover action
+     * @returns {Promise<void>}
+     */
+    async setBlur() {
+        var _a;
+        (_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    get activeElement() {
+        return this.getActiveElements[0] || null;
+    }
+    /**
+     * Get all focusable elements within the popover content
+     * @returns {Promise<HTMLElement[]>} Array of focusable elements
+     */
+    async getActiveElements() {
+        return focusableElements(this.host);
+    }
+    render() {
+        return (h(Host, { key: 'a2e9f0482b6de85e54d5fb6c748113efbb76b887', slot: "action" }, h("slot", { key: '656f07644cd0d2e9a15263f644676a3e698d005d', onSlotchange: this.handleSlotChange })));
+    }
+    get host() { return getElement(this); }
+};
+PopoverAction.style = popoverActionCss;
+
+export { PopoverAction as r_popover_action };

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

@@ -0,0 +1,60 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-CTxpqopm.js';
+import { s as setupInverseThemeAwareness, a as stopInverseThemeAwareness } from './theming-DD2IrjpG.js';
+import { f as focusableElements } from './focusable-ky1yonnS.js';
+import './style-observer-4Uv3PpKT.js';
+
+const popoverContentCss = "::slotted(*:first-child){margin-top:0;padding-top:0}::slotted(*:last-child){margin-bottom:0;padding-bottom:0}";
+
+const PopoverContent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    connectedCallback() {
+        const themeContextElement = this.host.closest('r-popover');
+        setupInverseThemeAwareness(this.host, themeContextElement);
+    }
+    disconnectedCallback() {
+        const themeContextElement = this.host.closest('r-popover');
+        stopInverseThemeAwareness(this.host, themeContextElement);
+    }
+    /**
+     * Set focus on the first focusable element within the popover content
+     * @returns {Promise<HTMLElement | null>} The focused element or null if no element is found
+     */
+    async setFocus() {
+        var _a;
+        if (!this.activeElement)
+            return Promise.resolve(null);
+        if ('setFocus' in this.activeElement && typeof this.activeElement.setFocus === 'function') {
+            await this.activeElement.setFocus();
+            return Promise.resolve(this.activeElement);
+        }
+        (_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.focus();
+        return Promise.resolve(this.activeElement);
+    }
+    /**
+     * Remove focus from the first focusable element within the popover content
+     * @returns {Promise<void>}
+     */
+    async setBlur() {
+        var _a;
+        (_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    get activeElement() {
+        return this.getActiveElements[0] || null;
+    }
+    /**
+     * Get all focusable elements within the popover content
+     * @returns {Promise<HTMLElement[]>} Array of focusable elements
+     */
+    async getActiveElements() {
+        return focusableElements(this.host);
+    }
+    render() {
+        return (h(Host, { key: '2384c04a8610e5d26bcd3e3fb4e70c99fca7d76a', slot: "content", class: "r-typography" }, h("slot", { key: '52ce40873c2e32725ee8ef8fc385d498ff8b973c' })));
+    }
+    get host() { return getElement(this); }
+};
+PopoverContent.style = popoverContentCss;
+
+export { PopoverContent as r_popover_content };

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

@@ -0,0 +1,26 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-CTxpqopm.js';
+import { s as setupInverseThemeAwareness, a as stopInverseThemeAwareness } from './theming-DD2IrjpG.js';
+import './style-observer-4Uv3PpKT.js';
+
+const popoverHeadlineCss = ":host{margin:0;font-family:var(--r-font-family-heading);font-size:var(--r-font-size-500, 1.25rem);font-weight:var(--r-font-weight-light, 300);line-height:var(--r-line-height-s, 1.25)}";
+
+const PopoverHeadline = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    connectedCallback() {
+        const themeContextElement = this.host.closest('r-popover');
+        setupInverseThemeAwareness(this.host, themeContextElement);
+    }
+    disconnectedCallback() {
+        const themeContextElement = this.host.closest('r-popover');
+        stopInverseThemeAwareness(this.host, themeContextElement);
+    }
+    render() {
+        return (h(Host, { key: 'bdbaecb36f49d54a1b33ef27d1c954834df68198', slot: "headline" }, h("slot", { key: '82eb6ae289211e5a23149e12125c1c30cf6b3ffd' })));
+    }
+    get host() { return getElement(this); }
+};
+PopoverHeadline.style = popoverHeadlineCss;
+
+export { PopoverHeadline as r_popover_headline };

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

@@ -0,0 +1,68 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.js';
+
+const popoverTriggerCss = ":host{display:block;cursor:pointer}";
+
+const PopoverTrigger = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.triggerMouseEnter = createEvent(this, "triggerMouseEnter");
+        this.triggerMouseLeave = createEvent(this, "triggerMouseLeave");
+        this.handleMouseEnter = () => {
+            this.triggerMouseEnter.emit();
+        };
+        this.handleMouseLeave = () => {
+            this.triggerMouseLeave.emit();
+        };
+    }
+    get activeElement() {
+        const selector = [
+            'r-button',
+            'r-icon-button',
+            'a[href]',
+            'button:not([disabled])',
+            '[tabindex]:not([tabindex="-1"])'
+        ].join(', ');
+        const el = this.host.querySelector(selector);
+        if (!el || !(el instanceof HTMLElement))
+            return null;
+        const tag = el.tagName.toLowerCase();
+        // Return strongly typed elements if needed
+        if (tag === 'r-button' || tag === 'r-icon-button') {
+            return el; // Adjust type to your component’s base
+        }
+        // Default mappings for known HTML types
+        if (tag === 'button')
+            return el;
+        if (tag === 'a')
+            return el;
+        return el;
+    }
+    /**
+     * Set focus on the first focusable element within the trigger
+     * @returns {Promise<HTMLElement | null>} The focused element or null if no element is found
+     */
+    async setFocus() {
+        if (!this.activeElement)
+            return Promise.resolve(null);
+        if ('setFocus' in this.activeElement && typeof this.activeElement.setFocus === 'function') {
+            await this.activeElement.setFocus();
+            return Promise.resolve(this.activeElement);
+        }
+        this.activeElement.focus();
+        return Promise.resolve(this.activeElement);
+    }
+    /**
+     * Remove focus from the first focusable element within the trigger
+     */
+    async setBlur() {
+        var _a;
+        (_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    render() {
+        return (h(Host, { key: '6c97f11b7263d0cf574fdafcef3d7a9733fe7925', slot: "trigger", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("slot", { key: '7d434e3505eda793e8d1d50f9fb1aa608061fa50' })));
+    }
+    get host() { return getElement(this); }
+};
+PopoverTrigger.style = popoverTriggerCss;
+
+export { PopoverTrigger as r_popover_trigger };

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

@@ -0,0 +1,345 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.js';
+
+const popoverCss = ":host{position:relative;overflow:visible;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) {
+        registerInstance(this, hostRef);
+        this.popoverOpenChange = createEvent(this, "popoverOpenChange");
+        this.hidePopover = createEvent(this, "hidePopover");
+        this.showPopover = createEvent(this, "showPopover");
+        this.focusPopover = createEvent(this, "focusPopover");
+        /**
+         * Defines the behavior of the popover's dismissing.
+         * - `auto`: The popover can be dismissed by clicking outside or pressing Esc.
+         * - `manual`: The popover requires explicit user action to close.
+         * @default "auto"
+         */
+        this.dismissMode = 'auto';
+        /**
+         * Defines the action that will be triggered when the trigger is clicked.
+         * - `toggle`: Toggle the popover open/closed state
+         * - `show`: Only show the popover
+         * - `hide`: Only hide the popover
+         * @default "toggle"
+         */
+        this.triggerAction = 'toggle';
+        /**
+         * Defines preferred placement vertically relative to the trigger.
+         * - `top`: Position above the trigger
+         * - `bottom`: Position below the trigger
+         * - `middle`: Position to the side of the trigger
+         * @default "bottom"
+         */
+        this.vertical = 'bottom';
+        /**
+         * Defines preferred placement horizontally relative to the trigger.
+         * - `left`: Align to the left of the trigger
+         * - `center`: Center align with the trigger
+         * - `right`: Align to the right of the trigger
+         * @default "center"
+         */
+        this.horizontal = 'center';
+        /** Indicates if popover is shown */
+        this.isOpen = false;
+        this._focusOnElement = element => {
+            var _a, _b;
+            if (!element) {
+                return;
+            }
+            if (typeof element.setFocus === 'function') {
+                (_a = element === null || element === void 0 ? void 0 : element.setFocus) === null || _a === void 0 ? void 0 : _a.call(element);
+                return;
+            }
+            (_b = element === null || element === void 0 ? void 0 : element.focus) === null || _b === void 0 ? void 0 : _b.call(element);
+            this.focusPopover.emit();
+            return this;
+        };
+        this.uniqueId = `r-popover-${Date.now().toString(16)}${Math.random().toString(32)}`.replace(/\./g, '');
+        this.onToggle = event => {
+            if (event.newState === 'open') {
+                this.isOpen = true;
+                requestAnimationFrame(() => {
+                    this.renderPosition();
+                    this.setFocus();
+                });
+                return this;
+            }
+            this.isOpen = false;
+            requestAnimationFrame(() => {
+                this.setBlur();
+                const interactiveElement = this.getInteractiveElement(this.activeElement || this.triggerElement);
+                interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.focus();
+            });
+        };
+        this.onClickDismiss = () => {
+            this.hide();
+        };
+        this.updateTriggerAttributes = () => {
+            const interactiveElement = this.getInteractiveElement(this.activeElement);
+            interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.setAttribute('aria-expanded', `${this.isOpen}`);
+        };
+        this.onKeyDown = async (event) => {
+            if (event.key === 'Tab') {
+                event.preventDefault();
+                const target = event.target;
+                const filteredElements = await this._getFocusable();
+                const id = filteredElements.indexOf(target);
+                if (event.shiftKey) {
+                    // Shift+Tab - move focus backwards
+                    const elementToFocus = id ? filteredElements[id - 1] : filteredElements[filteredElements.length - 1];
+                    this._focusOnElement(elementToFocus);
+                }
+                else {
+                    // Tab - move focus forwards
+                    const elementToFocus = id < filteredElements.length - 1 ? filteredElements[id + 1] : filteredElements[0];
+                    this._focusOnElement(elementToFocus);
+                }
+            }
+        };
+    }
+    /**
+     * Method to show the popover.
+     * Opens the popover, positions it correctly, and sets focus to appropriate element.
+     * @returns Promise that resolves when the popover is shown
+     */
+    async show() {
+        this.isOpen = true;
+    }
+    /**
+     * Method to hide the popover.
+     * Closes the popover and emits hide event.
+     * @returns Promise that resolves when the popover is hidden
+     */
+    async hide() {
+        this.isOpen = false;
+    }
+    /**
+     * Toggle popover visibility.
+     * Shows the popover if hidden, hides it if shown.
+     * @returns Promise that resolves when the toggle action is complete
+     */
+    async toggle() {
+        this.isOpen ? this.hide() : this.show();
+    }
+    /**
+     * Set focus inside the popover to the most appropriate element.
+     * Priority order:
+     * 1. Dismiss button (if present)
+     * 2. Action element (if present)
+     * 3. Content element (if present)
+     * 4. Host element as fallback
+     * @returns Promise that resolves to the popover instance for chaining
+     */
+    async setFocus() {
+        if (!this.isOpen)
+            return this;
+        const filteredElements = await this._getFocusable();
+        this._focusOnElement(filteredElements[0]);
+        return this;
+    }
+    async _getFocusable() {
+        const { dismissElement } = this;
+        const contentElement = this.host.querySelector('r-popover-content');
+        const actionElement = this.host.querySelector('r-popover-action');
+        const elements = [dismissElement, ...await contentElement.getActiveElements(), ...await actionElement.getActiveElements()];
+        return elements.filter(element => element !== undefined);
+    }
+    /**
+     * Remove focus from all focusable elements within the popover.
+     * Calls setBlur on all child components and the host element.
+     * @returns Promise that resolves to the popover instance for chaining
+     */
+    async setBlur() {
+        if (!this.isOpen)
+            return this;
+        const { dismissElement } = this;
+        const contentElement = this.host.querySelector('r-popover-content');
+        const actionElement = this.host.querySelector('r-popover-action');
+        const triggerElement = this.host.querySelector('r-popover-trigger');
+        dismissElement === null || dismissElement === void 0 ? void 0 : dismissElement.setBlur();
+        contentElement === null || contentElement === void 0 ? void 0 : contentElement.setBlur();
+        actionElement === null || actionElement === void 0 ? void 0 : actionElement.setBlur();
+        triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.setBlur();
+        this.host.blur();
+        return this;
+    }
+    handleOpenChange() {
+        this.open ? this.show() : this.hide();
+    }
+    watchOpen() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        if (this.isOpen) {
+            (_b = (_a = this.boardElement) === null || _a === void 0 ? void 0 : _a.showPopover) === null || _b === void 0 ? void 0 : _b.call(_a);
+            (_d = (_c = this.showPopover) === null || _c === void 0 ? void 0 : _c.emit) === null || _d === void 0 ? void 0 : _d.call(_c);
+        }
+        else {
+            (_f = (_e = this.boardElement) === null || _e === void 0 ? void 0 : _e.hidePopover) === null || _f === void 0 ? void 0 : _f.call(_e);
+            (_h = (_g = this.hidePopover) === null || _g === void 0 ? void 0 : _g.emit) === null || _h === void 0 ? void 0 : _h.call(_g);
+        }
+        (_k = (_j = this.popoverOpenChange) === null || _j === void 0 ? void 0 : _j.emit) === null || _k === void 0 ? void 0 : _k.call(_j);
+        this.updateTriggerAttributes();
+    }
+    handlePreferredPositionChange() {
+        this.renderPosition();
+    }
+    onKeyup(event) {
+        if (!this.isOpen)
+            return this;
+        if (event.key === 'Escape')
+            this.hide();
+    }
+    onResize() {
+        if (this.isOpen)
+            this.renderPosition();
+    }
+    onScroll() {
+        if (this.isOpen)
+            this.renderPosition();
+    }
+    get hasDismiss() {
+        return this.dismissMode === 'manual';
+    }
+    get triggerRect() {
+        var _a;
+        return (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    }
+    get boardRect() {
+        var _a;
+        return (_a = this.boardElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    }
+    get activeElement() {
+        var _a;
+        return (_a = this.host.querySelector('r-popover-trigger')) === null || _a === void 0 ? void 0 : _a.querySelector('r-button, r-icon-button, a, button, [tabindex]:not([tabindex="-1"])');
+    }
+    get headlineSlotContent() {
+        var _a;
+        const el = this.host.querySelector('[slot="headline"]');
+        return (_a = el === null || el === void 0 ? void 0 : el.textContent) === null || _a === void 0 ? void 0 : _a.trim();
+    }
+    /**
+     * Gets the actual interactive element (button/link) from within r-button or r-icon-button shadow DOM,
+     * or returns the element itself if it's already interactive
+     */
+    getInteractiveElement(element) {
+        if (!element)
+            return null;
+        if (element.tagName === 'R-BUTTON' || element.tagName === 'R-ICON-BUTTON') {
+            const shadowRoot = element.shadowRoot;
+            if (shadowRoot) {
+                return shadowRoot.querySelector('button, a');
+            }
+        }
+        return element;
+    }
+    /** Position logic */
+    renderPosition() {
+        if (!this.triggerRect)
+            return this;
+        const { triggerRect, boardRect, vertical, horizontal } = this;
+        // Hide if trigger completely out of viewport
+        const viewportW = window.innerWidth;
+        const viewportH = window.innerHeight;
+        const isTriggerOutOfView = triggerRect.bottom < 0 || triggerRect.right < 0 || triggerRect.top > viewportH || triggerRect.left > viewportW;
+        if (isTriggerOutOfView) {
+            this.hide();
+            return this;
+        }
+        // Update CSS variables
+        this.host.setAttribute('style', `
+      --r-popover--trigger--width: ${triggerRect.width}px;
+      --r-popover--trigger--height: ${triggerRect.height}px;
+      --r-popover--trigger--left: ${triggerRect.left}px;
+      --r-popover--trigger--top: ${triggerRect.top}px;
+    `);
+        // Available space
+        const space = {
+            top: triggerRect.top,
+            right: viewportW - triggerRect.right,
+            bottom: viewportH - triggerRect.bottom,
+            left: triggerRect.left
+        };
+        const cssValue = varName => getComputedStyle(this.host).getPropertyValue(varName);
+        const remInPixels = value => value.includes('rem') ? parseFloat(value) * parseFloat(getComputedStyle(document.documentElement).fontSize) : parseFloat(value);
+        const BOARD_SHIFT = remInPixels(cssValue('--board--shift')) || 0;
+        const POINTER_HEIGHT = remInPixels(cssValue('--pointer--height')) || 0;
+        const spaceBoardOccupiesVertically = boardRect.height + POINTER_HEIGHT;
+        let spaceBoardOccupiesHorizontally = boardRect.width - triggerRect.width - BOARD_SHIFT;
+        const hasPossiblePosition = object => Object.values(object).filter(Boolean).length > 0;
+        const getPossiblePosition = object => Object.keys(object).find(pos => object[pos]);
+        const fits = {
+            vertical: {},
+            horizontal: {}
+        };
+        fits['vertical'] = {
+            top: space.top >= spaceBoardOccupiesVertically,
+            bottom: space.bottom >= spaceBoardOccupiesVertically,
+            middle: space.bottom > (boardRect.height - triggerRect.height - POINTER_HEIGHT) / 2 && space.top > (boardRect.height - triggerRect.height) / 2
+        };
+        if (fits['vertical'].middle || !hasPossiblePosition(fits.vertical)) {
+            spaceBoardOccupiesHorizontally = boardRect.width + BOARD_SHIFT;
+        }
+        fits['horizontal'] = {
+            left: space.left >= spaceBoardOccupiesHorizontally,
+            right: space.right > boardRect.width - triggerRect.width - BOARD_SHIFT,
+            center: space.left > boardRect.width / 2 && space.right > boardRect.width / 2
+        };
+        // Let cover be a "backup"
+        let verticalPosition = 'cover';
+        if (fits.vertical[vertical]) {
+            verticalPosition = vertical;
+        }
+        else if (hasPossiblePosition(fits.vertical)) {
+            verticalPosition = getPossiblePosition(fits.vertical);
+        }
+        // Let cover be a "backup"
+        let horizontalPosition = 'cover';
+        if (fits.horizontal[horizontal]) {
+            horizontalPosition = horizontal;
+        }
+        else if (hasPossiblePosition(fits.horizontal)) {
+            horizontalPosition = getPossiblePosition(fits.horizontal);
+        }
+        if (verticalPosition === 'cover') {
+            const triggerBottom = this.triggerRect.top + this.triggerRect.height;
+            if (triggerBottom > this.boardRect.height) {
+                // When vertical position is 'cover', center the popover vertically on the trigger
+                const boardTop = triggerBottom - this.boardRect.height;
+                this.host.style.setProperty('--r-popover--board--top', `${boardTop}px`);
+                this.host.style.setProperty('--r-popover--pointer--top', `${this.triggerRect.top + this.triggerRect.height / 2 - POINTER_HEIGHT / 2 - boardTop}px`);
+            }
+        }
+        // Apply attributes for CSS
+        this.host.setAttribute('data-vertical', verticalPosition);
+        this.host.setAttribute('data-horizontal', horizontalPosition);
+        return this;
+    }
+    setTriggerInitialAttributes() {
+        const interactiveElement = this.getInteractiveElement(this.activeElement);
+        interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.setAttribute('aria-haspopup', 'dialog');
+        interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.setAttribute('aria-expanded', `${this.isOpen}`);
+    }
+    componentDidLoad() {
+        var _a;
+        this.open ? this.show() : this.hide();
+        this.setTriggerInitialAttributes();
+        (_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => {
+            this.toggle();
+        });
+    }
+    render() {
+        const TAG = !this.activeElement ? 'button' : 'div';
+        return (h(Host, { key: '655880fb3d3f069e13bc7025f932abc192df8918', id: this.uniqueId, "data-position": this.positionState, "data-open": `${this.isOpen}`, open: this.isOpen }, h("div", { key: '6617392de14d78a1a53172fc689245749f01909a', class: "r-popover" }, h(TAG, { key: '87dc99d5ab380b7f288fa9fba0e861feacff6e20', class: "r-popover--trigger", "aria-label": !this.activeElement ? this.triggerAriaLabel : null, ref: el => this.triggerElement = el, "aria-haspopup": "dialog", popoverTarget: !this.activeElement ? `${this.uniqueId}-board` : null, popoverTargetAction: !this.activeElement ? this.triggerAction : null }, h("slot", { key: '51c875b84c1311e40292cf7fe80f7753fcd15abf', name: "trigger" })), h("div", { key: '24a2d6a90d0fe9167a08328e80ed6164c94170f0', class: "r-popover--board", id: `${this.uniqueId}-board`, role: "dialog", "aria-label": this.headlineSlotContent, popover: this.dismissMode, ref: el => this.boardElement = el, onToggle: this.onToggle, onKeyDown: this.onKeyDown }, this.hasDismiss &&
+            h("r-icon-button", { key: '51e2563b582c5300eff1a032829bfdfb4947bdb6', ref: el => this.dismissElement = el, class: "r-popover--dismiss", name: "cross", onClick: this.onClickDismiss, label: this.dismissAriaLabel }), h("div", { key: '6abf0772e1b45c1c6be7eeeb5a0b37469e17c4de', class: "r-popover--board-content" }, h("slot", { key: 'd4af6923192d72fb77e0591dbc9f163965fdb9b7', name: "headline" }), h("slot", { key: '469fb95a09ce36ad41b7a76e3f09c8834c4e7e14', name: "content" }), h("slot", { key: '17145240e43b06ae7186ad8d46a3d10b7996d3f2', name: "action" })), h("div", { key: '68e7ce9cdbe5c5b765d5866d9ea6c80d6b830630', class: "r-popover--board-pointer", "aria-hidden": "true" }, h("svg", { key: '55d0e368d2af54a082fc8323b9b1e40457a5a62b', width: "16", height: "8", viewBox: "0 0 16 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '86db95e48bed58187dea614c81527f6bd7ef9f3e', d: "M8 8L0 0L16 0L8 8Z", fill: "currentColor" })))))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "open": ["handleOpenChange"],
+        "isOpen": ["watchOpen"],
+        "horizontal": ["handlePreferredPositionChange"],
+        "vertical": ["handlePreferredPositionChange"]
+    }; }
+};
+Popover.style = popoverCss;
+
+export { Popover as r_popover };

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

@@ -0,0 +1,23 @@
+import { r as registerInstance, h, H as Host } from './index-CTxpqopm.js';
+
+const progressBarCss = ":host{--r-progress-bar--appearance:none;--r-progress-bar--width:100%;--r-progress-bar--height:8px;--r-progress-bar--background-color:var(--r-background-soft);--r-progress-bar--border-radius:0;--r-progress-bar--border:none;--progress-bar--value--background-color:var(--r-background-interactive-regular);--progress-bar--value--border-radius:0;--progress-bar--value--transition:all 0.6s ease;display:block}.r-progress-bar{appearance:var(--r-progress-bar--appearance);width:var(--r-progress-bar--width);height:var(--r-progress-bar--height);background-color:var(--r-progress-bar--background-color);border-radius:var(--r-progress-bar--border-radius);border:var(--r-progress-bar--border)}.r-progress-bar::-webkit-progress-bar{background-color:var(--r-progress-bar--background-color);border-radius:var(--r-progress-bar--border-radius);border:var(--r-progress-bar--border)}.r-progress-bar::-webkit-progress-value{background-color:var(--progress-bar--value--background-color);border-radius:var(--progress-bar--value--border-radius);transition:var(--progress-bar--value--transition)}.r-progress-bar::-moz-progress-bar{background-color:var(--progress-bar--value--background-color);border-radius:var(--progress-bar--value--border-radius);transition:var(--progress-bar--value--transition)}.r-progress-bar::-ms-fill{background-color:var(--progress-bar--value--background-color);border-radius:var(--progress-bar--value--border-radius);transition:var(--progress-bar--value--transition)}";
+
+const ProgressBar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Progress bar value */
+        this.progress = 0;
+    }
+    render() {
+        const { progress, rAriaLabel } = this;
+        const progressBarAttrs = {
+            value: progress,
+            max: '100',
+            'aria-label': rAriaLabel
+        };
+        return (h(Host, { key: '832812688a18bea634c8ff2c5ea69599cdefdcff' }, h("progress", Object.assign({ key: 'd3384feada9ee1594e3ee331377d30ae1e8725f1' }, progressBarAttrs, { class: "r-progress-bar" }))));
+    }
+};
+ProgressBar.style = progressBarCss;
+
+export { ProgressBar as r_progress_bar };

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

@@ -0,0 +1,16 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-CTxpqopm.js';
+
+const radioButtonDescriptionCss = ":host{font-size:var(--r-font-size-400, 1rem);font-weight:var(--r-font-weight-regular, 400);color:var(--r-text-regular, #282828)}";
+
+const RadioButtonDescription = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: '30f29f811a727ba758a1e5b89fb86baf78076694', slot: "description" }, h("div", { key: '233da5297c2b1e47def8e92f0d8e9a5fba846dc8', class: "r-radio-button-description", style: { display: 'contents' } }, h("slot", { key: 'f00f06ec8f07b3995fb2249977cad70df930a4c9' }))));
+    }
+    get host() { return getElement(this); }
+};
+RadioButtonDescription.style = radioButtonDescriptionCss;
+
+export { RadioButtonDescription as r_radio_button_description };

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

@@ -0,0 +1,16 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-CTxpqopm.js';
+
+const radioButtonLeadingCss = ":host{color:var(--r-icon-soft, #686868)}";
+
+const RadioButtonLeading = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: 'fcfa2b1df999df8a168bd0255ad7855dce28485c', slot: "leading" }, h("div", { key: '2d0e091a66adb24576f5e4a2f0959b8c83dc2017', class: "r-radio-button-leading", style: { display: 'contents' } }, h("slot", { key: 'cebdf0262db3ce092efbe2e8e830aa54903aa59e' }))));
+    }
+    get host() { return getElement(this); }
+};
+RadioButtonLeading.style = radioButtonLeadingCss;
+
+export { RadioButtonLeading as r_radio_button_leading };