@riverty/web-components 5.7.0 → 6.0.0

package/dist/cjs/r-checkbox.cjs.entry.js

@@ -11,25 +11,29 @@ const Checkbox = class {
         this.rChange = index.createEvent(this, "rChange");
         this.rReset = index.createEvent(this, "rReset");
         this.rValidate = index.createEvent(this, "rValidate");
-        /**
-         * _DEPRECATED_ (This property will be removed in November 2025 release.)
-         * Controls the visibility of validation indicators for the field.
-         * */
-        this.showValid = false;
+        /** Automatically focus the checkbox when the component is mounted. Note: Only one element per page should have autofocus set to true, following browser standard behavior. */
+        this.autofocus = false;
         this.validityState = '';
         this.validityMessage = '';
+        this.touched = false;
+        // Private properties
         this.initial = {};
+        this.uniqueId = `r-checkbox-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
+        // Private methods
         this.getValidityStateData = (element) => {
+            let validityState = '';
+            let 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)
@@ -38,7 +42,9 @@ const Checkbox = 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;
@@ -47,9 +53,6 @@ const Checkbox = class {
                 message: this.validityMessage
             });
         };
-        /** Unique id */
-        this.uniqueId = `r-checkbox-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
-        this.touched = false;
         this.handleClick = (event) => {
             if (this.disabled)
                 return;
@@ -81,18 +84,13 @@ const Checkbox = class {
         this.contributeToFormData = (event) => {
             formData.appendControlToFormData(this.nativeElement || this.host, event.formData);
         };
+        this.applyAutofocus = () => {
+            queueMicrotask(() => {
+                this.setFocus();
+            });
+        };
     }
-    /** Identify wrapping form element */
-    get parentFormEl() {
-        return this.host.closest('form') || document.querySelector(`#${this.form}`) || null;
-    }
-    /** Determine whether this element should be ignored during Constraint Validation API validation. */
-    get isNoValidate() {
-        var _a;
-        return (((_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.hasAttribute('novalidate')) ||
-            this.novalidate ||
-            false);
-    }
+    // Public Methods
     /**
      * Asynchronously retrieves the validity state of the checkbox.
      *
@@ -105,56 +103,14 @@ const Checkbox = class {
      *   - `message`: A string containing the validity message.
      */
     async getValidityState() {
-        this.getValidityStateData(this.nativeElement);
+        const { validityState, validityMessage } = this.getValidityStateData(this.nativeElement);
+        this.validityState = validityState;
+        this.validityMessage = validityMessage;
         return {
             state: this.validityState,
             message: this.validityMessage
         };
     }
-    async handleCheckedChange() {
-        // Only proceed if checkbox has been interacted with
-        if (!this.touched)
-            return;
-        if (this.disabled)
-            return;
-        const { host, value, checked } = this;
-        this.rChange.emit({ element: host, value, checked });
-        // Update native element checked state
-        if (this.nativeElement) {
-            this.nativeElement.checked = checked;
-        }
-        // Validate if required
-        if (this.required && !this.isNoValidate) {
-            this.validateFormElement(this.nativeElement);
-        }
-    }
-    connectFormEventListeners() {
-        var _a, _b, _c;
-        (_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.addEventListener('formdata', this.contributeToFormData);
-        (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.addEventListener('submit', this.onSubmitForm, { capture: true });
-        (_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.addEventListener('reset', this.onResetForm);
-    }
-    disconnectFormEventListeners() {
-        var _a, _b, _c;
-        (_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('formdata', this.contributeToFormData);
-        (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('submit', this.onSubmitForm);
-        (_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.removeEventListener('reset', this.onResetForm);
-    }
-    componentWillLoad() {
-        this.initial['checked'] = this.checked;
-        this.initial['invalid'] = this.invalid;
-    }
-    componentDidLoad() {
-        if (this.nativeElement) {
-            this.nativeElement.indeterminate = this.indeterminate;
-        }
-    }
-    connectedCallback() {
-        this.connectFormEventListeners();
-    }
-    disconnectedCallback() {
-        this.disconnectFormEventListeners();
-    }
     /**
      * Sets focus on the checkbox element.
      */
@@ -200,6 +156,44 @@ const Checkbox = class {
     async clearIndeterminate() {
         this.indeterminate = false;
     }
+    /**
+     * Validates the checkbox without triggering UI and returns a boolean indicating its validity.
+     * @returns A boolean indicating whether the checkbox is valid.
+     */
+    async checkValidity() {
+        const { validityState } = this.getValidityStateData(this.nativeElement);
+        return validityState === 'valid';
+    }
+    // Watchers
+    async handleCheckedChange() {
+        // Only proceed if checkbox has been interacted with
+        if (!this.touched)
+            return;
+        if (this.disabled)
+            return;
+        const { host, value, checked } = this;
+        this.rChange.emit({ element: host, value, checked });
+        // Update native element checked state
+        if (this.nativeElement) {
+            this.nativeElement.checked = checked;
+        }
+        // Validate if required
+        if (this.required && !this.isNoValidate) {
+            this.validateFormElement(this.nativeElement);
+        }
+    }
+    // Getters
+    /** Identify wrapping form element */
+    get parentFormEl() {
+        return this.host.closest('form') || document.querySelector(`#${this.form}`) || null;
+    }
+    /** Determine whether this element should be ignored during Constraint Validation API validation. */
+    get isNoValidate() {
+        var _a;
+        return (((_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.hasAttribute('novalidate')) ||
+            this.novalidate ||
+            false);
+    }
     get hasErrorMessage() {
         var _a;
         return typeof this.error === 'string' && ((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) > 0;
@@ -217,31 +211,53 @@ const Checkbox = class {
             return false;
         return this.hasErrorMessage || this.hasCustomErrorMessage || this.hasValidationError;
     }
-    get hasValidMessage() {
-        const { valid, validMessage } = this;
-        const hasMessage = typeof validMessage === 'string' && (validMessage === null || validMessage === void 0 ? void 0 : validMessage.trim().length) > 0;
-        return valid && hasMessage;
+    connectFormEventListeners() {
+        var _a, _b, _c;
+        (_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.addEventListener('formdata', this.contributeToFormData);
+        (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.addEventListener('submit', this.onSubmitForm, { capture: true });
+        (_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.addEventListener('reset', this.onResetForm);
+    }
+    disconnectFormEventListeners() {
+        var _a, _b, _c;
+        (_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('formdata', this.contributeToFormData);
+        (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('submit', this.onSubmitForm);
+        (_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.removeEventListener('reset', this.onResetForm);
     }
-    get hasMessage() {
-        return this.hasInvalidMessage || this.hasValidMessage;
+    // Lifecycle methods
+    componentWillLoad() {
+        this.initial['checked'] = this.checked;
+        this.initial['invalid'] = this.invalid;
+    }
+    componentDidLoad() {
+        if (this.nativeElement) {
+            this.nativeElement.indeterminate = this.indeterminate;
+        }
+        if (this.autofocus)
+            this.applyAutofocus();
+    }
+    connectedCallback() {
+        this.connectFormEventListeners();
+    }
+    disconnectedCallback() {
+        this.disconnectFormEventListeners();
     }
     render() {
-        const { error, name, value, disabled, required, uniqueId, checked, indeterminate } = this;
+        const { error, name, value, disabled, required, uniqueId, checked, indeterminate, autofocus } = this;
         const inputAttrs = {
             name,
             value,
             disabled,
             required,
             checked,
-            indeterminate
+            indeterminate,
+            autofocus
         };
-        return (index.h(index.Host, { key: '79d7e8e080149a1ed8fee3d407f40da28d89e113', onClick: this.handleClick }, index.h("div", { key: '4a55be6beed582b9fbcea98da4c3728f63d8bf2f', class: "r-checkbox" }, index.h("input", Object.assign({ key: '482806370c082d8928222922b2182ad212c9fd16', class: "r-checkbox--input", type: "checkbox" }, inputAttrs, { id: `${uniqueId}-input`, ref: el => this.nativeElement = el, "aria-describedby": this.hasMessage ? `${uniqueId}-message` : null, "aria-required": `${this.required || false}`, "aria-invalid": `${this.invalid || false}` })), index.h("div", { key: 'f3650c5055c733f8f55e0d1e684df2ef18629271', class: "r-checkbox--box", "aria-hidden": "true" }, this.checked ?
+        return (index.h(index.Host, { key: '54a5b4a38fd2e9c2a94a95d9ad7d47cd91123d0f', onClick: this.handleClick }, index.h("div", { key: '089747b6032bfc4e0de581eed060558dc73a1118', class: "r-checkbox" }, index.h("input", Object.assign({ key: 'fa2b9640c25d4f0d1e1781f885a27f1b24c906b4', class: "r-checkbox--input", type: "checkbox" }, inputAttrs, { id: `${uniqueId}-input`, ref: el => this.nativeElement = el, "aria-describedby": this.hasInvalidMessage ? `${uniqueId}-message` : null, "aria-required": `${this.required || false}`, "aria-invalid": `${this.invalid || false}` })), index.h("div", { key: '49e514969fa11eccba18658d275462c8c705f8e2', class: "r-checkbox--box", "aria-hidden": "true" }, this.checked ?
             index.h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M8.80019 15.8988L4.6002 11.6988L3.2002 13.0988L8.80019 18.6988L20.8002 6.69883L19.4002 5.29883L8.80019 15.8988Z", fill: "currentColor" }))
             : this.indeterminate ?
                 index.h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("rect", { x: "4", y: "11", width: "16", height: "2", fill: "currentColor" }))
-                : null), index.h("div", { key: 'debd71ef2e1fcf46414c0bd93e6ee3cb35d58649', class: "r-checkbox--description" }, index.h("label", { key: '1698497afd3be427dd98b9c8292464ca8e805269', class: "r-checkbox--label", id: `${uniqueId}-label`, htmlFor: `${uniqueId}-input` }, index.h("slot", { key: 'a7d0646be5338917b042ce0cd49d32c920585153' })), index.h("div", { key: '8f6f206dcb74cff5acaac4b58dcc9792f4f3367c', id: `${uniqueId}-message`, class: !this.hasMessage ? 'visually-hidden' : 'r-checkbox--message', "aria-live": "polite", "aria-atomic": "true" }, this.hasInvalidMessage &&
-            index.h("r-hint", { key: '5fdb37b61532b821c87966b6763a20d58e3929ab', variant: "error" }, error || this.customErrorMessage || this.validityMessage), this.hasValidMessage &&
-            index.h("r-hint", { key: '74ff89cd4066b93a3d0f28271ca3f9fcfcdbd976', variant: "success" }, this.validMessage))))));
+                : null), index.h("div", { key: '96090e0dc6dcf564a73e061a7e75ad0a4ec0b1cb', class: "r-checkbox--description" }, index.h("label", { key: '524a1cba2f9ef69863c48ca536921411be743ec5', class: "r-checkbox--label", id: `${uniqueId}-label`, htmlFor: `${uniqueId}-input` }, index.h("slot", { key: 'cda4f61e27a86b988746465d14567f49f09eabd0' })), index.h("div", { key: 'be4d6ba741c2580fd1d5a6dc3e2f71716df55d71', id: `${uniqueId}-message`, class: !this.hasInvalidMessage ? 'visually-hidden' : 'r-checkbox--message', "aria-live": "polite", "aria-atomic": "true" }, this.hasInvalidMessage &&
+            index.h("r-hint", { key: '05b0c0d5ee3c603d19faa11006e9e3501dc8be82', variant: "error" }, error || this.customErrorMessage || this.validityMessage))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-DJ4H_bFj.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--footer{margin-top:var(--r-dialog--footer--margin-top, auto)}.r-dialog--footer ::slotted(*){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 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) {
@@ -25,10 +25,6 @@ const Dialog = class {
          * */
         this.isOpen = this.open;
         this.uniqueId = `r-dialog-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
-        this.isElContent = (selector) => {
-            const el = this.host.querySelector(selector);
-            return el !== null && (el === null || el === void 0 ? void 0 : el.textContent.trim().length) > 0;
-        };
         this.onTriggerClick = () => {
             this.close();
         };
@@ -43,9 +39,6 @@ const Dialog = class {
         if (this.open && !this.isOpen)
             this.showModal();
     }
-    get isFooterSlot() {
-        return this.isElContent('[slot="footer"]');
-    }
     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());
@@ -101,9 +94,8 @@ const Dialog = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '7fcaaecb6adb988027b05a2a8024db535cda93ba', open: this.isOpen }, index.h("dialog", { key: 'f567771b57a02336b8320bd21240d3045b666116', class: "r-dialog", "aria-label": this.dialogLabel, ref: el => this.dialogElement = el, style: { '--r-dialog--body--height': this.bodyHeight } }, index.h("div", { key: '75f660383a67ec9c109fed5f19158ec9c67b38ab', class: "r-dialog--content" }, index.h("div", { key: 'e027e8baa90beef1224210c476a6948519492a5a', class: "r-dialog--header", id: `${this.uniqueId}-header` }, index.h("slot", { key: 'b480fff8b92e7a77fec394bb6b1b68b5466bc152', name: "header" }, (this.headline) &&
-            index.h("h2", { key: 'f082e1ace95de447ef399f19698bae0f1058fb27', class: "r-dialog--headline" }, this.headline)), index.h("r-icon-button", { key: '681ac8aab0119d3be635f23efd8ccb9113f76ac3', class: "r-dialog--close", name: "cross", size: "s", onRClick: this.onTriggerClick, label: this.closeAriaLabel })), index.h("div", { key: '262d48e01c3ad1d8bb7b984c1182a9623bfd36d2', class: "r-dialog--body" }, this.bodyText, index.h("slot", { key: '0d77bfb9d9059b3571bb30da11da3464aa6ffea5' }), index.h("slot", { key: '0bdc239a2abe6fb6643e14c188d4a8f5d214e8b8', name: "form" })), this.isFooterSlot &&
-            index.h("div", { key: '02c6c9ee41bb7893955b492f4fd171e498041777', class: "r-dialog--footer" }, index.h("slot", { key: 'bcf48fd3ecc2378fa82ffb48aa3739ea65477dcd', name: "footer" }))))));
+        return (index.h(index.Host, { key: '6f042592347577f063f6a80d2152b1149eadcb21', open: this.isOpen }, index.h("dialog", { key: 'fd3f19cf69a9077585bceccebaf0d0c9bccbaa86', class: "r-dialog", "aria-label": this.dialogLabel, ref: el => this.dialogElement = el, style: { '--r-dialog--body--height': this.bodyHeight } }, index.h("div", { key: '974e33afe5e96d3a67501d10a4ecd0486900ed64', class: "r-dialog--content" }, index.h("div", { key: '57bccc4346d7234564dc22c179a7e10051bd3af7', class: "r-dialog--header", id: `${this.uniqueId}-header` }, index.h("slot", { key: '0a59d6a775f11378f17be41665b2c71aecb17ff9', name: "header" }, (this.headline) &&
+            index.h("h2", { key: '6dd6970be5bde3f92d87bef1cbbd7152ba72f88f', class: "r-dialog--headline" }, this.headline)), index.h("r-icon-button", { key: '37ad4f5b3366ae057240e5bcf2c7443aac3faa9b', class: "r-dialog--close", name: "cross", size: "s", onRClick: this.onTriggerClick, label: this.closeAriaLabel })), index.h("div", { key: '951dec5b1da5b13196916ed6b64fee89cad83a0e', class: "r-dialog--body" }, this.bodyText, index.h("slot", { key: '1797cb38116d9818aec51e2dc6982dad1a01cf02' }), index.h("slot", { key: '0f091bf0e6f6fdd16b79c69aca9814a0d76d7ee6', name: "form" })), index.h("slot", { key: '2b5a1cadfa9e7a13d8fc4ddca4cf69a1e4a1cb5e', name: "footer" })))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -0,0 +1,50 @@
+'use strict';
+
+var index = require('./index-DJ4H_bFj.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) {
+        index.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 (index.h(index.Host, { key: '1cbe08b7b3b01fc7d870416a1b14e3b1b8525797' }, index.h("div", { key: '17494f3ae8bdf394858e2f9337e54bd844a467d0', class: "r-hint" }, this.hasIcon &&
+            index.h("div", { key: 'ed406c6ae45ea4c25e6735752ced3a988c2f2274', class: "r-hint--icon" }, index.h("slot", { key: '9e93b83d3f9e71f722ffdb813d46b667eec556a5', name: "icon" }, this.iconName && index.h("r-icon", { key: '841c3e53381a21e1341191eb7a0b32fdd696c47f', name: this.iconName, size: "s" }))), index.h("div", { key: '946d0813297923053452519b9871cd9a0d04679f', class: "r-hint--text" }, index.h("slot", { key: 'f7343fcc6a4cbe9f5584f8d94feff33cfd8f2560' })))));
+    }
+    get host() { return index.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) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        const { fieldIndicator } = this;
+        return (index.h(index.Host, { key: 'd823556813a282022aa18e138a3ac89d7f22af2a' }, index.h("div", { key: '1cea58412a4599e009080eb224d17324d5cad0b3', class: "r-label" }, index.h("span", { key: 'c0ade32425b07866b7a3096f203c7848eaa83e55', class: "r-label--slot" }, index.h("slot", { key: '9c782ed621889966189bba0d4c46de620315c9c4' }), fieldIndicator &&
+            index.h("span", { key: 'c4a4fcbed3e744bed679d8e9c6416a51407a686a', class: "r-label--marker" }, fieldIndicator)))));
+    }
+};
+RLabel.style = labelCss;
+
+exports.r_hint = Hint;
+exports.r_label = RLabel;

package/dist/cjs/{r-hint_3.cjs.entry.js → r-icon-button_2.cjs.entry.js}

@@ -2,67 +2,81 @@
 
 var index = require('./index-DJ4H_bFj.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 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 Hint = class {
+const IconButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-    }
-    get iconName() {
-        if (this.icon)
-            return this.icon;
-        const variantIcons = {
-            'error': 'circled-exclamation-mark',
-            'warning': 'circled-cross',
-            'success': 'circled-check'
+        this.rClick = index.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();
         };
-        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;
+    /** Simulate a button click */
+    async triggerClick() {
+        var _a;
+        (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.click();
     }
-    render() {
-        return (index.h(index.Host, { key: '77951c878faf0f74385c72dfdfa11adc9d38da73' }, index.h("div", { key: '577c8674ce57e8ad8c784b926eff21b201af4bb2', class: "r-hint" }, this.hasIcon &&
-            index.h("div", { key: '7cba7116b04a7894aae4f2a3026324e15a95c9c5', class: "r-hint--icon" }, index.h("slot", { key: 'dba72b1442b9f0d27ca6d6387572b044468b54cb', name: "icon" }, this.iconName && index.h("r-icon", { key: 'a7cdb025298dc8b6f4290efcd366a03dc8135bb0', name: this.iconName, size: "s" }))), index.h("div", { key: 'bd96a4d4ec4a5c0f0e029b86e3a423b20e0a7341', class: "r-hint--text" }, index.h("slot", { key: 'e763e051b3d598fd78e777607f21a6358edc0dc2' })))));
+    /** Set focus on the button */
+    async setFocus() {
+        var _a;
+        (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.focus();
     }
-    get host() { return index.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) {
-        index.registerInstance(this, hostRef);
-        /**
-         * _DEPRECATED_ (This property will be removed in November 2025 release.)
-         * Defines preferable position of the tooltip */
-        this.tooltipPosition = 'right';
-        /**
-         * _DEPRECATED_ (This property will be removed in November 2025 release.)
-         * Icon tooltip trigger by name from the set */
-        this.tooltipIcon = 'circled-question-mark';
+    /** Remove focus from the button */
+    async setBlur() {
+        var _a;
+        (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.blur();
     }
     render() {
-        const { tooltip, tooltipPosition, tooltipIcon, tooltipIconColor, fieldIndicator } = this;
-        const tooltipAttrs = {
-            text: tooltip,
-            position: tooltipPosition
+        const { name, size, disabled, tooltipText, tooltipPosition } = this;
+        const buttonAttrs = {
+            disabled,
         };
-        const tooltipIconAttrs = {
-            name: tooltipIcon,
-            size: 's',
-            color: tooltipIconColor
+        const iconAttrs = {
+            name,
+            size
         };
-        return (index.h(index.Host, { key: '2d7da94197a774e5b3399ff59dba01f946f0d8df' }, index.h("div", { key: '56baaf39a736e1f504502c9f49b4cf5fbff2f911', class: "r-label" }, index.h("span", { key: '5b0032c31e83b628d73a207eeaa915368edc7237', class: "r-label--slot" }, index.h("slot", { key: 'fbcd30c185b9eef55ea43c8ca8b082a0308953e2' }), fieldIndicator &&
-            index.h("span", { key: '0d355d5857e515e735dc543d3416540e0a0ffdba', class: "r-label--marker" }, fieldIndicator)), tooltip &&
-            index.h("span", { key: 'b450b3e7ee2b33dbdc02d9fce04bd2ef6a97713d', class: "r-label--tooltip-icon" }, index.h("r-tooltip", Object.assign({ key: 'a1b2a24a312b7eabd5acd43273658bce3199ef1b' }, tooltipAttrs), index.h("r-icon", Object.assign({ key: 'c22f6349b9c67a82b29f4a5758a77fb1b2910b75' }, tooltipIconAttrs)))))));
+        const buttonTemplate = () => (index.h("button", Object.assign({ key: '911b0a6390b2dfa0084bda96e12f0968859a31e4', type: "button", 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 ?
+            index.h("r-icon", Object.assign({}, iconAttrs))
+            :
+                index.h("r-icon", { size: size, class: "r-icon-button--icon" }, index.h("slot", null)), index.h("span", { key: '2306cd32340a99653bb02c86de43324a2c0ca35b', class: "r-icon-button--label visually-hidden" }, this.label), index.h("span", { key: '9cb523d0c82caf25d472b8969a0afee41ad776aa', class: "r-icon-button--target-area" })));
+        return (index.h(index.Host, { key: '2710af0c77ea56a4cf69e29c09221ba7d913bc9d' }, !disabled && tooltipText ?
+            index.h("r-tooltip", { text: tooltipText, position: tooltipPosition }, buttonTemplate())
+            :
+                buttonTemplate()));
     }
+    get host() { return index.getElement(this); }
 };
-RLabel.style = labelCss;
+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)}";
 
@@ -420,7 +434,7 @@ const Tooltip = class {
             role: 'tooltip',
             'aria-hidden': `${!isShown}`
         };
-        return (index.h(index.Host, Object.assign({ key: 'f0b2e0117f0604d325becbcc05686433fbd3d506' }, hostAttrs, { onMouseenter: this.handleHover, onMouseleave: this.removeTooltip }), index.h("div", { key: '2f5ff7638dedddd04dac78a2131438457211354b', class: "r-tooltip" }, index.h("div", Object.assign({ key: 'cb562089f6e7ac27b99ba09953c2f28f29e3e649', class: "r-tooltip--trigger", onFocus: this.handleFocus, onBlur: this.removeTooltip }, triggerAttrs), index.h("slot", { key: '2e09b16563b9aa325ff64f10af1ad5f4728a2417' })), index.h("div", Object.assign({ key: 'ffe53881e5ec5335073a7adf2ed5479f3a56f00f', class: "r-tooltip--content", ref: (el) => this.tooltip = el }, contentAttrs), text), index.h("div", { key: '3f85fb76e934b18d5963d125699d00776c6abbac', ref: (el) => this.arrow = el, class: "r-tooltip--arrow" }))));
+        return (index.h(index.Host, Object.assign({ key: '1b2ce4ee1a9f9ca227b96e567fb61b560858734e' }, hostAttrs, { onMouseenter: this.handleHover, onMouseleave: this.removeTooltip }), index.h("div", { key: '1379aefd4bf69b312a9ce3ef443f5e9fe970f09e', class: "r-tooltip" }, index.h("div", Object.assign({ key: '80f00e66c8f01bb0df9107943c15d6616e4e7197', class: "r-tooltip--trigger", onFocus: this.handleFocus, onBlur: this.removeTooltip }, triggerAttrs), index.h("slot", { key: '42e1453731bdd404083e11d3d2f0ae4603e4c57b' })), index.h("div", Object.assign({ key: '00aa4f22f9c3e40d1c8e86cdd950ef1d160e29cf', class: "r-tooltip--content", ref: (el) => this.tooltip = el }, contentAttrs), text), index.h("div", { key: 'b717d5e45d3f970ee87f409d61a6353fb138fc7b', ref: (el) => this.arrow = el, class: "r-tooltip--arrow" }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -429,6 +443,5 @@ const Tooltip = class {
 };
 Tooltip.style = tooltipCss;
 
-exports.r_hint = Hint;
-exports.r_label = RLabel;
+exports.r_icon_button = IconButton;
 exports.r_tooltip = Tooltip;