@riverty/web-components 5.7.0 → 6.0.0

package/dist/collection/components/checkbox/checkbox.js

@@ -8,25 +8,29 @@ import { appendControlToFormData } from "../../utils/formData";
  */
 export class Checkbox {
     constructor() {
-        /**
-         * _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)
@@ -35,7 +39,9 @@ export class Checkbox {
                 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;
@@ -44,9 +50,6 @@ export class Checkbox {
                 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;
@@ -78,18 +81,13 @@ export class Checkbox {
         this.contributeToFormData = (event) => {
             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.
      *
@@ -102,56 +100,14 @@ export class Checkbox {
      *   - `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.
      */
@@ -197,6 +153,44 @@ export class Checkbox {
     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;
@@ -214,31 +208,53 @@ export class Checkbox {
             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);
+    }
+    // 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();
     }
-    get hasMessage() {
-        return this.hasInvalidMessage || this.hasValidMessage;
+    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 (h(Host, { key: '79d7e8e080149a1ed8fee3d407f40da28d89e113', onClick: this.handleClick }, h("div", { key: '4a55be6beed582b9fbcea98da4c3728f63d8bf2f', class: "r-checkbox" }, 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}` })), h("div", { key: 'f3650c5055c733f8f55e0d1e684df2ef18629271', class: "r-checkbox--box", "aria-hidden": "true" }, this.checked ?
+        return (h(Host, { key: '54a5b4a38fd2e9c2a94a95d9ad7d47cd91123d0f', onClick: this.handleClick }, h("div", { key: '089747b6032bfc4e0de581eed060558dc73a1118', class: "r-checkbox" }, 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}` })), h("div", { key: '49e514969fa11eccba18658d275462c8c705f8e2', class: "r-checkbox--box", "aria-hidden": "true" }, this.checked ?
             h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, 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 ?
                 h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("rect", { x: "4", y: "11", width: "16", height: "2", fill: "currentColor" }))
-                : null), h("div", { key: 'debd71ef2e1fcf46414c0bd93e6ee3cb35d58649', class: "r-checkbox--description" }, h("label", { key: '1698497afd3be427dd98b9c8292464ca8e805269', class: "r-checkbox--label", id: `${uniqueId}-label`, htmlFor: `${uniqueId}-input` }, h("slot", { key: 'a7d0646be5338917b042ce0cd49d32c920585153' })), h("div", { key: '8f6f206dcb74cff5acaac4b58dcc9792f4f3367c', id: `${uniqueId}-message`, class: !this.hasMessage ? 'visually-hidden' : 'r-checkbox--message', "aria-live": "polite", "aria-atomic": "true" }, this.hasInvalidMessage &&
-            h("r-hint", { key: '5fdb37b61532b821c87966b6763a20d58e3929ab', variant: "error" }, error || this.customErrorMessage || this.validityMessage), this.hasValidMessage &&
-            h("r-hint", { key: '74ff89cd4066b93a3d0f28271ca3f9fcfcdbd976', variant: "success" }, this.validMessage))))));
+                : null), h("div", { key: '96090e0dc6dcf564a73e061a7e75ad0a4ec0b1cb', class: "r-checkbox--description" }, h("label", { key: '524a1cba2f9ef69863c48ca536921411be743ec5', class: "r-checkbox--label", id: `${uniqueId}-label`, htmlFor: `${uniqueId}-input` }, h("slot", { key: 'cda4f61e27a86b988746465d14567f49f09eabd0' })), h("div", { key: 'be4d6ba741c2580fd1d5a6dc3e2f71716df55d71', id: `${uniqueId}-message`, class: !this.hasInvalidMessage ? 'visually-hidden' : 'r-checkbox--message', "aria-live": "polite", "aria-atomic": "true" }, this.hasInvalidMessage &&
+            h("r-hint", { key: '05b0c0d5ee3c603d19faa11006e9e3501dc8be82', variant: "error" }, error || this.customErrorMessage || this.validityMessage))))));
     }
     static get is() { return "r-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -387,9 +403,9 @@ export class Checkbox {
                 "setter": false,
                 "reflect": true
             },
