@riverty/web-components 6.2.0 → 6.3.0

package/dist/esm/r-design-system-devtools.entry.js

@@ -1,29 +0,0 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-CTxpqopm.js';
-
-const DesignSystemDevtools = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        /** Whether to display a preview of some key design tokens */
-        this.designTokens = false;
-    }
-    renderDesignTokens() {
-        const tokens = [
-            'r-color-green-vanguard',
-            'r-color-grey-charcoal',
-            'r-color-white-haze',
-            'r-color-orange-ember',
-        ];
-        return (h(Host, null, tokens.map(t => {
-            return (h("div", { style: { backgroundColor: `var(--${t})` } }, "This text should have ", h("code", null, t), " background color"));
-        })));
-    }
-    render() {
-        if (this.designTokens) {
-            return this.renderDesignTokens();
-        }
-        return h(Host, null);
-    }
-    get el() { return getElement(this); }
-};
-
-export { DesignSystemDevtools as r_design_system_devtools };

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

@@ -1,105 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.js';
-
-const dialogCss = ":host([size=small]){--r-dialog--width:23.4375rem;--r-dialog--max-height:15.625rem}:host([size=medium]){--r-dialog--width:37.5rem;--r-dialog--max-height:37.5rem}:host([size=large]){--r-dialog--width:50rem;--r-dialog--max-height:45rem}@media (max-width: 50rem){:host([size=large]){--r-dialog--width:100%;--right:0;--left:0;--r-dialog--footer--flex-wrap:wrap}}@media (max-height: 48.75rem){:host([size=large]){--r-dialog--margin:18px auto;--top:0;--bottom:0}}@media (max-width: 37.5rem){:host([size=medium]){--r-dialog--width:100%;--right:0;--left:0;--r-dialog--footer--flex-wrap:wrap}}@media (max-height: 43.75rem){:host([size=medium]){--r-dialog--margin:18px auto;--top:0;--bottom:0}}:host{top:var(--top, auto);right:var(--right, auto);bottom:var(--bottom, auto);left:var(--left, auto)}.r-dialog{border:var(--r-dialog--border, none);padding:var(--r-dialog--padding, 24px 0);box-sizing:var(--r-dialog--box-sizing, border-box);overflow:var(--r-dialog--overflow, hidden);width:var(--r-dialog--width, auto);height:var(--r-dialog--height, auto);background-color:var(--r-dialog--background-color, var(--r-background-softest));margin:var(--r-dialog--margin, auto);max-height:var(--r-dialog--max-height, auto)}.r-dialog--content{display:var(--r-dialog--content--display, flex);flex-direction:var(--r-dialog--content--flex-direction, column);gap:var(--r-dialog--content--gap, var(--r-spacing-150, 1.5rem));color:var(--r-dialog--content--color, var(--r-text-regular));height:var(--r-dialog--content--height, 100%)}.r-dialog ::slotted([slot=header]),.r-dialog--headline{font-family:var(--r-dialog--headline--font-family, var(--r-font-family-heading, sans-serif));font-size:var(--r-dialog--headline--font-size, var(--r-font-size-500));font-weight:var(--r-dialog--headline--font-weight, var(--r-font-weight-light));margin:var(--r-dialog--headline--margin, 0);flex:var(--r-dialog--headline--flex, 1)}.r-dialog--close{--r-button--display:var(--r-dialog--close--dispaly, flex);--r-button--padding:var(--r-dialog--close--padding, 0)}.r-dialog--header{display:var(--r-dialog--header--display, flex);justify-content:var(--r-dialog--header--justify-content, space-between);align-items:var(--r-dialog--header--align-items, start);gap:var(--r-dialog--header--gap, 32px);padding:var(--r-dialog--header--padding, 0 24px)}.r-dialog--body{font-family:var(--r-dialog--body--font-family, var(--r-font-family-text));font-size:var(--r-dialog--body--font-size, var(--r-font-size-desktop-400));line-height:var(--r-dialog--body--line-height, var(--r-line-height-m));flex-grow:var(--r-dialog--body--flex-grow, 1);overflow-y:var(--r-dialog--body--overflow, auto);justify-self:var(--r-dialog--body--justify-self, stretch);padding:var(--r-dialog--body--padding, 0 24px)}.r-dialog--body{scrollbar-width:auto;scrollbar-color:var(--r-border-softer) #ffffff}.r-dialog--body::-webkit-scrollbar{width:var(--r-spacing-100, 1rem)}.r-dialog--body::-webkit-scrollbar-track{background:#ffffff}.r-dialog--body::-webkit-scrollbar-thumb{background-color:var(--r-border-softer);border-radius:10px;border:3px solid #ffffff}.r-dialog ::slotted([slot=footer]){margin-top:var(--r-dialog--footer--margin-top, auto);display:var(--r-dialog--footer--display, flex);flex-direction:var(--r-dialog--footer--flex-direction, row);flex-wrap:var(--r-dialog--footer--flex-wrap, nowrap);justify-content:var(--r-dialog--footer--justify-content, flex-start);gap:var(--r-dialog--footer--gap, var(--r-spacing-100, 1rem));align-items:var(--r-dialog--footer--align-items, end);padding:var(--r-dialog--header--padding, 0 24px)}.r-dialog::backdrop{background:var(--backdrop--background-color, rgba(0, 0, 0, 0.25))}";
-
-const Dialog = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.dialogClose = createEvent(this, "close");
-        /** Define if dialog either shown or hidden. */
-        this.open = false;
-        /**
-         * Allows to set height of the dialog body container
-         * while the value is smaller then `max-height` of the
-         * dialog body pre-set according to the `size` prop.
-         */
-        this.bodyHeight = 'auto';
-        /**
-         * Defines one of pre-defined sizes of the dialog.
-         */
-        this.size = 'medium';
-        /**
-         * Defines if dialog is currently revealed.
-         * */
-        this.isOpen = this.open;
-        this.uniqueId = `r-dialog-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
-        this.onTriggerClick = () => {
-            this.close();
-        };
-        this.isInside = event => {
-            var _a;
-            const rect = (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            return rect.top <= event.clientY && event.clientY <= rect.bottom &&
-                rect.left <= event.clientX && event.clientX <= rect.right;
-        };
-    }
-    handleOpenChange() {
-        if (this.open && !this.isOpen)
-            this.showModal();
-    }
-    get dialogLabel() {
-        var _a, _b;
-        return this.headline || ((_b = (_a = this.host.querySelector('[slot="header"]')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim());
-    }
-    /** Method to display a modal dialog */
-    async showModal() {
-        var _a;
-        this.isOpen = true;
-        (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.showModal();
-    }
-    /** Method to display a non-modal dialog */
-    async close() {
-        var _a, _b;
-        const { returnValue } = this;
-        (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.close(returnValue);
-        (_b = this.dialogClose) === null || _b === void 0 ? void 0 : _b.emit();
-        this.isOpen = false;
-    }
-    /** Method to either show or hide dialog
-     * depending on the current state. */
-    async toggle() {
-        if (this.isOpen)
-            this.showModal();
-        else
-            this.close();
-    }
-    _renderInitialState() {
-        if (this.isOpen) {
-            this.showModal();
-        }
-    }
-    connectEventListeners() {
-        var _a;
-        (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.addEventListener('close', this.close);
-    }
-    disconnectEventListeners() {
-        var _a;
-        (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('close', this.close);
-    }
-    componentDidLoad() {
-        this._renderInitialState();
-        this.connectEventListeners();
-    }
-    disconnectedCallback() {
-        this.disconnectEventListeners();
-    }
-    onMouseup(event) {
-        if (!this.isOpen)
-            return;
-        event.stopPropagation();
-        if (!this.isInside(event)) {
-            this.close();
-        }
-    }
-    render() {
-        return (h(Host, { key: '6f042592347577f063f6a80d2152b1149eadcb21', open: this.isOpen }, h("dialog", { key: 'fd3f19cf69a9077585bceccebaf0d0c9bccbaa86', class: "r-dialog", "aria-label": this.dialogLabel, ref: el => this.dialogElement = el, style: { '--r-dialog--body--height': this.bodyHeight } }, h("div", { key: '974e33afe5e96d3a67501d10a4ecd0486900ed64', class: "r-dialog--content" }, h("div", { key: '57bccc4346d7234564dc22c179a7e10051bd3af7', class: "r-dialog--header", id: `${this.uniqueId}-header` }, h("slot", { key: '0a59d6a775f11378f17be41665b2c71aecb17ff9', name: "header" }, (this.headline) &&
-            h("h2", { key: '6dd6970be5bde3f92d87bef1cbbd7152ba72f88f', class: "r-dialog--headline" }, this.headline)), h("r-icon-button", { key: '37ad4f5b3366ae057240e5bcf2c7443aac3faa9b', class: "r-dialog--close", name: "cross", size: "s", onRClick: this.onTriggerClick, label: this.closeAriaLabel })), h("div", { key: '951dec5b1da5b13196916ed6b64fee89cad83a0e', class: "r-dialog--body" }, this.bodyText, h("slot", { key: '1797cb38116d9818aec51e2dc6982dad1a01cf02' }), h("slot", { key: '0f091bf0e6f6fdd16b79c69aca9814a0d76d7ee6', name: "form" })), h("slot", { key: '2b5a1cadfa9e7a13d8fc4ddca4cf69a1e4a1cb5e', name: "footer" })))));
-    }
-    get host() { return getElement(this); }
-    static get watchers() { return {
-        "open": ["handleOpenChange"]
-    }; }
-};
-Dialog.style = dialogCss;
-
-export { Dialog as r_dialog };

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

@@ -1,47 +0,0 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-CTxpqopm.js';
-
-const hintCss = ":host{--r-hint--text--flex:1}:host([variant=information]){--r-hint--color:var(--r-text-soft, #686868)}:host([variant=success]),:host([success]){--r-hint--color:var(--r-status-success-regular, #298535)}:host([variant=warning]),:host([warning]){--r-hint--color:var(--r-status-warning-strong, #89411a)}:host([variant=error]),:host([invalid]){--r-hint--color:var(--r-status-error-regular, #b00c15)}:host([icon-position=end]){--r-hint--flex-direction:row-reverse}:host{display:block}.r-hint{display:var(--r-hint--display, flex);flex-direction:var(--r-hint--flex-direction, row);gap:var(--r-hint--gap, var(--r-spacing-050, 0.5rem));font-family:var(--r-hint--font-family, var(--r-font-family-text, system-ui));font-size:var(--r-hint--font-size, var(--r-font-size-300, 0.875rem));line-height:var(--r-hint--line-height, var(--r-line-height-m, 1.5));color:var(--r-hint--color, var(--r-text-soft, #686868));font-weight:var(--r-hint--font-weight, var(--r-font-weight-regular, 400));margin-top:var(--r-hint--margin-top, 0);margin-bottom:var(--r-hint--margin-bottom, 0)}.r-hint--icon{display:var(--r-hint--icon--display, flex);align-items:var(--r-hint--icon--align-items, start);min-width:var(--r-hint--icon--min-width, 1rem);margin-top:var(--r-hint--icon--margin-top, 0.15rem)}.r-hint--text{flex:var(--r-hint--text--flex, 1)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
-
-const Hint = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    get iconName() {
-        if (this.icon)
-            return this.icon;
-        const variantIcons = {
-            'error': 'circled-exclamation-mark',
-            'warning': 'circled-cross',
-            'success': 'circled-check'
-        };
-        return (this.variant in variantIcons) ? variantIcons[this.variant] : null;
-    }
-    get hasIconSlot() {
-        return !!this.host.querySelector('[slot="icon"]');
-    }
-    get hasIcon() {
-        return this.hasIconSlot || this.iconName !== null;
-    }
-    render() {
-        return (h(Host, { key: '1cbe08b7b3b01fc7d870416a1b14e3b1b8525797' }, h("div", { key: '17494f3ae8bdf394858e2f9337e54bd844a467d0', class: "r-hint" }, this.hasIcon &&
-            h("div", { key: 'ed406c6ae45ea4c25e6735752ced3a988c2f2274', class: "r-hint--icon" }, h("slot", { key: '9e93b83d3f9e71f722ffdb813d46b667eec556a5', name: "icon" }, this.iconName && h("r-icon", { key: '841c3e53381a21e1341191eb7a0b32fdd696c47f', name: this.iconName, size: "s" }))), h("div", { key: '946d0813297923053452519b9871cd9a0d04679f', class: "r-hint--text" }, h("slot", { key: 'f7343fcc6a4cbe9f5584f8d94feff33cfd8f2560' })))));
-    }
-    get host() { return getElement(this); }
-};
-Hint.style = hintCss;
-
-const labelCss = "@charset \"UTF-8\";:host([field-indicator]){--r-label--marker--display:inline}.r-label{display:var(--r-label--display, flex);flex-direction:var(--r-label--flex-direction, row);gap:var(--r-label--gap, var(--r-spacing-100, 1rem));cursor:var(--r-label--cursor, default);color:var(--r-label--color, var(--r-text-regular, #282828));margin-bottom:var(--r-label--margin-bottom, 0)}.r-label--slot{flex:var(--r-label--slot--flex, 1);line-height:var(--r-label--line-height, var(--r-line-height-m, 1.5));font-family:var(--r-label--font-family, var(--r-font-family-text, system-ui));font-size:var(--r-label--font-size, var(--r-font-size-regular, 1rem));font-weight:var(--r-label--font-weight, var(--r-font-weight-regular, 400))}.r-label--marker{display:var(--r-label--marker--display, none);color:var(--r-label--marker--color, var(--r-text-soft, #686868));font-size:var(--r-label--marker--font-size, var(--r-font-size-300, 0.875rem));font-style:var(--r-label--marker--font-style, normal);font-weight:var(--r-label--marker--font-weight, var(--r-font-weight-regular, 400));margin-left:var(--r-label--marker--margin-left, var(--r-spacing-075, 0.75rem))}.r-label--marker::before{content:var(--r-label--marker--before--content, \"– \")}.r-label--tooltip-icon{color:var(--r-label--tooltip-icon--color, var(--r-text-regular, inherit));display:var(--r-label--tooltip-icon--display, inline-flex);line-height:var(--r-label--tooltip-icon--line-height, 1);align-items:var(--r-label--tooltip-icon--align-items, center);justify-content:var(--r-label--tooltip-icon--justify-content, center)}";
-
-const RLabel = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    render() {
-        const { fieldIndicator } = this;
-        return (h(Host, { key: '4a8c827bf39bac03424a1caefeb8795871b08276' }, h("div", { key: '212ea6fc9e2476361083610c6b8801ea3a4d79e9', class: "r-label" }, h("span", { key: '0bf0a1fc635553165fe02937626cba8a44854f3d', class: "r-label--slot" }, h("slot", { key: '16165450aeffd754cbcac5640297ab4efe94bf4c' }), fieldIndicator &&
-            h("span", { key: '34e19397cff4fa69839475ece1077c4271d9ceb4', class: "r-label--marker" }, fieldIndicator)))));
-    }
-};
-RLabel.style = labelCss;
-
-export { Hint as r_hint, RLabel as r_label };

package/dist/esm/r-icon-button_2.entry.js

@@ -1,464 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.js';
-
-const iconButtonCss = ":host{display:inline-flex;vertical-align:top;--r-icon-button--color:inherit}:host(:hover:not([disabled]:not([disabled=false])):not(:active)){--r-icon-button--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(:active:not([disabled]:not([disabled=false]))){--r-icon-button--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host(:focus-within:not(:active):not([disabled]:not([disabled=false]))){box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);outline:2px solid var(--r-border-focused, #0071e3);outline-offset:2px}:host([disabled]:not([disabled=false])){opacity:0.4;--r-icon-button--cursor:not-allowed;--r-icon-button--box-shadow:none;--r-icon-button--background-color:transparent}:host([variant=contained]){--r-icon-button--color:var(--r-icon-inverse, #fff);--r-icon-button--background-color:var(--r-background-interactive-regular, #282828);--r-icon-button--box-shadow:none}:host([variant=contained]:hover:not([disabled]:not([disabled=false]))){--r-icon-button--color:var(--r-icon-regular, #282828);--r-icon-button--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host([variant=contained]:active:not([disabled]:not([disabled=false]))){--r-icon-button--color:var(--r-icon-regular, #282828);--r-icon-button--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([variant=contained][disabled]:not([disabled=false])){--r-icon-button--color:var(--r-icon-inverse, #fff);--r-icon-button--background-color:var(--r-background-interactive-regular, #282828)}:host([size=s]){--r-icon-button--height:1.5rem;--r-icon-button--width:1.5rem}:host([size=m]){--r-icon-button--height:2.25rem;--r-icon-button--width:2.25rem}:host([size=l]){--r-icon-button--height:2.75rem;--r-icon-button--width:2.75rem}.r-icon-button{display:var(--r-icon-button--display, inline-flex);align-items:var(--r-icon-button--align-items, center);justify-content:var(--r-icon-button--justify-content, center);outline:var(--r-icon-button--outline, none);cursor:var(--r-icon-button--cursor, pointer);pointer-events:var(--r-icon-button--pointer-events, initial);padding:var(--r-icon-button--padding, 0);border:var(--r-icon-button--border, none);color:var(--r-icon-button--color, inherit);background-color:var(--r-icon-button--background-color, transparent);box-sizing:var(--r-icon-button--box-sizing, border-box);border-width:var(--r-icon-button--border-width, 1px);border-style:var(--r-icon-button--border-style, solid);border-color:var(--r-icon-button--border-color, transparent);border-radius:var(--r-icon-button--border-radius, 50%);z-index:var(--r-icon-button--z-index, initial);width:var(--r-icon-button--width, 2.25rem);height:var(--r-icon-button--height, 2.25rem)}.r-icon-button--target-area{position:var(--r-icon-button--target-area--position, absolute);background:var(--r-icon-button--target-area--background, rgba(0, 0, 0, 0));width:var(--r-icon-button--target-area--width, 2.75rem);height:var(--r-icon-button--target-area--height, 2.75rem);z-index:var(--r-icon-button--target-area--z-index, 1)}.r-icon-button--icon{display:flex;align-items:center;justify-content:center}.visually-hidden{position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}";
-
-const IconButton = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.rClick = createEvent(this, "rClick");
-        /**
-         * Defines the size of the icon used within the button.
-         */
-        this.size = 'm';
-        /**
-         * @deprecated Use the `<r-tooltip>` component as a wrapper instead.
-         * Sets position for the tooltip.
-         * - `top`: Tooltip appears above the button.
-         * - `bottom`: Tooltip appears below the button.
-         * - `left`: Tooltip appears to the left of the button.
-         * - `right`: Tooltip appears to the right of the button.
-         */
-        this.tooltipPosition = 'top';
-        /**
-         * Defines the visual style of the button.
-         * - `standard`: Default button style.
-         * - `contained`: Button with a contained background.
-         */
-        this.variant = 'standard';
-        this._handleClick = (event) => {
-            if (this.disabled) {
-                event.preventDefault();
-                return;
-            }
-            this.rClick.emit();
-        };
-        this.onFocus = () => {
-            this.setFocus();
-        };
-        this.onBlur = () => {
-            this.setBlur();
-        };
-    }
-    /** Simulate a button click */
-    async triggerClick() {
-        var _a;
-        (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.click();
-    }
-    /** Set focus on the button */
-    async setFocus() {
-        var _a;
-        (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    /** Remove focus from the button */
-    async setBlur() {
-        var _a;
-        (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.blur();
-    }
-    render() {
-        const { name, size, disabled, tooltipText, tooltipPosition } = this;
-        const buttonAttrs = {
-            disabled,
-        };
-        const iconAttrs = {
-            name,
-            size
-        };
-        const buttonTemplate = () => (h("button", Object.assign({ key: '05fbf705a760c71c292bfd0e61b56a362c8b8a36', type: "button", tabindex: !this.disabled && this.rTabindex || null, class: "r-icon-button", "aria-label": this.host.getAttribute('aria-label') || null }, buttonAttrs, { onClick: this._handleClick, onFocus: this.onFocus, onBlur: this.onBlur, ref: (el) => (this.nativeElement = el) }), name ?
-            h("r-icon", Object.assign({}, iconAttrs))
-            :
-                h("r-icon", { size: size, class: "r-icon-button--icon" }, h("slot", null)), h("span", { key: '9c6d1c80c1e8cc88345a5e45b0060cb0eb285904', class: "r-icon-button--label visually-hidden" }, this.label), h("span", { key: '4ea91afe81b472b5ce5c6a993574518ab1a40d2f', class: "r-icon-button--target-area" })));
-        return (h(Host, { key: '54574ad857a36fdb0f263a3abf224c3d24955f07' }, !disabled && tooltipText ?
-            h("r-tooltip", { text: tooltipText, position: tooltipPosition }, buttonTemplate())
-            :
-                buttonTemplate()));
-    }
-    get host() { return getElement(this); }
-};
-IconButton.style = iconButtonCss;
-
-const tooltipCss = ":host{display:inline-block;--r-tooltip--position:relative;--r-tooltip--content--position:fixed;--r-tooltip--content--display:none;--r-tooltip--content--color:var(--r-text-inverse);--r-tooltip--content--background-color:var(--r-background-inverse);--r-tooltip--content--font-family:var(--r-font-family-text);--r-tooltip--content--font-weight:var(--r-font-weight-regular);--r-tooltip--content--font-size:var(--r-font-size-200);--r-tooltip--content--line-height:var(--r-line-height-s);--r-tooltip--content--min-width:32px;--r-tooltip--content--max-width:300px;--r-tooltip--content--min-height:32px;--r-tooltip--content--padding:var(--r-spacing-050) var(--r-spacing-100);--r-tooltip--content--width:max-width;--r-tooltip--content--word-break:break-word;--r-tooltip--content--box-sizing:border-box;--r-tooltip--content--justify-content:center;--r-tooltip--content--align-items:center;--r-tooltip--content--z-index:0;--r-tooltip--arrow--display:none;--r-tooltip--arrow--position:fixed;--r-tooltip--arrow--width:12px;--r-tooltip--arrow--height:12px;--r-tooltip--arrow--transform:rotate(180deg);--r-tooltip--arrow--inner-content:\"\";--r-tooltip--arrow--inner--width:12px;--r-tooltip--arrow--inner--height:6px;--r-tooltip--arrow--inner--background-color:var(--r-tooltip--content--background-color);--r-tooltip--arrow--inner--clip-path:polygon(50% 0%, 0% 100%, 100% 100%);--r-tooltip--arrow--inner--border-radius:0;--r-tooltip--arrow--inner--align-self:flex-end}:host slot{display:contents}:host([data-position=bottom]){--r-tooltip--arrow--transform:rotate(0)}:host([data-position=right]){--r-tooltip--arrow--transform:rotate(270deg)}:host([data-position=left]){--r-tooltip--arrow--transform:rotate(90deg)}.r-tooltip{position:var(--r-tooltip--position)}.r-tooltip:has(.r-tooltip--content--visible){--r-tooltip--content--width:max-content;--r-tooltip--content--display:flex;--r-tooltip--content--z-index:1060;--r-tooltip--arrow--display:flex;--r-tooltip--arrow--inner--display:block}.r-tooltip--trigger{color:var(--r-tooltip--trigger--color, inherit);box-shadow:var(--r-tooltip--trigger--box-shadow, none);outline:var(--r-tooltip--trigger--outline, none);outline-offset:var(--r-tooltip--trigger--outline-offset, 0)}.r-tooltip--trigger:focus{--r-tooltip--trigger--box-shadow:0 0 0 6px var(--r-border-focused-outlined);--r-tooltip--trigger--outline:2px solid var(--r-border-focused);--r-tooltip--trigger--outline-offset:2px}.r-tooltip--content{position:var(--r-tooltip--content--position);display:var(--r-tooltip--content--display);color:var(--r-tooltip--content--color);background-color:var(--r-tooltip--content--background-color);font-family:var(--r-tooltip--content--font-family);font-weight:var(--r-tooltip--content--font-weight);font-size:var(--r-tooltip--content--font-size);line-height:var(--r-tooltip--content--line-height);min-width:var(--r-tooltip--content--min-width);max-width:var(--r-tooltip--content--max-width);min-height:var(--r-tooltip--content--min-height);padding:var(--r-tooltip--content--padding);width:var(--r-tooltip--content--width);word-break:var(--r-tooltip--content--word-break);box-sizing:var(--r-tooltip--content--box-sizing);z-index:var(--r-tooltip--content--z-index)}.r-tooltip--arrow{display:var(--r-tooltip--arrow--display);position:var(--r-tooltip--arrow--position);width:var(--r-tooltip--arrow--width);height:var(--r-tooltip--arrow--height);transform:var(--r-tooltip--arrow--transform)}.r-tooltip--arrow:after{content:var(--r-tooltip--arrow--inner-content);display:var(--r-tooltip--arrow--inner--display);width:var(--r-tooltip--arrow--inner--width);height:var(--r-tooltip--arrow--inner--height);background-color:var(--r-tooltip--arrow--inner--background-color);clip-path:var(--r-tooltip--arrow--inner--clip-path);border-radius:var(--r-tooltip--arrow--inner--border-radius);align-self:var(--r-tooltip--arrow--inner--align-self)}";
-
-const OFFSET = 20;
-const Tooltip = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.rTooltipFocus = createEvent(this, "rTooltipFocus");
-        /** Tooltip display text */
-        this.text = '';
-        /** Specifies tooltip position */
-        this.position = 'top';
-        this.arrowPositionState = 'left';
-        this.isShown = false;
-        this.uniqueId = `r-tooltip-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
-        this.getOffsetLeft = (arrowPosition) => {
-            var _a, _b, _c;
-            const offsetLeft = Math.abs(((_a = this.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) - ((_c = (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) === null || _c === void 0 ? void 0 : _c.width));
-            switch (arrowPosition) {
-                case 'center':
-                    return offsetLeft / 2;
-                case 'right':
-                    return offsetLeft;
-                default:
-                    return 0;
-            }
-        };
-        this.alignTooltipPosition = () => {
-            var _a, _b, _c, _d, _e, _f, _g;
-            const offsetHeight = Math.abs(((_a = this.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) - ((_c = (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) === null || _c === void 0 ? void 0 : _c.height)) / 2;
-            const offsetLeft = this.getOffsetLeft(this.arrowPositionState);
-            const hostHeight = ((_e = (_d = this.element) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect()) === null || _e === void 0 ? void 0 : _e.height) + this.arrowHeight || 0;
-            const hostWidth = ((_g = (_f = this.element) === null || _f === void 0 ? void 0 : _f.getBoundingClientRect()) === null || _g === void 0 ? void 0 : _g.width) + this.arrowWidth || 0;
-            switch (this.positionState) {
-                case 'top':
-                    this.alignPosition(this.tooltip, -offsetLeft, -this.tooltipContainerHeight);
-                    break;
-                case 'bottom':
-                    this.alignPosition(this.tooltip, -offsetLeft, hostHeight);
-                    break;
-                case 'left':
-                    this.alignPosition(this.tooltip, -this.tooltipContainerWidth, -offsetHeight);
-                    break;
-                case 'right':
-                    this.alignPosition(this.tooltip, hostWidth, -offsetHeight);
-                    break;
-            }
-        };
-        this.alignArrowPosition = () => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-            const offsetHeight = Math.abs(((_a = this.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) - ((_c = (_b = this.arrow) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) === null || _c === void 0 ? void 0 : _c.height)) / 2;
-            const offsetLeft = Math.abs(((_d = this.element) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect().width) - ((_f = (_e = this.arrow) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect()) === null || _f === void 0 ? void 0 : _f.width)) / 2;
-            const hostHeight = ((_h = (_g = this.element) === null || _g === void 0 ? void 0 : _g.getBoundingClientRect()) === null || _h === void 0 ? void 0 : _h.height) || 0;
-            const hostWidth = ((_k = (_j = this.element) === null || _j === void 0 ? void 0 : _j.getBoundingClientRect()) === null || _k === void 0 ? void 0 : _k.width) || 0;
-            switch (this.positionState) {
-                case 'top':
-                    this.alignPosition(this.arrow, offsetLeft, -this.arrowHeight);
-                    break;
-                case 'bottom':
-                    this.alignPosition(this.arrow, offsetLeft, hostHeight);
-                    break;
-                case 'left':
-                    this.alignPosition(this.arrow, -this.arrowWidth, offsetHeight);
-                    break;
-                case 'right':
-                    this.alignPosition(this.arrow, hostWidth, offsetHeight);
-                    break;
-            }
-        };
-        this.alignPosition = (element, offsetLeft, offsetTop) => {
-            var _a;
-            if (!element) {
-                return;
-            }
-            let elementOffset = (_a = this.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            let left = elementOffset.left + offsetLeft;
-            let top = elementOffset.top + offsetTop;
-            element.style.left = `${left > 0 ? left : 0}px`;
-            element.style.top = `${top}px`;
-        };
-        /**
-         * Listen on hovering tooltip element and update tooltip position if needed
-         */
-        this.handleHover = () => {
-            this.showTooltip();
-            this.setCorrectPosition();
-        };
-        /**
-         * Listen on focusing tooltip element and update tooltip position if needed
-         */
-        this.handleFocus = () => {
-            this.showTooltip();
-            this.setCorrectPosition();
-            this.rTooltipFocus.emit({ element: this.element });
-        };
-        this.showTooltip = () => {
-            var _a;
-            this.isShown = true;
-            this.tooltip.classList.add('r-tooltip--content--visible');
-            const interactiveElement = this.getInteractiveElement(this.activeElement);
-            interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.setAttribute('aria-description', (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.innerText);
-        };
-        this.removeTooltip = () => {
-            this.isShown = false;
-            this.tooltip.style.width = 'max-content';
-            this.tooltip.classList.remove('r-tooltip--content--visible');
-            const interactiveElement = this.getInteractiveElement(this.activeElement);
-            interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.removeAttribute('aria-description');
-        };
-        this.handleScroll = () => {
-            if (!this.isShown) {
-                return;
-            }
-            if (!this.isOnScreen) {
-                this.removeTooltip();
-                return;
-            }
-            this.setCorrectPosition();
-        };
-    }
-    /**
-     * Watch on position value change and update tooltip position if needed
-     */
-    handleVerticalPosition() {
-        this.setCorrectPosition();
-    }
-    /**
-     * Listen on window scroll and update tooltip position if needed
-     */
-    handleScrolling() {
-        this.setCorrectPosition();
-    }
-    /**
-     * Listen on window resizing and update tooltip position if needed
-     */
-    handleResizing() {
-        this.setCorrectPosition();
-    }
-    /**
-     * Listen on window keydown and hide tooltip if needed
-     */
-    handleKeydown(event) {
-        if (this.isShown && event.key === 'Escape') {
-            this.removeTooltip();
-        }
-    }
-    /**
-     * Parent with non visible overflow
-     */
-    get overflowedParent() {
-        return this.findOverflowParent(this.element.parentElement);
-    }
-    get arrowWidth() {
-        var _a;
-        return ((_a = this.arrow) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
-    }
-    get arrowHeight() {
-        var _a;
-        return ((_a = this.arrow) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0;
-    }
-    get tooltipContainerWidth() {
-        var _a, _b;
-        return ((_b = (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) + this.arrowWidth || 0;
-    }
-    get tooltipContainerHeight() {
-        var _a, _b;
-        return ((_b = (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height) + this.arrowHeight || 0;
-    }
-    /**
-     * Available space at the top
-     */
-    get top() {
-        return this.element.getBoundingClientRect().top;
-    }
-    /**
-     * Available space on the left
-     */
-    get left() {
-        return this.element.getBoundingClientRect().left;
-    }
-    get isOnScreen() {
-        const parent = this.overflowedParent || document.documentElement;
-        const parentRect = parent.getBoundingClientRect();
-        const elementRect = this.element.getBoundingClientRect();
-        const isVerticallyVisible = elementRect.top >= parentRect.top && elementRect.bottom <= parentRect.bottom;
-        const isHorizontallyVisible = elementRect.left >= parentRect.left && elementRect.right <= parentRect.right;
-        return isVerticallyVisible && isHorizontallyVisible;
-    }
-    /**
-     * Available space at the bottom
-     */
-    get bottom() {
-        function calculateBottomSpace(element) {
-            return window.innerHeight - element.getBoundingClientRect().top - element.getBoundingClientRect().height;
-        }
-        return calculateBottomSpace(this.element);
-    }
-    /**
-     * Available space on the right
-     */
-    get right() {
-        function calculateRightSpace(element) {
-            return window.innerWidth - element.getBoundingClientRect().left - element.getBoundingClientRect().width;
-        }
-        return calculateRightSpace(this.element);
-    }
-    /**
-     * Defines which horizontal placement is available
-     */
-    get horizontalPlacement() {
-        return this.tooltipContainerWidth + OFFSET < this.left ? 'left' : 'right';
-    }
-    /**
-     * Defines which vertical placement is available
-     */
-    get verticalPlacement() {
-        return this.tooltipContainerHeight + OFFSET < this.top ? 'top' : 'bottom';
-    }
-    /**
-     * Checks if there is enough space for placing tooltip vertically
-     */
-    get isEnoughSpaceVertically() {
-        return this.tooltipContainerHeight + OFFSET < this.top || this.tooltipContainerHeight + OFFSET < this.bottom;
-    }
-    /**
-     * Checks if there is enough space for placing tooltip horizontally
-     */
-    get isEnoughSpaceHorizontally() {
-        return this.tooltipContainerWidth + OFFSET < this.left || this.tooltipContainerWidth + OFFSET < this.right;
-    }
-    get activeElement() {
-        return this.element.querySelector('r-button, r-icon-button, a, button, [tabindex]:not([tabindex="-1"])');
-    }
-    /**
-     * 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;
-    }
-    /**
-     * Define position state
-     */
-    componentWillLoad() {
-        this.positionState = this.position;
-    }
-    /**
-     * Listen to active child element
-     */
-    componentDidLoad() {
-        var _a, _b, _c;
-        (_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.addEventListener('focus', () => {
-            this.handleFocus();
-        });
-        (_b = this.activeElement) === null || _b === void 0 ? void 0 : _b.addEventListener('blur', () => {
-            this.removeTooltip();
-        });
-        (_c = this.overflowedParent) === null || _c === void 0 ? void 0 : _c.addEventListener('scroll', () => {
-            this.handleScroll();
-        });
-    }
-    /**
-     * Finds first element's parent with not visible overflow.
-     * @param element -- parent element
-     * @param initEl -- initial(child) element
-     */
-    findOverflowParent(element) {
-        var _a, _b;
-        function notVisible(element) {
-            return getComputedStyle(element).overflow !== "visible";
-        }
-        if (!element) {
-            return null;
-        }
-        if (((_a = element.parentNode) === null || _a === void 0 ? void 0 : _a.nodeType) === Node.DOCUMENT_FRAGMENT_NODE) {
-            return this.findOverflowParent((_b = element.parentNode) === null || _b === void 0 ? void 0 : _b.host);
-        }
-        if (notVisible(element)) {
-            return element;
-        }
-        if (element.parentElement) {
-            return this.findOverflowParent(element.parentElement);
-        }
-        return null;
-    }
-    /**
-     * Checks the alternative tooltip position.
-     * For example: If defined position is "top" and there is no free space for this position at the top of the component,
-     * first it checks available vertical space to place tooltip at the bottom.
-     * If there is no available space at the bottom, it checks the available space horizontally and sets it horizontally.
-     */
-    getAlternativePosition() {
-        switch (this.position) {
-            case 'top':
-                return this.isEnoughSpaceVertically ? 'bottom' : this.horizontalPlacement;
-            case 'bottom':
-                return this.isEnoughSpaceVertically ? 'top' : this.horizontalPlacement;
-            case 'left':
-                return this.isEnoughSpaceHorizontally ? 'right' : this.verticalPlacement;
-            case 'right':
-                return this.isEnoughSpaceHorizontally ? 'left' : this.verticalPlacement;
-        }
-    }
-    /**
-     * Set correct tooltip position.
-     * First it checks the available space for a defined position and then sets the new one based on the available space.
-     */
-    setCorrectPosition() {
-        if (!this.tooltip || !this.isShown) {
-            return;
-        }
-        switch (this.position) {
-            case 'top':
-                this.positionState = this.tooltipContainerHeight + OFFSET < this.top ? this.position : this.getAlternativePosition();
-                break;
-            case 'bottom':
-                this.positionState = this.tooltipContainerHeight + OFFSET < this.bottom ? this.position : this.getAlternativePosition();
-                break;
-            case 'left':
-                this.positionState = this.tooltipContainerWidth + OFFSET < this.left ? this.position : this.getAlternativePosition();
-                break;
-            case 'right':
-                this.positionState = this.tooltipContainerWidth + OFFSET < this.right ? this.position : this.getAlternativePosition();
-                break;
-        }
-        this.adjustArrowPosition();
-        this.alignTooltipPosition();
-        this.alignArrowPosition();
-        // Allow tooltip content wrap and recalculate position
-        if (this.tooltip.style.width === 'fit-content') {
-            return;
-        }
-        this.tooltip.style.width = 'fit-content';
-        this.alignTooltipPosition();
-    }
-    /**
-     * Adjusts arrow correct position.
-     * For bottom & top tooltip positions there are 3 possible arrow.
-     * For right & left tooltip positions there is only one position = "center".
-     */
-    adjustArrowPosition() {
-        const isEnoughTooltipSpaceLeft = this.tooltipContainerWidth / 2 + OFFSET < this.left;
-        const isEnoughTooltipSpaceRight = this.tooltipContainerWidth / 2 + OFFSET < this.right;
-        if (isEnoughTooltipSpaceLeft && isEnoughTooltipSpaceRight || !isEnoughTooltipSpaceLeft && !isEnoughTooltipSpaceRight || this.positionState === 'left' || this.positionState === 'right') {
-            this.arrowPositionState = 'center';
-        }
-        else if (!isEnoughTooltipSpaceLeft) {
-            this.arrowPositionState = 'left';
-        }
-        else if (!isEnoughTooltipSpaceRight) {
-            this.arrowPositionState = 'right';
-        }
-    }
-    render() {
-        const { text, arrowPositionState, positionState, isShown, uniqueId } = this;
-        const hostAttrs = {
-            'data-arrow-position': arrowPositionState,
-            'data-position': positionState
-        };
-        const triggerAttrs = {
-            tabindex: !this.activeElement ? 0 : null,
-            role: !this.activeElement ? 'button' : null,
-            'aria-describedby': !this.activeElement && isShown ? uniqueId : null
-        };
-        const contentAttrs = {
-            id: uniqueId,
-            role: 'tooltip',
-            'aria-hidden': `${!isShown}`
-        };
-        return (h(Host, Object.assign({ key: '5d8a002a227895d5e633e8b1df95ba449a9e253a' }, hostAttrs, { onMouseenter: this.handleHover, onMouseleave: this.removeTooltip }), h("div", { key: '4e6340639dc27fc7d0e981ca7cf8a4046737527f', class: "r-tooltip" }, h("div", Object.assign({ key: 'bcf2d5c73b427b2941be8de56b9ce2f296ae07eb', class: "r-tooltip--trigger", onFocus: this.handleFocus, onBlur: this.removeTooltip }, triggerAttrs), h("slot", { key: 'be7037ba07bf11b4957910c52f4a3f329b514007' })), h("div", Object.assign({ key: '300a3ef08b7c73b6b07161c58860df518ae9a862', class: "r-tooltip--content", ref: (el) => this.tooltip = el }, contentAttrs), text), h("div", { key: '73912349289b0dc365552331197d94bd0896ff3c', ref: (el) => this.arrow = el, class: "r-tooltip--arrow" }))));
-    }
-    get element() { return getElement(this); }
-    static get watchers() { return {
-        "position": ["handleVerticalPosition"]
-    }; }
-};
-Tooltip.style = tooltipCss;
-
-export { IconButton as r_icon_button, Tooltip as r_tooltip };