@riverty/web-components 5.7.0 → 5.8.0

package/dist/collection/components/alert/alert.css

@@ -3,13 +3,9 @@
   --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);
+  --color: var(--r-text-warning, #000000);
+  --r-alert--leading-icon--color: var(--r-icon-warning, #000000);
   --background-color: var(--r-status-warning-regular, #ff7429);
 }
 
@@ -18,6 +14,27 @@
   --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;
@@ -38,23 +55,25 @@
   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-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, 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 a {
-  color: var(--color);
-}
 .r-alert--main {
   display: var(--r-alert--main--display, flex);
   flex-flow: var(--r-alert--main--flex-flow, column);
@@ -67,7 +86,28 @@
   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-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--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);
+}

package/dist/collection/components/alert/alert.js

@@ -3,17 +3,21 @@ export class Alert {
     constructor() {
         /** 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 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;
@@ -74,11 +78,23 @@ export class Alert {
     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();
+    }
     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,
             src: this.leadingIconSrc,
@@ -89,14 +105,14 @@ export class Alert {
             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: '21f71227b2d8e749b9c222553324b7a518db6c00' }, hostAttrs), h("div", { key: '04545eb2e7f5aa149e08b1098a09b7bbd41b8f8b', class: "r-alert" }, this.isLeading &&
+            h("div", { key: '697fcb773c8688605bc369ecd562595f841c8b86', class: "r-alert--leading" }, h("slot", { key: 'e4f2341b214b5813c05663b98ebaf59144a29a21', name: "leading" }), this.isLeadingIcon && h("r-icon", Object.assign({ key: '94d64589b0b6063ba22b1b044a03505e8accc03a' }, 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: '5ff4fffe810c9239edde784eae84640241881b26', class: "r-alert--trailing" }, h("slot", { key: '633dc2f469d7e5d30d3168cad9f09d2d571907b0', name: "trailing" }, this.isTrailingIcon &&
+                h("r-icon-button", { key: '32bf203995271d64ad7ba57a979c5894d9da152d', name: !this.trailingIconSrc ? this.trailingIcon : null, onClick: this.handleTrailingButtonClick, label: this.dismissButtonAriaLabel }, this.trailingIconSrc && h("r-icon", Object.assign({ key: 'b3dcf618e5910745944600065c622ff6e19a953d' }, trailingIconAttrs))))))));
     }
     static get is() { return "r-alert"; }
     static get encapsulation() { return "shadow"; }
@@ -118,7 +134,7 @@ export class Alert {
                 "mutable": false,
                 "complexType": {
                     "original": "AlertStatus",
-                    "resolved": "\"error\" | \"info\" | \"success\" | \"warning\"",
+                    "resolved": "\"error\" | \"info\" | \"warning\"",
                     "references": {
                         "AlertStatus": {
                             "location": "import",
@@ -138,6 +154,26 @@ export class Alert {
                 "reflect": true,
                 "defaultValue": "'info'"
             },
+            "announced": {
+                "type": "boolean",
+                "attribute": "announced",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets role=\"alert\" and will be announced to screen reader users"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "true"
+            },
             "leadingIcon": {
                 "type": "string",
                 "attribute": "leading-icon",
@@ -231,7 +267,8 @@ export class Alert {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "'cross'"
             },
             "trailingIconSrc": {
                 "type": "string",
@@ -276,7 +313,7 @@ export class Alert {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "'s'"
+                "defaultValue": "'m'"
             },
             "headline": {
                 "type": "string",
@@ -417,7 +454,7 @@ export class Alert {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "'close-button'"
+                "defaultValue": "'Dismiss alert'"
             }
         };
     }

package/dist/collection/components/alert/exports.js

@@ -1,2 +1,2 @@
-export const alertStatusArray = ['info', 'warning', 'success', 'error'];
+export const alertStatusArray = ['info', 'warning', 'error'];
 export const alertTargetArray = ['_blank', '_self', '_parent', '_top'];

package/dist/collection/components/button/button.css

@@ -51,7 +51,7 @@
   --r-button--border-color: var(--r-border-soft, #686868);
 }
 
-:host([variant=secondary] .r-button[aria-disabled=false]:active) {
+: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));
@@ -70,7 +70,7 @@
   --r-button--background-color: var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04));
 }
 
-:host([variant=text] .r-button[aria-disabled=false]:active) {
+: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);
 }
@@ -99,7 +99,6 @@
 }
 
 :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;
 }
@@ -161,10 +160,10 @@
   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: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);

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

@@ -17,16 +17,19 @@ export class Checkbox {
         this.validityMessage = '';
         this.initial = {};
         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 +38,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;
@@ -102,7 +107,9 @@ 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
@@ -197,6 +204,14 @@ 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';
+    }
     get hasErrorMessage() {
         var _a;
         return typeof this.error === 'string' && ((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) > 0;
@@ -232,13 +247,13 @@ export class Checkbox {
             checked,
             indeterminate
         };
-        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: '3c1b6f0ea2497cc8c1641b9ba3a1408832c50808', onClick: this.handleClick }, h("div", { key: '585298821156cb66889bfc13e7148afb2847d1c4', class: "r-checkbox" }, h("input", Object.assign({ key: '02509a5c0d4b869c03e6a023e5c3aa1ef4b7057e', 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: 'ec02858464651e1938848375fbf527f73fab76f1', 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: '310a1c3a77074fa77bf9daa4e371196f9f39fdd5', class: "r-checkbox--description" }, h("label", { key: '05666e7a11e9907067b9fbe7024669e8b11e5884', class: "r-checkbox--label", id: `${uniqueId}-label`, htmlFor: `${uniqueId}-input` }, h("slot", { key: '45c7ed40f84a15a0dccb6768011d067d4c9da26b' })), h("div", { key: 'b41e092d77775c0a9c4582248d353b1b49533206', id: `${uniqueId}-message`, class: !this.hasMessage ? 'visually-hidden' : 'r-checkbox--message', "aria-live": "polite", "aria-atomic": "true" }, this.hasInvalidMessage &&
+            h("r-hint", { key: '169e7d7ae74e6484f50f0cc5575dfdb537b16076', variant: "error" }, error || this.customErrorMessage || this.validityMessage), this.hasValidMessage &&
+            h("r-hint", { key: 'cdaaad06d4f0cd0e880a3f327c0eb8d2058eb91b', variant: "success" }, this.validMessage))))));
     }
     static get is() { return "r-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -747,6 +762,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

@@ -27,24 +27,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 +70,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
@@ -667,6 +681,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>",