-            "showValid": {
+            "autofocus": {
                 "type": "boolean",
-                "attribute": "show-valid",
+                "attribute": "autofocus",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -397,10 +413,10 @@ export class Checkbox {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "_DEPRECATED_ (This property will be removed in November 2025 release.)\nControls the visibility of validation indicators for the field."
+                    "text": "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."
                 },
                 "getter": false,
                 "setter": false,
@@ -426,25 +442,6 @@ export class Checkbox {
                 "setter": false,
                 "reflect": true
             },
-            "validMessage": {
-                "type": "string",
-                "attribute": "valid-message",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (This property will be removed in November 2025 release.)\nSet custom message if the element meets all its validation constraints."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
             "invalid": {
                 "type": "boolean",
                 "attribute": "invalid",
@@ -747,6 +744,26 @@ export class Checkbox {
                     "text": "Sets the indeterminate state of the checkbox element.",
                     "tags": []
                 }
+            },
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Validates the checkbox without triggering UI and returns a boolean indicating its validity.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "A boolean indicating whether the checkbox is valid."
+                        }]
+                }
             }
         };
     }

package/dist/collection/components/checkbox-group/checkbox-group.js

@@ -9,13 +9,6 @@ export class CheckboxGroup {
          * Specifies whether the `value` is required.
          */
         this.required = false;
-        /**
-         * _DEPRECATED_ (This property will be removed in November 2025 release.)
-         * Indicates whether to show the validation state.
-         * When set to `true`, the component will display validation feedback.
-         * Defaults to `false`.
-         * */
-        this.showValid = false;
         this.indeterminate = false;
         this.allChecked = false;
         this.noChecked = false;
@@ -27,24 +20,30 @@ export class CheckboxGroup {
             const variant = this.valid ? 'success' : 'error';
             return (h("r-hint", { variant: variant, role: "alert", "aria-live": "polite", id: `${this.uniqueId}-message`, class: this.message ? null : 'visually-hidden' }, this.message));
         };
-        this.validateGroup = () => {
-            if (this.isNoValidate || !this.required)
-                return;
+        this.getValidityStateData = () => {
+            let validityState = '';
+            let validityMessage = '';
             const isValid = this.checkboxes.some(checkbox => checkbox.checked);
             if (this.required && !isValid) {
-                this.validityState = 'valueMissing';
-                this.validityMessage = this.valueMissingMessage || 'Please select at least one option.';
-                this.invalid = true;
-                this.valid = false;
-                this.noChecked = true;
+                validityState = 'valueMissing';
+                validityMessage = this.valueMissingMessage || 'Please select at least one option.';
             }
             else {
-                this.validityState = 'valid';
-                this.validityMessage = null;
-                this.invalid = false;
-                this.valid = true;
-                this.noChecked = false;
+                validityState = 'valid';
+                validityMessage = null;
             }
+            return { validityState, validityMessage };
+        };
+        this.validateGroup = () => {
+            if (this.isNoValidate || !this.required)
+                return;
+            const { validityState, validityMessage } = this.getValidityStateData();
+            this.validityState = validityState;
+            this.validityMessage = validityMessage;
+            const isValid = this.validityState === 'valid';
+            this.valid = isValid;
+            this.invalid = !isValid;
+            this.noChecked = !isValid;
             this.rValidate.emit({
                 state: this.validityState,
                 message: this.validityMessage
@@ -64,6 +63,14 @@ export class CheckboxGroup {
             this.resetToInitial();
         };
     }
+    /**
+     * Validates the checkbox group 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();
+        return validityState === 'valid';
+    }
     /**
      * Resets the validity state and message of the radio group.
      * This method clears the validity message and state, and sets the invalid
@@ -140,11 +147,8 @@ export class CheckboxGroup {
         this.noChecked = checkedCheckboxes.length === 0;
     }
     get message() {
-        const { valid, validMessage, validityMessage, invalid, error, customErrorMessage } = this;
+        const { validityMessage, invalid, error, customErrorMessage } = this;
         let message = null;
-        if (valid) {
-            message = validMessage || null;
-        }
         if (invalid) {
             message = error || customErrorMessage || validityMessage || null;
         }
@@ -325,26 +329,6 @@ export class CheckboxGroup {
                 "setter": false,
                 "reflect": false
             },
-            "showValid": {
-                "type": "boolean",
-                "attribute": "show-valid",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (This property will be removed in November 2025 release.)\nIndicates whether to show the validation state.\nWhen set to `true`, the component will display validation feedback.\nDefaults to `false`."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "valid": {
                 "type": "boolean",
                 "attribute": "valid",
@@ -364,25 +348,6 @@ export class CheckboxGroup {
                 "setter": false,
                 "reflect": true
             },
-            "validMessage": {
-                "type": "string",
-                "attribute": "valid-message",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "_DEPRECATED_ (This property will be removed in November 2025 release.)\nSet custom message if the element meets all its validation constraints."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
             "invalid": {
                 "type": "boolean",
                 "attribute": "invalid",
@@ -667,6 +632,26 @@ export class CheckboxGroup {
     }
     static get methods() {
         return {
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Validates the checkbox group without triggering UI and returns a boolean indicating its validity.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "A boolean indicating whether the checkbox is valid."
+                        }]
+                }
+            },
             "resetValidity": {
                 "complexType": {
                     "signature": "() => Promise<void>",

package/dist/collection/components/dialog/dialog.css

@@ -110,10 +110,8 @@
   border-radius: 10px;
   border: 3px solid #ffffff;
 }
-.r-dialog--footer {
+.r-dialog ::slotted([slot=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);

package/dist/collection/components/dialog/dialog.js

@@ -18,10 +18,6 @@ export class Dialog {
          * */
         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();
         };
@@ -36,9 +32,6 @@ export class Dialog {
         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());
@@ -94,9 +87,8 @@ export class Dialog {
         }
     }
     render() {
-        return (h(Host, { key: '7fcaaecb6adb988027b05a2a8024db535cda93ba', open: this.isOpen }, h("dialog", { key: 'f567771b57a02336b8320bd21240d3045b666116', class: "r-dialog", "aria-label": this.dialogLabel, ref: el => this.dialogElement = el, style: { '--r-dialog--body--height': this.bodyHeight } }, h("div", { key: '75f660383a67ec9c109fed5f19158ec9c67b38ab', class: "r-dialog--content" }, h("div", { key: 'e027e8baa90beef1224210c476a6948519492a5a', class: "r-dialog--header", id: `${this.uniqueId}-header` }, h("slot", { key: 'b480fff8b92e7a77fec394bb6b1b68b5466bc152', name: "header" }, (this.headline) &&
-            h("h2", { key: 'f082e1ace95de447ef399f19698bae0f1058fb27', class: "r-dialog--headline" }, this.headline)), h("r-icon-button", { key: '681ac8aab0119d3be635f23efd8ccb9113f76ac3', class: "r-dialog--close", name: "cross", size: "s", onRClick: this.onTriggerClick, label: this.closeAriaLabel })), h("div", { key: '262d48e01c3ad1d8bb7b984c1182a9623bfd36d2', class: "r-dialog--body" }, this.bodyText, h("slot", { key: '0d77bfb9d9059b3571bb30da11da3464aa6ffea5' }), h("slot", { key: '0bdc239a2abe6fb6643e14c188d4a8f5d214e8b8', name: "form" })), this.isFooterSlot &&
-            h("div", { key: '02c6c9ee41bb7893955b492f4fd171e498041777', class: "r-dialog--footer" }, h("slot", { key: 'bcf48fd3ecc2378fa82ffb48aa3739ea65477dcd', name: "footer" }))))));
+        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" })))));
     }
     static get is() { return "r-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/hint/hint.js

@@ -22,8 +22,8 @@ export class Hint {
         return this.hasIconSlot || this.iconName !== null;
     }
     render() {
-        return (h(Host, { key: '77951c878faf0f74385c72dfdfa11adc9d38da73' }, h("div", { key: '577c8674ce57e8ad8c784b926eff21b201af4bb2', class: "r-hint" }, this.hasIcon &&
-            h("div", { key: '7cba7116b04a7894aae4f2a3026324e15a95c9c5', class: "r-hint--icon" }, h("slot", { key: 'dba72b1442b9f0d27ca6d6387572b044468b54cb', name: "icon" }, this.iconName && h("r-icon", { key: 'a7cdb025298dc8b6f4290efcd366a03dc8135bb0', name: this.iconName, size: "s" }))), h("div", { key: 'bd96a4d4ec4a5c0f0e029b86e3a423b20e0a7341', class: "r-hint--text" }, h("slot", { key: 'e763e051b3d598fd78e777607f21a6358edc0dc2' })))));
+        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' })))));
     }
     static get is() { return "r-hint"; }
     static get encapsulation() { return "shadow"; }