@riverty/web-components 5.6.0 → 5.8.0

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.css

@@ -5,9 +5,9 @@
 }
 
 :host([invalid]:not([invalid=false])) ::slotted(r-checkbox) {
-  --r-checkbox--box--border-color: var(--r-status-error-regular, #da1e28);
+  --r-checkbox--box--border-color: var(--r-status-error-regular, #b00c15);
   --r-checkbox--box--background-color: var(--r-status-error-soft, #fef6f6);
-  --r-checkbox--marker--color: var(--r-status-error-regular, #da1e28);
+  --r-checkbox--marker--color: var(--r-status-error-regular, #b00c15);
 }
 
 .r-checkbox-group {

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>",

package/dist/collection/components/hint/hint.css

@@ -18,7 +18,7 @@
 
 :host([variant=error]),
 :host([invalid]) {
-  --r-hint--color: var(--r-status-error-regular, #da1e28);
+  --r-hint--color: var(--r-status-error-regular, #b00c15);
 }
 
 :host([icon-position=end]) {