@riverty/web-components 5.7.0 → 6.0.0

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
 
-const alertCss = ":host([status=info]){--color:var(--r-status-info-soft, #f8fafb);--background-color:var(--r-status-info-regular, #3e5c73)}:host([status=success]){--color:var(--r-status-success-soft, #f7fdf8);--background-color:var(--r-status-success-regular, #298535)}:host([status=warning]){--color:var(--r-color-grey-charcoal-400, #282828);--background-color:var(--r-status-warning-regular, #ff7429)}:host([status=error]){--color:var(--r-status-error-soft, #fef6f6);--background-color:var(--r-status-error-regular, #b00c15)}:host([aria-hidden=true]){--transition:all 0.5s;--position:absolute;--visibility:hidden;--opacity:0;--z-index:-1}:host{display:var(--display, block);color:var(--color, var(--r-status-info-soft, #f8fafb));background-color:var(--background-color, var(--r-status-info-regular, #3e5c73));position:var(--position, relative);width:var(--width, 100%);left:var(--left, 0);transition:var(--transition, none);visibility:var(--visibility, visible);opacity:var(--opacity, 1);z-index:var(--z-index, unset);font-family:var(--font-family, var(--r-font-family-text, system-ui));font-size:var(--font-size, var(--r-font-size-400, 16px));font-weight:var(--font-weight, var(--r-font-weight-regular, 400))}.r-alert{display:var(--r-alert--display, grid);grid-template-columns:var(--r-alert--grid-template-columns, auto 1fr auto);gap:var(--r-alert--gap, var(--r-spacing-100, 1rem));padding:var(--r-alert--padding, var(--r-spacing-100, 1rem));box-sizing:var(--r-alert--box-sizing, border-box)}.r-alert:empty{--r-alert--display:none}.r-alert a{color:var(--color)}.r-alert--main{display:var(--r-alert--main--display, flex);flex-flow:var(--r-alert--main--flex-flow, column);gap:var(--r-alert--main--gap, var(--r-spacing-050))}.r-alert--headline{color:var(--r-alert--headline--color, var(--color));font-size:var(--r-alert--headline--font-size, var(--r-font-size-400, 1rem));font-weight:var(--r-alert--headline--font-weight, var(--r-font-weight-semibold, 600));line-height:var(--r-alert--headline--line-height, var(--r-line-height-m, 1.5));margin:var(--r-alert--headline--margin, 0)}.r-alert--trailing r-button{--r-button--padding:0;--r-button--color:var(--color)}";
+const alertCss = ":host([status=info]){--color:var(--r-status-info-soft, #f8fafb);--background-color:var(--r-status-info-regular, #3e5c73)}:host([status=warning]){--color:var(--r-text-warning, #000000);--r-alert--leading-icon--color:var(--r-icon-warning, #000000);--background-color:var(--r-status-warning-regular, #ff7429)}:host([status=error]){--color:var(--r-status-error-soft, #fef6f6);--background-color:var(--r-status-error-regular, #b00c15)}:host([status=error]) r-icon-button:hover,:host([status=info]) r-icon-button:hover{--r-icon-button--background-color:var(--r-background-interactive-hovered-inverse, rgba(243, 241, 240, 0.04))}:host([status=error]) r-icon-button:active,:host([status=info]) r-icon-button:active{--r-icon-button--background-color:var(--r-background-interactive-pressed-inverse, rgba(243, 241, 240, 0.12))}:host([status=error]) .r-alert--link:hover,:host([status=error]) ::slotted(r-button:hover:not([disabled]):not([disabled=true])),:host([status=info]) .r-alert--link:hover,:host([status=info]) ::slotted(r-button:hover:not([disabled]):not([disabled=true])){--r-button--background-color:var(--r-background-interactive-hovered-inverse, rgba(243, 241, 240, 0.04))}:host([status=error]) .r-alert--link:active,:host([status=error]) ::slotted(r-button:active:not([disabled]):not([disabled=true])),:host([status=info]) .r-alert--link:active,:host([status=info]) ::slotted(r-button:active:not([disabled]):not([disabled=true])){--r-button--background-color--active:var(--r-background-interactive-pressed-inverse, rgba(243, 241, 240, 0.12))}:host([aria-hidden=true]){--transition:all 0.5s;--position:absolute;--visibility:hidden;--opacity:0;--z-index:-1}:host{display:var(--display, block);color:var(--color, var(--r-status-info-soft, #f8fafb));background-color:var(--background-color, var(--r-status-info-regular, #3e5c73));position:var(--position, relative);width:var(--width, 100%);left:var(--left, 0);transition:var(--transition, none);visibility:var(--visibility, visible);opacity:var(--opacity, 1);z-index:var(--z-index, unset);font-family:var(--font-family, var(--r-font-family-text, system-ui));font-size:var(--font-size, var(--r-font-size-400, 1rem));font-weight:var(--font-weight, var(--r-font-weight-regular, 400))}@media (prefers-reduced-motion){:host{transition:none}}.r-alert{display:var(--r-alert--display, grid);grid-template-columns:var(--r-alert--grid-template-columns, auto 1fr auto);gap:var(--r-alert--gap, var(--r-spacing-100, 1rem));padding:var(--r-alert--padding, 16px);box-sizing:var(--r-alert--box-sizing, border-box)}.r-alert:empty{--r-alert--display:none}.r-alert--main{display:var(--r-alert--main--display, flex);flex-flow:var(--r-alert--main--flex-flow, column);gap:var(--r-alert--main--gap, var(--r-spacing-050))}.r-alert--main:not(:has(.r-alert--headline)){--r-alert--content--margin-top:var(--r-spacing-025, 0.25rem)}.r-alert--headline{color:var(--r-alert--headline--color, var(--color));font-size:var(--r-alert--headline--font-size, var(--r-font-size-400, 1rem));font-weight:var(--r-alert--headline--font-weight, var(--r-font-weight-semibold, 600));line-height:var(--r-alert--headline--line-height, var(--r-line-height-m, 1.5));margin:var(--r-alert--headline--margin, 0)}.r-alert--leading{color:var(--r-alert--leading-icon--color, var(--color))}.r-alert--trailing r-icon-button{--r-button--padding:0;--r-button--color:var(--color)}.r-alert--content{margin-top:var(--r-alert--content--margin-top, 0)}.r-alert--link,.r-alert ::slotted(r-button){--r-button--background-color:transparent;--r-button--border-width:0;--r-button--color:var(--r-alert--link--color, var(--color));--r-button--padding:10px 2px 18px 2px;--r-button--slot--text-decoration:underline;--r-button--slot--text-underline-offset:9px}.r-alert--link:hover,.r-alert ::slotted(r-button:hover:not([disabled]):not([disabled=true])){--r-button--background-color:var(--r-background-interactive-hovered)}.r-alert--link:active,.r-alert ::slotted(r-button:active:not([disabled]):not([disabled=true])){--r-button--color--active:var(--r-alert--link--color, var(--color));--r-button--background-color--active:var(--r-background-interactive-pressed)}";
 
 const Alert = class {
     constructor(hostRef) {
@@ -8,17 +8,26 @@ const Alert = class {
         this.rClickAlertTrailingIcon = createEvent(this, "rClickAlertTrailingIcon");
         /** Alert status controls apperance according to the status */
         this.status = 'info';
+        /** Sets role="alert" and will be announced to screen reader users */
+        this.announced = true;
         /** Defines an icon size to be presented in leading slot*/
         this.leadingIconSize = 'm';
+        /**
+         * Defines whether the leading icon is visible.
+         * @default true
+         * */
+        this.leadingIconVisible = true;
+        /** Defines an icon to be presented in trailing slot */
+        this.trailingIcon = 'cross';
         /** Defines an icon size to be presented in trailing slot*/
-        this.trailingIconSize = 's';
+        this.trailingIconSize = 'm';
         /**
          * Defines the target for the linked URL when `href` is provided.
          * Options: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
          */
         this.target = '_self';
         /** Text content for an alert dismiss button */
-        this.dismissButtonAriaLabel = 'close-button';
+        this.dismissButtonAriaLabel = 'Dismiss alert';
         this.isElContent = (selector) => {
             const el = this.host.querySelector(selector);
             return el !== null && (el === null || el === void 0 ? void 0 : el.textContent.trim().length) > 0;
@@ -38,15 +47,11 @@ const Alert = class {
             this.collapseAlert();
         };
     }
-    get isLeadingIcon() {
-        var _a, _b;
-        return ((_a = this.leadingIcon) === null || _a === void 0 ? void 0 : _a.length) > 0 || ((_b = this.leadingIconSrc) === null || _b === void 0 ? void 0 : _b.length) > 0;
-    }
     get isLeadingSlot() {
         return this.isElContent('[slot="leading"]');
     }
     get isLeading() {
-        return this.isLeadingIcon || this.isLeadingSlot;
+        return this.leadingIconVisible || this.isLeadingSlot;
     }
     get isTrailingIcon() {
         var _a, _b;
@@ -79,13 +84,39 @@ const Alert = class {
     get isDelay() {
         return this.delay && this.delay >= 0;
     }
+    get headlineSlotContent() {
+        var _a;
+        const el = this.host.querySelector('[slot="headline"]');
+        return (_a = el === null || el === void 0 ? void 0 : el.textContent) === null || _a === void 0 ? void 0 : _a.trim();
+    }
+    get statusBasedLeadingIconName() {
+        if (this.leadingIcon)
+            return this.leadingIcon;
+        switch (this.status) {
+            case 'info':
+                return 'circled-information-i';
+            case 'warning':
+                return 'circled-exclamation-mark';
+            case 'error':
+                return 'triangle-with-exclamation-mark';
+            default:
+                return 'circled-information-i';
+        }
+    }
     componentDidLoad() {
         if (this.isDelay)
             this.startCollapseTimer();
     }
     render() {
+        const hostAttrs = this.announced ? {
+            role: 'alert',
+            'aria-live': this.status === 'info' ? 'polite' : 'assertive'
+        } : {
+            role: 'region',
+            'aria-label': this.headlineSlotContent || this.headline || null
+        };
         const leadingIconAttrs = {
-            name: this.leadingIcon,
+            name: this.statusBasedLeadingIconName,
             src: this.leadingIconSrc,
             size: this.leadingIconSize
         };
@@ -94,14 +125,14 @@ const Alert = class {
             src: this.trailingIconSrc,
             size: this.trailingIconSize
         };
-        return (h(Host, { key: 'f97ea22cbaacceb5954cbf084ddbe85975266463' }, h("div", { key: '8a2de8f27af0cb57bf429fbe0ae75557d6505111', class: "r-alert" }, this.isLeading &&
-            h("div", { key: '6ecab67bd5eb14b06ad13f1c5257c43ff5c5acdc', class: "r-alert--leading" }, h("slot", { key: '106fad47e317120e6bdc47a4509fe3b330a43451', name: "leading" }), this.isLeadingIcon && h("r-icon", Object.assign({ key: '4d2b589d2d6179eecdaec7f2be5e265fcaf5e82b' }, leadingIconAttrs))), this.isMain ?
+        return (h(Host, Object.assign({ key: 'e0bb7ba3b7ca0c93e47c20c8666489976b52fe6d' }, hostAttrs), h("div", { key: 'c13d2517796fb274af8632a574196603feb13e61', class: "r-alert" }, this.isLeading &&
+            h("div", { key: 'b38044eb982c0b9fcd352122a6d21008e1802abb', class: "r-alert--leading" }, h("slot", { key: '01a26f5684ab9dc959c5f79cb8694a23621d091f', name: "leading" }, this.leadingIconVisible && h("r-icon", Object.assign({ key: '36b7c3e1c35faee26737e0f165ecad79c109bd4f' }, leadingIconAttrs)))), this.isMain ?
             h("div", { class: "r-alert--main" }, h("slot", { name: "headline" }, this.isHeadline && h("h3", { class: "r-alert--headline" }, this.headline)), h("slot", { name: "content" }, this.isContent && h("div", { class: "r-alert--content" }, this.content)), h("slot", { name: "link" }, this.isLink &&
-                h("a", { class: "r-alert--link", href: this.href, target: this.target }, this.linkText)), h("slot", null))
+                h("r-button", { class: "r-alert--link", variant: "text-inline", size: "small", href: this.href, target: this.target }, this.linkText)), h("slot", null))
             :
                 h("slot", null), this.isTrailing &&
-            h("div", { key: '2bc31060546003c180d235f3992df5c1fdf31f30', class: "r-alert--trailing" }, h("slot", { key: '7816f3c023dd174dfe0b385ad282ad9356f7a45d', name: "trailing" }), this.isTrailingIcon &&
-                h("r-button", { key: '493fdd793b54ba34ebe6453d668d9251874b8409', variant: "blank", onClick: this.handleTrailingButtonClick, "r-aria-label": this.dismissButtonAriaLabel || trailingIconAttrs.name }, h("r-icon", Object.assign({ key: '9148348328646173144d98d2c2f58ea67ed20c88' }, trailingIconAttrs)))))));
+            h("div", { key: 'dc9b171a6263c167a08816bfb2c149376eef6d34', class: "r-alert--trailing" }, h("slot", { key: '2d31946de22bb1cc247969207fc4243e4fcd7c08', name: "trailing" }, this.isTrailingIcon &&
+                h("r-icon-button", { key: '0c738aed534f98062835a59b55fe7b83e20473fb', name: !this.trailingIconSrc ? this.trailingIcon : null, onClick: this.handleTrailingButtonClick, label: this.dismissButtonAriaLabel }, this.trailingIconSrc && h("r-icon", Object.assign({ key: '13653d686f0886f16c157cdb3a499abbd5006d2b' }, trailingIconAttrs))))))));
     }
     get host() { return getElement(this); }
 };

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

@@ -30,7 +30,7 @@ const RBadge = class {
         const hostAttrs = {
             variant
         };
-        return (h(Host, Object.assign({ key: '73206915b750bff058e10baa6b725f763ce9c4cc' }, hostAttrs), h("div", { key: 'cd108d117bfd02dbddf34f026aabee07dcf9a709', class: "r-badge" }, iconVisible && h("slot", { key: '8c171f451c87943a2e079eee5dc0b41da0ef0c2b', name: "icon" }, h("r-icon", { key: 'a9fdeb7b0685cd9f76916818bd6ea5fd320cb657', size: "s", name: this.iconName, iconAriaLabel: iconAriaLabel })), h("slot", { key: '507b120621c22339e988216713197f22ab7bf6f8' }))));
+        return (h(Host, Object.assign({ key: '414f16e5a8bde16b295420ea689be3b528b6b9d7' }, hostAttrs), h("div", { key: 'd06b6b22be283666817326c82503080c247b3cb7', class: "r-badge" }, iconVisible && h("slot", { key: '38e1c8768bbc6560294f798ba635bb6a1ecd5ee1', name: "icon" }, h("r-icon", { key: 'da0d4672b3fd929deb32944faeb2cf6676dd0751', size: "s", name: this.iconName, iconAriaLabel: iconAriaLabel })), h("slot", { key: 'f0c3ce3e33ddb887af28e03cbd9af75f0fe0346e' }))));
     }
 };
 RBadge.style = badgeCss;

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
 
-const buttonCss = ":host{display:inline-flex;vertical-align:top;opacity:1;outline:none}:host(:focus-within:not(:active)){--r-button--box-shadow:0 0 0 1px var(--r-border-focused-outlined, #fff),\n    0 0 0 3px var(--r-border-focused),\n    0 0 0 4px var(--r-border-focused-outlined, #fff);--r-button--outline:2px solid var(--r-border-focused);--r-button--outline-offset:2px}:host(:hover:not(:active):not([disabled]:not([disabled=false]))){--r-button--border-color:var(--r-border-soft, #686868);--r-button--color:var(--r-text-regular, #282828);--r-button--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host([disabled]:not([disabled=false])){--r-button--opacity:0.4;--r-button--cursor:not-allowed;--r-button--box-shadow:none}:host([size=small]){--r-button--font-size:var(--r-font-size-300, 0.875rem);--r-button--padding:0.642em 0.857em;--r-button--height:2.75rem}:host([icon-position=end]){--r-button--slot--flex-direction:row-reverse}:host([data-icon-only=start]){--r-button--padding:0.875em}:host([variant=secondary]){--r-button--color:var(--r-text-regular, #282828);--r-button--border-color:var(--r-border-regular, #282828);--r-button--background-color:rgba(0,0,0,0)}:host([variant=secondary]:not([disabled]:not([disabled=false])):hover){--r-button--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04));--r-button--border-color:var(--r-border-soft, #686868)}:host([variant=secondary] .r-button[aria-disabled=false]:active){--r-button--color:var(--r-text-regular, #282828);--r-button--border-color:var(--r-border-soft, #686868);--r-button--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([variant=text]){--r-button--color:var(--r-text-regular, #282828);--r-button--border-color:rgba(0,0,0,0);--r-button--background-color:rgba(0,0,0,0);--r-button--slot--position:relative;--r-button--slot--text-decoration:underline}:host([variant=text]:hover:not([disabled]:not([disabled=false]))){--r-button--border-color:var(--r-border-soft, #686868);--r-button--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host([variant=text] .r-button[aria-disabled=false]:active){--r-button--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12));--r-button--border-color:var(--r-border-soft, #686868)}:host([variant=text][text-position=left]){--r-button--padding:0.875em var(--spacing-175, 1.75rem) 0.875em 0}:host([variant=text][text-position=right]){--r-button--padding:0.875em 0 0.875em var(--spacing-175, 1.75rem)}:host([variant=text-inline]){--r-button--color:var(--r-text-regular, #282828);--r-button--border-color:transparent;--r-button--background-color:transparent;--r-button--padding:0 0 0.5rem 0;--r-button--height:auto;--r-button--slot--text-decoration:underline}:host([variant=text-inline]:hover:not([disabled]:not([disabled=false]))){--r-button--slot--text-decoration:none;--r-button--border-color:transparent;--r-button--background-color:transparent}:host([variant=text-inline]:active:not([disabled]:not([disabled=false]))){--r-button--color:var(--r-border-softer, #c9c9c9);--r-button--border-color:transparent;--r-button--background-color:transparent}:host([variant=blank]){--r-button--color:var(--r-text-regular, #282828);--r-button--border-color:rgba(0,0,0,0);--r-button--background-color:rgba(0,0,0,0);--r-button--border-width:0;--r-button--padding:0}:host([variant=blank]) .r-button:active{--r-button--border-width:0;--r-button--background-color:rgba(0,0,0,0)}:host([variant=blank]:hover:not([disabled]:not([disabled=false]))){--r-button--color:var(--r-text-regular, #282828)}:host([expanded]),:host([full-width]:not([full-width=false])){display:block;--r-button--display:flex;--r-button--width:100%}.r-button{display:var(--r-button--display, inline-flex);align-items:var(--r-button--align-items, center);justify-content:var(--r-button--justify-content, center);width:var(--r-button--width, auto);height:var(--r-button--height, 3rem);position:var(--r-button--position, static);top:var(--r-button--top, auto);left:var(--r-button--left, auto);box-sizing:var(--r-button--box-sizing, border-box);outline:var(--r-button--outline, none);outline-offset:var(--r-button--outline-offset, 0);cursor:var(--r-button--cursor, pointer);font-family:var(--r-button--font-family, var(--r-font-family-text, system-ui));font-weight:var(--r-button--font-weight, 400);text-align:var(--r-button--text-align, center);text-transform:var(--r-button--text-transform, uppercase);text-decoration:var(--r-button--text-decoration, none);background-color:var(--r-button--background-color, var(--r-background-interactive-regular, #282828));border-width:var(--r-button--border-width, 1px);border-style:var(--r-button--border-style, solid);border-color:var(--r-button--border-color, var(--r-border-strong, #000));color:var(--r-button--color, var(--r-text-inverse, #fff));font-size:var(--r-button--font-size, var(--r-font-size-400, 1rem));line-height:var(--r-button--line-height, 1);letter-spacing:var(--r-button--letter-spacing, 0.04em);padding:var(--r-button--padding, 0.875em var(--r-spacing-175, 1.75rem));box-shadow:var(--r-button--box-shadow, none);pointer-events:var(--r-button--pointer-events, auto);z-index:var(--r-button--z-index, initial);vertical-align:var(--r-button--vertical-align, top);opacity:var(--r-button--opacity, 1)}.r-button[aria-disabled=false]:active{--r-button--color:var(--r-text-regular, #282828);--r-button--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12));--r-button--border-color:var(--r-border-soft, #686868)}.r-button--slot{position:var(--r-button--slot--position, relative);display:var(--r-button--slot--display, flex);flex:var(--r-button--slot--flex, 1);flex-direction:var(--r-button--slot--flex-direction, row);align-items:var(--r-button--slot--align-items, center);justify-content:var(--r-button--slot--justify-content, center);gap:var(--r-button--gap, 0.5em);font-weight:var(--r-button--slot--font-weight, var(--r-font-weight-regular, 400));text-decoration:var(--r-button--slot--text-decoration, none);text-decoration-color:var(--r-button--slot--text-decoration-color, var(--r-button-color, inherit));text-underline-offset:var(--r-button--slot--text-underline-offset, 0.5rem)}";
+const buttonCss = ":host{display:inline-flex;vertical-align:top;opacity:1;outline:none}:host(:focus-within:not(:active)){--r-button--box-shadow:0 0 0 1px var(--r-border-focused-outlined, #fff),\n    0 0 0 3px var(--r-border-focused),\n    0 0 0 4px var(--r-border-focused-outlined, #fff);--r-button--outline:2px solid var(--r-border-focused);--r-button--outline-offset:2px}:host(:hover:not(:active):not([disabled]:not([disabled=false]))){--r-button--border-color:var(--r-border-soft, #686868);--r-button--color:var(--r-text-regular, #282828);--r-button--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host([disabled]:not([disabled=false])){--r-button--opacity:0.4;--r-button--cursor:not-allowed;--r-button--box-shadow:none}:host([size=small]){--r-button--font-size:var(--r-font-size-300, 0.875rem);--r-button--padding:0.642em 0.857em;--r-button--height:2.75rem}:host([icon-position=end]){--r-button--slot--flex-direction:row-reverse}:host([data-icon-only=start]){--r-button--padding:0.875em}:host([variant=secondary]){--r-button--color:var(--r-text-regular, #282828);--r-button--border-color:var(--r-border-regular, #282828);--r-button--background-color:rgba(0,0,0,0)}:host([variant=secondary]:not([disabled]:not([disabled=false])):hover){--r-button--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04));--r-button--border-color:var(--r-border-soft, #686868)}:host([variant=secondary] .r-button:not([aria-disabled=true]):active){--r-button--color:var(--r-text-regular, #282828);--r-button--border-color:var(--r-border-soft, #686868);--r-button--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([variant=text]){--r-button--color:var(--r-text-regular, #282828);--r-button--border-color:rgba(0,0,0,0);--r-button--background-color:rgba(0,0,0,0);--r-button--slot--position:relative;--r-button--slot--text-decoration:underline}:host([variant=text]:hover:not([disabled]:not([disabled=false]))){--r-button--border-color:var(--r-border-soft, #686868);--r-button--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host([variant=text] .r-button:not([aria-disabled=true]):active){--r-button--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12));--r-button--border-color:var(--r-border-soft, #686868)}:host([variant=text][text-position=left]){--r-button--padding:0.875em var(--spacing-175, 1.75rem) 0.875em 0}:host([variant=text][text-position=right]){--r-button--padding:0.875em 0 0.875em var(--spacing-175, 1.75rem)}:host([variant=text-inline]){--r-button--color:var(--r-text-regular, #282828);--r-button--border-color:transparent;--r-button--background-color:transparent;--r-button--padding:0 0 0.5rem 0;--r-button--height:auto;--r-button--slot--text-decoration:underline}:host([variant=text-inline]:hover:not([disabled]:not([disabled=false]))){--r-button--slot--text-decoration:none;--r-button--border-color:transparent;--r-button--background-color:transparent}:host([variant=text-inline]:active:not([disabled]:not([disabled=false]))){--r-button--border-color:transparent;--r-button--background-color:transparent}:host([variant=blank]){--r-button--color:var(--r-text-regular, #282828);--r-button--border-color:rgba(0,0,0,0);--r-button--background-color:rgba(0,0,0,0);--r-button--border-width:0;--r-button--padding:0}:host([variant=blank]) .r-button:active{--r-button--border-width:0;--r-button--background-color:rgba(0,0,0,0)}:host([variant=blank]:hover:not([disabled]:not([disabled=false]))){--r-button--color:var(--r-text-regular, #282828)}:host([expanded]),:host([full-width]:not([full-width=false])){display:block;--r-button--display:flex;--r-button--width:100%}.r-button{display:var(--r-button--display, inline-flex);align-items:var(--r-button--align-items, center);justify-content:var(--r-button--justify-content, center);width:var(--r-button--width, auto);height:var(--r-button--height, 3rem);position:var(--r-button--position, static);top:var(--r-button--top, auto);left:var(--r-button--left, auto);box-sizing:var(--r-button--box-sizing, border-box);outline:var(--r-button--outline, none);outline-offset:var(--r-button--outline-offset, 0);cursor:var(--r-button--cursor, pointer);font-family:var(--r-button--font-family, var(--r-font-family-text, system-ui));font-weight:var(--r-button--font-weight, 400);text-align:var(--r-button--text-align, center);text-transform:var(--r-button--text-transform, uppercase);text-decoration:var(--r-button--text-decoration, none);background-color:var(--r-button--background-color, var(--r-background-interactive-regular, #282828));border-width:var(--r-button--border-width, 1px);border-style:var(--r-button--border-style, solid);border-color:var(--r-button--border-color, var(--r-border-strong, #000));color:var(--r-button--color, var(--r-text-inverse, #fff));font-size:var(--r-button--font-size, var(--r-font-size-400, 1rem));line-height:var(--r-button--line-height, 1);letter-spacing:var(--r-button--letter-spacing, 0.04em);padding:var(--r-button--padding, 0.875em var(--r-spacing-175, 1.75rem));box-shadow:var(--r-button--box-shadow, none);pointer-events:var(--r-button--pointer-events, auto);z-index:var(--r-button--z-index, initial);vertical-align:var(--r-button--vertical-align, top);opacity:var(--r-button--opacity, 1)}.r-button:not([aria-disabled=true]):active{--r-button--color:var(--r-button--color--active, var(--r-text-regular, #282828));--r-button--background-color:var(--r-button--background-color--active, var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12)));--r-button--border-color:var(--r-button--border-color--active, var(--r-border-soft, #686868))}.r-button--slot{position:var(--r-button--slot--position, relative);display:var(--r-button--slot--display, flex);flex:var(--r-button--slot--flex, 1);flex-direction:var(--r-button--slot--flex-direction, row);align-items:var(--r-button--slot--align-items, center);justify-content:var(--r-button--slot--justify-content, center);gap:var(--r-button--gap, 0.5em);font-weight:var(--r-button--slot--font-weight, var(--r-font-weight-regular, 400));text-decoration:var(--r-button--slot--text-decoration, none);text-decoration-color:var(--r-button--slot--text-decoration-color, var(--r-button-color, inherit));text-underline-offset:var(--r-button--slot--text-underline-offset, 0.5rem)}";
 
 const Button = class {
     constructor(hostRef) {
@@ -131,7 +131,7 @@ const Button = class {
             position: iconPosition
         };
         const TagName = isLink ? 'a' : 'button';
-        return (h(Host, { key: '0b48f424b11006ab76b94efcc9c2bf8f09b34102' }, h(TagName, Object.assign({ key: '3ce6a6d4a585fb785d44c9da2e41a6257ff83577', class: "r-button" }, attrs, { "aria-label": rAriaLabel || null, ref: (el) => (this.nativeElement = el), onClick: this.handleClick }), h("span", { key: '1a554fd1567c800d7ba10d8862e9fd90ede883a4', class: "r-button--slot" }, icon && h("r-icon", Object.assign({ key: '3a05d454414ce42b0a1ead502d0a7df48c35a647', name: icon }, iconAttrs, { size: "s" })), this.hasIconSlot && h("slot", { key: '723ad285f16dea5a7e007a46a47e308942366b92', name: "icon" }), h("div", { key: 'bf7829917767fa2d578508bbfa5c4456579f6766', style: { display: 'contents' } }, h("slot", { key: '59ecb9a9901fe5084af9d42ad408c7413e0c3d1f', onSlotchange: this.handleSlotChange }))))));
+        return (h(Host, { key: '97dbd8b4be7ada112d733f3e8838bb98b23ea37d' }, h(TagName, Object.assign({ key: '51ac8df717d9db6901b0bf313987fca0aa3c9e0e', class: "r-button" }, attrs, { "aria-label": rAriaLabel || null, ref: (el) => (this.nativeElement = el), onClick: this.handleClick }), h("span", { key: '5d18e8d4d11946a950196113ca34b13389d380d7', class: "r-button--slot" }, icon && h("r-icon", Object.assign({ key: 'b0eab29fd53184befd2e63cc48b8e9fa5262f742', name: icon }, iconAttrs, { size: "s" })), this.hasIconSlot && h("slot", { key: '1679c43372773a8888d790afcee23d4b4a4d5969', name: "icon" }), h("div", { key: 'd3862e66255a78e2cfb0ae3741cd8f82e4efc0ea', style: { display: 'contents' } }, h("slot", { key: '68dc5cbb93492c37139d6efdbc706050271f710f', onSlotchange: this.handleSlotChange }))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

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

@@ -14,13 +14,6 @@ const CheckboxGroup = class {
          * 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;
@@ -32,24 +25,30 @@ const CheckboxGroup = class {
             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
@@ -69,6 +68,14 @@ const CheckboxGroup = class {
             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
@@ -145,11 +152,8 @@ const CheckboxGroup = class {
         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;
         }

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

@@ -9,25 +9,29 @@ const Checkbox = class {
         this.rChange = createEvent(this, "rChange");
         this.rReset = createEvent(this, "rReset");
         this.rValidate = 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)
@@ -36,7 +40,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;
@@ -45,9 +51,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;
@@ -79,18 +82,13 @@ const Checkbox = class {
         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.
      *
@@ -103,56 +101,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.
      */
@@ -198,6 +154,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;
@@ -215,31 +209,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 (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))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
 
-const 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) {
@@ -23,10 +23,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();
         };
@@ -41,9 +37,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());
@@ -99,9 +92,8 @@ const Dialog = class {
         }
     }
     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" })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {