@roadtrip/components 3.46.0 → 3.47.0

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

@@ -154,9 +154,9 @@ export class RoadPhoneNumberInput {
         const isErrorClass = this.errorMessage.length ? 'is-error' : '';
         const hasValueClass = this.hasValue() ? 'has-value' : '';
         const sizes = 'xl';
-        return (h(Host, { key: '24cd537172b031b54a8d4b551316c6d35ebfb457' }, h("div", { key: 'fb2728e530fca3d44e2bd54ad5c326bffdec704e', class: 'phone-number-inputs-container' }, h("div", { key: 'f8143383f1a4d27a6e1d0f5d31396b08fee31ad7', class: `road-phone-input-select ${isErrorClass} ${isInvalidClass}`, slot: "prepend" }, h("select", { key: 'bc5cd7865dced3c1a7a8c412ce487a1e95c74bd9', 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: '2a460863f32b098caa5bc47aade77089038d1cb1', class: "form-select-area-label", id: labelId, htmlFor: selectId }, this.codeLabel), h("label", { key: '747540f6cf9f2402e12f370970631c44177fda73', class: "form-select-area-value", id: valueId, htmlFor: selectId }, "+", this.selectedCountryCode)), h("input", { key: '02b9cb47645876729fb4206c8c930f4a214f53a3', 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: 'c3de74c259cc32edd1cd107bab4bb8c00be91fb5', class: "phone-number-input-label", id: labelId, htmlFor: inputId }, this.phoneLabel)), this.errorMessage
+        return (h(Host, { key: '552dcc0d24ed4d178f040fe8021050c74d902058' }, h("div", { key: '70ca6c4f0bdec5dcebdc4b5591ab06b304cc95e0', class: 'phone-number-inputs-container' }, h("div", { key: '4c992e0a1a8c9fa27b68f10c7216b344e6d645b1', class: `road-phone-input-select ${isErrorClass} ${isInvalidClass}`, slot: "prepend" }, h("select", { key: '5e7261c78dd3d71c28e8dd340dec596a301d27ef', 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: '35a5db0450b99e05e76865316ff77261cebbdddf', class: "form-select-area-label", id: labelId, htmlFor: selectId }, this.codeLabel), h("label", { key: '2cd83c2a7576d7d81d6a0845837093e6f537fc04', class: "form-select-area-value", id: valueId, htmlFor: selectId }, "+", this.selectedCountryCode)), h("input", { key: '141c74565f3d98943c94dc5f8bd0b5e4fd74a7b0', 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: '458b36d9170841d8eeedc2888c99b69beb21e013', class: "phone-number-input-label", id: labelId, htmlFor: inputId }, this.phoneLabel)), this.errorMessage
             && this.errorMessage !== ''
-            && h("p", { key: '334407a43c985abd508a0dd38a88af4e2587a525', class: "invalid-feedback" }, h("road-icon", { key: 'c9bfb7b1a24f0ea3f2cc8a335e28c99c38a5c004', slot: "start", color: 'danger', name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), this.errorMessage)));
+            && h("p", { key: '741d9f65e5f74ad938bb84e4d16d83b16e334ae3', class: "invalid-feedback" }, h("road-icon", { key: '89b68bd1f9810d5ac495b951796e59dd02cb91f8', slot: "start", color: 'danger', name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), this.errorMessage)));
     }
     static get is() { return "road-phone-number-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/plate-number/plate-number.js

@@ -92,10 +92,10 @@ export class PlateNumber {
     render() {
         const value = this.getValue();
         const motorbikeClass = this.motorbike ? 'motorbike-plate' : '';
-        return (h("road-input-group", { key: '078fe518c39b731041ebff1825b9119d0f0ceb94', class: `plate-number plate-number-${this.country.toLowerCase()} ${motorbikeClass}` }, h("label", { key: '7eb5ad6dc9eaff3f22398d37fc0f352779aa70c7', slot: "prepend", class: "input-group-prepend" }, h("div", { key: '1b40d4b4f5cafedbc76cf31441012a1c006d6afb', class: "plate-number-start" }, h("road-icon", { key: 'aacc90e679c24a386964d6d12088a1a4e499ac80', class: "plate-number-icon", icon: licensePlateStarEu }), h("div", { key: 'bfc3dee0ba4400aed94e31f3bbb6ce0c716f15b4', class: "plate-number-location", "aria-label": this.country, role: "img" }, this.countries
+        return (h("road-input-group", { key: 'edaa7cd8e513932287becfcc4af72d723d7b729f', class: `plate-number plate-number-${this.country.toLowerCase()} ${motorbikeClass}` }, h("label", { key: '49d3b7bdb6c63adceab1b13ae16f2bff1903e84c', slot: "prepend", class: "input-group-prepend" }, h("div", { key: '39760b0846d83e37e1f450819fe53e99650bab8b', class: "plate-number-start" }, h("road-icon", { key: '1d08fc08600b06afa481cbd45df983591057a324', class: "plate-number-icon", icon: licensePlateStarEu }), h("div", { key: 'd8644ec27f56eb9d75f67dff85e39bd17d4b4f6e', 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: 'bbdbde5a98aec4e5d91b3c39af8f5e8d7141730d', slot: "append", class: "input-group-append" }, h("div", { key: '506043ccefb71abc11caf7f0f865ca13d1cd2bdc', 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: '06b33c03a7eabf6b591b35493e1135f2b5870aff', slot: "append", class: "input-group-append" }, h("div", { key: 'eedacf154846a5902aecca99a526c267c416eb35', class: "plate-number-end" }))));
     }
     static get is() { return "road-plate-number"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/profil-dropdown/profil-dropdown.js

@@ -31,7 +31,7 @@ export class Dropdown {
         this.isOpen = false;
     }
     render() {
-        return (h("details", { key: '6b4e442ce01f574182606e7c09e63e6d8e0d96b9', class: "dropdown", open: this.isOpen }, h("summary", { key: '96a1c367ac0b6602e6e8151579b108783ba53c8e', "aria-expanded": `${this.isOpen}`, tabindex: "0", role: "button", onClick: this.onClick }, h("div", { key: 'f01c4d03a12d00874238e2aa3abb7be483e45476', class: `d-flex` }, h("div", { key: 'ec9d487f6cffc7e6e754f560302ecf209b48805a' }, h("road-avatar", { key: '3f6b7e0ad05414771176f7b7e28cfc79b9590e34' }, h("slot", { key: 'd38ff4e91a859e64da6788f10cf341ade9efdfd5', name: "avatar" }))))), h("div", { key: '49c70f04f60cd49f8f7dea3f3edf538886245a6e', class: `dropdown-menu` }, h("div", { key: '251bc17b6dd66d76d780f8736df547b07b8ea028', class: "profil-item" }, h("road-avatar", { key: '0facee183c2290c5dbfaf78a38bbd040693124c0', size: "sm" }, h("slot", { key: '578b32315727e7193fc88e3a2c3f8dde364970da', name: "avatarItem" })), h("div", { key: '7faa802856269a4440b8602772acc2cfde110341', class: "profil-item-info" }, h("span", { key: 'efbeb25518e9a70da4fa52d6633abcc304efd9ae', class: "profil-item-info-name" }, h("slot", { key: 'bbfe23bb0e4832bb62a9f4232fd0291981fdbaa4', name: "name" })), h("road-label", { key: '2abf8f36c90e55491484a9c8f040a68bd2255be6' }, h("slot", { key: '4fb41b62b83d688e1ba940c784d1947a64e7a17a', name: "email" })))), h("slot", { key: '0fa5e3352f774d950d5d2cd4ad3e44b0eb106140', name: "list" }))));
+        return (h("details", { key: '657ada2de370f6aaf76e2a98895ce3be28cc6f69', class: "dropdown", open: this.isOpen }, h("summary", { key: '940d726d7d1c8ea126924b108bf57ab685a2a686', "aria-expanded": `${this.isOpen}`, tabindex: "0", role: "button", onClick: this.onClick }, h("div", { key: '5857ab37b0438b2610d908094bbab9187c46e259', class: `d-flex` }, h("div", { key: 'a317e761fa4b6b46097b04ebe309e2f752e2f2e1' }, h("road-avatar", { key: 'b25236fa949b54ca0faf7bceb0b635fc4cb6b07b' }, h("slot", { key: 'c18965b719882ecd60dcef091298401933f33c88', name: "avatar" }))))), h("div", { key: '70fc69f9f0cccac896d5196bee1e6a9c866c6541', class: `dropdown-menu` }, h("div", { key: '7d28cb139e59995c972c30217cc0a0fc1f96382c', class: "profil-item" }, h("road-avatar", { key: 'f74a21b6c4fcb5e23bb073839fb77b4edd95818a', size: "sm" }, h("slot", { key: '3da5faaa271a97c4a016853f77c24c8e5961680d', name: "avatarItem" })), h("div", { key: 'd30bf6cb38ffde6720dc48baad4226c7b0cc0188', class: "profil-item-info" }, h("span", { key: '676ab7af4733f92f8e9f1e4e11ea85364237068b', class: "profil-item-info-name" }, h("slot", { key: '2e4b1a90c2f00e7e67e4db95931aaca9102e776f', name: "name" })), h("road-label", { key: 'c09654f005fc0b322fd071e13349731ab16e62f5' }, h("slot", { key: '661db4276128da1f7c2c1c6cfc72fd31ef50e413', name: "email" })))), h("slot", { key: '22b9d5856379c958ab32fd67ca70eceed2d58725', name: "list" }))));
     }
     static get is() { return "road-profil-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress/progress.js

@@ -54,7 +54,7 @@ export class ProgressBar {
         let step = Math.ceil((this.value / 100) * this.numbersteps);
         step = Math.min(step, this.numbersteps);
         step = Math.max(step, 0);
-        return (h(Host, { key: '09665cbad7d552d5fdedb655e474a917bbc7108c', class: "progress-element" }, h("div", { key: '3fd59f777ad3b7a0de6079b24e2ff5369574a1be', class: `${light} progress-${this.color} ${animation}` }, h("div", { key: 'ffc8433bdb99c8ad33e025b39ff032be6f7b5c0d', class: "progress-bar", role: "progressbar", style: { width: `${progressBarFilledPercentage}%` }, "aria-valuenow": progressBarFilledPercentage, "aria-valuemin": "0", "aria-valuemax": "100", "aria-labelledby": "loadinglabel", "aria-label": "progress bar" })), h("div", { key: '9974af0eb6c68404b5ed3b11aa8f3f9e814181a0', class: `${fullwidth}` }, h("span", { key: '2f9724da220d0c3148d62b251a8a249efb974bd2', id: "loadinglabel", class: "progress-element-label" }, this.label), this.showstep && (h("span", { key: '695c562d666a72a9d4e29dc0d8a060bbd9745895', class: "progress-element-step" }, step, "/", this.numbersteps)))));
+        return (h(Host, { key: 'afaa397b17cba4c71cf8b9899ea0272869ceace6', class: "progress-element" }, h("div", { key: '8b049a8b3d40c3c23ceca9fd931be9e028f1a919', class: `${light} progress-${this.color} ${animation}` }, h("div", { key: '05c9a7efd42334e449cc9394dcaa4ed173e70870', class: "progress-bar", role: "progressbar", style: { width: `${progressBarFilledPercentage}%` }, "aria-valuenow": progressBarFilledPercentage, "aria-valuemin": "0", "aria-valuemax": "100", "aria-labelledby": "loadinglabel", "aria-label": "progress bar" })), h("div", { key: '57c7b9d84886d5c96d633d3d85e95059cb113f2b', class: `${fullwidth}` }, h("span", { key: 'befe4e5d339847a04bfa246edc0c809523e40aa9', id: "loadinglabel", class: "progress-element-label" }, this.label), this.showstep && (h("span", { key: '6eb7e35b57306e67f5bf5ff45d592b926669f63a', class: "progress-element-step" }, step, "/", this.numbersteps)))));
     }
     static get is() { return "road-progress"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-indicator-horizontal/progress-indicator-horizontal.js

@@ -29,7 +29,7 @@ export class Stepper {
         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: 'f111144edc55e730674a4bd5e1633e5a91b97015' }, h("nav", { key: '7591c2c39a2827b36d351a3b28a85c6156b64b2d' }, h("ul", { key: '78fa0a7bd33e11c970ce71df3e86ad82adf092f4', class: `${colorClass}` }, h("li", { key: '3e395290532c35a096b9c6f24936ed37041f6205', class: `${stateClass}` }, h("a", { key: 'c5eea4f543e4d74d1a0616b2352961edfd5516b5', class: "progress-indicator-horizontal-link", href: `${urlStep1}` }, h("span", { key: 'de796e773f0e4529d0b7fdbe61e6c11d8e6279ca', class: "progress-indicator-horizontal-icon" }, h("slot", { key: 'fb65dc7ad9d3f422bacc3ccba87e2be2171d7f9e', name: "progress-indicator-horizontal-icon" })), h("span", { key: 'd7cf1de8faa1821bba9280c171735e10448b9453', class: "progress-indicator-horizontal-title" }, h("slot", { key: 'f0d15278bee067c765fa466e1e4a368b23c06703', name: "progress-indicator-horizontal-title" })))), h("li", { key: '25fb14e2d761124258ac90fcd3c7df82a3d77e16', class: `${stateSecondStepClass}` }, h("a", { key: 'f253c9d89b3fa7f430be3bdcdfe8cacd828fdbe0', class: "progress-indicator-horizontal-link", href: `${urlStep2}` }, h("span", { key: 'd85c7358d428abb5ee621355cab2c8c1f87c802a', class: "progress-indicator-horizontal-icon" }, h("slot", { key: '1c7b3678964d7cb76420b427654488f745f58491', name: "progress-indicator-horizontal-icon2" })), h("span", { key: 'f9df661db7d252d4660652a3c1a4cfbbc000a7d0', class: "progress-indicator-horizontal-title" }, h("slot", { key: 'b58b9a83c49dbf5883f12380d659f65a68167181', name: "progress-indicator-horizontal-title2" })))), this.numberStep == 3 && h("li", { key: '93e3ff18e0f07844d00fed42acb091b9482798d5', class: `${stateThirdStepClass}` }, h("a", { key: '10ea0a5904d2308eeefc1707a3fdb596c4cdb4e3', class: "progress-indicator-horizontal-link", href: `${urlStep3}` }, h("span", { key: '7da570caa2a771389acc1b44870f2712afb17b96', class: "progress-indicator-horizontal-icon" }, h("slot", { key: '5235530ca67e9c2730eb1130e7f98454bb3c58d1', name: "progress-indicator-horizontal-icon3" })), h("span", { key: '22d8d0d86ad2b8035b91a63783381c8f7c40e2dd', class: "progress-indicator-horizontal-title" }, h("slot", { key: '06193f06fa83c0d64ed13ad40e6a37f73da7592e', name: "progress-indicator-horizontal-title3" }))))))));
+        return (h(Host, { key: 'ccb6347ccc6d69282b0b3de2e6371b4ae0da7d6d' }, h("nav", { key: '4025380ac77abef5bf2cc517fe73e11112f768b0' }, h("ul", { key: '84fa3d6446fe171ae5c167bec45fdbc8cdb4ce9c', class: `${colorClass}` }, h("li", { key: 'a15bf9839e720c4587e06e64285352062a05fed0', class: `${stateClass}` }, h("a", { key: '5f8b9233a3c63701d1e689666c295bf8687352b9', class: "progress-indicator-horizontal-link", href: `${urlStep1}` }, h("span", { key: 'a388162f0a3399cd61f500ca1a6cd2195fc1cfaa', class: "progress-indicator-horizontal-icon" }, h("slot", { key: '15c6e61fa315c0685b0163e303edcc6778b4c9a5', name: "progress-indicator-horizontal-icon" })), h("span", { key: 'a46cd307a9ea8e6136d6404ef0c5a433ffb87666', class: "progress-indicator-horizontal-title" }, h("slot", { key: '9993529c48b5e0b77fc22864d649694cb1c2ee0c', name: "progress-indicator-horizontal-title" })))), h("li", { key: '4d64c11c640b2f40f72f6dddd8c33438c4bdeb9b', class: `${stateSecondStepClass}` }, h("a", { key: '03d659b8a60172b33c82b3a26957896c25e3b467', class: "progress-indicator-horizontal-link", href: `${urlStep2}` }, h("span", { key: 'c1f9a3b9c9f0b0a54859ee7a3b0d7e9c2552740b', class: "progress-indicator-horizontal-icon" }, h("slot", { key: '08db755e8c6b0a8b5103e4022710fb5e8ed5ae34', name: "progress-indicator-horizontal-icon2" })), h("span", { key: '7c458f6a250c5f66b199019babb14e1373fae597', class: "progress-indicator-horizontal-title" }, h("slot", { key: 'a2df3767db3baa71ed8e3d5e93f3fb86b2e71f8f', name: "progress-indicator-horizontal-title2" })))), this.numberStep == 3 && h("li", { key: 'b7adeb48232b08b3a234829611af3b6a28d00a67', class: `${stateThirdStepClass}` }, h("a", { key: 'e7537eddb421180a668ad31eddb034c5bdad4a23', class: "progress-indicator-horizontal-link", href: `${urlStep3}` }, h("span", { key: 'e0ffebe33d163b2e37e5d8d54dabe96f5b12a171', class: "progress-indicator-horizontal-icon" }, h("slot", { key: '2e077ab50eebe1d72e76e9dc04f451cf8c617b9f', name: "progress-indicator-horizontal-icon3" })), h("span", { key: '1cad575ca395bb5f2a718c49b32c01952e7faa8c', class: "progress-indicator-horizontal-title" }, h("slot", { key: 'ee40e5251b5db0a55fdff81a903af67ac3ca5f93', name: "progress-indicator-horizontal-title3" }))))))));
     }
     static get is() { return "road-progress-indicator-horizontal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-indicator-vertical/progress-indicator-vertical.js

@@ -12,7 +12,7 @@ import { Host, h } from "@stencil/core";
  */
 export class ProgressIndicatorVertical {
     render() {
-        return (h(Host, { key: '7cb6fe2a4a78937fc84bd9b0daf0c9445a051fc5' }, h("nav", { key: 'da179588065c7d0e9469a067eee27aeb7d497ab5' }, h("ul", { key: '232392a6dc63b3923550dd58db7ba2eae621a79b' }, h("li", { key: '7e545e5818a67bc4fce6b97b4d26191da6f58c4c' }, h("slot", { key: 'c815524158b6e599dfbbaaae21cee71abc33583a' }))))));
+        return (h(Host, { key: '4762ffd8a4fbf70b85dd9d21a370006e9c9f1dde' }, h("nav", { key: 'b5582b03ea6525acab65853e3d816b96d7e1fbfc' }, h("ul", { key: '3e368e7204eb13839ceac853dbdbe5037c8c11a0' }, h("li", { key: '3304843de4f5fdd4b66dd4539b536bc87b506187' }, h("slot", { key: 'bbbb9861ece279921924dc9fc04b8a9581783071' }))))));
     }
     static get is() { return "road-progress-indicator-vertical"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-indicator-vertical-item/progress-indicator-vertical-item.js

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class ProgressIndicatorVerticalItem {
     render() {
-        return (h(Host, { key: '0c9d2ff669b0e8c23d2e319e02811af7b572c7d9' }, h("slot", { key: 'd8c61ee8af278f07e4431fe67551b9627b1e8fe1' })));
+        return (h(Host, { key: '01e909268830e3729f771371fea8e22672c1f81f' }, h("slot", { key: 'd613840f69ca8d4c9b0ae8e1d53b01acc027bcee' })));
     }
     static get is() { return "road-progress-indicator-vertical-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/progress-tracker/progress-tracker.js

@@ -9,7 +9,7 @@ import { Host, h } from "@stencil/core";
  */
 export class ProgressTracker {
     render() {
-        return (h(Host, { key: '32c91397fb443308453f8756ffbbb4b3aef1ac80' }, h("nav", { key: '9eada9c4e79a0deddce2f431834e454bd184dc1e' }, h("ul", { key: '9c51d05a05e3395ec75ee2ec99c466c545075719' }, h("li", { key: '551f69d0d79aa99104e38d52b1b17686fc0bd82c' }, h("slot", { key: '64c3a9c01936473628282b0caa49746bb97f1b78' }))))));
+        return (h(Host, { key: 'd90d4f149d2d2565b50258fa240ffe48510726d2' }, h("nav", { key: '5b3a49448b26a10f6f9b237f91d8ca965744b62e' }, h("ul", { key: '424fd565e2ef9fd7fa59196d8719563c6b6e8e61' }, h("li", { key: '917ec2b3312c4569b0a8e3e5a1989116e815406d' }, h("slot", { key: 'c0b16be12f3732882cee034adb66ce8aa78664f1' }))))));
     }
     static get is() { return "road-progress-tracker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-tracker-item/progress-tracker-item.js

@@ -12,7 +12,7 @@ import { Host, h } from "@stencil/core";
  */
 export class ProgressTrackerItem {
     render() {
-        return (h(Host, { key: 'f080eb45be07dd54b9f028b96febd5b7090527cf' }, h("slot", { key: '9ac63fa7a9a0d4e533dbc1a0a96fe93ea9a8034e' })));
+        return (h(Host, { key: 'd7232f28ef30258e59fff790e0a07677eacd13a1' }, h("slot", { key: 'cf7e6d62701374235c58ef97f340b99d1b648847' })));
     }
     static get is() { return "road-progress-tracker-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/radio/radio.js

@@ -72,7 +72,7 @@ export class Radio {
         const inverseClass = this.inverse && 'form-radio-inverse';
         const isInvalidClass = this.error ? 'is-invalid' : '';
         const inlineClass = this.inline ? 'form-radio-inline' : '';
-        return (h(Host, { key: '8527b5ca6ed9c45a9fe7fc8dca12b6dafb159175', class: `form-radio ${inlineClass}` }, h("input", { key: '82f44c9ebb76379f1c2ae8e7978b82167929729d', 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: '5e12d52490a2ae6cacf0eef9abb225626ec75a2c', class: `form-radio-label ${inverseClass}`, id: labelId, htmlFor: this.radioId }, this.label, " ", h("span", { key: '8c1c4c69075836741bbc89a0460fc47f8d4486e1', class: "form-radio-label-span" }, this.secondaryLabel))));
+        return (h(Host, { key: '1b2343fc9a114afc9506ff040f28a6061a5c9f56', class: `form-radio ${inlineClass}` }, h("input", { key: 'ada87aa55c1d5a778e40fd25c103d0229ecfeec6', 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: '5690c2d0fc4a0c7b6e03c5fa3c1603a61a2a906f', class: `form-radio-label ${inverseClass}`, id: labelId, htmlFor: this.radioId }, this.label, " ", h("span", { key: '84ce9ad88d4a2612a176b0420ac114c1a648a5a8', class: "form-radio-label-span" }, this.secondaryLabel))));
     }
     static get is() { return "road-radio"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/radio-card/radio-card.js

@@ -49,7 +49,7 @@ export class RadioCard {
         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: '855a082bcd5ab1d2a76e276c9e026efda529b785', class: `form-radio ${inlineClass}` }, h("div", { key: '1b76deba72dbfb07eb160c7791a9b02b4b5bcc5b', class: `radio-card ${selectedClass}  ${disabledClass}`, onClick: this.onClick }, h("input", { key: '34d7a61463f55efcb9a13b4651f297d89e0a922b', 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: '1f0d49a8d711e9c6f232f82bce3f9a942544b124', class: "form-radio-label", htmlFor: this.radioId, id: labelId }, h("div", { key: '7349a2e57c95bcc4c43314cdfe270b7c51f33146', class: "slot-wrapper" }, h("slot", { key: '433d85a6e2807076f215d2c52f1d077030e9f2da' }))))));
+        return (h(Host, { key: '5895d04cdb20013dc850dbded6005cd7280838af', class: `form-radio ${inlineClass}` }, h("div", { key: 'd12cd0ba4ec697307f833afec78c7bbe058cb782', class: `radio-card ${selectedClass}  ${disabledClass}`, onClick: this.onClick }, h("input", { key: '30ff38097eeb93342dcfe8358642f8910bbd7a05', 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: '43e6a5f291aa394da3b0100c7c915987090dd863', class: "form-radio-label", htmlFor: this.radioId, id: labelId }, h("div", { key: '49a9e20e549ed5d79943a3fce2aa3f234774a76a', class: "slot-wrapper" }, h("slot", { key: 'cbc19c8a4fa7a6be3511d5790247b39e5ded48a4' }))))));
     }
     static get is() { return "road-radio-card"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/radio-group/radio-group.js

@@ -66,7 +66,7 @@ export class RadioGroup {
     render() {
         const labelId = `${this.radioGroupId}-label`;
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-        return (h(Host, { key: 'a92111d5ffff6b6eda6efa01fe8c92a390c1df04', role: "radiogroup", class: `form-group ${isInvalidClass}`, "aria-label": this.ariaLabel, onClick: this.onClick }, this.label && h("p", { key: 'fdb15769c6127b65fb2751aceef0dcb92f7c058d', class: "text-content", id: labelId }, this.label, " ", this.asterisk && h("span", { key: '8a32ab70a954b770ce0c71c1d1c3b17154184d5e', class: "asterisk" }, "*")), h("slot", { key: '69e54cd769b20ef75f5c0fe5ad4410ff9939ccc2' }), this.error && this.error !== '' && h("p", { key: '92f290c57411ea5600c45548f5b02d9a66db43a8', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: '90fd15fe58413798a2de75b7636d8a3df749df5b', class: "helper" }, this.helper)));
+        return (h(Host, { key: 'ee8965fbe7b9072e38258f08d913dce16499de1c', role: "radiogroup", class: `form-group ${isInvalidClass}`, "aria-label": this.ariaLabel, onClick: this.onClick }, this.label && h("p", { key: 'fc61d22496e8055fd10da0299d5ecb58b749bf5b', class: "text-content", id: labelId }, this.label, " ", this.asterisk && h("span", { key: '5dbb41cab5c73fea7f3123f412d38914b7f2f5de', class: "asterisk" }, "*")), h("slot", { key: '8ce125c2d08a3cfe325569d51c256e7d38c8ba6c' }), this.error && this.error !== '' && h("p", { key: '468c378dc679b42e35118666a917c50c558f8f47', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: 'e453fd6c032ed75bb44099260fd40b033c5fa748', class: "helper" }, this.helper)));
     }
     static get is() { return "road-radio-group"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/range/range.js

@@ -95,14 +95,14 @@ export class Range {
     render() {
         const value = this.getValue();
         const datalist = this.showLabels !== undefined ? `tickmarks` : "";
-        return (h(Host, { key: '4a3eac8fe972c4da37712c2bfb9f9368a2c5e0e4', tabindex: "0", class: { disabled: this.disabled } }, h("div", { key: '7ede74bdbb7f85124b250a02f312e0fa8672b445', class: "form-group d-flex align-items-end" }, this.showTick && (h("road-icon", { key: 'bbfe778ba2082b82dac80d2c9b11b032ae4d3dc5', icon: navigationAddLessSolid, class: "mr-8", size: "sm" })), h("div", { key: 'a5617bb934ee0e8f481d4cbbe334ecdcccb80f4a', class: "form-range", style: {
+        return (h(Host, { key: 'c3920abc285183763dbc8f2aa4773cca370bcd07', tabindex: "0", class: { disabled: this.disabled } }, h("div", { key: 'dd1886b51d24f6c964d589759c69ee01984f8e37', class: "form-group d-flex align-items-end" }, this.showTick && (h("road-icon", { key: '55aa2746dd83c6145722eb580a811607cb5dc07f', icon: navigationAddLessSolid, class: "mr-8", size: "sm" })), h("div", { key: 'd17f88478bd99fca6656a9d14dc173e84e377310', 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: 'f8fb6174412f03e9e0ada70b79715b8892c394e7' }), this.showLabels && h("slot", { key: '77278e535a1cf754b21ef12ebd1650aa03942ad0', name: "datalist" }), h("input", { key: 'c40fc31c0744955b440b162e5cddaa7c7b2119a3', 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: 'ec72158b6b0f7128aee76222506a6ecf80bbf43c', class: "form-range-label" }, "Valeur"), h("div", { key: 'ec3ba04cbb45a2af707f81e0fd05fbbb868c8187', class: "form-range-progress" })), this.showTick && (h("road-icon", { key: '293312e73482a2dafe8ef694ae2e56e3f37955bb', icon: navigationAddMoreSolid, class: "ml-8", size: "sm" })))));
+            } }, this.showValue && h("output", { key: '85a0ba0f128f123b97ba55420bccfd39eb889c39' }), this.showLabels && h("slot", { key: 'ff35158ff5adf21ce51b01ed74d109a3db0944be', name: "datalist" }), h("input", { key: '5e6d7d1812c96be847f091003c0cb36ebc390802', 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: 'd0c8ec02d5ab901104b0d75a2b03ec759db92869', class: "form-range-label" }, "Valeur"), h("div", { key: 'e95ec94dd77494301597108e379db793571aabaf', class: "form-range-progress" })), this.showTick && (h("road-icon", { key: 'e3b009fb2cacb8e2b0bbc22fa99dda889911ebc6', icon: navigationAddMoreSolid, class: "ml-8", size: "sm" })))));
     }
     static get is() { return "road-range"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/rating/rating.js

@@ -37,7 +37,7 @@ export class Rating {
         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: 'f3317daf4cdd2e6a539936c9dbe095c791ce883d' }, h("div", { key: 'fe4e3b262592ca714e26f7cc03ac9ba4435d0b51', 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: '17bd3fb3ecbbd6e040c3c9c70fb92b9af90ee6b1', class: `${sizeRatingNumberClass}`, href: this.url }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")"), this.readonly == true && this.showreviews && h("road-label", { key: '5dba1d64ca367649797df7b872789e7cdc130e8c', class: `${sizeRatingNumberClass} ${readOnly}` }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")")));
+        return (h(Host, { key: 'f746ba94159c130ca443d88ff3cb2f19183f014a' }, h("div", { key: 'bd36bdd0b94d67ed435554a674a4a9aba0a12c2f', 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: '432a059b4b6e69201f90d0e807b6e30b25bd9b55', class: `${sizeRatingNumberClass}`, href: this.url }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")"), this.readonly == true && this.showreviews && h("road-label", { key: '65aedc2c22b39e22b48afed4595a0db0829e373a', class: `${sizeRatingNumberClass} ${readOnly}` }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")")));
     }
     static get is() { return "road-rating"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/row/row.js

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class Row {
     render() {
-        return (h(Host, { key: 'b9735c29e64bf4dbd798811326b36efab2fe84b0' }, h("slot", { key: '33cd185fdb68387287d1099576d03340d45dc579' })));
+        return (h(Host, { key: '69fff326414139d63af822fff7704e092100924e' }, h("slot", { key: '31bacdec0c2661d6bf417dc79693f8f6e7b5276c' })));
     }
     static get is() { return "road-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/segmented-button/segmented-button.js

@@ -52,10 +52,10 @@ export class SegmentedButton {
     render() {
         const { tabIndex, selected, tab } = this;
         const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';
-        return (h(Host, { key: '8b14a7cc7b693e9738cc01498921b86f01a5e2a5', 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: '20194d71e8ca1c839c4a6287511fcb9ad1318e67', 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: '2e4d84a1561a9c09b441fd858c3625f784c6794c', tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, h("span", { key: '2acfa633cb9a32c3554ac7067fd62737bc45b172', class: "button-content" }, h("slot", { key: '1b133f39ff11f8bdd8be0b3d7f780262f0af2e18' })))));
+            } }, h("span", { key: 'cf51481805c04571bc3ef97a150b011bd8c0e79e', tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, h("span", { key: '595aae2ef9621aa6a39ef2388373ec3708972bbb', class: "button-content" }, h("slot", { key: '9b6e874b79e88265b6c56465e9f84a5849363016' })))));
     }
     static get is() { return "road-segmented-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/segmented-button-bar/segmented-button-bar.js

@@ -18,7 +18,7 @@ export class ButtonBar {
         this.selectedTabChanged();
     }
     render() {
-        return (h(Host, { key: 'd4cf00bc997e0ed05484681fb5fc5f554b3d6fbd', role: "tablist" }, h("slot", { key: 'cadf449cf80d55a0fe297fff440f65f6c096c371' })));
+        return (h(Host, { key: '9d6937fa6b2840970dd93648f1e79724562d91bf', role: "tablist" }, h("slot", { key: '63de3253cb8eb6e9d4fa2374a1fab04ff64b174a' })));
     }
     static get is() { return "road-segmented-button-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/segmented-buttons/segmented-buttons.js

@@ -86,7 +86,7 @@ export class Tabs {
         return Array.from(this.el.querySelectorAll('road-tab'));
     }
     render() {
-        return (h(Host, { key: '51b943aa1730a5869b8d4616e5b9d0a883c3e17c', onRoadSegmentedButtonClick: this.onTabClicked }, h("slot", { key: '14c0de7b24f8a960a331c258ac91dd2ec4e1dda2', name: "top" }), h("slot", { key: 'b8d71615b2b6bbee3ce95754f0b2f0a7c5ef3385' })));
+        return (h(Host, { key: 'df0d2cbe2bf0647686439e58ab7e47067bb85a18', onRoadSegmentedButtonClick: this.onTabClicked }, h("slot", { key: '0181d346ee8cf63cab8eac42c8932e1f5477288f', name: "top" }), h("slot", { key: 'c3c0f5c41618721ace911e149d1218b0f8412369' })));
     }
     static get is() { return "road-segmented-buttons"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select/select.js

@@ -92,7 +92,7 @@ export class Select {
         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: '252c4ae08501f73688cf0c7c7b0830439f1f8e1f', class: this.sizes && `select-${this.sizes}` }, h("select", { key: '28001067f4222640b9a7d4a93692ff94593651c1', 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: '8933f32a5982c18c456bb06e22a28f67320927b0', 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: '49e2bd5cff399c79900ac65dd37e73bc862f3d00', class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && h("p", { key: 'e3a55cc35184e8767ba35ac87cb45e7e24f3c116', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: 'd824610dfb9031aecee47f63c288069ca3aed0b6', class: "helper" }, this.helper)));
+        return (h(Host, { key: 'e86d30d1fe1fd95d7b70140a57d76f3992cbc035', class: this.sizes && `select-${this.sizes}` }, h("select", { key: '9a438873eedc20213b7e6c8bae2c648c9c1e0ad1', 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: '67d63f752f9f0fa2d48ee4ec07029c7e43706729', 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: 'c07e091eb4b6da4ab793c2056131c16bf9ee4723', class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && h("p", { key: 'd01132cad717c35ca5a5afe2ad8effb697037a13', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: '2f884ebd87cf990ab093ee5a023cd698c6883a8f', class: "helper" }, this.helper)));
     }
     static get is() { return "road-select"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/select-filter/select-filter.js

@@ -179,7 +179,7 @@ export class SelectFilter {
         const options = this.filteredOptions;
         const isActive = this.isActive ? 'true' : 'false';
         const notActive = this.isActive ? '' : 'not-active';
-        return (h(Host, { key: '56283f348c18c9f4da780910a296dff17656881e', "is-active": isActive }, h("slot", { key: '43a5b9dadb04f532e62259a415d921b731b7911e' }), this.isOpen && (h("div", { key: 'cac8b402cfaa77e6c84e60a50f73d148475c93f7', class: `${notActive} select-filter-list`, role: "listbox", onMouseLeave: this.handleMouseLeave }, options.length === 0 ? (h("div", { class: "select-filter-empty" }, "Aucune option")) : (h("ul", { class: "pl-0" }, options.map((option, idx) => (h("li", { class: `select-filter-item ${this.activeIndex === idx ? 'active' : ''}`, role: "option", "aria-selected": this.activeIndex === idx ? 'true' : 'false', onClick: (e) => this.handleOptionClick(option.item.value, option.item.label.replace(/(<([^>]+)>)/gi, ''), e), onMouseOver: () => this.handleOptionMouseOver(idx), innerHTML: option.item.label, tabindex: this.activeIndex === idx ? 0 : -1 })))))))));
+        return (h(Host, { key: '5d0540d59c53f2506b97fdaa40a1fae6381098f5', "is-active": isActive }, h("slot", { key: 'e7b5e449426fe5364b5a12a5aa408a98a033869e' }), this.isOpen && (h("div", { key: '01f532bba66042887e23c5892609e4dd174d8330', class: `${notActive} select-filter-list`, role: "listbox", onMouseLeave: this.handleMouseLeave }, options.length === 0 ? (h("div", { class: "select-filter-empty" }, "Aucune option")) : (h("ul", { class: "pl-0" }, options.map((option, idx) => (h("li", { class: `select-filter-item ${this.activeIndex === idx ? 'active' : ''}`, role: "option", "aria-selected": this.activeIndex === idx ? 'true' : 'false', onClick: (e) => this.handleOptionClick(option.item.value, option.item.label.replace(/(<([^>]+)>)/gi, ''), e), onMouseOver: () => this.handleOptionMouseOver(idx), innerHTML: option.item.label, tabindex: this.activeIndex === idx ? 0 : -1 })))))))));
     }
     static get is() { return "road-select-filter"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/skeleton/skeleton.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class Skeleton {
     render() {
-        return (h("span", { key: 'f938a4cd82c542599e6729e9bbfca3fa51573956' }, "\u00A0"));
+        return (h("span", { key: 'ec2419ddcf62a6b2aeedd68ec0c1eb8e430f8185' }, "\u00A0"));
     }
     static get is() { return "road-skeleton"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spinner/spinner.js

@@ -13,7 +13,7 @@ export class Spinner {
     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: '1465d5db948734bba9d01c1371fbe97fba33ccb5', class: `${sizeClass}`, viewBox: "25 25 50 50" }, h("circle", { key: 'f7dd929e5cdef073f60d8e6d651fc3e64e594ced', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
+        return (h("svg", { key: 'fc286db53f3b74155c3221474abb9472d774e89d', class: `${sizeClass}`, viewBox: "25 25 50 50" }, h("circle", { key: 'a40ef2366ff12fe69486f3db0d92b7d49affd370', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
     }
     static get is() { return "road-spinner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/status-chip/status-chip.css

@@ -21,6 +21,7 @@
   color: var(--road-on-info-surface);
   font-weight: 700;
   transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  outline: 1px solid var(--road-info-outline);
 }
 
 .chip-description {
@@ -79,9 +80,18 @@
  */
 
 
-:host(:hover),
-:host(.focus-visible)  {
+:host(:hover)  {
     background: var(--road-info-90);
+    outline: 2px solid var(--road-info-outline);
+}
+
+:host(:focus-visible),
+:host(.focus-visible)   {
+    background: var(--road-info-90);
+    border-radius: 1.625rem;;
+    width: fit-content;
+    overflow: auto;
+    outline: 6px double var(--road-info-outline);
 }
 
 
@@ -91,4 +101,5 @@
 
 :host(:active) {
     background: var(--road-info-80);
+    outline: 3px solid var(--road-info-outline);
 }

package/dist/collection/components/status-chip/status-chip.js

@@ -4,15 +4,24 @@ import "./../../utils/polyfill";
 /**
  * @slot - Content of the chip.
  */
-export class Chip {
+export class StatusChip {
     constructor() {
         /**
          * The chip size.
          */
         this.size = 'sm';
+        this.onActivate = () => {
+            this.chipClick.emit();
+        };
+        this.onKeyDown = (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.onActivate();
+            }
+        };
     }
     render() {
-        return (h(Host, { key: '22343d5f99de6406223630ccc5ddc4c8363f87ff', class: `chip-${this.size}`, tabindex: "0" }, h("div", { key: '53693f688a08c07d7c5c5c8f6f4ab6ecbad5c783', class: "chip-description" }, h("road-icon", { key: 'd66577297e5c33d7722c3026293830092e9f0239', class: "chip-icon", color: "info", icon: alertInfoSolid }), h("slot", { key: '248ca83089bffdb3695d953cb14ac38a27e10b4d' }))));
+        return (h(Host, { key: '178e109ebeac6b66b105e3aa12cfc1cd942e83cc', class: `chip-${this.size}`, tabindex: "0", role: "button", onClick: this.onActivate, onKeyDown: this.onKeyDown }, h("div", { key: '5904c24f62ed7636205a0bf05431f698930ae615', class: "chip-description" }, h("road-icon", { key: '5a6767d216edc33ba42b6788102e90469c276a7e', class: "chip-icon", color: "info", icon: alertInfoSolid }), h("slot", { key: '03dfda63fce2ecbfeac0b16e1f54157f75bbe156' }))));
     }
     static get is() { return "road-status-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -50,5 +59,23 @@ export class Chip {
             }
         };
     }
+    static get events() {
+        return [{
+                "method": "chipClick",
+                "name": "chipClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
 }
 //# sourceMappingURL=status-chip.js.map

package/dist/collection/components/status-chip/status-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"status-chip.js","sourceRoot":"","sources":["../../../src/components/status-chip/status-chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,wBAAwB,CAAC;AAEhC;;GAEG;AAOH,MAAM,OAAO,IAAI;IALjB;QAOE;;WAEG;QACK,SAAI,GAAwB,IAAI,CAAC;KAe1C;IAbC,MAAM;QAEJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAC,GAAG;YAExC,4DAAK,KAAK,EAAC,kBAAkB;gBAC3B,kEAAW,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,cAAc,GAAc;gBAC5E,8DAAO,CACH,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { alertInfoSolid } from '../../../icons';\nimport './../../utils/polyfill';\n\n/**\n * @slot - Content of the chip.\n */\n\n@Component({\n  tag: 'road-status-chip',\n  styleUrl: 'status-chip.css',\n  shadow: true,\n})\nexport class Chip {\n\n  /**\n   * The chip size.\n   */\n  @Prop() size: 'sm' |  'md' | 'lg' = 'sm';\n\n  render() {\n\n    return (\n      <Host\n        class={`chip-${this.size}`} tabindex=\"0\"\n      >\n        <div class=\"chip-description\">\n          <road-icon class=\"chip-icon\" color=\"info\" icon={alertInfoSolid}></road-icon>\n          <slot/>\n        </div>\n      </Host>\n    );\n  }\n}"]}
+{"version":3,"file":"status-chip.js","sourceRoot":"","sources":["../../../src/components/status-chip/status-chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,wBAAwB,CAAC;AAEhC;;GAEG;AAOH,MAAM,OAAO,UAAU;IALvB;QAOE;;WAEG;QACK,SAAI,GAAwB,IAAI,CAAC;QAIjC,eAAU,GAAG,GAAG,EAAE;YACxB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QACxB,CAAC,CAAC;QAEM,cAAS,GAAG,CAAC,CAAgB,EAAE,EAAE;YACvC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBACvC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,CAAC;QACH,CAAC,CAAC;KAkBH;IAhBC,MAAM;QAEJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAC,GAAG,EACxC,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,SAAS,EAAE,IAAI,CAAC,SAAS;YAEzB,4DAAK,KAAK,EAAC,kBAAkB;gBAC3B,kEAAW,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,cAAc,GAAc;gBAC5E,8DAAO,CACH,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, Event, EventEmitter, h } from '@stencil/core';\nimport { alertInfoSolid } from '../../../icons';\nimport './../../utils/polyfill';\n\n/**\n * @slot - Content of the chip.\n */\n\n@Component({\n  tag: 'road-status-chip',\n  styleUrl: 'status-chip.css',\n  shadow: true,\n})\nexport class StatusChip {\n\n  /**\n   * The chip size.\n   */\n  @Prop() size: 'sm' |  'md' | 'lg' = 'sm';\n\n  @Event() chipClick!: EventEmitter<void>;\n\n  private onActivate = () => {\n    this.chipClick.emit();\n  };\n\n  private onKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.onActivate();\n    }\n  };\n\n  render() {\n\n    return (\n      <Host\n        class={`chip-${this.size}`} tabindex=\"0\"\n        role=\"button\" \n        onClick={this.onActivate}\n        onKeyDown={this.onKeyDown}\n      >\n        <div class=\"chip-description\">\n          <road-icon class=\"chip-icon\" color=\"info\" icon={alertInfoSolid}></road-icon>\n          <slot/>\n        </div>\n      </Host>\n    );\n  }\n}"]}

package/dist/collection/components/switch/switch.js

@@ -70,11 +70,11 @@ export class Switch {
     }
     render() {
         const labelId = this.switchId + '-label';
-        const textLabel = h("label", { key: 'b0499c36ab0eb33ac879c37115b6a4754c5d1529', class: "form-switch-label", id: labelId, htmlFor: this.switchId }, this.label);
+        const textLabel = h("label", { key: '22fa2b6f8be006647d123f0fc8eb077afad13aca', 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: 'a9365fb9fd70d406e5a90d740cead5094861ac79' }, h("input", { key: '8714e6da068a91604e19dfbdba6f6c712c339c07', 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: 'b181aecf57662fe3d9c4032ef5fbd47709730e85', class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, h("div", { key: '4c6da52b6e04657d6749eec12c3c6ff5f97ce762', class: `form-switch-lever ${rightSwitchClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
+        return (h(Host, { key: 'afcb3cea4c1ee2740769cc1364d9175d5a144ba7' }, h("input", { key: '2dace2130557a4c73b79dcd494cc33a7541e6737', 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: '81450123a463b3619774e65b7e49c3637b5d0037', class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, h("div", { key: '4bf60bf353f80414ac1bba264966b0ca00405b07', class: `form-switch-lever ${rightSwitchClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
     }
     static get is() { return "road-switch"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/tab/tab.js

@@ -21,9 +21,9 @@ export class Tab {
     }
     render() {
         const { tab, active } = this;
-        return (h(Host, { key: '925b7e9bcb116de9081e0f238799e28a31d385a1', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: '1f2746fc33e9b879bc8558f18685bdf2f243fdf1', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'tab-hidden': !active,
-            } }, h("slot", { key: 'c4ae28afb00bd729cc5b2c434b8ac62d94d8b5f3' })));
+            } }, h("slot", { key: '38d4df4049aa57b8160855d33990f1b2db21d259' })));
     }
     static get is() { return "road-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab-bar/tab-bar.js

@@ -36,11 +36,11 @@ export class TabBar {
     }
     render() {
         const { expand, center, secondary } = this;
-        return (h(Host, { key: 'c88f5a50d83ec07361ed5dd08d5b8a29fd4ac13d', role: "tablist", class: {
+        return (h(Host, { key: 'c44503ddd4b988d4c35891794c92998299811acb', role: "tablist", class: {
                 'tab-expand': expand,
                 'tab-center': center,
                 'tab-secondary': secondary,
-            } }, h("slot", { key: '9a9f51b48cef50e484e4e6b0696108e9263f0f48' })));
+            } }, h("slot", { key: '356756006ef297ea0933437004f703dc8eccacf9' })));
     }
     static get is() { return "road-tab-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -49,6 +49,10 @@
   color: var(--tab-color-selected);
 }
 
+:host(.tab-selected) ::slotted(road-label) {
+  color: var(--road-on-surface);
+}
+
 :host(.tab-selected) .button-native::after {
   height: 2px;
   background: var(--tab-underline-selected);
@@ -181,11 +185,12 @@
  -------------------- */
 
 :host ::slotted(road-label) {
-  display: -webkit-box;
+  display: flex;
+  align-items: center;
   max-width: 12.5rem;
   overflow: hidden;
   font-size: 1rem;
-  color: var(--road-on-surface);
+  color: var(--road-on-surface-weak);
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   text-align: center;

package/dist/collection/components/tab-button/tab-button.js

@@ -71,7 +71,7 @@ export class TabButton {
             rel,
             target,
         };
-        return (h(Host, { key: 'd10e81cf00ff7acb3888181bf7b60db6b7e24162', 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: '15684e85cbefb6d8646231adfc2bd423a59edb84', 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,
@@ -79,7 +79,7 @@ export class TabButton {
                 '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: '81f0045d7d4b05e70ddcbab15866ed09d70eff11' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { key: 'f167d63f29af54aa2632a0e46ca64499a70b3a22', class: "button-inner" }, h("slot", { key: '1b91f5ba629820ef6764eba4064d551ac8b6f820' })))));
+            } }, h("a", Object.assign({ key: '8808982bb613680dcf3e7e330d6ac113f2d2f47f' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { key: 'cc2bb1c13f607c1e3c8088179c3c6ce49f272222', class: "button-inner" }, h("slot", { key: 'a471b49c35cdfc57bd2f5a7156381ea051f1649f' })))));
     }
     static get is() { return "road-tab-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class Table {
     render() {
-        return (h("slot", { key: '62d09e884d94443c31146ec24273a787c6ee3787' }));
+        return (h("slot", { key: 'df60a444f486b688b982684f727e28468022b801' }));
     }
     static get is() { return "road-table"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/tabs/tabs.js

@@ -99,7 +99,7 @@ export class Tabs {
         return Array.from(this.el.querySelectorAll('road-tab'));
     }
     render() {
-        return (h(Host, { key: '27ab87f41f3d6751434e8d6a2631cbe82d0a0cbc', onRoadTabButtonClick: this.onTabClicked }, h("slot", { key: 'bbb551131576e4eee16b94217507c31c2c60a6be', name: "top" }), h("div", { key: 'f8b534238faee2fc29784b7e1725b15191349838', class: "tabs-inner" }, h("slot", { key: 'a7314be1ed2375a652afab28df2c3bb0e5a154f2' }))));
+        return (h(Host, { key: '09627e578a4f116e875445939739ffb334429c05', onRoadTabButtonClick: this.onTabClicked }, h("slot", { key: 'ffe9f5b8d3ac85e47a16650254e94376a59376de', name: "top" }), h("div", { key: '1443f709510efff63fdb972db851916406321ac5', class: "tabs-inner" }, h("slot", { key: 'ce206df02b9e5e4933bf1dde5447313cb2ecd900' }))));
     }
     static get is() { return "road-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tag/tag.js

@@ -16,7 +16,7 @@ export class Tag {
     }
     render() {
         const contrastClass = this.contrast ? `tag-${this.color} tag-${this.color}-contrast` : `tag-${this.color}`;
-        return (h(Host, { key: '0310697bbc0e468cfb7a7c2c2d1b6c7b00e5c8a1', class: `${contrastClass}` }, h("slot", { key: '70eb0d5b559ca409cb1eae30a258fada641009d3' })));
+        return (h(Host, { key: 'e69d81ddb79dcbc736b38c9f7f0e15d5328444ee', class: `${contrastClass}` }, h("slot", { key: '0dc393d2b05bb35d1d17696ea3771ad067a30962' })));
     }
     static get is() { return "road-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text/text.js

@@ -11,7 +11,7 @@ export class Text {
     }
     render() {
         const colorClass = this.color !== undefined ? `text-${this.color}` : '';
-        return (h(Host, { key: '9d1a62edc9a4602497b542292a0313ed52fc6156', class: `${colorClass}` }, h("slot", { key: '9aa0f728eae087590555f108f6562b96f5a926ed' })));
+        return (h(Host, { key: '0601af1046143f243308bb9923105842fe2c25ea', class: `${colorClass}` }, h("slot", { key: '7aa5402a3d3bbface4a39414a5415bce1b0ac878' })));
     }
     static get is() { return "road-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textarea/textarea.js

@@ -82,7 +82,7 @@ export class Textarea {
         const hasValueClass = this.value !== '' ? 'has-value' : '';
         const noResizeClass = this.resize == false ? 'no-resize' : '';
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-        return (h(Host, { key: 'b77fec4a19c3443154c949db07408a4a5c453f24', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, h("textarea", { key: 'ca0a2c4c1e436b3e99933eab9c3dd420693dd5ce', class: `form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`, id: this.textareaId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, value: value, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }), h("label", { key: 'c59652092cfebc7a0cb9b1165b9387fd9a18c8d4', class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && h("p", { key: '7f2edce4666cc9a30bc365db10917a6b3c9f28da', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: '98885d35065c4309cfa1fcf4d20188fcd17c7e49', class: "helper" }, this.helper)));
+        return (h(Host, { key: '7f097d22080a94c592b2959db0f9102054bbdc9c', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, h("textarea", { key: '96a40416be94b422af9b68d7aad0e7b3f4af3b1e', class: `form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`, id: this.textareaId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, value: value, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }), h("label", { key: 'a19dd99c28772692927f4b7d5652d8c76f7d84e0', class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && h("p", { key: 'cb94c1bac1f4e88df2b1b4b7502677298e09c599', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: '03a2fea4ed00b0c1897161812dbc01598db4296f', class: "helper" }, this.helper)));
     }
     static get is() { return "road-textarea"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/time-range-picker/time-range-picker.js

@@ -81,7 +81,7 @@ export class RoadTimeRangePicker {
         return { start: this.start, end: this.end };
     }
     render() {
-        return (h(Host, { key: '685a7671de7ffed7e612757dd378605b3036834b', class: `time-range-picker input-${this.sizes}` }, this.label && (h("p", { key: '12e0ed7a4983760428896639991992f954b1f2c9', class: "label m-0" }, this.label, this.required && h("span", { key: '7074c6b2ac09d83213c2e3fccd80a8669120ba54', class: "required-indicator" }, " *"))), h("div", { key: '623dc14b5b941c44b2cd6a3877c6f898f788f758', class: "time-range-picker-content d-flex align-items-center my-4" }, h("slot", { key: '35188a877334036853d72ef053e39ac6a2900d90', name: "start" }), h("span", { key: '1e1d3b4f5d21390c05f13e38d5e3333a555e1a62', class: "separator mx-12" }, this.separator), h("slot", { key: 'dd753814efa448dac72354add6e2774c22147139', name: "end" })), h("div", { key: '02f8b622150eda4e4499e658799894de74a20958', class: "messages mt-1" }, this.errorMessages.map((msg, index) => (h("p", { key: index, class: "invalid-feedback m-0" }, h("road-icon", { slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), msg.trim())))), this.helper && h("p", { key: '0d61bde2b23a43bf9fd726586de324c9d1e45954', class: "helper mt-1" }, this.helper)));
+        return (h(Host, { key: 'f7a337665eb1016b95f56541fdf7b6cdcdc780c8', class: `time-range-picker input-${this.sizes}` }, this.label && (h("p", { key: '772b61e54d0ca9502478ad77c187a5cc335428d4', class: "label m-0" }, this.label, this.required && h("span", { key: 'efabe848fff7e3ce895912147f88f6761a771ab0', class: "required-indicator" }, " *"))), h("div", { key: '40b1b5929465e8535e228208c7296fa4deb3854f', class: "time-range-picker-content d-flex align-items-center my-4" }, h("slot", { key: 'b49add1d8f8b7ae6555313e2d5bc0f53a885d3aa', name: "start" }), h("span", { key: '2cdd55b31ddbe0d5746512ad1541caf98c5a63e2', class: "separator mx-12" }, this.separator), h("slot", { key: '28b5151feb9c22781cb7c0a9f0896a5cd9138d92', name: "end" })), h("div", { key: '478b58bb644b82daa44f0ca9660a3f5c16b0515e', class: "messages mt-1" }, this.errorMessages.map((msg, index) => (h("p", { key: index, class: "invalid-feedback m-0" }, h("road-icon", { slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), msg.trim())))), this.helper && h("p", { key: '6fe2ec16f7f8094c8a023bba654252cc6f366cbc', class: "helper mt-1" }, this.helper)));
     }
     static get is() { return "road-time-range-picker"; }
     static get encapsulation() { return "scoped"; }