@riverty/web-components 6.0.0 → 6.2.0

package/dist/esm/r-input-code.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.js';
 import { a as appendControlToFormData } from './formData-DvLT8-y3.js';
 
-const inputCodeCss = ":host{display:inline-flex;flex-direction:column;vertical-align:top;--r-label--margin-bottom:0}:host slot{display:contents}:host slot[name=trailing]{display:flex;margin-left:auto}:host([readonly]:not([readonly=false])){--r-input-code--container--background-color:var(--r-background-soft, #f3f1f0);--r-input-code--container--border-color:transparent transparent var(--r-border-soft, #686868) transparent;--r-input-code--container--cursor:text}:host(:hover:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input-code--container--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(:focus-within:not([disabled]:not([disabled=false]))){--r-input-code--container--box-shadow:0 0 0 6px var(--r-border-focused-outlined);--r-input-code--container--outline:2px solid var(--r-border-focused);--r-input-code--container--outline-offset:2px}:host(:active:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input-code--container--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([full-width]:not([full-width=false])){display:flex}:host([disabled]:not([disabled=false])){cursor:not-allowed;--r-input-code--container--opacity:0.4;--r-input-code--container--cursor:not-allowed;--r-input-code--container--pointer-events:none;--r-input-code--container--background-color:transparent}:host([invalid]:not([invalid=false])){--r-input-code--container--border-color:var(--r-status-error-regular, #b00c15);--r-input-code--container--background-color:var(--r-status-error-soft, #fef6f6)}.r-input-code--label-container{display:var(--r-input-code--label-container--display, flex);gap:var(--r-input-code--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-input-code--label-container--align-items, center);justify-content:var(--r-input-code--label-container--align-items, space-between)}.r-input-code--label-container ::slotted([slot=popover]){display:var(--r-input-code--popover--display, inline-flex);height:var(--r-input-code--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-input-code--popover--align-items, center);justify-content:var(--r-input-code--popover--justify-content, center);margin-right:var(--r-input-code--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-input-code--popover-trigger--min-width, var(--r-spacing-150, 1.5));--r-popover--trigger--min-height:var(--r-input-code--popover--trigger--min-height, var(--r-spacing-150, 1.5))}.r-input-code--container{position:var(--r-input-code--container--position, relative);display:var(--r-input-code--container--display, flex);align-items:var(--r-input-code--container--align-items, center);gap:var(--r-input-code--container--gap, 0.625em);height:var(--r-input-code--container--height, var(--r-spacing-275, 2.75rem));background-color:var(--r-input-code--container--background-color, var(--r-background-softest, #fff));border-width:var(--r-input-code--container--border-width, 1px);border-style:var(--r-input-code--container--border-style, solid);border-color:var(--r-input-code--container--border-color, var(--r-border-soft, #686868));box-sizing:var(--r-input-code--container--box-sizing, border-box);box-shadow:var(--r-input-code--container--box-shadow, none);outline:var(--r-input-code--container--outline, none);outline-offset:var(--r-input-code--container--outline-offset, 0);padding-top:var(--r-input-code--container--padding-top, 0.8em);padding-right:var(--r-input-code--container--padding-right, 0.7em);padding-bottom:var(--r-input-code--container--padding-bottom, 0.8em);padding-left:var(--r-input-code--container--padding-left, 0.7em);opacity:var(--r-input-code--container--opacity, 1);pointer-events:var(--r-input-code--container--pointer-events, auto);line-height:var(--r-input-code--container--line-height, 1);cursor:var(--r-input-code--container--cursor, inherit);margin-top:var(--r-input-code--container--margin-top, var(--r-spacing-025, 0.25rem));margin-bottom:var(--r-input-code--container--margin-bottom, var(--r-spacing-025, 0.25rem))}.r-input-code--input{width:var(--r-input-code--input--width, 0.725rem);outline:var(--r-input-code--input--outline, none);font-size:var(--r-input-code--input--font-size, 1rem);text-align:var(--r-input-code--input--text-align, center);background-color:var(--r-input-code--input--background-color, transparent);border-width:var(--r-input-code--input--border-width, 0 0 1px 0);border-style:var(--r-input-code--input--border-style, solid);border-color:var(--r-input-code--input--border-color, var(--r-text-soft))}.r-input-code--trailing{display:var(--r-input-code--trailing--display, flex);margin-left:var(--r-input-code--trailing--margin-left, auto);align-items:var(--r-input-code--trailing--align-items, center);gap:var(--r-input-code--trailing--gap, 0.625rem)}.r-input-code--readonly-icon{color:var(--r-input-code--readonly-icon--color, var(--r-icon-soft, #686868))}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
+const inputCodeCss = ":host{display:inline-flex;flex-direction:column;vertical-align:top;--r-label--margin-bottom:0}:host slot{display:contents}:host slot[name=trailing]{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);--r-input-code--container--border-color:transparent transparent var(--r-border-soft, #686868) transparent;--r-input-code--container--cursor:text}:host(:hover:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input-code--container--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(:focus-within:not([disabled]:not([disabled=false]))){--r-input-code--container--box-shadow:0 0 0 6px var(--r-border-focused-outlined);--r-input-code--container--outline:2px solid var(--r-border-focused);--r-input-code--container--outline-offset:2px}:host(:active:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input-code--container--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([full-width]:not([full-width=false])){display:flex}:host([disabled]:not([disabled=false])){cursor:not-allowed;--r-input-code--container--opacity:0.4;--r-input-code--container--cursor:not-allowed;--r-input-code--container--pointer-events:none;--r-input-code--container--background-color:transparent}:host([invalid]:not([invalid=false])){--r-input-code--container--border-color:var(--r-status-error-regular, #b00c15);--r-input-code--container--background-color:var(--r-status-error-soft, #fef6f6)}.r-input-code--label-container{display:var(--r-input-code--label-container--display, flex);gap:var(--r-input-code--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-input-code--label-container--align-items, center);justify-content:var(--r-input-code--label-container--align-items, space-between)}.r-input-code--label-container ::slotted([slot=popover]){display:var(--r-input-code--popover--display, inline-flex);height:var(--r-input-code--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-input-code--popover--align-items, center);justify-content:var(--r-input-code--popover--justify-content, center);margin-right:var(--r-input-code--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-input-code--popover-trigger--min-width, var(--r-spacing-150, 1.5));--r-popover--trigger--min-height:var(--r-input-code--popover--trigger--min-height, var(--r-spacing-150, 1.5))}.r-input-code--container{position:var(--r-input-code--container--position, relative);display:var(--r-input-code--container--display, flex);align-items:var(--r-input-code--container--align-items, center);gap:var(--r-input-code--container--gap, 0.625em);height:var(--r-input-code--container--height, var(--r-spacing-275, 2.75rem));background-color:var(--r-input-code--container--background-color, var(--r-background-softest, #fff));border-width:var(--r-input-code--container--border-width, 1px);border-style:var(--r-input-code--container--border-style, solid);border-color:var(--r-input-code--container--border-color, var(--r-border-soft, #686868));box-sizing:var(--r-input-code--container--box-sizing, border-box);box-shadow:var(--r-input-code--container--box-shadow, none);outline:var(--r-input-code--container--outline, none);outline-offset:var(--r-input-code--container--outline-offset, 0);padding-top:var(--r-input-code--container--padding-top, 0.8em);padding-right:var(--r-input-code--container--padding-right, 0.7em);padding-bottom:var(--r-input-code--container--padding-bottom, 0.8em);padding-left:var(--r-input-code--container--padding-left, 0.7em);opacity:var(--r-input-code--container--opacity, 1);pointer-events:var(--r-input-code--container--pointer-events, auto);line-height:var(--r-input-code--container--line-height, 1);cursor:var(--r-input-code--container--cursor, inherit);margin-top:var(--r-input-code--container--margin-top, var(--r-spacing-025, 0.25rem));margin-bottom:var(--r-input-code--container--margin-bottom, var(--r-spacing-025, 0.25rem))}.r-input-code--input{width:var(--r-input-code--input--width, 0.725rem);outline:var(--r-input-code--input--outline, none);font-size:var(--r-input-code--input--font-size, 1rem);text-align:var(--r-input-code--input--text-align, center);background-color:var(--r-input-code--input--background-color, transparent);border-width:var(--r-input-code--input--border-width, 0 0 1px 0);border-style:var(--r-input-code--input--border-style, solid);border-color:var(--r-input-code--input--border-color, var(--r-text-soft))}.r-input-code--trailing{display:var(--r-input-code--trailing--display, flex);margin-left:var(--r-input-code--trailing--margin-left, auto);align-items:var(--r-input-code--trailing--align-items, center);gap:var(--r-input-code--trailing--gap, 0.625rem)}.r-input-code--readonly-icon{color:var(--r-input-code--readonly-icon--color, var(--r-icon-soft, #686868))}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
 
 const InputCode = class {
     constructor(hostRef) {
@@ -9,6 +9,7 @@ const InputCode = class {
         this.rChange = createEvent(this, "rChange");
         this.rValidate = createEvent(this, "rValidate");
         this.rReset = createEvent(this, "rReset");
+        this.rComplete = createEvent(this, "rComplete");
         /** Specifies a name for an input for submission within formData object. */
         this.name = 'input-code';
         /** Number of digits (typically 4–6).
@@ -35,11 +36,35 @@ const InputCode = class {
         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)
@@ -284,6 +309,7 @@ const InputCode = class {
     }
     handleValuesChange() {
         this.value = this.values.join('');
+        this.checkAndEmitCompletion();
     }
     handleLengthChange(newLength) {
         // Adjust values array when length changes
@@ -363,9 +389,6 @@ const InputCode = class {
             return `${uniqueId}-hint`;
         return null;
     }
-    get hasTrailingSlot() {
-        return !!this.host.querySelector('[slot="trailing"]');
-    }
     componentWillLoad() {
         this.setValue(this.value);
     }
@@ -387,15 +410,14 @@ const InputCode = class {
             id: `${uniqueId}-label`,
             fieldIndicator
         } : {};
-        return (h(Host, { key: '4d744320f4bf03760e4b11dd38934c0f7ce05223', value: this.value, onClick: this.onHostClick }, h("div", { key: 'f047f6669b243f301a2a462188d24721ccb565a5', class: "r-input-code--label-container" }, h("label", { key: 'a5acdd7308cca3981a78619c480d79c499ebc58a', 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: '696554954e2b29b49a8d639aa79d80abeaa6a729', name: "popover" })), hint &&
-            h("r-hint", { key: '58b3e011e49b4a3bd4dd31050ab554483fba0fc4', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '6f4668b5bda975b59ff269759e2d3ae3306b09c4', class: "r-input-code--container", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.groupDescribedby }, h("slot", { key: '59206e0ed6e335735b610c44a925ea70b137ffe0', 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: '815da7a7566b0cefdbdfda32c990637385eba304', type: "hidden" }, inputAttrs, { value: this.values.join(''), ref: el => this.nativeElement = el })), h("div", { key: 'b03d7e03bd6c91d441f4377d53bb7d845edf498d', class: "r-input-code--trailing" }, this.readonly &&
-            h("r-icon", { key: '53796d1b572ff2eac8297a0fad8e22d3a95f1bee', class: "r-input-code--readonly-icon", name: "pen-disabled", size: "s" }), this.hasTrailingSlot &&
-            h("slot", { key: '9becd49e7d79f824fcd79e7afbc3040a1b0f33a3', name: "trailing" }, valid &&
-                h("r-icon", { key: 'a31379d7e8eb6ad66bbf1567d4cd4f9526962226', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" })))), h("slot", { key: 'a38ac5d9dda2017a443ec2b58cffbdd0db952239', name: "message" }, this.hasMessage &&
-            h("r-hint", { key: '39e47e0fdf23b1ebab5a0384447a965a8890d77f', "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))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/r-input-date.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-Da7qOBFr.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-CTxpqopm.js';
 import { a as appendControlToFormData } from './formData-DvLT8-y3.js';
 
 function getDefaultExportFromCjs (x) {
@@ -497,14 +497,14 @@ const InputDate = class {
             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)))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/r-input-password.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.js';
 import { a as appendControlToFormData } from './formData-DvLT8-y3.js';
 
 const inputPasswordCss = ":host{display:inline-flex;flex-direction:column;vertical-align:top;--r-input--validation-icon--display:none}:host([full-width]:not([full-width=false])){display:block}:host([disabled]:not([disabled=false])) r-icon-button{opacity:1}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
@@ -253,8 +253,8 @@ const InputPassword = class {
             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" })));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/r-input-phone-number.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.js';
 import { a as appendControlToFormData } from './formData-DvLT8-y3.js';
 
 var dist = {};
@@ -2505,9 +2505,9 @@ const InputPhoneNumber = class {
             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) : '')));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.js';
 import { a as appendControlToFormData } from './formData-DvLT8-y3.js';
 
-const inputCss = ":host{display:inline-flex;flex-direction:column;vertical-align:top;--r-label--margin-bottom:0}:host slot{display:contents}:host([readonly]:not([readonly=false])){--r-input--container--background-color:var(--r-background-soft, #f3f1f0);--r-input--container--border-color:transparent transparent var(--r-border-soft, #686868) transparent;--r-input--container--cursor:text}:host(:hover:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input--container--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(.focused){--r-input--container--box-shadow:0 0 0 6px var(--r-border-focused-outlined);--r-input--container--outline:2px solid var(--r-border-focused);--r-input--container--outline-offset:2px}:host(:active:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input--container--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([expanded]:not([expanded=false])),:host([full-width]:not([full-width=false])){display:block}:host([disabled]:not([disabled=false])){--r-input--container--opacity:0.4;--r-input--container--cursor:not-allowed;--r-input--container--pointer-events:none;--r-input--container--background-color:transparent}:host([invalid]:not([invalid=false])){--r-input--container--border-color:var(--r-status-error-regular, #b00c15);--r-input--container--background-color:var(--r-status-error-soft, #fef6f6)}.r-input{display:var(--r-input--display, flex);flex:var(--r-input--flex, 1);flex-direction:var(--r-input--flex-direction, column);width:var(--r-input--width, auto);font-family:var(--r-input--font-family, system-ui);position:var(--r-input--position, relative);border-radius:var(--r-input--border-radius, 0);cursor:var(--r-input--cursor, inherit)}.r-input--label-container{display:var(--r-input--label-container--display, flex);gap:var(--r-input--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-input--label-container--align-items, center);justify-content:var(--r-input--label-container--align-items, space-between)}.r-input--label-container ::slotted([slot=popover]){display:var(--r-input--popover--display, inline-flex);height:var(--r-input--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-input--popover--align-items, center);justify-content:var(--r-input--popover--justify-content, center);margin-right:var(--r-input--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-input--popover-trigger--min-width, var(--r-spacing-150, 1.5));--r-popover--trigger--min-height:var(--r-input--popover--trigger--min-height, var(--r-spacing-150, 1.5))}.r-input--label{cursor:var(--r-input--label--cursor, inherit)}.r-input--input{font-family:var(--r-input--input--font-family, system-ui);font-size:var(--r-input--input--font-size, 1em);width:var(--r-input--input--width, 100%);max-width:var(--r-input--input--max-width, 100%);height:var(--r-input--input--height, var(--r-spacing-275, 2.75rem));border-radius:var(--r-input--input--border-radius, 0);border:var(--r-input--input--border, none);color:var(--r-input--input--color, var(--r-text-regular, #282828));background-color:var(--r-input--input--background-color, none);appearance:var(--r-input--input--appearance, none);box-sizing:var(--r-input--input--box-sizing, border-box);outline:var(--r-input--input--outline, none);cursor:var(--r-input--input--cursor, inherit);pointer-events:var(--r-input--input--pointer-events, auto)}.r-input--input:autofill,.r-input--input:-webkit-autofill{-webkit-background-clip:text !important}.r-input--input::-ms-reveal{display:var(--r-input--input--ms-reveal--display, none)}.r-input--input::placeholder{color:var(--r-input--input--placeholder--color, var(--r-text-soft, #686868))}.r-input--input[type=search]::-webkit-search-cancel-button{cursor:var(--r-input--input-clear--cursor, pointer);display:var(--r-input--input-clear--display, block);height:var(--r-input--input-clear--height, 0.875rem);width:var(--r-input--input-clear--width, 0.875rem);appearance:var(--r-input--input-clear--appearance, none);background-repeat:var(--r-input--input-clear--background-repeat, no-repeat);background-image:var(--r-input--input-clear--background-image, url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke-width%3D%221.5%22%20viewBox%3D%220.75%200.75%2022.5%2022.5%22%3E%3Cpath%20id%3D%22Vector%202269%22%20stroke%3D%22currentColor%22%20d%3D%22M1.5%201.5L22.5%2022.5%22%2F%3E%3Cpath%20id%3D%22Vector%202270%22%20stroke%3D%22currentColor%22%20d%3D%22M22.5%201.5L1.5%2022.5%22%2F%3E%3C%2Fsvg%3E\"));background-size:var(--r-input--input-clear--background-size, contain);margin-inline:var(--r-input--input-clear--margin-inline, 0);color:currentColor}.r-input--button{position:var(--r-input--icon-button--position, absolute);width:var(--r-input--icon-button--width, calc(1.125em + var(--r-input--icon--width)));height:var(--r-input--icon-button--height, 100%);top:var(--r-input--icon-button--top, 0);right:var(--r-input--icon-button--right, auto);bottom:var(--r-input--icon-button--bottom, auto);left:var(--r-input--icon-button--left, 0);cursor:var(--r-input--icon-button--cursor, inherit)}.r-input--container{position:var(--r-input--container--position, relative);display:var(--r-input--container--display, flex);align-items:var(--r-input--container--align-items, center);gap:var(--r-input--container--gap, 0.625rem);height:var(--r-input--container--height, var(--r-spacing-275, 2.75rem));background-color:var(--r-input--container--background-color, var(--r-background-softest, #fff));border-width:var(--r-input--container--border-width, 1px);border-style:var(--r-input--container--border-style, solid);border-color:var(--r-input--container--border-color, var(--r-border-soft, #686868));box-sizing:var(--r-input--container--box-sizing, border-box);box-shadow:var(--r-input--container--box-shadow, none);outline:var(--r-input--container--outline, none);outline-offset:var(--r-input--container--outline-offset, 0);padding-top:var(--r-input--container--padding-top, 0.6875rem);padding-right:var(--r-input--container--padding-right, var(--r-spacing-075, 0.75rem));padding-bottom:var(--r-input--container--padding-bottom, 0.6875rem);padding-left:var(--r-input--container--padding-left, var(--r-spacing-0275, 0.75rem));opacity:var(--r-input--container--opacity, 1);pointer-events:var(--r-input--container--pointer-events, auto);line-height:var(--r-input--container--line-height, 1);cursor:var(--r-input--container--cursor, inherit);margin-top:var(--r-input--container--margin-top, var(--r-spacing-025, 0.25rem))}.r-input--container slot[name=leading]{color:var(--r-input--container-leading--color, var(--r-icon-soft, #686868))}.r-input--message:has(r-hint),.r-input--message ::slotted([slot=message]){margin-top:var(--r-input--message--margin-top, var(--r-spacing-025, 0.25rem))}.r-input--trailing{display:var(--r-input--trailing--display, flex);margin-left:var(--r-input--trailing--margin-left, auto);align-items:var(--r-input--trailing--align-items, center);gap:var(--r-input--trailing--gap, 0.625rem)}.r-input--validation-icon{display:var(--r-input--validation-icon--display, inline-block)}.r-input--readonly-icon{color:var(--r-input--readonly-icon--color, var(--r-icon-soft, #686868))}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
+const inputCss = ":host{display:inline-flex;flex-direction:column;vertical-align:top;--r-label--margin-bottom:0}:host slot{display:contents}:host([readonly]:not([readonly=false])){--r-input--container--background-color:var(--r-background-soft, #f3f1f0);--r-input--container--border-color:transparent transparent var(--r-border-soft, #686868) transparent;--r-input--container--cursor:text}:host(:hover:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input--container--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(.focused){--r-input--container--box-shadow:0 0 0 6px var(--r-border-focused-outlined);--r-input--container--outline:2px solid var(--r-border-focused);--r-input--container--outline-offset:2px}:host(:active:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input--container--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([expanded]:not([expanded=false])),:host([full-width]:not([full-width=false])){display:block}:host([disabled]:not([disabled=false])){--r-input--container--opacity:0.4;--r-input--container--cursor:not-allowed;--r-input--container--pointer-events:none;--r-input--container--background-color:transparent}:host([invalid]:not([invalid=false])){--r-input--container--border-color:var(--r-status-error-regular, #b00c15);--r-input--container--background-color:var(--r-status-error-soft, #fef6f6)}.r-input{display:var(--r-input--display, flex);flex:var(--r-input--flex, 1);flex-direction:var(--r-input--flex-direction, column);width:var(--r-input--width, auto);font-family:var(--r-input--font-family, system-ui);position:var(--r-input--position, relative);border-radius:var(--r-input--border-radius, 0);cursor:var(--r-input--cursor, inherit)}.r-input--label-container{display:var(--r-input--label-container--display, flex);gap:var(--r-input--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-input--label-container--align-items, center);justify-content:var(--r-input--label-container--align-items, space-between)}.r-input--label-container ::slotted([slot=popover]){display:var(--r-input--popover--display, inline-flex);height:var(--r-input--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-input--popover--align-items, center);justify-content:var(--r-input--popover--justify-content, center);margin-right:var(--r-input--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-input--popover-trigger--min-width, var(--r-spacing-150, 1.5));--r-popover--trigger--min-height:var(--r-input--popover--trigger--min-height, var(--r-spacing-150, 1.5))}.r-input--label{cursor:var(--r-input--label--cursor, inherit)}.r-input--input{font-family:var(--r-input--input--font-family, system-ui);font-size:var(--r-input--input--font-size, 1em);width:var(--r-input--input--width, 100%);max-width:var(--r-input--input--max-width, 100%);height:var(--r-input--input--height, var(--r-spacing-275, 2.75rem));border-radius:var(--r-input--input--border-radius, 0);border:var(--r-input--input--border, none);color:var(--r-input--input--color, var(--r-text-regular, #282828));background-color:var(--r-input--input--background-color, none);appearance:var(--r-input--input--appearance, none);box-sizing:var(--r-input--input--box-sizing, border-box);outline:var(--r-input--input--outline, none);cursor:var(--r-input--input--cursor, inherit);pointer-events:var(--r-input--input--pointer-events, auto)}.r-input--input:autofill,.r-input--input:-webkit-autofill{-webkit-background-clip:text !important}.r-input--input::-ms-reveal{display:var(--r-input--input--ms-reveal--display, none)}.r-input--input::placeholder{color:var(--r-input--input--placeholder--color, var(--r-text-soft, #686868))}.r-input--input[type=search]::-webkit-search-cancel-button{cursor:var(--r-input--input-clear--cursor, pointer);display:var(--r-input--input-clear--display, block);height:var(--r-input--input-clear--height, 0.875rem);width:var(--r-input--input-clear--width, 0.875rem);appearance:var(--r-input--input-clear--appearance, none);background-repeat:var(--r-input--input-clear--background-repeat, no-repeat);background-image:var(--r-input--input-clear--background-image, url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke-width%3D%221.5%22%20viewBox%3D%220.75%200.75%2022.5%2022.5%22%3E%3Cpath%20id%3D%22Vector%202269%22%20stroke%3D%22currentColor%22%20d%3D%22M1.5%201.5L22.5%2022.5%22%2F%3E%3Cpath%20id%3D%22Vector%202270%22%20stroke%3D%22currentColor%22%20d%3D%22M22.5%201.5L1.5%2022.5%22%2F%3E%3C%2Fsvg%3E\"));background-size:var(--r-input--input-clear--background-size, contain);margin-inline:var(--r-input--input-clear--margin-inline, 0);color:currentColor}.r-input--button{position:var(--r-input--icon-button--position, absolute);width:var(--r-input--icon-button--width, calc(1.125em + var(--r-input--icon--width)));height:var(--r-input--icon-button--height, 100%);top:var(--r-input--icon-button--top, 0);right:var(--r-input--icon-button--right, auto);bottom:var(--r-input--icon-button--bottom, auto);left:var(--r-input--icon-button--left, 0);cursor:var(--r-input--icon-button--cursor, inherit)}.r-input--container{position:var(--r-input--container--position, relative);display:var(--r-input--container--display, flex);align-items:var(--r-input--container--align-items, center);gap:var(--r-input--container--gap, 0.625rem);height:var(--r-input--container--height, var(--r-spacing-275, 2.75rem));background-color:var(--r-input--container--background-color, var(--r-background-softest, #fff));border-width:var(--r-input--container--border-width, 1px);border-style:var(--r-input--container--border-style, solid);border-color:var(--r-input--container--border-color, var(--r-border-soft, #686868));box-sizing:var(--r-input--container--box-sizing, border-box);box-shadow:var(--r-input--container--box-shadow, none);outline:var(--r-input--container--outline, none);outline-offset:var(--r-input--container--outline-offset, 0);padding-top:var(--r-input--container--padding-top, 0.6875rem);padding-right:var(--r-input--container--padding-right, var(--r-spacing-075, 0.75rem));padding-bottom:var(--r-input--container--padding-bottom, 0.6875rem);padding-left:var(--r-input--container--padding-left, var(--r-spacing-0275, 0.75rem));opacity:var(--r-input--container--opacity, 1);pointer-events:var(--r-input--container--pointer-events, auto);line-height:var(--r-input--container--line-height, 1);cursor:var(--r-input--container--cursor, inherit);margin-top:var(--r-input--container--margin-top, var(--r-spacing-025, 0.25rem))}.r-input--container slot[name=leading]{color:var(--r-input--container-leading--color, var(--r-icon-soft, #686868))}.r-input--message:has(r-hint),.r-input--message ::slotted([slot=message]){margin-top:var(--r-input--message--margin-top, var(--r-spacing-025, 0.25rem))}.r-input--trailing{display:var(--r-input--trailing--display, flex);margin-left:var(--r-input--trailing--margin-left, auto);align-items:var(--r-input--trailing--align-items, center);gap:var(--r-input--trailing--gap, 0.625rem)}.r-input--trailing:empty{--r-input--trailing--display:none}.r-input--validation-icon{display:var(--r-input--validation-icon--display, inline-block)}.r-input--readonly-icon{color:var(--r-input--readonly-icon--color, var(--r-icon-soft, #686868))}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
 
 const RInput = class {
     constructor(hostRef) {
@@ -292,7 +292,6 @@ const RInput = class {
         const regex = new RegExp(this.pattern, 'u');
         return regex.test(this.value);
     }
-    ;
     componentWillLoad() {
         this.initial['value'] = this.value;
         this.initial['invalid'] = this.invalid;
@@ -325,7 +324,7 @@ const RInput = class {
         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, 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,
@@ -342,6 +341,10 @@ const RInput = class {
             autocomplete,
             autofocus: autofocus || null,
             passwordrules,
+            enterkeyhint,
+            autocapitalize,
+            spellcheck,
+            inputmode: this.inputmode || null,
             id: uniqueId,
             'data-value': value,
             'aria-placeholder': placeholder,
@@ -368,7 +371,7 @@ const RInput = class {
                 return null;
             const iconName = shouldShowInvalidMarker ? icons.invalid : icons.valid;
             const iconColor = shouldShowInvalidMarker ? colors.invalid : colors.valid;
-            return h("r-icon", { class: "r-input--validation-icon", "aria-hidden": true, size: "s", name: iconName, color: iconColor });
+            return h("r-icon", { class: "r-input--validation-icon", "aria-hidden": "true", size: "s", name: iconName, color: iconColor });
         };
         // Filter out event listener properties based on naming convention.
         // Pass them to native element.

package/dist/esm/r-list-item.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, F as Fragment, H as Host, g as getElement } from './index-Da7qOBFr.js';
+import { r as registerInstance, h, F as Fragment, H as Host, g as getElement } from './index-CTxpqopm.js';
 
-const listItemCss = ":host([alignment=top]){--r-list-item--trailing-text--font-weight:bold;--r-list-item--trailing--align-self:start}:host([alignment=bottom]) .r-list-item{--r-list-item--trailing--align-self:end}:host([divider]:not([divider=false])){--r-list-item--border-color:var(--r-border-soft, #686868);--r-list-item--border-width:0 0 1px 0}:host([active]) .r-list-item{--r-list-item--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([variant=navitem]:not([active]):hover:not([disabled]:not([disabled=false])))>.r-list-item,:host([href]:not([active]):hover:not([disabled]:not([disabled=false])))>.r-list-item{--r-list-item--cursor:pointer;--r-list-item--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host([variant=navitem][has-sub-items]:hover:not([disabled]:not([disabled=false])))>.r-list-item-wrapper>.r-list-item{--r-list-item--cursor:pointer;--r-list-item--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host([variant=navitem][has-sub-items]:has([active]):hover:not([disabled]:not([disabled=false])))>.r-list-item-wrapper>.r-list-item{--r-list-item--cursor:pointer;--r-list-item--background-color:transparent}:host([variant=navitem][expanded])>.r-list-item-wrapper>.r-list-item{--r-list-item--headline--font-weight:600;--r-list-item--trailing-icon--transform:rotate(180deg);--r-list-item--trailing-icon--color:var(--r-icon-regular, #282828)}:host([variant=navitem][active-parent]:not([expanded])),:host([variant=navitem][active]:not([expanded])){--r-list-item--background-color:var(--r-background-interactive-activated, rgba(40, 40, 40, 0.08))}:host([variant=subitem]) .r-list-item{--r-list-item--margin-left:27px;--r-list-item--border-width:0 0 0 1px;--r-list-item--border-color:var(--r-border-soft, #686868)}:host([variant=subitem][active]) .r-list-item{--r-list-item--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host(:focus-visible:not(:active)) .r-list-item{--r-list-item--box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);--r-list-item--outline:2px solid var(--r-border-focused, #0071e3);--r-list-item--outline-offset:2px}:host(:focus-within) .r-list-item[href]{--r-list-item--box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);--r-list-item--outline:2px solid var(--r-border-focused, #0071e3);--r-list-item--outline-offset:2px}:host([disabled]:not([disabled=false])){cursor:not-allowed;--r-list-item--background-color:transparent}:host([disabled]:not([disabled=false])[divider]:not([divider=false])){--r-list-item--border-color:rgba(104,104,104, 0.4);--r-list-item--leading-icon--color:rgba(104,104,104, 0.4)}:host([truncate-description]:not([truncate-description=false])){--r-list-item--description--white-space:nowrap}:host{display:var(--display, block);pointer-events:var(--pointer-events, auto);outline:var(--outline, none);font-family:var(--font-family, var(--r-font-family-text, system-ui));line-height:var(--line-height, var(--r-line-height-m, 1.5));color:var(--color, var(--r-text-regular, #282828))}.r-list-item{display:var(--r-list-item--display, flex);align-items:var(--r-list-item--align-items, center);justify-content:var(--r-list-item--justify-content, center);gap:var(--r-list-item--gap, 16px);width:var(--r-list-item--width, inherit);padding:var(--r-list-item--padding, 16px);margin-left:var(--r-list-item--margin-left, 0);opacity:var(--r-list-item--opacity, 1);color:var(--r-list-item--color, inherit);box-shadow:var(--r-list-item--box-shadow, none);outline:var(--r-list-item--outline, none);outline-offset:var(--r-list-item--outline-offset, 0);text-decoration:var(--r-list-item--text-decoration, none);background-color:var(--r-list-item--background-color, transparent);border-style:var(--r-list-item--border-style, solid);border-width:var(--r-list-item--border-width, 0);border-color:var(--r-list-item--border-color, transparent);cursor:var(--r-list-item--cursor, inherit);font-weight:var(--r-list-item--font-weight, var(--r-font-weight-regular, 400));outline:var(--r-list-item--outline, none)}.r-list-item--leading{color:var(--r-list-item--leading--color, var(--r-icon-soft, #686868))}.r-list-item--leading-icon{color:var(--r-list-item--leading-icon--color, var(--r-icon-soft, #686868))}.r-list-item--trailing{display:var(--r-list-item--trailing--display, flex);align-self:var(--r-list-item--trailing--align-self, center);gap:var(--r-list-item--trailing--gap, 8px);color:var(--r-list-item--trailing--color, inherit)}.r-list-item--trailing-icon{transition:var(--r-list-item--trailing-icon--transition, transform 250ms ease-in-out);transform:var(--r-list-item--trailing-icon--transform, rotate(0deg));color:var(--r-list-item--trailing-icon--color, inherit)}.r-list-item--trailing-text{font-weight:var(--r-list-item--trailing-text--font-weight, 400);white-space:var(--r-list-item--trailing-text--white-space, nowrap)}.r-list-item--trailing ::slotted(*){display:var(--r-list-item--trailing-slotted--display, flex);gap:var(--r-list-item--trailing-slotted--display, 8px)}.r-list-item--text{display:var(--r-list-item--text--display, flex);flex-grow:var(--r-list-item--text--flex-grow, 1);flex-direction:var(--r-list-item--text--flex-direction, column);gap:var(--r-list-item--text--gap, 2px);white-space:var(--r-list-item--text--white-space, normal);overflow:var(--r-list-item--text--overflow, hidden);text-overflow:var(--r-list-item--text--text-overflow, ellipsis);font-weight:var(--r-list-item--trailing-text--font-weight, inherit)}.r-list-item--headline{font-size:var(--r-list-item--headline--font-size, 1rem);font-weight:var(--r-list-item--headline--font-weight, 600);line-height:var(--r-list-item--headline--line-height, 1.5);color:var(--r-list-item--headline--color, inherit)}.r-list-item--description{font-size:var(--r-list-item--description--font-size, 1rem);font-weight:var(--r-list-item--description--font-weight, 400);line-height:var(--r-list-item--description--line-height, 1.5);color:var(--r-list-item--description--color, var(--r-text-regular, #282828));white-space:var(--r-list-item--description--white-space, normal);overflow:var(--r-list-item--description--overflow, hidden);text-overflow:var(--r-list-item--description--text-overflow, ellipsis)}.r-list-item--description ::slotted(a){color:var(--r-list-item--description--color, inherit)}";
+const listItemCss = ":host([alignment=top]){--r-list-item--trailing-text--font-weight:bold;--r-list-item--trailing--align-self:start}:host([alignment=bottom]) .r-list-item{--r-list-item--trailing--align-self:end}:host([divider]:not([divider=false])){--r-list-item--border-color:var(--r-border-soft, #686868);--r-list-item--border-width:0 0 1px 0}:host([active]) .r-list-item{--r-list-item--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([variant=navitem]:not([active]):hover:not([disabled]:not([disabled=false])))>.r-list-item,:host([href]:not([active]):hover:not([disabled]:not([disabled=false])))>.r-list-item{--r-list-item--cursor:pointer;--r-list-item--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host([variant=navitem][has-sub-items]:hover:not([disabled]:not([disabled=false])))>.r-list-item-wrapper>.r-list-item{--r-list-item--cursor:pointer;--r-list-item--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host([variant=navitem][has-sub-items]:has([active]):hover:not([disabled]:not([disabled=false])))>.r-list-item-wrapper>.r-list-item{--r-list-item--cursor:pointer;--r-list-item--background-color:transparent}:host([variant=navitem][expanded])>.r-list-item-wrapper>.r-list-item{--r-list-item--headline--font-weight:600;--r-list-item--trailing-icon--transform:rotate(180deg);--r-list-item--trailing-icon--color:var(--r-icon-regular, #282828)}:host([variant=navitem][active-parent]:not([expanded])),:host([variant=navitem][active]:not([expanded])){--r-list-item--background-color:var(--r-background-interactive-activated, rgba(40, 40, 40, 0.08))}:host([variant=subitem]) .r-list-item{--r-list-item--margin-left:27px;--r-list-item--border-width:0 0 0 1px;--r-list-item--border-color:var(--r-border-soft, #686868)}:host([variant=subitem][active]) .r-list-item{--r-list-item--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host(:focus-within) .r-list-item[href]{--r-list-item--box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);--r-list-item--outline:2px solid var(--r-border-focused, #0071e3);--r-list-item--outline-offset:2px}:host([disabled]:not([disabled=false])){cursor:not-allowed;--r-list-item--background-color:transparent}:host([disabled]:not([disabled=false])[divider]:not([divider=false])){--r-list-item--border-color:rgba(104,104,104, 0.4);--r-list-item--leading-icon--color:rgba(104,104,104, 0.4)}:host([truncate-description]:not([truncate-description=false])){--r-list-item--description--white-space:nowrap}:host{display:var(--display, block);pointer-events:var(--pointer-events, auto);outline:var(--outline, none);font-family:var(--font-family, var(--r-font-family-text, system-ui));line-height:var(--line-height, var(--r-line-height-m, 1.5));color:var(--color, var(--r-text-regular, #282828))}.r-list-item{display:var(--r-list-item--display, flex);align-items:var(--r-list-item--align-items, center);justify-content:var(--r-list-item--justify-content, center);gap:var(--r-list-item--gap, var(--r-spacing-100, 1rem));width:var(--r-list-item--width, inherit);padding:var(--r-list-item--padding, var(--r-spacing-100, 1rem));margin-left:var(--r-list-item--margin-left, 0);opacity:var(--r-list-item--opacity, 1);color:var(--r-list-item--color, inherit);box-shadow:var(--r-list-item--box-shadow, none);outline:var(--r-list-item--outline, none);outline-offset:var(--r-list-item--outline-offset, 0);text-decoration:var(--r-list-item--text-decoration, none);text-align:var(--r-list-item--text-align, left);background-color:var(--r-list-item--background-color, transparent);border-style:var(--r-list-item--border-style, solid);border-width:var(--r-list-item--border-width, 0);border-color:var(--r-list-item--border-color, transparent);cursor:var(--r-list-item--cursor, inherit);font-weight:var(--r-list-item--font-weight, var(--r-font-weight-regular, 400));font-family:var(--r-list-item--font-family, var(--r-font-family-text, system-ui))}.r-list-item:focus-visible{--r-list-item--box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);--r-list-item--outline:2px solid var(--r-border-focused, #0071e3);--r-list-item--outline-offset:2px}.r-list-item--leading{display:var(--r-list-item--leading--display, flex);align-items:var(--r-list-item--leading--align-items, center);color:var(--r-list-item--leading--color, var(--r-icon-soft, #686868))}.r-list-item--leading-icon{color:var(--r-list-item--leading-icon--color, var(--r-icon-soft, #686868))}.r-list-item--trailing{display:var(--r-list-item--trailing--display, flex);align-self:var(--r-list-item--trailing--align-self, center);gap:var(--r-list-item--trailing--gap, var(--r-spacing-050, 0.5rem));color:var(--r-list-item--trailing--color, inherit)}.r-list-item--trailing-icon{transition:var(--r-list-item--trailing-icon--transition, transform 250ms ease-in-out);transform:var(--r-list-item--trailing-icon--transform, rotate(0deg));color:var(--r-list-item--trailing-icon--color, inherit)}.r-list-item--trailing-text{font-weight:var(--r-list-item--trailing-text--font-weight, 400);white-space:var(--r-list-item--trailing-text--white-space, nowrap)}.r-list-item--trailing ::slotted(*){display:var(--r-list-item--trailing-slotted--display, flex);gap:var(--r-list-item--trailing-slotted--display, var(--r-spacing-050, 0.5rem))}.r-list-item--text{display:var(--r-list-item--text--display, flex);flex-grow:var(--r-list-item--text--flex-grow, 1);flex-direction:var(--r-list-item--text--flex-direction, column);gap:var(--r-list-item--text--gap, 0.125rem);white-space:var(--r-list-item--text--white-space, normal);overflow:var(--r-list-item--text--overflow, hidden);text-overflow:var(--r-list-item--text--text-overflow, ellipsis);font-weight:var(--r-list-item--trailing-text--font-weight, inherit)}.r-list-item--sr-text{display:var(--r-list-item--sr-text--display, none)}.r-list-item--headline{font-size:var(--r-list-item--headline--font-size, 1rem);font-weight:var(--r-list-item--headline--font-weight, 600);line-height:var(--r-list-item--headline--line-height, 1.5);color:var(--r-list-item--headline--color, inherit)}.r-list-item--description{font-size:var(--r-list-item--description--font-size, 1rem);font-weight:var(--r-list-item--description--font-weight, 400);line-height:var(--r-list-item--description--line-height, 1.5);color:var(--r-list-item--description--color, var(--r-text-regular, #282828));white-space:var(--r-list-item--description--white-space, normal);overflow:var(--r-list-item--description--overflow, hidden);text-overflow:var(--r-list-item--description--text-overflow, ellipsis)}.r-list-item--description ::slotted(a){color:var(--r-list-item--description--color, inherit)}.r-list-item-wrapper{width:var(--r-list-item-wrapper--width, 100%)}.sub-items{margin:var(--r-sub-items--margin, 0);padding:var(--r-sub-items--padding, 0);list-style-type:var(--r-sub-items--list-style-type, \"\")}.sub-items[aria-hidden=true]{display:none}.visually-hidden{position:absolute;width:0.0625rem;height:0.0625rem;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}@media (prefers-reduced-motion){.r-list-item--trailing-icon{transition:none}}";
 
 const RListItem = class {
     constructor(hostRef) {
@@ -9,6 +9,8 @@ const RListItem = class {
         this.variant = 'list-item';
         /** Determines whether the list item is expanded to show its subitems. It can be toggled programmatically or through user interaction. */
         this.expanded = false;
+        /** Unique id for each subItem list */
+        this.uniqueSubmitemsId = `r-list-item-subitems-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
         this.isEl = (selector) => {
             return this.host.querySelector(selector) !== null;
         };
@@ -50,6 +52,10 @@ const RListItem = class {
     get isDescriptionSlot() {
         return this.isEl('[slot="description"]');
     }
+    get headlineContent() {
+        var _a;
+        return ((_a = this.host.querySelector('[slot="headline"]')) === null || _a === void 0 ? void 0 : _a.textContent) || this.headline;
+    }
     get hasSubitems() {
         return this.isEl('[variant="subitem"]');
     }
@@ -57,20 +63,12 @@ const RListItem = class {
         var _a;
         return (_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[variant="subitem"]');
     }
-    handleKeyDown(event) {
-        if (event.key !== 'Enter' && event.key !== ' ')
-            return;
-        this.toggleSubitems();
-    }
-    /** Prevent the click from toggling the parent **/
-    handleSubitemClick(event) {
-        event.stopPropagation();
-    }
     /** Function to set tabindex for sub-items */
     setTabIndexOnSubItems() {
         if (this.hasSubitems) {
             this.subItems.forEach((element) => {
-                element.shadowRoot.querySelector('a.r-list-item').setAttribute('tabindex', this.disabled ? '-1' : '0');
+                var _a;
+                (_a = element.shadowRoot.querySelector('a.r-list-item')) === null || _a === void 0 ? void 0 : _a.setAttribute('tabindex', this.disabled ? '-1' : null);
             });
         }
     }
@@ -78,26 +76,29 @@ const RListItem = class {
         this.setTabIndexOnSubItems();
     }
     get tagName() {
+        if (this.hasSubitems) {
+            return 'button';
+        }
         return this.href && !this.disabled ? 'a' : 'div';
     }
     render() {
         const { leadingIcon, leadingIconSrc, trailingIcon, trailingIconSrc, headline, trailingText, description } = this;
         const TagName = this.tagName;
-        const itemAttrs = Object.assign({ href: TagName === 'a' ? this.href : null }, (this.disabled ? { role: 'link', 'aria-disabled': 'true' } : null));
-        const ListItemContent = (h(TagName, Object.assign({ class: "r-list-item" }, itemAttrs), this.isLeading &&
+        const itemAttrs = Object.assign(Object.assign(Object.assign({ href: TagName === 'a' ? this.href : null, 'aria-current': this.active && TagName === 'a' ? 'page' : null }, (this.disabled ? { role: 'link', 'aria-disabled': 'true' } : null)), (this.hasSubitems ? { 'aria-expanded': `${this.expanded}` } : null)), (this.hasSubitems ? { 'aria-controls': `${this.uniqueSubmitemsId}` } : null));
+        const ListItemContent = (h(TagName, Object.assign({ class: "r-list-item" }, itemAttrs, { onClick: () => this.hasSubitems && this.toggleSubitems() }), this.isLeading &&
             h("span", { class: "r-list-item--leading" }, h("slot", { name: "leading" }, this.isLeadingIcon && !this.hideLeadingIcon &&
                 h("r-icon", { class: "r-list-item--leading-icon", name: leadingIcon, src: leadingIconSrc }))), h("span", { class: "r-list-item--text" }, !this.isTextSlot ?
             h(Fragment, null, (this.isHeadlineSlot || headline) &&
                 h("span", { class: "r-list-item--headline" }, h("slot", { name: "headline" }, headline)), (description || this.isDescriptionSlot) &&
                 h("span", { class: "r-list-item--description" }, h("slot", { name: "description" }, description)))
             :
-                h("slot", { name: "text" })), this.isTrailing &&
+                h("slot", { name: "text" })), h("span", { class: "r-list-item--sr-text visually-hidden" }, this.headlineContent), this.isTrailing &&
             h("span", { class: "r-list-item--trailing" }, h("slot", { name: "trailing" }, this.isTrailingIcon && !trailingText &&
                 h("r-icon", { class: "r-list-item--trailing-icon", name: trailingIcon, src: trailingIconSrc }), trailingText && !this.isTrailingIcon &&
                 h("span", { class: "r-list-item--trailing-text" }, trailingText)))));
         if (!this.hasSubitems)
             return h(Host, null, ListItemContent);
-        return (h(Host, { onKeyDown: this.handleKeyDown, onClick: this.toggleSubitems, tabindex: `${this.disabled ? "-1" : "0"}` }, h("div", { class: "r-list-item-wrapper" }, ListItemContent, this.expanded && (h("span", { class: "sub-items", onClick: this.handleSubitemClick }, h("slot", null))))));
+        return (h(Host, null, h("div", { class: "r-list-item-wrapper" }, ListItemContent, h("ul", { "aria-hidden": `${!this.expanded}`, id: this.uniqueSubmitemsId, class: "sub-items" }, h("slot", null)))));
     }
     get host() { return getElement(this); }
 };