@roadtrip/components 3.33.7 → 3.35.0

package/dist/esm/road-modal.entry.js

@@ -68,7 +68,7 @@ const Modal = class {
         const modalIsOpenClass = this.isOpen ? 'modal-open' : '';
         const inverseHeaderClass = this.hasInverseHeader ? 'modal-header-inverse' : '';
         const closeIconElement = this.hasCloseIcon ? h("button", { type: "button", class: "modal-close", onClick: this.onClick, "aria-label": "Close" }, h("road-icon", { icon: navigationClose, "aria-hidden": "true" })) : '';
-        return (h(Host, { key: 'b87d292936b3298bd9e0fef68931b1197d89990f', class: `modal ${modalIsOpenClass}`, tabindex: "-1", role: "dialog", "aria-label": "modal" }, h("div", { key: '9c9ce64aca4d7e856b1a36de791aebd6b7b7affb', class: "modal-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { key: '9afc412d8a8f819d265d2d9102c1c96c14314816', class: "modal-dialog", style: { maxWidth: `${this.maxWidth}px` }, role: "document", tabindex: "0" }, h("div", { key: '3ed271357372e1e6306280c7eaa7283ac2336ab3', class: "modal-content" }, h("header", { key: '806e9a7258847239b31b89576213470e04b2c03d', class: `modal-header ${inverseHeaderClass}` }, h("h2", { key: 'aca390c8fbb825c385d43e667f9563a1204eafcb', class: "modal-title" }, this.modalTitle), closeIconElement), h("div", { key: '000d132ec44dff846b4cc7d55039ded734f7db4c', class: "modal-body" }, h("slot", { key: '87025f81c5fd3498e38656d96772ba495b34f66e' }))))));
+        return (h(Host, { key: 'dea7d12a7d711034e4bfbb57bd5ab17d0d2d0c64', class: `modal ${modalIsOpenClass}`, tabindex: "-1", role: "dialog", "aria-label": "modal" }, h("div", { key: 'e3be54a36318d4a7942ac56477dccbc089b62d95', class: "modal-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { key: '34576fcfbe6ca5da7cb655969ac011d627c4a450', class: "modal-dialog", style: { maxWidth: `${this.maxWidth}px` }, role: "document", tabindex: "0" }, h("div", { key: '997ebcf1495edc6427595303fc87f77b31fa69c8', class: "modal-content" }, h("header", { key: '0724f16b5f0deeeada144df5e0f5df9e61f1e94f', class: `modal-header ${inverseHeaderClass}` }, h("h2", { key: '4ca7c0df3c5f39fcb4d0c18ef0d286d8131c75d2', class: "modal-title" }, this.modalTitle), closeIconElement), h("div", { key: '86a30cd070f946728373100e30e86914c9952699', class: "modal-body" }, h("slot", { key: '2a80c579ec2784e0baee03e0d65d55ff626e541a' }))))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/road-navbar-item-v2.entry.js

@@ -63,11 +63,11 @@ const NavbarItem = class {
             rel,
             target,
         };
-        return (h(Host, { key: '191e295ae457ff383a61caf39b2b14b361dfd208', onClick: this.onClick, onKeyup: this.onKeyUp, role: "menuitem", tabindex: "0", "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `navbar-item-${tab}` : null, disabled: disabled, class: {
+        return (h(Host, { key: 'd3962edd95606e908423aef6bcac10e9900f5cac', onClick: this.onClick, onKeyup: this.onKeyUp, role: "menuitem", tabindex: "0", "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `navbar-item-${tab}` : null, disabled: disabled, class: {
                 'navbar-item': true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
-            } }, h("a", Object.assign({ key: '445f29f9ba3534f1b4c02861ea4ac3768cc48b0c' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { key: '3d7a3ac9b15cef609ab6402ed35b030830e03dd8', class: "button-inner" }, h("slot", { key: '059d10fdd31ed3a4e8caecaa62b9aacd4483883f' })))));
+            } }, h("a", Object.assign({ key: '2f2f9d568a06d666ddcded0a3bbf18b9145dc6ec' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { key: '49e8a3698a19ed7b591531bda1baa3ddc0c0925f', class: "button-inner" }, h("slot", { key: '3b9a1513ead6236942ad77fb19b099f26332b31c' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/road-navbar-item.entry.js

@@ -63,11 +63,11 @@ const NavbarItem = class {
             rel,
             target,
         };
-        return (h(Host, { key: '8d13f1295c10b09012ee6f0c3a683c44ea9575de', onClick: this.onClick, onKeyup: this.onKeyUp, role: "menuitem", tabindex: "0", "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `navbar-item-${tab}` : null, disabled: disabled, class: {
+        return (h(Host, { key: 'acbf239caf20ec5fdad46f4af576243eab63c2f9', onClick: this.onClick, onKeyup: this.onKeyUp, role: "menuitem", tabindex: "0", "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `navbar-item-${tab}` : null, disabled: disabled, class: {
                 'navbar-item': true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
-            } }, h("a", Object.assign({ key: '3053f87c13f67102e2b3e10c9f1e536a083fdf3e' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { key: '74b5de95c1cbcaa1f5bef7dded2e8949134241b5', class: "button-inner" }, h("slot", { key: '84f6e5bf2ba906fdd7356dce268a7e7d8d399bff' })))));
+            } }, h("a", Object.assign({ key: 'ba6ba2a86abdc210604b52e77ab44362ddeda18d' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { key: '189d158e062896460568593a287e52708eb13d4c', class: "button-inner" }, h("slot", { key: 'e690abfecff3881e688020a4f8c173c73674b050' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/road-navbar-v2.entry.js

@@ -32,7 +32,7 @@ const NavbarV2 = class {
     }
     render() {
         const compactClass = this.compact ? 'compact' : '';
-        return (h(Host, { key: 'e4fe4a407edcf036a5f3da534cc88eb4b863ab71', role: "menubar", class: `${compactClass}` }, h("slot", { key: 'ef7df2d2775c533592267b1b420e522e23836d7e' })));
+        return (h(Host, { key: '666a88c32c86b9e81a4f7fa244385f43ae44d72f', role: "menubar", class: `${compactClass}` }, h("slot", { key: '2b65539c449d50ca60a93e96ff65b0ea28fca173' })));
     }
     static get watchers() { return {
         "selectedTab": ["selectedTabChanged"]

package/dist/esm/road-navbar.entry.js

@@ -27,7 +27,7 @@ const Navbar = class {
         this.selectedTabChanged();
     }
     render() {
-        return (h(Host, { key: '1413fa96200fad5a83abd97f951c46b6a6a25777', role: "menubar" }, h("slot", { key: 'c6f91f0af00788a5708cb95f44789938c7d6eeda' })));
+        return (h(Host, { key: '188151d4f107e38799301e254fef5cb36b77f427', role: "menubar" }, h("slot", { key: '7ed62f55bd9828c04a28f4090b6563dbc7cbd741' })));
     }
     static get watchers() { return {
         "selectedTab": ["selectedTabChanged"]

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

@@ -1351,9 +1351,9 @@ const RoadPhoneNumberInput = class {
         const isErrorClass = this.errorMessage.length ? 'is-error' : '';
         const hasValueClass = this.hasValue() ? 'has-value' : '';
         const sizes = 'xl';
-        return (h(Host, { key: '7d65a01428b79587c98a5e399bab8403c0849a68' }, h("div", { key: 'b59d36be4bd2ecbe7469b37c194501d542895b29', class: 'phone-number-inputs-container' }, h("div", { key: '4cf3f4e60de5f861e09c8cbde5551fb95f209970', class: `road-phone-input-select ${isErrorClass} ${isInvalidClass}`, slot: "prepend" }, h("select", { key: '187f3724fcc9bf5c34c6490e61e5adee102ac052', id: selectId, class: `form-select-area has-value`, "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled, onChange: (event) => this.handleSelect(event), "aria-label": this.codeLabel, tabIndex: this.disabled ? -1 : 0 }, this.countryOptions && this.countryOptions.map(option => (h("option", { value: option.value, disabled: option.disabled, selected: option.selected }, option.label)))), h("label", { key: '8e867ef3d625b2e69246591cb8f84e7794ba1a7c', class: "form-select-area-label", id: labelId, htmlFor: selectId }, this.codeLabel), h("label", { key: '71ae31a4e0da49b93d28e433a41fbb40b74b603d', class: "form-select-area-value", id: valueId, htmlFor: selectId }, "+", this.selectedCountryCode)), h("input", { key: '289ac4032540c87f77784439864983ed5d544439', type: 'tel', id: inputId, class: `input-${sizes} phone-number-input-field ${hasValueClass} ${isErrorClass}`, value: this.phoneValue, required: this.required, tabIndex: 0, onInput: (event) => this.handleInput(event) }), h("label", { key: '60e9f10714d8807449534d1bce2f74f65a1646dc', class: "phone-number-input-label", id: labelId, htmlFor: inputId }, this.phoneLabel)), this.errorMessage
+        return (h(Host, { key: 'cecbc63d32eea08a7a110f9990df28aceb53c2a8' }, h("div", { key: 'b2cbe43100fe14b762af1910139e3d746e983c7c', class: 'phone-number-inputs-container' }, h("div", { key: '067b2ebb88dc0f3d98318d522dbf05c56adad91c', class: `road-phone-input-select ${isErrorClass} ${isInvalidClass}`, slot: "prepend" }, h("select", { key: 'd654ca41d2f8a859c2a8ba40bc65f7ff57fa2b70', id: selectId, class: `form-select-area has-value`, "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled, onChange: (event) => this.handleSelect(event), "aria-label": this.codeLabel, tabIndex: this.disabled ? -1 : 0 }, this.countryOptions && this.countryOptions.map(option => (h("option", { value: option.value, disabled: option.disabled, selected: option.selected }, option.label)))), h("label", { key: 'fac2d9990c24757cc975f750a3eec44f173dfeca', class: "form-select-area-label", id: labelId, htmlFor: selectId }, this.codeLabel), h("label", { key: 'b7449465cdf82627c8737b09c73bbf8c46104e41', class: "form-select-area-value", id: valueId, htmlFor: selectId }, "+", this.selectedCountryCode)), h("input", { key: 'ea5d0a4808ab0117c3f9b163e5c9e2f2751a3908', type: 'tel', id: inputId, class: `input-${sizes} phone-number-input-field ${hasValueClass} ${isErrorClass}`, value: this.phoneValue, required: this.required, tabIndex: 0, onInput: (event) => this.handleInput(event) }), h("label", { key: '5c0628f00c771e0b36a2d0d662634ed9a0924a62', class: "phone-number-input-label", id: labelId, htmlFor: inputId }, this.phoneLabel)), this.errorMessage
             && this.errorMessage !== ''
-            && h("p", { key: 'b140351db845f88befd99aab39daa115c770732e', class: "invalid-feedback" }, h("road-icon", { key: 'ed89fc9c99493f67973448bbea8d7f0c20e0c455', slot: "start", color: 'danger', name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), this.errorMessage)));
+            && h("p", { key: '70d8e2b0acc90afbd08607fbdd420e6c2b0ed25d', class: "invalid-feedback" }, h("road-icon", { key: '490e8baafe7b9ef670f11227043e6552287131ec', slot: "start", color: 'danger', name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), this.errorMessage)));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/road-plate-number.entry.js

@@ -105,10 +105,10 @@ const PlateNumber = class {
     render() {
         const value = this.getValue();
         const motorbikeClass = this.motorbike ? 'motorbike-plate' : '';
-        return (h("road-input-group", { key: 'd99ec720113a121c58794385a2a697459cc4e0eb', class: `plate-number plate-number-${this.country.toLowerCase()} ${motorbikeClass}` }, h("label", { key: '559c8428a6403ee087bc219b6027b12a48c658d8', slot: "prepend", class: "input-group-prepend" }, h("div", { key: '8483940a622fb54e8bc29dfeaf3ade7aaeeb0e8c', class: "plate-number-start" }, h("road-icon", { key: 'ba60f444919f5b6221fe4d910ced4bec521e4101', class: "plate-number-icon", icon: licensePlateStarEu }), h("div", { key: '095d70b607191a292c5857559566954122c5081c', class: "plate-number-location", "aria-label": this.country, role: "img" }, this.countries
+        return (h("road-input-group", { key: '28c30b625e2af365c0249677e44c7d0429763631', class: `plate-number plate-number-${this.country.toLowerCase()} ${motorbikeClass}` }, h("label", { key: '70107849b6839becadfb8b5ef92a6111295bdb08', slot: "prepend", class: "input-group-prepend" }, h("div", { key: '31ee9cd44c6fa9e0df1b610f342e4c7409ec10a0', class: "plate-number-start" }, h("road-icon", { key: '0b9a9f14ebbae17cba9cd3dd2541ec0ea80c9108', class: "plate-number-icon", icon: licensePlateStarEu }), h("div", { key: '6ee7f8b160a21b6c9ae549f1979598f5bc3d5eb1', class: "plate-number-location", "aria-label": this.country, role: "img" }, this.countries
             .filter(item => item.country === this.country)[0].letter))), this.motorbike
             ? (h("textarea", { class: "form-control plate-number-input mb-0", disabled: this.disabled, placeholder: this.placeholder != null ? this.placeholder : this.countries.filter(item => item.country === this.country)[0].placeholder, readOnly: this.readonly, maxlength: "9", rows: 2, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }))
-            : (h("input", { class: "plate-number-input mb-0", disabled: this.disabled, placeholder: this.placeholder != null ? this.placeholder : this.countries.filter(item => item.country === this.country)[0].placeholder, readOnly: this.readonly, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus })), h("label", { key: '28ce8da1e17d33750056cbbb7b62686f492b4f6d', slot: "append", class: "input-group-append" }, h("div", { key: 'a7fd028f9e8457e1b865abbe79539223d64c7087', class: "plate-number-end" }))));
+            : (h("input", { class: "plate-number-input mb-0", disabled: this.disabled, placeholder: this.placeholder != null ? this.placeholder : this.countries.filter(item => item.country === this.country)[0].placeholder, readOnly: this.readonly, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus })), h("label", { key: '30b0898365b95e47c58b1ce349a224574f9b6939', slot: "append", class: "input-group-append" }, h("div", { key: '022809f30f9dea2d7e2e5d18067f3c8cb5c7a72d', class: "plate-number-end" }))));
     }
     static get watchers() { return {
         "value": ["valueChanged"]

package/dist/esm/road-profil-dropdown.entry.js

@@ -26,7 +26,7 @@ const Dropdown = class {
         this.isOpen = false;
     }
     render() {
-        return (h("details", { key: '1ea3c85ea39041b51cd7b87e5e3bf8457d04d8d2', class: "dropdown", open: this.isOpen }, h("summary", { key: '31722222765df7c7fb7716f1d28c719e71e3c50b', "aria-expanded": `${this.isOpen}`, tabindex: "0", role: "button", onClick: this.onClick }, h("div", { key: 'e395e588854018e3aa01a535df994281a17e76e7', class: `d-flex` }, h("div", { key: '8bb2ba7393ad71a0fb01bfaae2626cddff73b974' }, h("road-avatar", { key: '6d05a101ce8015714a85fea57c583f8cf20e8ce4' }, h("slot", { key: 'c1a1408aa8e9eafedb2f3cb1791dcc02a2aba504', name: "avatar" }))))), h("div", { key: '31b4b8e31798cdbba1f144cd7c75417e5aed1dcc', class: `dropdown-menu` }, h("div", { key: 'daaa7e6156bd9e4cf093dcd895aabc58a5a75835', class: "profil-item" }, h("road-avatar", { key: 'efe9b628482a2f27c8224e5a836677e55aab0a53', size: "sm" }, h("slot", { key: 'b9def88d2732c0ff87353e163437f303bf921175', name: "avatarItem" })), h("div", { key: 'de3f1acfabff5c15cb409ff32c9f3d03ff80b256', class: "profil-item-info" }, h("span", { key: '01909017ffda821626024a5db9c77b5a5fa79988', class: "profil-item-info-name" }, h("slot", { key: 'e7ecab682533008f8aa41deb00a30a80ba027c09', name: "name" })), h("road-label", { key: 'e23ae331f406c69d5702055a31f8445518983fbc' }, h("slot", { key: '4ee00896125440f2f3a904516052edecc3ccaefc', name: "email" })))), h("slot", { key: '51a8603e7be8c8df634d69fe74a34845b75aff2f', name: "list" }))));
+        return (h("details", { key: '43e4ae49c617fbacc94b8baa71e48f69fe476f1d', class: "dropdown", open: this.isOpen }, h("summary", { key: '4b710e357a714a422988b653ae2cb8573935ff35', "aria-expanded": `${this.isOpen}`, tabindex: "0", role: "button", onClick: this.onClick }, h("div", { key: '4f6e0a9bc88cfb776c1bb77e54db15b5083171b2', class: `d-flex` }, h("div", { key: '47c2820abb6c77ec3058b1b2b5fbf724350caabd' }, h("road-avatar", { key: '4cfa1004541f55168b831c6e8541c57c81df4630' }, h("slot", { key: 'b71ee875ef37c645b7bd365ac57d7198b171f1f6', name: "avatar" }))))), h("div", { key: '0722a1227a791a58fecd3f6e9e525656deb286d0', class: `dropdown-menu` }, h("div", { key: '06a40cb955460d18e5b81daa33d97e6fba62c558', class: "profil-item" }, h("road-avatar", { key: 'd7f3cbdb3c3556228f6751e16f48ea15989a40c1', size: "sm" }, h("slot", { key: '18e9fbed6f749746247bd5cb32be190fbc137441', name: "avatarItem" })), h("div", { key: '861ee72150789f798709bef31bc8cf2013b75e9e', class: "profil-item-info" }, h("span", { key: 'a51ab011c1dbb74eb0110ac5ef9bbce140060456', class: "profil-item-info-name" }, h("slot", { key: 'b96374ca1927d2af6428a773dfcf4b4c97656551', name: "name" })), h("road-label", { key: '5c58f0aa250f9cb66ff5a04e5517fc5693c8f189' }, h("slot", { key: 'aca0556fa9c641dffcafa231d72ada909c51adc8', name: "email" })))), h("slot", { key: '5482d7055522cd952392d1f437b261497747a452', name: "list" }))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/road-progress-indicator-horizontal.entry.js

@@ -23,7 +23,7 @@ const Stepper = class {
         const urlStep1 = this.urlStep1 !== undefined ? `${this.urlStep1}` : '#';
         const urlStep2 = this.urlStep2 !== undefined ? `${this.urlStep2}` : '#';
         const urlStep3 = this.urlStep3 !== undefined ? `${this.urlStep3}` : '#';
-        return (h(Host, { key: '92b255c26f67f4aad1051adc570b4838064b050b' }, h("nav", { key: '44f9ff6889874b55dc5078d1571cde655afc3a6b' }, h("ul", { key: 'e6b0e5e75db170bd8bf6412ed1d6bb5f228eda4b', class: `${colorClass}` }, h("li", { key: 'f48231734646f68f91bc256cd935a13dfe5277cf', class: `${stateClass}` }, h("a", { key: '8ca3bebb5e710c5a3fbbada6ef1f6f0ad6518956', class: "progress-indicator-horizontal-link", href: `${urlStep1}` }, h("span", { key: '752b27e04ab6799c19912a193a89e8084dc82ff9', class: "progress-indicator-horizontal-icon" }, h("slot", { key: '3c25ed41f39a011e61aafec0ca65917b72dbe967', name: "progress-indicator-horizontal-icon" })), h("span", { key: '2bf09fe120b2ae4c4074a5357f5133bc22120e2c', class: "progress-indicator-horizontal-title" }, h("slot", { key: '752e16d8c3895c2ee91a222c7789431ad27e34dd', name: "progress-indicator-horizontal-title" })))), h("li", { key: '09bcfc2711dc68b5b233b0306fa7d3d2b8e753c3', class: `${stateSecondStepClass}` }, h("a", { key: '9b5c9c60abecfed752c0332696c3c509ef4d5074', class: "progress-indicator-horizontal-link", href: `${urlStep2}` }, h("span", { key: '1e3c3113967379a97597c13044493ff3693d1b4e', class: "progress-indicator-horizontal-icon" }, h("slot", { key: 'fe8312cd31ca099c690379f500f20466a3f76555', name: "progress-indicator-horizontal-icon2" })), h("span", { key: '885e16b9917fbbcc0df05c2960083cb679902d2d', class: "progress-indicator-horizontal-title" }, h("slot", { key: '0b6709b4b8390f58854d2a37528fe1b98a0b4481', name: "progress-indicator-horizontal-title2" })))), this.numberStep == 3 && h("li", { key: 'fa106837abe66d6ee557f800916b39df8efac9a7', class: `${stateThirdStepClass}` }, h("a", { key: '9607d28f066e4b22778f66d0b5657611af3b15ed', class: "progress-indicator-horizontal-link", href: `${urlStep3}` }, h("span", { key: 'ce19ae6a6b774c0d5cb8c7b91af8d03ee88400a4', class: "progress-indicator-horizontal-icon" }, h("slot", { key: 'e0a52ce61b043af9137340a5651a120f1a8ff0dd', name: "progress-indicator-horizontal-icon3" })), h("span", { key: '1c8870afc7dc2630fb58c4c2f17d4f4f9109dea6', class: "progress-indicator-horizontal-title" }, h("slot", { key: '91fb0f5283ddbe5c62c2292579df9045b4c543f7', name: "progress-indicator-horizontal-title3" }))))))));
+        return (h(Host, { key: '3a324a39e9084c89d10cb395ddc2d6259964fb3b' }, h("nav", { key: 'cbbfb7023a1d6355e3a73673f1f12b729e7bf45a' }, h("ul", { key: '13d66d84cca5817fffef3b145fec52d4051693df', class: `${colorClass}` }, h("li", { key: 'a193befac4f459adb7fe2cf1b411a8ed3049e152', class: `${stateClass}` }, h("a", { key: '0b947059548ae146a24edde30365b1b9bf2e2eec', class: "progress-indicator-horizontal-link", href: `${urlStep1}` }, h("span", { key: '5f30e93a8dcdcfa10a3b9d25a79b9b8001fa5935', class: "progress-indicator-horizontal-icon" }, h("slot", { key: 'dbe960eca33e08ab40348188010b8dd926d607fe', name: "progress-indicator-horizontal-icon" })), h("span", { key: 'd3b1ac0ca97375278663599a284c908c745ecab3', class: "progress-indicator-horizontal-title" }, h("slot", { key: '59019872b7db4a65b717ded6af8976b8bbbf97a3', name: "progress-indicator-horizontal-title" })))), h("li", { key: 'ec083a98b0a64eca04c02b9cf7e9022bdea70485', class: `${stateSecondStepClass}` }, h("a", { key: '6d0083729e39293509b45a869fa893d398e33f5b', class: "progress-indicator-horizontal-link", href: `${urlStep2}` }, h("span", { key: '82a87245b2b01f71b2237c71310b05ffa77fd977', class: "progress-indicator-horizontal-icon" }, h("slot", { key: 'bfaeebcee669e2370da7d7253180a8b9813dc399', name: "progress-indicator-horizontal-icon2" })), h("span", { key: '449e13e3beaa66b16a7d1fc6def8796888b671a2', class: "progress-indicator-horizontal-title" }, h("slot", { key: 'f9312792d7e400d0a044d00f251e621b3c23cc70', name: "progress-indicator-horizontal-title2" })))), this.numberStep == 3 && h("li", { key: '5cce8b0fc91b8ec4a3d79362eb67e2290d3ce4c1', class: `${stateThirdStepClass}` }, h("a", { key: '7501ccbc3c739689c687794ba3530d62fa9f5cc3', class: "progress-indicator-horizontal-link", href: `${urlStep3}` }, h("span", { key: '896343b2c095ea44c4442dacbac62b36380de6d6', class: "progress-indicator-horizontal-icon" }, h("slot", { key: '6b3581003a6eeee6c1c8ac96f3d86866588496ba', name: "progress-indicator-horizontal-icon3" })), h("span", { key: '3a254af95b70e84e048597b8af5549c3966aa717', class: "progress-indicator-horizontal-title" }, h("slot", { key: 'bdb1c23a6eb4e3d3e189b9855e91e955efaefd75', name: "progress-indicator-horizontal-title3" }))))))));
     }
 };
 Stepper.style = RoadProgressIndicatorHorizontalStyle0;

package/dist/esm/road-progress-indicator-vertical-item.entry.js

@@ -8,7 +8,7 @@ const ProgressIndicatorVerticalItem = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'd3ba92c8ba422c910a790c232cc6c43acf21a316' }, h("slot", { key: '471a58e0dbbcad1601c6bfec7e90cc4ced55f172' })));
+        return (h(Host, { key: '681a6c70caee4d2b12dfe5cb85faa3240da79261' }, h("slot", { key: 'edbc178bba91172a49760d40b55e55b56634dea1' })));
     }
 };
 ProgressIndicatorVerticalItem.style = RoadProgressIndicatorVerticalItemStyle0;

package/dist/esm/road-progress-indicator-vertical.entry.js

@@ -8,7 +8,7 @@ const ProgressIndicatorVertical = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '53374580ae8974a098d78a601f16c11d046d05a0' }, h("nav", { key: '172b56e4f067cd3aff24cbc8f619f623cee6e7fc' }, h("ul", { key: '76fc4af3a83915d53365f3e813612e10ac7bbca7' }, h("li", { key: 'a30ca0d908dc432e31cf04748df08d87bc527f61' }, h("slot", { key: '2bb8112daa5f3799b8936939dce9818fa17f756d' }))))));
+        return (h(Host, { key: '5dd7b6e9f50befbfda7194c326ff263015b798b8' }, h("nav", { key: '4410e7821c405e9e1cb1fff7ff6360a71dcc793f' }, h("ul", { key: '52179d2713e247e6c8b587816f032b432883b844' }, h("li", { key: 'a2e1151dba8017dc7ba50d8cbac7cce4dd707d5a' }, h("slot", { key: '67225f4646a498b1c84070b18406c0073eff173c' }))))));
     }
 };
 ProgressIndicatorVertical.style = RoadProgressIndicatorVerticalStyle0;

package/dist/esm/road-progress-tracker-item.entry.js

@@ -8,7 +8,7 @@ const ProgressTrackerItem = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'fa846bf7750217b756e2c63925636d75100e52f0' }, h("slot", { key: '3b37dca6ac078595ce7e739cd980661387f50e59' })));
+        return (h(Host, { key: '9912365dc36705af52ede8cdb4ecf963a5a11d83' }, h("slot", { key: '38a27cd97a75a0621926a32ecbcef7f78cc38330' })));
     }
 };
 ProgressTrackerItem.style = RoadProgressTrackerItemStyle0;

package/dist/esm/road-progress-tracker.entry.js

@@ -8,7 +8,7 @@ const ProgressTracker = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '9a0c92424113ac6ed3a422e2b72a597a1c7e56ae' }, h("nav", { key: '1f4a7756e005ecaac2ae04d69cfa56f44a3db114' }, h("ul", { key: 'dd386017509fcabfbc30d8970fa60d293d209e9e' }, h("li", { key: '1e2ca3005116579b3917b51867a09d975c9c1891' }, h("slot", { key: 'aa5268a3e7f35906bb37354e88b825f839d2774d' }))))));
+        return (h(Host, { key: '3056137a4ac9e08c6875527ec6fc206291e502ff' }, h("nav", { key: 'ecccabc164e4f6a0438523746613ee3255a02f2c' }, h("ul", { key: 'a4c6c472aac39a85db1fbce327244dcf235417fe' }, h("li", { key: '7c6a8b6c278e362bc409007aadd0c5bb4ec8966e' }, h("slot", { key: 'fa4a84917302767f34ec63441d65e797832d0e12' }))))));
     }
 };
 ProgressTracker.style = RoadProgressTrackerStyle0;

package/dist/esm/road-progress.entry.js

@@ -45,7 +45,7 @@ const ProgressBar = class {
         const fullwidth = this.fullwidth ? 'progress-element-info-full-width' : 'progress-element-info';
         const light = this.light ? 'progress progress-light' : 'progress';
         const animation = this.animation ? 'animation' : '';
-        return (h(Host, { key: '6c93b381f40367646f5ccb653a9062c7ac342679', class: "progress-element" }, h("div", { key: 'cb975e51bd98f03fa7d52bd3f20af7b5f8f25379', class: `${light} progress-${this.color} ${animation}` }, h("div", { key: '33b21314f01938916afaea7a58e0425b03616d06', class: "progress-bar", role: "progressbar", style: { width: `${this.value}%` }, "aria-valuenow": this.value, "aria-valuemin": "0", "aria-valuemax": "100", "aria-label": "progress bar" })), h("div", { key: '3d31e5265359ddb21a8517ccdb6408c3a0503478', class: `${fullwidth}` }, h("span", { key: '0965abaec5dc0737d04ddc05da7b4a6423fe6bb1', class: "progress-element-label" }, this.label), this.showstep && h("span", { key: '1f8b48a83db7c3d70f4a7756a43969d0782ee35a', class: "progress-element-step" }, valueRound, "/", this.numbersteps))));
+        return (h(Host, { key: '029ef77c8c30790505626a065e0382fd96de48f3', class: "progress-element" }, h("div", { key: '6abaec562d06e1550cc4a81708625a298b701a58', class: `${light} progress-${this.color} ${animation}` }, h("div", { key: '155e66309824c5cf5af2bab1b8c5984d7ad69e24', class: "progress-bar", role: "progressbar", style: { width: `${this.value}%` }, "aria-valuenow": this.value, "aria-valuemin": "0", "aria-valuemax": "100", "aria-label": "progress bar" })), h("div", { key: '6054fb408c776fb258c7889bab50b8d0c4cb158f', class: `${fullwidth}` }, h("span", { key: '90dc79f84351f7845dd17a8c2024d42f12ca6585', class: "progress-element-label" }, this.label), this.showstep && h("span", { key: 'd316a662a44d0c44250c26a1ae81d106f8914d43', class: "progress-element-step" }, valueRound, "/", this.numbersteps))));
     }
 };
 ProgressBar.style = RoadProgressStyle0;

package/dist/esm/road-radio-card.entry.js

@@ -0,0 +1,69 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-8dc34f94.js';
+import './polyfill-24c8f970.js';
+
+const radioCardCss = ".radio-card.sc-road-radio-card{display:flex;align-items:flex-start;gap:0.75rem;padding:1rem;border:1px solid var(--road-outline);border-radius:0.5rem;transition:border-color 0.3s, background-color 0.3s;cursor:pointer}.radio-card-selected.sc-road-radio-card{outline:2px solid var(--road-outline-variant);outline-offset:-2px}.radio-card-disabled.sc-road-radio-card{outline:none;cursor:not-allowed;background-color:var(--road-surface-disabled);border:1px solid var(--road-outline)}.radio-card.sc-road-radio-card:hover{border-color:var(--road-outline-variant)}.radio-card-disabled.radio-card.sc-road-radio-card:hover{border:1px solid var(--road-outline)}.form-radio-input.sc-road-radio-card{position:absolute;opacity:0;pointer-events:none}.radio-card-label.sc-road-radio-card{font-weight:bold}.sc-road-radio-card-h{position:relative;display:block;margin-bottom:1.5rem;font-family:var(--road-font, sans-serif);font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface)}.form-radio-inline.sc-road-radio-card-h{display:inline-flex;flex-wrap:wrap;align-items:center;margin-right:1.5rem;margin-bottom:0}.form-radio-input.sc-road-radio-card{position:absolute;z-index:-1;width:20px;height:20px;opacity:0}.form-radio-input.sc-road-radio-card:disabled{z-index:1;width:100%;cursor:not-allowed}.form-radio-label.sc-road-radio-card{position:relative;display:inline-flex;align-items:flex-start;margin:0;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-radio-label.sc-road-radio-card::before{box-sizing:border-box;display:block;flex-shrink:0;width:1.25rem;height:1.25rem;margin:0.1rem 0.75rem 0 0;content:\"\";background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:50%;transition:border-color 0.2s ease-in-out}.form-radio-label-span.sc-road-radio-card{margin-left:var(--road-spacing-02);color:var(--road-on-surface-weak)}.form-radio-label.sc-road-radio-card::after{position:absolute;top:0.285rem;left:0.1875rem;box-sizing:border-box;display:block;width:0.875rem;height:0.875rem;content:\"\";background:var(--road-on-surface-disabled);border:none;border-radius:50%;transition:background 0.2s ease-in-out, transform 0.2s ease-in-out;transform:scale(0);transform-origin:50% 50%}@media (hover: hover){.form-radio-input.sc-road-radio-card~.form-radio-label.sc-road-radio-card:hover::before{border-color:var(--road-input-surface)}.form-radio-input.sc-road-radio-card:checked~.form-radio-label.sc-road-radio-card:hover::after{background:var(--road-input-surface-variant)}.form-radio-input.sc-road-radio-card:checked:disabled~.form-radio-label.sc-road-radio-card:hover::after{background:var(--road-on-surface-disabled)}}.form-radio-input.sc-road-radio-card:checked~.form-radio-label.sc-road-radio-card::after{background:var(--road-input-surface);opacity:1;transform:scale(1)}.form-radio-input.focus-visible.sc-road-radio-card~.form-radio-label.sc-road-radio-card::before{box-shadow:0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-input-outline-variant)}.form-radio-input.focus-visible.sc-road-radio-card:checked~.form-radio-label.sc-road-radio-card::after{background:var(--road-primary-700)}.form-radio-input.sc-road-radio-card:disabled~.form-radio-label.sc-road-radio-card,.form-radio-input[readonly].sc-road-radio-card~.form-radio-label.sc-road-radio-card{cursor:not-allowed}.form-radio-input.sc-road-radio-card:disabled~.form-radio-label.sc-road-radio-card::before,.form-radio-input[readonly].sc-road-radio-card~.form-radio-label.sc-road-radio-card::before{background:var(--road-on-surface-disabled);border:none}.form-radio-input.sc-road-radio-card:disabled~.form-radio-label.sc-road-radio-card::after,.form-radio-input[readonly].sc-road-radio-card~.form-radio-label.sc-road-radio-card::after{background:var(--road-on-surface-disabled)}.form-radio-input.is-invalid.sc-road-radio-card~.form-radio-label.sc-road-radio-card::before{border-color:var(--road-danger-outline)}.form-radio-inverse.sc-road-radio-card{display:flex;flex-direction:row-reverse;justify-content:space-between}.form-radio-inverse.sc-road-radio-card::before{margin:0 0 0 1rem}.form-radio-inverse.sc-road-radio-card::after{right:0.1875rem;left:auto}";
+const RoadRadioCardStyle0 = radioCardCss;
+
+const RadioCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.roadfocus = createEvent(this, "roadfocus", 7);
+        this.roadblur = createEvent(this, "roadblur", 7);
+        this.roadchange = createEvent(this, "roadchange", 7);
+        this.disabled = false;
+        this.selected = false;
+        this.inline = true;
+        this.isSelected = false;
+        this.onFocus = () => {
+            this.roadfocus.emit();
+        };
+        this.onBlur = () => {
+            this.roadblur.emit();
+        };
+        this.onClick = () => {
+            var _a;
+            if (this.disabled)
+                return;
+            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.click();
+            this.roadchange.emit(this.value);
+            window.dispatchEvent(new CustomEvent('road-radio-selected', {
+                detail: {
+                    name: this.name,
+                    value: this.value,
+                },
+            }));
+        };
+        this.onRadioSelected = (event) => {
+            const { name, value } = event.detail;
+            if (name === this.name) {
+                this.isSelected = value === this.value;
+            }
+        };
+    }
+    componentWillLoad() {
+        this.radioId = `road-radio-${RadioCard.idCounter++}`;
+        if (!this.name) {
+            this.name = this.radioId;
+        }
+        if (!this.label) {
+            this.label = `${this.radioId}-label`;
+        }
+    }
+    handleRadioSelected(event) {
+        this.onRadioSelected(event);
+    }
+    render() {
+        const labelId = `${this.radioId}-label`;
+        const inlineClass = this.inline ? 'form-radio-inline' : '';
+        const selectedClass = this.isSelected || this.selected ? 'radio-card-selected' : '';
+        const disabledClass = this.disabled ? 'radio-card-disabled' : '';
+        return (h(Host, { key: '92d10e0e857fa618b651d09d684760345ebcab09', class: `form-radio ${inlineClass}` }, h("div", { key: 'fcdabc5a9f337d8bd1e8a1bf7f3918bd65fa3b61', class: `radio-card ${selectedClass}  ${disabledClass}`, onClick: this.onClick }, h("input", { key: 'cab960932990c7b41e248fd45e11f05f0ba946ad', ref: el => this.inputEl = el, class: "form-radio-input", type: "radio", id: this.radioId, name: this.name, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, checked: this.isSelected || this.selected, "aria-labelledby": labelId, value: this.value, onFocus: this.onFocus, onBlur: this.onBlur, onChange: () => { } }), h("label", { key: '9fbd563bb0d0ceb76374f8fdd961a0ae945cfd3b', class: "form-radio-label", htmlFor: this.radioId, id: labelId }, h("div", { key: 'a66f46c0b7d566492eb791a14a1dc5f37fe1d98c', class: "slot-wrapper" }, h("slot", { key: '2571e75dc92853a6f14ddb8c7c829ce4d3537ae5' }))))));
+    }
+    get el() { return getElement(this); }
+};
+RadioCard.idCounter = 0;
+RadioCard.style = RoadRadioCardStyle0;
+
+export { RadioCard as road_radio_card };
+
+//# sourceMappingURL=road-radio-card.entry.js.map

package/dist/esm/road-radio-card.entry.js.map

@@ -0,0 +1 @@
+{"file":"road-radio-card.entry.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,wlIAAwlI,CAAC;AAC9mI,4BAAe,YAAY;;MCkBd,SAAS;IALtB;;;;;QAaU,aAAQ,GAAY,KAAK,CAAC;QAC1B,aAAQ,GAAY,KAAK,CAAC;QAG1B,WAAM,GAAY,IAAI,CAAC;QAEtB,eAAU,GAAY,KAAK,CAAC;QAkB7B,YAAO,GAAG;YAChB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;SACvB,CAAC;QAEM,WAAM,GAAG;YACf,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;SACtB,CAAC;QAEM,YAAO,GAAG;;YAChB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,MAAA,IAAI,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;YACtB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAEjC,MAAM,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,qBAAqB,EAAE;gBAC1D,MAAM,EAAE;oBACN,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,KAAK,EAAE,IAAI,CAAC,KAAK;iBAClB;aACF,CAAC,CAAC,CAAC;SACL,CAAC;QAEM,oBAAe,GAAG,CAAC,KAAkB;YAC3C,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;YAErC,IAAI,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;gBACtB,IAAI,CAAC,UAAU,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;aACxC;SACF,CAAC;KAwCH;IA9EC,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,cAAc,SAAS,CAAC,SAAS,EAAE,EAAE,CAAC;QACrD,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC;SAC1B;QACD,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,OAAO,QAAQ,CAAC;SACtC;KACF;IAiCD,mBAAmB,CAAC,KAAkB;QACpC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;KAC7B;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,GAAG,IAAI,CAAC,OAAO,QAAQ,CAAC;QACxC,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,GAAG,mBAAmB,GAAG,EAAE,CAAC;QAC3D,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,GAAG,qBAAqB,GAAG,EAAE,CAAC;QACpF,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,GAAG,qBAAqB,GAAG,EAAE,CAAC;QAEjE,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,cAAc,WAAW,EAAE,IACtC,4DAAK,KAAK,EAAE,cAAc,aAAa,KAAK,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IAChF,8DACE,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,OAAO,GAAG,EAAE,EAC5B,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,mBACR,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EACjD,OAAO,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,qBACxB,OAAO,EACxB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,SAAQ,GAClB,EACF,8DAAO,KAAK,EAAC,kBAAkB,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,EAAE,OAAO,IAChE,4DAAK,KAAK,EAAC,cAAc,IACvB,8DAAQ,CACJ,CACA,CACJ,CACD,EACP;KACH;;;AA9Fc,mBAAS,GAAG,CAAH,CAAK;;;;;","names":[],"sources":["src/components/radio-card/radio-card.css?tag=road-radio-card&encapsulation=scoped","src/components/radio-card/radio-card.tsx"],"sourcesContent":["/*\n * Radio Card\n *\n * For accessibility, we provide a style for focus only on Tab,\n * for that add the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n *\n * Index\n * - Radio\n * - Label\n * - Error\n * - Position\n */\n\n .radio-card {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  padding: 1rem;\n  border: 1px solid var(--road-outline);\n  border-radius: 0.5rem;\n  transition: border-color 0.3s, background-color 0.3s;\n  cursor: pointer;\n}\n\n.radio-card-selected {\n  outline: 2px solid var(--road-outline-variant);\n  outline-offset: -2px;\n}\n\n.radio-card-disabled {\n  outline: none;\n  cursor: not-allowed;\n  background-color: var(--road-surface-disabled);\n  border: 1px solid var(--road-outline);\n}\n\n.radio-card:hover {\n  border-color: var(--road-outline-variant);\n}\n\n.radio-card-disabled.radio-card:hover {\n  border: 1px solid var(--road-outline);\n}\n\n\n\n.form-radio-input {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.radio-card-label {\n  font-weight: bold;\n}\n\n\n/* RADIO\n -------------------- */\n\n:host {\n  position: relative;\n  display: block;\n  margin-bottom: 1.5rem;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-body-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n}\n\n/**\n * Inline radio\n */\n\n:host(.form-radio-inline) {\n  display: inline-flex;\n  flex-wrap: wrap;\n  align-items: center;\n  margin-right: 1.5rem;\n  margin-bottom: 0;\n}\n\n/**\n * Hide input\n */\n\n.form-radio-input {\n  position: absolute;\n  z-index: -1;\n  width: 20px;\n  height: 20px;\n  opacity: 0;\n}\n\n.form-radio-input:disabled {\n  z-index: 1;\n  width: 100%;\n  cursor: not-allowed;\n}\n\n/* LABEL\n -------------------- */\n\n.form-radio-label {\n  position: relative;\n  display: inline-flex;\n  align-items: flex-start;\n  margin: 0;\n  cursor: pointer;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.form-radio-label::before {\n  box-sizing: border-box;\n  display: block;\n  flex-shrink: 0;\n  width: 1.25rem;\n  height: 1.25rem;\n  margin: 0.1rem 0.75rem 0 0;\n  content: \"\";\n  background: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 50%;\n  transition: border-color 0.2s ease-in-out;\n}\n\n.form-radio-label-span {\n  margin-left: var(--road-spacing-02);\n  color: var(--road-on-surface-weak);\n}\n\n.form-radio-label::after {\n  position: absolute;\n  top: 0.285rem;\n  left: 0.1875rem;\n  box-sizing: border-box;\n  display: block;\n  width: 0.875rem;\n  height: 0.875rem;\n  content: \"\";\n  background: var(--road-on-surface-disabled);\n  border: none;\n  border-radius: 50%;\n  transition: background 0.2s ease-in-out, transform 0.2s ease-in-out;\n  transform: scale(0);\n  transform-origin: 50% 50%;\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .form-radio-input ~ .form-radio-label:hover::before {\n    border-color: var(--road-input-surface);\n  }\n\n  .form-radio-input:checked ~ .form-radio-label:hover::after {\n    background: var(--road-input-surface-variant);\n  }\n\n  .form-radio-input:checked:disabled~ .form-radio-label:hover::after {\n    background: var(--road-on-surface-disabled);\n  }\n}\n\n/**\n * Checked state\n */\n\n.form-radio-input:checked ~ .form-radio-label::after {\n  background: var(--road-input-surface);\n  opacity: 1;\n  transform: scale(1);\n}\n\n/**\n * Focus on Tab\n */\n\n.form-radio-input.focus-visible ~ .form-radio-label::before {\n  box-shadow: 0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-input-outline-variant);\n}\n\n.form-radio-input.focus-visible:checked ~ .form-radio-label::after {\n  background: var(--road-primary-700);\n}\n\n/**\n * Disabled state\n */\n\n.form-radio-input:disabled ~ .form-radio-label,\n.form-radio-input[readonly] ~ .form-radio-label {\n  cursor: not-allowed;\n}\n\n.form-radio-input:disabled ~ .form-radio-label::before,\n.form-radio-input[readonly] ~ .form-radio-label::before {\n  background: var(--road-on-surface-disabled);\n  border: none;\n}\n\n.form-radio-input:disabled ~ .form-radio-label::after,\n.form-radio-input[readonly] ~ .form-radio-label::after {\n  background: var(--road-on-surface-disabled);\n}\n\n/* ERROR\n -------------------- */\n\n.form-radio-input.is-invalid ~ .form-radio-label::before {\n  border-color: var(--road-danger-outline);\n}\n\n/* POSITION\n -------------------- */\n\n.form-radio-inverse {\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: space-between;\n}\n\n.form-radio-inverse::before {\n  margin: 0 0 0 1rem;\n}\n\n.form-radio-inverse::after {\n  right: 0.1875rem;\n  left: auto;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n} from '@stencil/core';\nimport './../../utils/polyfill';\n\n\n@Component({\n  tag: 'road-radio-card',\n  styleUrl: 'radio-card.css',\n  scoped: true,\n})\nexport class RadioCard {\n  private inputEl?: HTMLInputElement;\n\n  @Element() el!: HTMLRoadRadioCardElement;\n\n  private static idCounter = 0;\n\n  @Prop() name?: string;\n  @Prop() disabled: boolean = false;\n  @Prop() selected: boolean = false;\n  @Prop() value?: any | null;\n  @Prop() label?: string;\n  @Prop() inline: boolean = true;\n\n  @State() isSelected: boolean = false;\n  @State() radioId!: string;\n\n  @Event() roadfocus!: EventEmitter<void>;\n  \n  @Event() roadblur!: EventEmitter<void>;\n  @Event() roadchange!: EventEmitter<any>;\n\n  componentWillLoad() {\n    this.radioId = `road-radio-${RadioCard.idCounter++}`;\n    if (!this.name) {\n      this.name = this.radioId;\n    }\n    if (!this.label) {\n      this.label = `${this.radioId}-label`;\n    }\n  }\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n  };\n\n  private onClick = () => {\n    if (this.disabled) return;\n\n    this.inputEl?.click();\n    this.roadchange.emit(this.value);\n\n    window.dispatchEvent(new CustomEvent('road-radio-selected', {\n      detail: {\n        name: this.name,\n        value: this.value,\n      },\n    }));\n  };\n\n  private onRadioSelected = (event: CustomEvent) => {\n    const { name, value } = event.detail;\n\n    if (name === this.name) {\n      this.isSelected = value === this.value;\n    }\n  };\n\n  @Listen('road-radio-selected', { target: 'window' })\n  handleRadioSelected(event: CustomEvent) {\n    this.onRadioSelected(event);\n  }\n\n  render() {\n    const labelId = `${this.radioId}-label`;\n    const inlineClass = this.inline ? 'form-radio-inline' : '';\n    const selectedClass = this.isSelected || this.selected ? 'radio-card-selected' : '';\n    const disabledClass = this.disabled ? 'radio-card-disabled' : '';\n\n    return (\n      <Host class={`form-radio ${inlineClass}`}>\n        <div class={`radio-card ${selectedClass}  ${disabledClass}`} onClick={this.onClick}>\n          <input\n            ref={el => this.inputEl = el}\n            class=\"form-radio-input\"\n            type=\"radio\"\n            id={this.radioId}\n            name={this.name}\n            disabled={this.disabled}\n            aria-disabled={this.disabled ? 'true' : undefined}\n            checked={this.isSelected || this.selected}\n            aria-labelledby={labelId}\n            value={this.value}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onChange={() => {}}\n          />\n          <label class=\"form-radio-label\" htmlFor={this.radioId} id={labelId}>\n            <div class=\"slot-wrapper\">\n              <slot />\n            </div>\n          </label>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/road-radio-group.entry.js

@@ -44,9 +44,16 @@ const RadioGroup = class {
         };
     }
     valueChanged(value) {
+        this.updateRadios();
         this.roadchange.emit({ value });
         this.roadChange.emit({ value });
     }
+    updateRadios() {
+        const radios = this.el.querySelectorAll('road-radio-card');
+        radios.forEach(radio => {
+            radio.checked = (radio.getAttribute('value') === this.value);
+        });
+    }
     errorChanged() {
         if (this.error !== undefined && this.error !== '') {
             this.el.querySelectorAll('road-radio').forEach(item => item.error = true);
@@ -63,7 +70,7 @@ const RadioGroup = class {
     render() {
         const labelId = `${this.radioGroupId}-label`;
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-        return (h(Host, { key: '6c3948ad9428d3ae8aeb411a776419784831c714', role: "radiogroup", class: `form-group ${isInvalidClass}`, "aria-label": this.ariaLabel, onClick: this.onClick }, this.label && h("p", { key: '943199c6a4eda68c82245660e81ba04032a62209', class: "text-content", id: labelId }, this.label, " ", this.asterisk && h("span", { key: '772ae18837d54d6aa313e3a8791bc715f66c183d', class: "asterisk" }, "*")), h("slot", { key: '7f4a8c9ec3a201f695a6731467c138abf587e52f' }), this.error && this.error !== '' && h("p", { key: '9149bc1981323584219a13a392e77c8313f7fd58', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: 'a662d0e810e27d6392750d778e13573ed365e358', class: "helper" }, this.helper)));
+        return (h(Host, { key: 'c0b1fc909fda6bc68c01adf993b30807f18a0486', role: "radiogroup", class: `form-group ${isInvalidClass}`, "aria-label": this.ariaLabel, onClick: this.onClick }, this.label && h("p", { key: 'f23d2998fd001549361d2540a9af9fac62e0754e', class: "text-content", id: labelId }, this.label, " ", this.asterisk && h("span", { key: '299ccd95c783db7768589f92db60ba14b3c1026e', class: "asterisk" }, "*")), h("slot", { key: '8ab9f52912fab8c99c610b4ffb2f7f316d9c8e21' }), this.error && this.error !== '' && h("p", { key: '9ff0060878567d4b45487f5986e46d57a11c2876', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: 'd081883688e4279ec03663cf595a555f7e9e8304', class: "helper" }, this.helper)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/road-radio-group.entry.js.map

@@ -1 +1 @@
-{"file":"road-radio-group.entry.js","mappings":"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","names":[],"sources":["src/components/radio-group/radio-group.css?tag=road-radio-group&encapsulation=scoped","src/components/radio-group/radio-group.tsx"],"sourcesContent":["/*\n * Radio Group\n *\n * Index\n * - Radio Group\n * - Asterisk\n * - Error\n */\n\n/**\n * Error message for inline radio can only\n * be provided by adding a class\n * .is-invalid on the .form-group of this radio\n */\n\n/**\n * @prop --asterisk-color: color of the asterisk\n */\n\n/* RADIO\n -------------------- */\n\n:host {\n  --asterisk-color: var(--road-on-surface);\n\n  position: relative;\n  display: block;\n  margin-bottom: 1rem;\n}\n\n\n/* ASTERISK\n-------------------- */\n\n.asterisk {\n  color: var(--asterisk-color);\n}\n\n/* ERROR\n-------------------- */\n\n:host(.is-invalid) .invalid-feedback {\n  display: block;\n}\n\n.invalid-feedback {\n  display: none;\n  flex: 0 0 100%;\n  width: 100%;\n  margin: 0.5rem 0 0;\n  font-size: var(--road-font-size-12);\n  color: var(--road-on-danger-surface);\n}\n\n/* HELPER\n -------------------- */\n\n.helper {\n  margin-top: 0.5rem;\n  font-size: var(--road-font-size-12);\n  color: var(--road-on-surface-weak);\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n/**\n * @slot  - Used to add multiple radio components.\n */\n\n@Component({\n  tag: 'road-radio-group',\n  styleUrl: 'radio-group.css',\n  scoped: true,\n})\nexport class RadioGroup {\n\n  @Element() el!: HTMLRoadRadioGroupElement;\n\n  /**\n   * The id of checkbox\n   */\n  @Prop() radioGroupId: string = `road-radio-group-${radioGroupIds++}`;\n\n  /**\n   * If `true`, the radios can be deselected.\n   */\n  @Prop() allowEmptySelection = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.radioGroupId;\n\n  /**\n   * the value of the radio group.\n   */\n  @Prop({ mutable: true }) value?: any | null;\n\n  /**\n   * Label for the field\n   */\n  @Prop() label?: string;\n\n  /**\n   * add an asterisk to the label of the field\n   */\n   @Prop() asterisk?: boolean = false;\n\n  /**\n   * Label for the field\n   */\n  @Prop({reflect: true}) ariaLabel: string = `${this.radioGroupId}-label`;\n\n  /**\n   * Error message for the radio group\n   */\n  @Prop({ mutable: true }) error?: string;\n\n  /**\n   * Helper message for the radio group\n   */\n  @Prop() helper?: string;\n\n  @Watch('value')\n  valueChanged(value: any | undefined) {\n    this.roadchange.emit({ value });\n    this.roadChange.emit({ value });\n  }\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n\n  private onClick = (ev: Event) => {\n    const selectedRadio = ev.target && (ev.target as HTMLElement).closest('road-radio');\n    if (selectedRadio) {\n      const currentValue = this.value;\n      const newValue = (selectedRadio as HTMLRoadRadioElement).value;\n      if (newValue !== currentValue) {\n        this.value = newValue;\n      } else if (this.allowEmptySelection) {\n        this.value = undefined;\n      }\n      this.error = undefined;\n    }\n  };\n\n  @Watch('error')\n  errorChanged() {\n    if (this.error !== undefined && this.error !== '') {\n      this.el.querySelectorAll('road-radio').forEach(item => item.error = true);\n    } else {\n      this.el.querySelectorAll('road-radio').forEach(item => item.error = false);\n    }\n  }\n\n  componentWillLoad() {\n    if (this.error !== undefined && this.error !== '') {\n      this.el.querySelectorAll('road-radio').forEach(item => item.error = true);\n    }\n  }\n\n  render() {\n    const labelId = `${this.radioGroupId}-label`;\n    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host\n        role=\"radiogroup\"\n        class={`form-group ${isInvalidClass}`}\n        aria-label={this.ariaLabel}\n        onClick={this.onClick}\n      >\n        {this.label && <p class=\"text-content\" id={labelId}>{this.label} {this.asterisk && <span class=\"asterisk\">*</span>}</p>}\n        <slot/>\n        {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n        {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n      </Host>\n    );\n  }\n}\n\nlet radioGroupIds = 0;\n"],"version":3}
+{"file":"road-radio-group.entry.js","mappings":"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","names":[],"sources":["src/components/radio-group/radio-group.css?tag=road-radio-group&encapsulation=scoped","src/components/radio-group/radio-group.tsx"],"sourcesContent":["/*\n * Radio Group\n *\n * Index\n * - Radio Group\n * - Asterisk\n * - Error\n */\n\n/**\n * Error message for inline radio can only\n * be provided by adding a class\n * .is-invalid on the .form-group of this radio\n */\n\n/**\n * @prop --asterisk-color: color of the asterisk\n */\n\n/* RADIO\n -------------------- */\n\n:host {\n  --asterisk-color: var(--road-on-surface);\n\n  position: relative;\n  display: block;\n  margin-bottom: 1rem;\n}\n\n\n/* ASTERISK\n-------------------- */\n\n.asterisk {\n  color: var(--asterisk-color);\n}\n\n/* ERROR\n-------------------- */\n\n:host(.is-invalid) .invalid-feedback {\n  display: block;\n}\n\n.invalid-feedback {\n  display: none;\n  flex: 0 0 100%;\n  width: 100%;\n  margin: 0.5rem 0 0;\n  font-size: var(--road-font-size-12);\n  color: var(--road-on-danger-surface);\n}\n\n/* HELPER\n -------------------- */\n\n.helper {\n  margin-top: 0.5rem;\n  font-size: var(--road-font-size-12);\n  color: var(--road-on-surface-weak);\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n/**\n * @slot  - Used to add multiple radio components.\n */\n\n@Component({\n  tag: 'road-radio-group',\n  styleUrl: 'radio-group.css',\n  scoped: true,\n})\nexport class RadioGroup {\n\n  @Element() el!: HTMLRoadRadioGroupElement;\n\n  /**\n   * The id of checkbox\n   */\n  @Prop() radioGroupId: string = `road-radio-group-${radioGroupIds++}`;\n\n  /**\n   * If `true`, the radios can be deselected.\n   */\n  @Prop() allowEmptySelection = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.radioGroupId;\n\n  /**\n   * the value of the radio group.\n   */\n  @Prop({ mutable: true }) value?: any | null;\n\n  /**\n   * Label for the field\n   */\n  @Prop() label?: string;\n\n  /**\n   * add an asterisk to the label of the field\n   */\n   @Prop() asterisk?: boolean = false;\n\n  /**\n   * Label for the field\n   */\n  @Prop({reflect: true}) ariaLabel: string = `${this.radioGroupId}-label`;\n\n  /**\n   * Error message for the radio group\n   */\n  @Prop({ mutable: true }) error?: string;\n\n  /**\n   * Helper message for the radio group\n   */\n  @Prop() helper?: string;\n\n  @Watch('value')\n  valueChanged(value: any | undefined) {\n    this.updateRadios();\n    this.roadchange.emit({ value });\n    this.roadChange.emit({ value });\n  }\n  \n  private updateRadios() {\n    const radios = this.el.querySelectorAll('road-radio-card');\n    radios.forEach(radio => {\n      (radio as any).checked = (radio.getAttribute('value') === this.value);\n    });\n  }\n  \n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n\n  private onClick = (ev: Event) => {\n    const selectedRadio = ev.target && (ev.target as HTMLElement).closest('road-radio');\n    if (selectedRadio) {\n      const currentValue = this.value;\n      const newValue = (selectedRadio as HTMLRoadRadioElement).value;\n      if (newValue !== currentValue) {\n        this.value = newValue;\n      } else if (this.allowEmptySelection) {\n        this.value = undefined;\n      }\n      this.error = undefined;\n    }\n  };\n\n  @Watch('error')\n  errorChanged() {\n    if (this.error !== undefined && this.error !== '') {\n      this.el.querySelectorAll('road-radio').forEach(item => item.error = true);\n    } else {\n      this.el.querySelectorAll('road-radio').forEach(item => item.error = false);\n    }\n  }\n\n  componentWillLoad() {\n    if (this.error !== undefined && this.error !== '') {\n      this.el.querySelectorAll('road-radio').forEach(item => item.error = true);\n    }\n  }\n\n  render() {\n    const labelId = `${this.radioGroupId}-label`;\n    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host\n        role=\"radiogroup\"\n        class={`form-group ${isInvalidClass}`}\n        aria-label={this.ariaLabel}\n        onClick={this.onClick}\n      >\n        {this.label && <p class=\"text-content\" id={labelId}>{this.label} {this.asterisk && <span class=\"asterisk\">*</span>}</p>}\n        <slot/>\n        {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n        {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n      </Host>\n    );\n  }\n}\n\nlet radioGroupIds = 0;\n"],"version":3}

package/dist/esm/road-radio.entry.js

@@ -81,7 +81,7 @@ const Radio = class {
         const inverseClass = this.inverse && 'form-radio-inverse';
         const isInvalidClass = this.error ? 'is-invalid' : '';
         const inlineClass = this.inline ? 'form-radio-inline' : '';
-        return (h(Host, { key: 'fbec228f3266ccdef92e82ee29b7aa9f604f603a', class: `form-radio ${inlineClass}` }, h("input", { key: '4493e3345ad10d983dab715035a77fe66025e3ba', class: `form-radio-input ${isInvalidClass}`, type: "radio", id: this.radioId, name: this.name, required: this.required, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, checked: this.checked, "aria-checked": `${this.checked}`, "aria-labelledby": labelId, value: this.value, onFocus: this.onFocus, onBlur: this.onBlur }), h("label", { key: '85b6bc778ca441e37bd47a51227307051a9bc80a', class: `form-radio-label ${inverseClass}`, id: labelId, htmlFor: this.radioId }, this.label, " ", h("span", { key: '22b184045be0995831f3b34065d0e8d97cf90cdc', class: "form-radio-label-span" }, this.secondaryLabel))));
+        return (h(Host, { key: '6543b37f5327ae2665e1fca3c9d91412e2581ef9', class: `form-radio ${inlineClass}` }, h("input", { key: '669e121aec0cfc722419d051204d350450d6d4e5', class: `form-radio-input ${isInvalidClass}`, type: "radio", id: this.radioId, name: this.name, required: this.required, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, checked: this.checked, "aria-checked": `${this.checked}`, "aria-labelledby": labelId, value: this.value, onFocus: this.onFocus, onBlur: this.onBlur }), h("label", { key: 'd3056e531cc3826a3291af9a95585c6620b86745', class: `form-radio-label ${inverseClass}`, id: labelId, htmlFor: this.radioId }, this.label, " ", h("span", { key: '4d1242c623b26517d9f88c6962335ea6ce364abf', class: "form-radio-label-span" }, this.secondaryLabel))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/road-range.entry.js

@@ -86,14 +86,14 @@ const Range = class {
     render() {
         const value = this.getValue();
         const datalist = this.showLabels !== undefined ? `tickmarks` : "";
-        return (h(Host, { key: 'b2c9aa060ae841e99ba5751c128e8df1fa257277', tabindex: "0", class: { disabled: this.disabled } }, h("div", { key: 'b7696f36afd6083f61b0498ff80b911743f6713e', class: "form-group d-flex align-items-end" }, this.showTick && (h("road-icon", { key: '9c09977ad8ea7b60380cd0b245b2b78df75a851e', icon: navigationAddLessSolid, class: "mr-8", size: "sm" })), h("div", { key: 'dbcf378a5ce259394cc0ed12f6437100292aa015', class: "form-range", style: {
+        return (h(Host, { key: 'f1486d106b3d7013b3e6b1d99d646c70127dbbdd', tabindex: "0", class: { disabled: this.disabled } }, h("div", { key: 'fd44d0ce903ba469fc2142a19b049676fddd2005', class: "form-group d-flex align-items-end" }, this.showTick && (h("road-icon", { key: '723c5da5321440524ffb5cf69ed2d71196996541', icon: navigationAddLessSolid, class: "mr-8", size: "sm" })), h("div", { key: '4653394e0dcfa7d452236f57bd2052ac9928007f', class: "form-range", style: {
                 "--min": this.min,
                 "--max": this.max,
                 "--value": value,
                 "--background-color": this.disabled
                     ? "var(--road-surface-disabled)"
                     : "initial",
-            } }, this.showValue && h("output", { key: '11fbbec081e1ae2b86a5ad5d387b91f26104d6e8' }), this.showLabels && h("slot", { key: '1dd932c4e17968e794370c5468e13fed1b84df25', name: "datalist" }), h("input", { key: 'afe1c2ef6f8006e2c0dcbd3cbe14103393a57a4a', type: "range", class: "form-range-input", id: this.rangeId, min: this.min, max: this.max, value: value, onInput: this.onInput, list: datalist, "aria-label": "Valeur", tabindex: "0", disabled: this.disabled }), h("label", { key: '6f2bca3f10bdc5dcadf6756bfe953afffe4bf2c7', class: "form-range-label" }, "Valeur"), h("div", { key: '065f974aa51980322402a0c3d0c168a96c076ecf', class: "form-range-progress" })), this.showTick && (h("road-icon", { key: '283d46c77a585064840ee91a861fbd2c0bdaa5aa', icon: navigationAddMoreSolid, class: "ml-8", size: "sm" })))));
+            } }, this.showValue && h("output", { key: '2d3504f149aeba0bca77b7a7d03ac3fb9f3267b1' }), this.showLabels && h("slot", { key: '45c91307a659459919e67f022766bf98189a4511', name: "datalist" }), h("input", { key: '0cc864289e5c44b2dac2521af90b00dfa1d0625c', type: "range", class: "form-range-input", id: this.rangeId, min: this.min, max: this.max, value: value, onInput: this.onInput, list: datalist, "aria-label": "Valeur", tabindex: "0", disabled: this.disabled }), h("label", { key: '97c50d5a81be438d34f23223ef1e5acdafcbc1b2', class: "form-range-label" }, "Valeur"), h("div", { key: '92568d77bdbb044f66f0f5557ba81673836bd433', class: "form-range-progress" })), this.showTick && (h("road-icon", { key: '2587580ec2c19de6d2cf799e4a39bd02c555d19a', icon: navigationAddMoreSolid, class: "ml-8", size: "sm" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/road-rating.entry.js

@@ -42,7 +42,7 @@ const Rating = class {
         const sizeRatingStarsClass = this.size !== undefined ? `rating-stars rating-stars--${this.size}` : 'rating-stars';
         const sizeRatingNumberClass = this.size !== undefined ? `rating-number rating-number--${this.size}` : 'rating-number';
         const readOnly = this.readonly == true ? `readonly` : '';
-        return (h(Host, { key: 'd81a376cdf8e7a268335c62cadff3a3a5945c334' }, h("div", { key: 'c7f9a63a11399a60d3daa6e3f8f11b8b4f640e96', class: `${sizeRatingStarsClass}` }, [...Array(rate)].map(() => h("road-icon", { icon: star, size: "sm", color: "warning" })), [...Array(rateDecimale)].map(() => h("road-icon", { icon: starHalfColor, size: "sm", class: "rating-star" })), [...Array(5 - rate - rateDecimale)].map(() => h("road-icon", { icon: star, size: "sm", class: "rating-star" }))), this.readonly == false && this.showreviews && h("a", { key: '5b1a38a0f8fdabe757a79f7b5000481d03d8225e', class: `${sizeRatingNumberClass}`, href: this.url }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")"), this.readonly == true && this.showreviews && h("road-label", { key: '337a9e94914d57278d8d15c8889b258bff8ea751', class: `${sizeRatingNumberClass} ${readOnly}` }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")")));
+        return (h(Host, { key: '85efd8ef2ccfcecd3740e72a5ba7ce4760e0d9d6' }, h("div", { key: 'eab49904c7777e7f760d8ea79d970a76f0e1e32d', class: `${sizeRatingStarsClass}` }, [...Array(rate)].map(() => h("road-icon", { icon: star, size: "sm", color: "warning" })), [...Array(rateDecimale)].map(() => h("road-icon", { icon: starHalfColor, size: "sm", class: "rating-star" })), [...Array(5 - rate - rateDecimale)].map(() => h("road-icon", { icon: star, size: "sm", class: "rating-star" }))), this.readonly == false && this.showreviews && h("a", { key: 'd63c93743802e7fd5cb49c972bc39802eb6ee586', class: `${sizeRatingNumberClass}`, href: this.url }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")"), this.readonly == true && this.showreviews && h("road-label", { key: '57ca56a99dfa88b79b242a6b1ab92c08596bd0a8', class: `${sizeRatingNumberClass} ${readOnly}` }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")")));
     }
 };
 Rating.style = RoadRatingStyle0;

package/dist/esm/road-segmented-button-bar.entry.js

@@ -24,7 +24,7 @@ const ButtonBar = class {
         this.selectedTabChanged();
     }
     render() {
-        return (h(Host, { key: 'cbe94587012819876109399d72bb1715ac334a9f', role: "tablist" }, h("slot", { key: 'a1ba2feec5c649ea44f6b534a10a18fc738fede5' })));
+        return (h(Host, { key: 'afd642615f117aadf941aa07e1006b87bc7af6ee', role: "tablist" }, h("slot", { key: '331b574bb64568dc247cd9789232d4dffebec937' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/road-segmented-button.entry.js

@@ -55,10 +55,10 @@ const SegmentedButton = class {
     render() {
         const { tabIndex, selected, tab } = this;
         const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';
-        return (h(Host, { key: 'c94bfffcbff45b20dc349a3545bd195a95d68273', onClick: this.onClick, onKeyup: this.onKeyUp, role: "tab", tabindex: tabIndex, "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: '6433591d09a54719de64718201a2a51ad79ae28b', onClick: this.onClick, onKeyup: this.onKeyUp, role: "tab", tabindex: tabIndex, "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 'tab-selected': selected,
                 [`${sizeClass}`]: true,
-            } }, h("span", { key: '87ee95ccb7c44cfe7bff797d1b693f1ae4cf0ad7', tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, h("slot", { key: 'a6fd94b01bba4f71b3689f62a736050e7132add0' }))));
+            } }, h("span", { key: 'f3e0bf769c686b17171afe0130ac5e4736aa2ff4', tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, h("slot", { key: '496201687fa4e9138d1a817215c4c90255f7232c' }))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/road-segmented-buttons.entry.js

@@ -91,7 +91,7 @@ const Tabs = class {
         return Array.from(this.el.querySelectorAll('road-tab'));
     }
     render() {
-        return (h(Host, { key: '8e28299a9d4821c74d9e62b25b6b8ad72fac01da', onRoadSegmentedButtonClick: this.onTabClicked }, h("slot", { key: '2e154363be587d35480818a016f9bc8973709724', name: "top" }), h("slot", { key: '77044401892a3a9245eb9029178d82df516c7252' })));
+        return (h(Host, { key: '0fe1c4ddf4b2d269ed66c456e411263d8de29c3f', onRoadSegmentedButtonClick: this.onTabClicked }, h("slot", { key: 'da756417993e0157ed3a7a4dda96abcdfc3d6c05', name: "top" }), h("slot", { key: '37678b31b482735d1a1cc5ed2c37f4a8d4d7ee4b' })));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/road-select-filter.entry.js

@@ -1889,8 +1889,8 @@ const SelectFilter = class {
         const options = this.filteredOptions;
         const isActive = this.isActive ? 'true' : 'false';
         const notActive = this.isActive ? '' : 'not-active';
-        return (h(Host, { key: '4443cee3d13ade9d17d364aa112f7d13ac9a27d1', "is-active": isActive }, h("slot", { key: 'ed15841a9e665154f9988f76e8ac56c1788fd750' }), this.isOpen &&
-            h("ul", { key: '4ab28fd0fb00759e86e30fe14ded0de207dfde7c', class: `${notActive} select-filter-list`, role: "listbox", onMouseLeave: this.handleMouseLeave }, options.map((option, idx) => (h("li", { class: `select-filter-item ${this.activeIndex === idx ? 'active' : ''}`, role: "option", "aria-selected": this.activeIndex === idx ? 'true' : 'false', onClick: () => this.handleOptionClick(option.item.value, option.item.label.replace(/(<([^>]+)>)/gi, "")), onMouseOver: () => this.handleOptionMouseOver(idx), innerHTML: option.item.label, tabindex: this.activeIndex === idx ? 0 : -1 }))))));
+        return (h(Host, { key: 'ff1cb375e4108fbfe44f307ad6d00be4fec03430', "is-active": isActive }, h("slot", { key: '987d24b1f5ad17ef8a0e83e3165d1e137bf4d6e5' }), this.isOpen &&
+            h("ul", { key: '41e10aed226c8131e4313ea33da1ea6c79969b80', class: `${notActive} select-filter-list`, role: "listbox", onMouseLeave: this.handleMouseLeave }, options.map((option, idx) => (h("li", { class: `select-filter-item ${this.activeIndex === idx ? 'active' : ''}`, role: "option", "aria-selected": this.activeIndex === idx ? 'true' : 'false', onClick: () => this.handleOptionClick(option.item.value, option.item.label.replace(/(<([^>]+)>)/gi, "")), onMouseOver: () => this.handleOptionMouseOver(idx), innerHTML: option.item.label, tabindex: this.activeIndex === idx ? 0 : -1 }))))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/road-select.entry.js

@@ -103,7 +103,7 @@ const Select = class {
         const labelId = this.selectId + '-label';
         const hasValueClass = this.value && this.value !== '' ? 'has-value' : '';
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-        return (h(Host, { key: '81206f7f9840b7700814260f6a7b8cf78fd7e536', class: this.sizes && `select-${this.sizes}` }, h("select", { key: '8118f6d0f6c2d59be3d0c873398c195a8525c0cc', class: `form-select ${hasValueClass} ${isInvalidClass}`, id: this.selectId, "aria-disabled": this.disabled ? 'true' : null, autoFocus: this.autofocus, disabled: this.disabled, name: this.name, required: this.required, size: this.size, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }, h("option", { key: '4e87320134e62248e7c9e805761226f5403472a9', selected: !this.value, disabled: true, hidden: true, style: { display: 'none' }, value: "" }), this.options && this.options.map(option => (h("option", { value: option.value, selected: this.value !== null && option.value == this.value }, option.label)))), h("label", { key: '32191859474bee5f86d21ad9f81d01bc088d07cd', class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && h("p", { key: '47ecadf397bc303ca9347fc2c426dd4a3f608057', class: "invalid-feedback" }, this.error)));
+        return (h(Host, { key: 'f587a8414c05e32346f937765d28bce047615a39', class: this.sizes && `select-${this.sizes}` }, h("select", { key: 'e7b292e72914e7dacf0291609a0cb1d65eb0a3fa', class: `form-select ${hasValueClass} ${isInvalidClass}`, id: this.selectId, "aria-disabled": this.disabled ? 'true' : null, autoFocus: this.autofocus, disabled: this.disabled, name: this.name, required: this.required, size: this.size, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }, h("option", { key: '24d8ce15efedece915747955ae8a0842e5578e54', selected: !this.value, disabled: true, hidden: true, style: { display: 'none' }, value: "" }), this.options && this.options.map(option => (h("option", { value: option.value, selected: this.value !== null && option.value == this.value }, option.label)))), h("label", { key: '128f0f39050595aac1833f642b2742429a4c96cd', class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && h("p", { key: '94fffc12a2be58bf311b4588ead8fa0331e0c3ca', class: "invalid-feedback" }, this.error)));
     }
     static get watchers() { return {
         "value": ["valueChanged"]

package/dist/esm/road-skeleton.entry.js

@@ -8,7 +8,7 @@ const Skeleton = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("span", { key: '76fc5d6e478e6486b0f4f3e5e3afd7e1a8c0049f' }, "\u00A0"));
+        return (h("span", { key: 'cf58a469e049fce0303bf49ec1c86233b1b4e305' }, "\u00A0"));
     }
 };
 Skeleton.style = RoadSkeletonStyle0;

package/dist/esm/road-spinner.entry.js

@@ -18,7 +18,7 @@ const Spinner = class {
     render() {
         const sizeClass = this.size !== undefined ? `spinner spinner--${this.size}` : 'spinner';
         const colorClass = this.size !== undefined ? `spinner-circle spinner-circle--${this.color}` : 'spinner-circle';
-        return (h("svg", { key: '66ff9c668eec8fc73a2f93015094934b9fb0b181', class: `${sizeClass}`, viewBox: "25 25 50 50" }, h("circle", { key: '5b2c9b4c104607084c0d2249c5b7dc31429ad39a', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
+        return (h("svg", { key: '3e1e5094311da649229f7fa9b3bc7b12d5251cda', class: `${sizeClass}`, viewBox: "25 25 50 50" }, h("circle", { key: '6257e336cdf32cfa80973f4466eb9adcbf7fa239', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
     }
 };
 Spinner.style = RoadSpinnerStyle0;

package/dist/esm/road-switch.entry.js

@@ -81,11 +81,11 @@ const Switch = class {
     }
     render() {
         const labelId = this.switchId + '-label';
-        const textLabel = h("label", { key: 'f8a8b7641286294d251bc6d10b45fc97607cba49', class: "form-switch-label", id: labelId, htmlFor: this.switchId }, this.label);
+        const textLabel = h("label", { key: 'a94f02e2edb416513ef6285b89c221a8fe1d5884', class: "form-switch-label", id: labelId, htmlFor: this.switchId }, this.label);
         const colorClass = this.color !== undefined ? 'form-switch-' + this.color : '';
         const isSpacedClass = this.isSpaced && 'form-switch-spaced';
         const rightSwitchClass = this.hasLeftLabel ? 'form-switch-right' : '';
-        return (h(Host, { key: '9c43f0996fdcd4962776919b92b94eb7fbb9ad57' }, h("input", { key: '756db832dbd73ec0c59ed9ec2ae76b1851a8f22d', class: "form-switch-input", type: "checkbox", id: this.switchId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), h("label", { key: '927bdd4ef11db9a6039ffd028994caa4667519fe', class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, h("div", { key: '0f3011ab70a432f99319331bb0e2009fa11e50ce', class: `form-switch-lever ${rightSwitchClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
+        return (h(Host, { key: '5f93e9f0cd857f38d2f70152774b2ae0239ed342' }, h("input", { key: '42528718ca88666d428048a7477ac9ba611f12aa', class: "form-switch-input", type: "checkbox", id: this.switchId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), h("label", { key: '0d5c0ef117c9235387e47b628c9036c3844cb9be', class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, h("div", { key: '0d16ade7abfe28bae3f7d756b89799aa737dd653', class: `form-switch-lever ${rightSwitchClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
     }
     static get watchers() { return {
         "checked": ["checkedChanged"]

package/dist/esm/road-tab-bar.entry.js

@@ -40,11 +40,11 @@ const TabBar = class {
     }
     render() {
         const { expand, center, secondary } = this;
-        return (h(Host, { key: '7c2795d50362e570f6a3371fde1e987bfc6389fd', role: "tablist", class: {
+        return (h(Host, { key: '793bbb41d74e6e4dd0a7a5ee67b418fd59f61c7c', role: "tablist", class: {
                 'tab-expand': expand,
                 'tab-center': center,
                 'tab-secondary': secondary,
-            } }, h("slot", { key: '94d18f97a0e96a8e8cef400b4b08feef32210782' })));
+            } }, h("slot", { key: '4e2713a1a01ed7fcd8503a8231223d2793e8f808' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/road-tab-button.entry.js

@@ -73,7 +73,7 @@ const TabButton = class {
             rel,
             target,
         };
-        return (h(Host, { key: '1bf7c7301f66cecd4bfbf5cb332fb443dbd17a73', onClick: (ev) => !disabled && this.onClick(ev), onKeyup: (ev) => !disabled && this.onKeyUp(ev), role: "tab", tabindex: disabled ? -1 : tabIndex, "aria-selected": selected ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: '4766bf5988d063443b6a7958fe1c18ab20b4392d', onClick: (ev) => !disabled && this.onClick(ev), onKeyup: (ev) => !disabled && this.onKeyUp(ev), role: "tab", tabindex: disabled ? -1 : tabIndex, "aria-selected": selected ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 'tab-selected': selected,
                 'tab-has-label': hasLabel,
                 'tab-has-icon': hasIcon,
@@ -81,7 +81,7 @@ const TabButton = class {
                 'tab-has-icon-only': hasIcon && !hasLabel,
                 [`tab-layout-${layout}`]: true,
                 'tab-disabled': disabled, // Classe CSS pour les styles désactivés
-            } }, h("a", Object.assign({ key: 'c15a1634befc28787a96baa630bcb65bfac9dcc7' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { key: '8f1f273aea98fd8680b5787223f8fe730055d9c3', class: "button-inner" }, h("slot", { key: '24f7dceead533f266dcdd4cb80f792b2ae85db2c' })))));
+            } }, h("a", Object.assign({ key: 'f11c00761d9057129770874f321f3afaa18a53e0' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { key: '51c886bf60aa0544124c0e2cb19b20d9e0bb720e', class: "button-inner" }, h("slot", { key: '6f7d6d16789eb4db922fd3b49cbbe2df68fc71a1' })))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/road-tab.entry.js

@@ -23,9 +23,9 @@ const Tab = class {
     }
     render() {
         const { tab, active } = this;
-        return (h(Host, { key: '24b66a77921452273dbf57f3f44ac3cffbaecf8f', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: '4559e255fa71417fe4fcd713b91c2186d55653c0', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'tab-hidden': !active,
-            } }, h("slot", { key: '63f0d57bf74b8d562fecfbc881f8199d68080e89' })));
+            } }, h("slot", { key: '3ec299696cf719bf911fe0c27befb34d8de3afcd' })));
     }
     get el() { return getElement(this); }
 };