@riverty/web-components 6.1.0 → 6.2.0

package/dist/collection/components/input/input.js

@@ -282,7 +282,6 @@ export class RInput {
         const regex = new RegExp(this.pattern, 'u');
         return regex.test(this.value);
     }
-    ;
     componentWillLoad() {
         this.initial['value'] = this.value;
         this.initial['invalid'] = this.invalid;
@@ -315,7 +314,7 @@ export class RInput {
         this.setValue(this.nativeElement.value);
     }
     render() {
-        const { name, placeholder, required, fieldIndicator, maxlength, minlength, min, max, value, disabled, form, pattern, invalid, valid, hint, label, internal, uniqueId, autocomplete, readonly, autofocus, passwordrules, enterkeyhint, validityMarker } = this;
+        const { name, placeholder, required, fieldIndicator, maxlength, minlength, min, max, value, disabled, form, pattern, invalid, valid, hint, label, internal, uniqueId, autocomplete, readonly, autofocus, passwordrules, enterkeyhint, spellcheck, autocapitalize, validityMarker } = this;
         const inputAttrs = {
             disabled,
             readonly,
@@ -333,6 +332,8 @@ export class RInput {
             autofocus: autofocus || null,
             passwordrules,
             enterkeyhint,
+            autocapitalize,
+            spellcheck,
             inputmode: this.inputmode || null,
             id: uniqueId,
             'data-value': value,
@@ -1058,6 +1059,50 @@ export class RInput {
                 "setter": false,
                 "reflect": false
             },
+            "spellcheck": {
+                "type": "boolean",
+                "attribute": "spellcheck",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls browser spell-checking for text input.\nWhen true, enables spell-checking; when false, disables it.\nBrowser default behavior applies when not specified."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "autocapitalize": {
+                "type": "string",
+                "attribute": "autocapitalize",
+                "mutable": false,
+                "complexType": {
+                    "original": "AutocapitalizeType",
+                    "resolved": "\"characters\" | \"none\" | \"off\" | \"on\" | \"sentences\" | \"words\"",
+                    "references": {
+                        "AutocapitalizeType": {
+                            "location": "import",
+                            "path": "./exports",
+                            "id": "src/components/input/exports.ts::AutocapitalizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls automatic capitalization of text input on mobile devices.\n- `off` or `none`: No automatic capitalization\n- `on` or `sentences`: Capitalize first letter of each sentence (default for most text inputs)\n- `words`: Capitalize first letter of each word\n- `characters`: Capitalize all characters"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "passwordrules": {
                 "type": "string",
                 "attribute": "passwordrules",

package/dist/collection/components/input-code/input-code.css

@@ -11,6 +11,12 @@
   display: flex;
   margin-left: auto;
 }
+:host .r-form-field {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  gap: 1rem;
+}
 
 :host([readonly]:not([readonly=false])) {
   --r-input-code--container--background-color: var(--r-background-soft, #f3f1f0);

package/dist/collection/components/input-code/input-code.js

@@ -28,11 +28,35 @@ export class InputCode {
         this.autocomplete = 'one-time-code';
         /** Holds the current values of each input box */
         this.values = [];
+        /** Tracks whether the component was previously in a complete state */
+        this.wasComplete = false;
+        /** Tracks the last completed value to detect changes */
+        this.lastCompletedValue = '';
         /** Validity state passed from validateFormElement function after validation */
         this.validityState = '';
         /** Validity message passed from validateFormElement function after validation */
         this.validityMessage = '';
         this.inputs = [];
+        /**
+         * Checks if all segments are filled and emits rComplete event when:
+         * 1. Transitioning from incomplete to complete
+         * 2. Complete and value has changed from previous completed value
+         */
+        this.checkAndEmitCompletion = () => {
+            const isFullLength = this.value.length === this.length;
+            const isNoEmptySegments = this.values.every(val => val !== '');
+            const isComplete = isFullLength && isNoEmptySegments;
+            // Emit when transitioning to complete OR when complete with a different value
+            if (isComplete && (!this.wasComplete || this.value !== this.lastCompletedValue)) {
+                this.wasComplete = true;
+                this.lastCompletedValue = this.value;
+                this.rComplete.emit({ value: this.value, isComplete: true });
+            }
+            else if (!isComplete && this.wasComplete) {
+                // Reset the flag when becoming incomplete
+                this.wasComplete = false;
+            }
+        };
         this.handleInput = (index, event) => {
             var _a;
             if (this.readonly)
@@ -277,6 +301,7 @@ export class InputCode {
     }
     handleValuesChange() {
         this.value = this.values.join('');
+        this.checkAndEmitCompletion();
     }
     handleLengthChange(newLength) {
         // Adjust values array when length changes
@@ -356,9 +381,6 @@ export class InputCode {
             return `${uniqueId}-hint`;
         return null;
     }
-    get hasTrailingSlot() {
-        return !!this.host.querySelector('[slot="trailing"]');
-    }
     componentWillLoad() {
         this.setValue(this.value);
     }
@@ -380,15 +402,14 @@ export class InputCode {
             id: `${uniqueId}-label`,
             fieldIndicator
         } : {};
-        return (h(Host, { key: '671a85d08004711f7d9ce951ebb8429a8d317189', value: this.value, onClick: this.onHostClick }, h("div", { key: '14d0018cdb5b9b40e655fd009582d41530d33ef6', class: "r-input-code--label-container" }, h("label", { key: '76986e468b00209831044af52841dd71a1036c71', htmlFor: uniqueId }, label ?
+        return (h(Host, { key: 'c7e8e45bf54b060eaeec903857ec842f5f5909ff', value: this.value, onClick: this.onHostClick }, h("div", { key: '965e94721f83a4e0c2a21d6ead371085b5faefef', class: "r-input-code--label-container" }, h("label", { key: '4a24884c394cbdf28f98f71dd166c7f02fd6b240', htmlFor: uniqueId }, label ?
             h("r-label", Object.assign({}, labelAttr), label)
             :
-                h("slot", { name: "label" })), h("slot", { key: 'efb5b41658481d1da3c151294ee3532eaf16895a', name: "popover" })), hint &&
-            h("r-hint", { key: 'f2d8731eff9bbb261589aa6296116870691e2f2e', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '063cf9b6609b6b89cf3820deeb32e95c1de81d13', class: "r-input-code--container", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.groupDescribedby }, h("slot", { key: 'ae245434620341e683a3e0ae8f8e0ec741d7bc80', name: "leading" }), Array.from({ length: this.length }).map((_, i) => (h("input", { class: "r-input-code--input", key: i, id: `${uniqueId}-input-section-${i}`, "aria-label": `${this.ariaCharacterLabel || 'Character'}: ${i + 1}`, "aria-invalid": `${this.invalid || false}`, value: this.values[i], ref: el => this.inputs[i] = el, maxlength: 1, disabled: this.disabled, required: this.required, readonly: readonly, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, autocomplete: this.autocomplete, onInput: this.createInputHandler(i), onKeyDown: this.createKeyDownHandler(i), onPaste: this.handlePaste }))), h("input", Object.assign({ key: '617e1b328bce05693055d94507ec22470a2b4980', type: "hidden" }, inputAttrs, { value: this.values.join(''), ref: el => this.nativeElement = el })), h("div", { key: '3b2f16c153cbb026b9cdb87ef58c805f893affb5', class: "r-input-code--trailing" }, this.readonly &&
-            h("r-icon", { key: '2ad664723e287702eeb9c1a77eebc75d7440d076', class: "r-input-code--readonly-icon", name: "pen-disabled", size: "s" }), this.hasTrailingSlot &&
-            h("slot", { key: 'f04d690b12b0436eb76bf38d7bd6541337eec39b', name: "trailing" }, valid &&
-                h("r-icon", { key: 'c6854eeffa43d5f5bb5b3cf962f2923fd30f806a', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" })))), h("slot", { key: 'd2e94df788dee345109bee395be72efa27a70452', name: "message" }, this.hasMessage &&
-            h("r-hint", { key: 'fa142415d2b84dea239b1bc99a98a06ffe37005c', "aria-live": "polite", id: `${uniqueId}-message`, variant: "error" }, this.message))));
+                h("slot", { name: "label" })), h("slot", { key: '471642b0c4c01243fb26eacec958418ef09af962', name: "popover" })), hint &&
+            h("r-hint", { key: 'efdb3d68d72666260bce9d6e9e6ba9853225a473', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '2dc16569529ac0ec9e95cfef8f353efbf2f0e929', class: "r-form-field" }, h("slot", { key: '7e3d7abc1931537ce66f6bd1c716f4046f2ca06e', name: "prefix" }), h("div", { key: '0e29ba435fe9de7b87cad793be8dc11301bf552e', class: "r-input-code--container", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.groupDescribedby }, h("slot", { key: 'eef6bda22af5d2e21f442bb010d79a60a05b4d69', name: "leading" }), Array.from({ length: this.length }).map((_, i) => (h("input", { class: "r-input-code--input", key: i, id: `${uniqueId}-input-section-${i}`, "aria-label": `${this.ariaCharacterLabel || 'Character'}: ${i + 1}`, "aria-invalid": `${this.invalid || false}`, value: this.values[i], ref: el => this.inputs[i] = el, maxlength: 1, disabled: this.disabled, required: this.required, readonly: readonly, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, autocomplete: this.autocomplete, onInput: this.createInputHandler(i), onKeyDown: this.createKeyDownHandler(i), onPaste: this.handlePaste }))), h("input", Object.assign({ key: 'a2185f3e1b5f83e55fa5997662b55002bb251b4c', type: "hidden" }, inputAttrs, { value: this.values.join(''), ref: el => this.nativeElement = el })), h("div", { key: '7586c976c27a2c42e9d76c1cf6724ad93beac0ae', class: "r-input-code--trailing" }, this.readonly &&
+            h("r-icon", { key: 'b2829cc59cd037f62e33f980fa65887e80059984', class: "r-input-code--readonly-icon", name: "pen-disabled", size: "s" }), h("slot", { key: 'e7b996a710b4f2f5f867295518b96952d6d60444', name: "trailing" }, valid &&
+            h("r-icon", { key: '3064219d8e6846df86dc934027a561f265fcc82f', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" })))), h("slot", { key: 'de7164a83a2d8c6b8bf97583d4407cc7be7e0db4', name: "suffix" })), h("slot", { key: 'e12c343b123421fec18546f60ccdb2e4d6ceab5b', name: "message" }, this.hasMessage &&
+            h("r-hint", { key: '7fcfab6c47d841a0b695805b61f4a12a164fca3c', "aria-live": "polite", id: `${uniqueId}-message`, variant: "error" }, this.message))));
     }
     static get is() { return "r-input-code"; }
     static get encapsulation() { return "shadow"; }
@@ -861,6 +882,8 @@ export class InputCode {
     static get states() {
         return {
             "values": {},
+            "wasComplete": {},
+            "lastCompletedValue": {},
             "validityState": {},
             "validityMessage": {}
         };
@@ -916,6 +939,21 @@ export class InputCode {
                         }
                     }
                 }
+            }, {
+                "method": "rComplete",
+                "name": "rComplete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits when all segments are filled with values"
+                },
+                "complexType": {
+                    "original": "{ value: string, isComplete: boolean }",
+                    "resolved": "{ value: string; isComplete: boolean; }",
+                    "references": {}
+                }
             }];
     }
     static get methods() {

package/dist/collection/components/input-date/input-date.js

@@ -451,14 +451,14 @@ export class InputDate {
             id: `${uniqueId}-label`,
             fieldIndicator
         } : {};
-        return (h(Host, { key: '1a8a9175148f43758ec6b9d905c4bd2f619ffd7f', onClick: this.onHostClick, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, h("fieldset", Object.assign({ key: 'fb004332d8578b8da74df643bd93f93d062973bb', class: "r-input-date" }, groupAttrs), h("div", { key: '128e65638dc21d95c8b4b92669b0bd6733a653f6', class: "r-input-date--legend-container" }, h("legend", { key: '63e7e858c38930fecbe71d819f1a0b49bf711911', class: "r-input-date--legend" }, h("label", { key: 'ccd6a5434f5df91bf9b2c121bb182c152302d864', htmlFor: uniqueId }, label ?
+        return (h(Host, { key: '1fe0cc5598857ca719ef334807da6e2540c4a399', onClick: this.onHostClick, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, h("fieldset", Object.assign({ key: 'a7ad4075376fc3d08cc59be2f4340c9327e05f82', class: "r-input-date" }, groupAttrs), h("div", { key: 'ec18205fad6069d54715807529a145d03f8bdebb', class: "r-input-date--legend-container" }, h("legend", { key: '59c4384b37a3a845eb5cb0c2955b8a12777b2320', class: "r-input-date--legend" }, h("label", { key: '8b5502aeb26daa26d3f32d3669406b87e2eb29ca', htmlFor: uniqueId }, label ?
             h("r-label", Object.assign({}, labelAttr), label)
             :
-                h("slot", { name: "label" }))), h("slot", { key: '4be5c643d1b0532d27f4b82692cb6ca937291d6b', name: "popover" })), hint &&
-            h("r-hint", { key: '07a912c146dff97ef991a6e375f4aeb8cd0ba45e', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '386dfb87cface9333c93d5fe8165cbe52a9a83c4', class: "r-input-date--container" }, h("r-icon", { key: '9ff075723ac54f6d7c2325ba59f833422404bee6', name: "calendar", size: "s", class: "r-input-date--calendar-icon" }), h("div", { key: 'ebcb76a92ab1591c3128a60d6620bea5b0c517ec', class: "r-input-date--inputs" }, this.inputOrder.map((input, i) => (h(Fragment, null, h("input", Object.assign({ class: "r-input-date--input" }, this.getInputAttrs(input), { key: input, value: this.getDateComponent(input), onInput: this.createInputHandler(input, i), onChange: this.createChangeHandler(input), onClick: this.onInputClick, onBlur: this.handleBlur, onKeyDown: this.createKeyDownHandler(i), onPaste: this.handlePaste })), i < this.inputOrder.length - 1 &&
-            h("span", { "aria-hidden": "true", class: "r-input-date--delimiter" }, this.delimiter)))), h("input", Object.assign({ key: 'e5736ffa215662436c539332be1414cc409ce448', type: "hidden" }, dateInputAttrs, { value: this.value, ref: (el) => this.nativeElement = el }))), h("div", { key: '45ccffbb4111f2fd906d9b687f62f4adc83b62aa', class: "r-input-date--trailing" }, this.readonly &&
-            h("r-icon", { key: '3a5433e3d601a83154687bdd55feeeef0ef04215', class: "r-input-date--readonly-icon", name: "pen-disabled", size: "s" }), valid &&
-            h("r-icon", { key: '03de3e49b8b51690e4fb6c2edbb7a53ca1a71f76', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }), this.hasTrailingSlot && h("slot", { key: 'db4911a4421b296effdd37ca08c96d8a0096e5e6', name: "trailing" }))), h("div", { key: 'd21f19188462be93812487702eb8a07fd3a91cea', id: `${uniqueId}-message`, "aria-live": "polite", class: "r-input-date--message" }, this.hasMessage && h("r-hint", { key: '6937f2d48a634308c97d33e59daa0a7242bd39fd', variant: "error" }, this.message)))));
+                h("slot", { name: "label" }))), h("slot", { key: '7a5b5ad6401bb8199d94c36383e4219fd3556db5', name: "popover" })), hint &&
+            h("r-hint", { key: '1226c6002eb581811e419db7518e02d5fbc18b5b', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '5581e3cbb731a4a23a243118f2840563352e6df1', class: "r-input-date--container" }, h("r-icon", { key: 'e8b52fc6fcb1d4f22fd24e7e26e55218a1b6ee80', name: "calendar", size: "s", class: "r-input-date--calendar-icon" }), h("div", { key: '4b97bab9a65f4a9d1958287f23940b7ee4d7143e', class: "r-input-date--inputs" }, this.inputOrder.map((input, i) => (h(Fragment, null, h("input", Object.assign({ class: "r-input-date--input" }, this.getInputAttrs(input), { key: input, value: this.getDateComponent(input), onInput: this.createInputHandler(input, i), onChange: this.createChangeHandler(input), onClick: this.onInputClick, onBlur: this.handleBlur, onKeyDown: this.createKeyDownHandler(i), onPaste: this.handlePaste })), i < this.inputOrder.length - 1 &&
+            h("span", { "aria-hidden": "true", class: "r-input-date--delimiter" }, this.delimiter)))), h("input", Object.assign({ key: 'fdebeb8a48fd0fc10233166db94e928fc4b424de', type: "hidden" }, dateInputAttrs, { value: this.value, ref: (el) => this.nativeElement = el }))), h("div", { key: '4324ae4593512d0bd16f843e60c2058859cc1ba1', class: "r-input-date--trailing" }, this.readonly &&
+            h("r-icon", { key: '673fb144899c62d9b5d9267b35ce1f197b1f6549', class: "r-input-date--readonly-icon", name: "pen-disabled", size: "s" }), valid &&
+            h("r-icon", { key: '26828285dad4ccae6ebc8d29a2f4e1e6a5d92a6d', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }), this.hasTrailingSlot && h("slot", { key: 'bda392fa837a8fba6917fed22ff356c4e6f15b85', name: "trailing" }))), h("div", { key: 'a6d891a2f2bf3456d5cbb3ec27c6cef0bce7d434', id: `${uniqueId}-message`, "aria-live": "polite", class: "r-input-date--message" }, this.hasMessage && h("r-hint", { key: '8a3316ce851bfa02b9ca1a1fad8fde6f48a7fab6', variant: "error" }, this.message)))));
     }
     static get is() { return "r-input-date"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-password/input-password.js

@@ -244,8 +244,8 @@ export class InputPassword {
             tooShortMessage,
             patternMismatchMessage
         };
-        return (h(Host, { key: '15d9cac9269a816de47d1ae4d3818a99f6229979' }, h("r-input", Object.assign({ key: 'eea64612b319eae93c0fc6591c22020bf2e3d4fb' }, inputAttrs, { ref: (el) => this.nativeElement = el, type: showed ? 'text' : 'password', onRInput: this.onInput, onRChange: this.onChange, onKeyUp: this.handleKeyup, onRBlur: this.handleBlur }), h("r-icon", { key: 'd7a425d45f7897d7f6f11b7bf37595e25da3295b', name: "padlock-closed", size: "s", slot: "leading" }), h("slot", { key: '6ae8e4dc4633e692ae4280d9cd1420bf7e02d0c0', name: "popover", slot: "popover" }), h("r-icon-button", { key: 'e51d43f5966477dc1c35bf6a8114d5b206a58187', slot: "trailing", name: showed ? 'eye-crossed-out' : 'eye', size: "s", disabled: disabled, label: showed ? hidePasswordAriaLabel : showPasswordAriaLabel, onClick: this.onShowClick }), this.hasMessage &&
-            h("r-hint", { key: 'bcee0a5b7f75a4ddd2e2fa6a2dd44cd0392170dc', slot: "message", variant: "error" }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage))), h("div", { key: '995e229dfab56b03e0a177c6952c2135777f7899', class: "visually-hidden", ref: el => this.passwordVisibilityChangeAlertContainer = el, "aria-live": "polite" })));
+        return (h(Host, { key: 'c4f877854375e558677df5f33682e37e048382be' }, h("r-input", Object.assign({ key: '97941b514a5f4f48b7c043ea0641cc5f26ab2ced' }, inputAttrs, { ref: (el) => this.nativeElement = el, type: showed ? 'text' : 'password', onRInput: this.onInput, onRChange: this.onChange, onKeyUp: this.handleKeyup, onRBlur: this.handleBlur }), h("r-icon", { key: '6c59c76305a41bcd4c0bfc109f7e207a871118e5', name: "padlock-closed", size: "s", slot: "leading" }), h("slot", { key: '921c7c3309a362a0e1d273e382bc43fe9a627257', name: "popover", slot: "popover" }), h("r-icon-button", { key: 'cd258b86fec5b52818fe711b078514feee825866', slot: "trailing", name: showed ? 'eye-crossed-out' : 'eye', size: "s", disabled: disabled, label: showed ? hidePasswordAriaLabel : showPasswordAriaLabel, onClick: this.onShowClick }), this.hasMessage &&
+            h("r-hint", { key: '667984f03375ec43be01732309020c45c81d9306', slot: "message", variant: "error" }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage))), h("div", { key: '6d950d7eb59905342e328047f45f9b5ae3f6f8cb', class: "visually-hidden", ref: el => this.passwordVisibilityChangeAlertContainer = el, "aria-live": "polite" })));
     }
     static get is() { return "r-input-password"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-phone-number/input-phone-number.js

@@ -284,9 +284,9 @@ export class InputPhoneNumber {
             disabled,
             'aria-describedby': this.ariaDescribedBy
         };
-        return (h(Host, { key: '97edc0f9bbc4a3823e628bb08be3b3abbbcfe6ec' }, h("div", { key: '8a5236c58655d47368bfaa9bcea6bde3c39c6a22', class: "r-input-phone-number--label-container" }, h("label", { key: 'ae6e6e72381864d67d98f4429856cf5b1943943c', id: `${uniqueId}-label` }, label &&
-            h("r-label", Object.assign({ key: 'd760960dbf5806084b0a10d14fef218ca5e4cd79' }, labelAttr), label)), h("slot", { key: '4f9bcaba34f2f49592a3167958bd091eeac9f6be', name: "popover" })), hint &&
-            h("r-hint", { key: '0c3f402b7f9369dcea2c84478e12ed0ea241fd0a', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '43e5dbd9ca897cfc2ca05e6ab020c321871f3961', class: "r-input-phone-number", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.ariaDescribedBy }, h("slot", { key: '4e3f891eb21f15927d6a33e7ba6728c09d20e981' }), h("r-input", { key: '6bd6e929e396bf515511fdd978d00df9de54cc37', label: inputLabel, value: phoneNumber, internal: true, valid: valid, invalid: invalid, required: required, readonly: this.readonly, novalidate: true, fullWidth: fullWidth, type: "tel", error: this.errorMessage || '', onRInput: this.handleOnInput, onRChange: this.handleInputOnChange, disabled: disabled })), h("input", Object.assign({ key: 'f113123ef2fa2096b686d132ce11ca11970ab1be', type: "hidden" }, inputAttrs, { readonly: this.readonly, value: fullPhoneNumber, ref: el => this.nativeElement = el })), h("r-hint", { key: 'd00477c3a27f999c4a3079710c34266ed47e0e57', "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: "error" }, this.hasMessage ? (this.hasError ? this.error : this.validityMessage) : '')));
+        return (h(Host, { key: '609e5cd2c326c30866617a238f7c92bb8b2d5e8d' }, h("div", { key: '44eaa8f48fddbdc9dfe43700b4b68650345e1352', class: "r-input-phone-number--label-container" }, h("label", { key: 'fd55a14c4491ed6cad0885aaa5add8d827ae4215', id: `${uniqueId}-label` }, label &&
+            h("r-label", Object.assign({ key: 'bdeb1325cefaf4ac82628e497133c3eabfa685d3' }, labelAttr), label)), h("slot", { key: '38a4fd3c1f5ed0748ef9df0e2f6cd93ff8d1d39f', name: "popover" })), hint &&
+            h("r-hint", { key: '9fddd5b8053220e2339fe073cf1d897d0c34c23e', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: 'c493d4fe2f75cfa25fc404e985800175dfc75603', class: "r-input-phone-number", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.ariaDescribedBy }, h("slot", { key: 'ee98939143432df877ac2b7c2bbb7d87fd01f0a7' }), h("r-input", { key: '552c038f9225dd60b3b1957aaa1ceb3587c5f64d', label: inputLabel, value: phoneNumber, internal: true, valid: valid, invalid: invalid, required: required, readonly: this.readonly, novalidate: true, fullWidth: fullWidth, type: "tel", error: this.errorMessage || '', onRInput: this.handleOnInput, onRChange: this.handleInputOnChange, disabled: disabled })), h("input", Object.assign({ key: '11edb8cd2f8d6459ffbdef96263016ee25818fc0', type: "hidden" }, inputAttrs, { readonly: this.readonly, value: fullPhoneNumber, ref: el => this.nativeElement = el })), h("r-hint", { key: '809dbf93afc32271fd6d4930c0f547d8464b4db0', "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: "error" }, this.hasMessage ? (this.hasError ? this.error : this.validityMessage) : '')));
     }
     static get is() { return "r-input-phone-number"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/label/label.js

@@ -6,8 +6,8 @@ import { Host, h } from "@stencil/core";
 export class RLabel {
     render() {
         const { fieldIndicator } = this;
-        return (h(Host, { key: 'd823556813a282022aa18e138a3ac89d7f22af2a' }, h("div", { key: '1cea58412a4599e009080eb224d17324d5cad0b3', class: "r-label" }, h("span", { key: 'c0ade32425b07866b7a3096f203c7848eaa83e55', class: "r-label--slot" }, h("slot", { key: '9c782ed621889966189bba0d4c46de620315c9c4' }), fieldIndicator &&
-            h("span", { key: 'c4a4fcbed3e744bed679d8e9c6416a51407a686a', class: "r-label--marker" }, fieldIndicator)))));
+        return (h(Host, { key: '4a8c827bf39bac03424a1caefeb8795871b08276' }, h("div", { key: '212ea6fc9e2476361083610c6b8801ea3a4d79e9', class: "r-label" }, h("span", { key: '0bf0a1fc635553165fe02937626cba8a44854f3d', class: "r-label--slot" }, h("slot", { key: '16165450aeffd754cbcac5640297ab4efe94bf4c' }), fieldIndicator &&
+            h("span", { key: '34e19397cff4fa69839475ece1077c4271d9ceb4', class: "r-label--marker" }, fieldIndicator)))));
     }
     static get is() { return "r-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pagination/pagination.css

@@ -9,26 +9,17 @@
   --r-pagination--width: 100%;
   --r-pagination--max-width: 664px;
   --r-pagination--margin: 0 auto;
-  --r-pagination--item--display: flex;
-  --r-pagination--item--align-items: center;
-  --r-pagination--item--justify-content: center;
-  --r-pagination--item--margin-right: -1px;
-  --r-pagination--item--color: var(--r-text-regular);
-  --r-pagination--item--background-color: transparent;
-  --r-pagination--item--width: 48px;
-  --r-pagination--item--height: 48px;
-  --r-pagination--item--border-width: 1px;
-  --r-pagination--item--border-style: solid;
-  --r-pagination--item--border-color: var(--r-border-softer);
-  --r-pagination--item--z-index: 0;
-  --r-pagination--item--font-family: inherit;
-  --r-pagination--button--width: 100%;
-  --r-pagination--button--height: 100%;
-  --r-pagination--button--color: var(--r-text-regular);
-  --r-pagination--button--background-color: transparent;
+  --r-pagination--items-list--display: flex;
+  --r-paginaition--items-list--justify-content: center;
+  --r-paginaition--items-list--align-items: center;
+  --r-paginaition--items-list--list-style-type: none;
+  --r-paginaition--items-list--padding: 0;
+  --r-paginaition--items-list--margin: 0;
+  --r-pagination--item--width: var(--r-spacing-300, 3rem);
+  --r-pagination--item--height: var(--r-spacing-300, 3rem);
+  --r-pagination--item--border-radius: 0;
   --r-pagination--button--border-width: 0;
   --r-pagination--button--padding: 0;
-  --r-pagination--button--font-size: var(--r-font-size-300);
   --r-pagination--header--display: flex;
   --r-pagination--header--align-items: center;
   --r-pagination--header--justify-content: space-between;
@@ -90,68 +81,38 @@
 .r-pagination--header label {
   font-size: var(--r-pagination--font-size);
 }
-.r-pagination--item:hover {
-  --r-pagination--item--background-color: var(--r-background-interactive-hovered);
-}
-.r-pagination--item:focus {
-  --r-pagination--item--outline-color: var(--r-border-focused);
-  --r-pagination--item--box-shadow: 0 0 0 3px var(--r-border-focused-outlined);
-  --r-pagination--item--z-index: 1;
-}
-.r-pagination--item:active {
-  --r-pagination--item--background-color: var(--r-background-interactive-pressed);
-}
-.r-pagination--item.stepper {
-  --r-pagination--item--background-color: transparent;
+.r-pagination--items-list {
+  display: var(--r-pagination--items-list--display);
+  justify-content: var(--r-paginaition--items-list--justify-content);
+  align-items: var(--r-paginaition--items-list--align-items);
+  list-style-type: var(--r-paginaition--items-list--list-style-type);
+  padding: var(--r-paginaition--items-list--padding);
+  margin: var(--r-paginaition--items-list--margin);
 }
 .r-pagination--item.active {
-  --r-pagination--item--color: var(--r-text-regular);
-  --r-pagination--item--background-color: var(--r-background-interactive-activated);
+  --r-button--color: var(--r-text-regular);
+  --r-button--background-color: var(--r-background-interactive-activated);
   font-weight: var(--r-font-weight-semibold);
 }
-.r-pagination--item.arrow.previous {
-  --r-pagination--item--margin-left: 0;
-  --r-pagination--item--margin-right: 16px;
-}
-.r-pagination--item.arrow.next {
-  --r-pagination--item--margin-left: 16px;
-  --r-pagination--item--margin-right: 0;
-}
-.r-pagination--item.arrow.first {
-  --r-pagination--item--margin-left: 0;
-  --r-pagination--item--margin-right: 8px;
-}
-.r-pagination--item.arrow.last {
-  --r-pagination--item--margin-left: 8px;
-  --r-pagination--item--margin-right: 0;
-}
-.r-pagination--item.disabled, .r-pagination--item.disabled:hover {
-  --r-pagination--item--opacity: 0.4;
-  --r-pagination--item--background-color: transparent;
-}
 .r-pagination--item.number {
   --r-button--font-size: 0.813rem;
 }
 .r-pagination--item {
-  --r-button--display: flex;
-  --r-button--width: var(--r-pagination--button--width);
-  --r-button--height: var(--r-pagination--button--height);
-  --r-button--color: var(--r-pagination--button--color);
-  --r-button--background-color: var(--r-pagination--button--background-color);
+  --r-icon-button--height: var(--r-pagination--item--height);
+  --r-icon-button--width: var(--r-pagination--item--width);
+  --r-icon-button--border-radius: var(--r-pagination--item--border-radius);
+  --r-button--width: var(--r-pagination--item--width);
+  --r-button--height: var(--r-pagination--item--height);
   --r-button--border-width: var(--r-pagination--button--border-width);
   --r-button--padding: var(--r-pagination--button--padding);
-  --r-button--icon--width: auto;
-  --r-button--icon--height: auto;
-  align-items: var(--r-pagination--item--align-items);
-  background-color: var(--r-pagination--item--background-color);
-  color: var(--r-pagination--item--color);
-  display: var(--r-pagination--item--display);
-  font-family: var(--r-pagination--item--font-family);
-  height: var(--r-pagination--item--height);
-  justify-content: var(--r-pagination--item--justify-content);
-  margin-left: var(--r-pagination--item--margin-left);
-  margin-right: var(--r-pagination--item--margin-right);
-  opacity: var(--r-pagination--item--opacity);
-  width: var(--r-pagination--item--width);
-  z-index: var(--r-pagination--item--z-index);
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+  white-space: nowrap;
 }