@roadtrip/components 3.39.2 → 3.41.0

package/dist/collection/components/navbar/navbar.js

@@ -21,7 +21,7 @@ export class Navbar {
         this.selectedTabChanged();
     }
     render() {
-        return (h(Host, { key: 'a57dfc3bd1c2a35ae5f0a7d84da9aae803f3248e', role: "menubar" }, h("slot", { key: '87d7969b28fa712be5cf8d6c2c1d0140f946182a' })));
+        return (h(Host, { key: '61786009c0bb1357257674a72b0f3dbf3f5c38a8', role: "menubar" }, h("slot", { key: '2f3cdbc13d1bf0d3535035bd2098ed20d048dee0' })));
     }
     static get is() { return "road-navbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/navbar-item/navbar-item.js

@@ -61,11 +61,11 @@ export class NavbarItem {
             rel,
             target,
         };
-        return (h(Host, { key: '2786c8b9e115ddfe0667fe725c7950f8dcc69077', 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: 'c392c7788ef068bff267fbc3508d3a9b9fe753d0', 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: 'd105d65f5219bfb11780eaad9a7ed229b60e0ff7' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { key: '3d18dcc0854e9d3abd1111d158ee1b406df6e388', class: "button-inner" }, h("slot", { key: '4e289b3871d38ac9c04c812c45b6f0e1ab7b4672' })))));
+            } }, h("a", Object.assign({ key: '96d3d1d8ce173906c6427a4b53dff251f2ad2d28' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { key: '2a9dd73feff76d436c37f27fc1b9a1c2678c2b6e', class: "button-inner" }, h("slot", { key: '603703ddc7865278113ec4d953ab1fc71bbc08d7' })))));
     }
     static get is() { return "road-navbar-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/navbar-item-v2/navbar-item-v2.js

@@ -61,11 +61,11 @@ export class NavbarItem {
             rel,
             target,
         };
-        return (h(Host, { key: '2439281a2a7bbbf05b9be794013bb9ff02ea8161', 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: '50cadf50d920c724b646d0ef5dfb1bf994b42891', 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: 'b559354e071b580fe0956accfdd0bc8d52b6bb7c' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { key: '9dc9d81e6f1844500f2cb220b611ab05f84d1125', class: "button-inner" }, h("slot", { key: '8b107ac8cc0d522c85aee1a1ad60c4f138c544e5' })))));
+            } }, h("a", Object.assign({ key: 'b8915357668428324fddc6dc6cf038dc8f55cfeb' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { key: '103bfedba55dab13e169d5806fa5ae3873ed860b', class: "button-inner" }, h("slot", { key: 'd1e8a5fd74c0b42550b050e4212a99e5df04902b' })))));
     }
     static get is() { return "road-navbar-item-v2"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/navbar-v2/navbar-v2.js

@@ -28,7 +28,7 @@ export class NavbarV2 {
     }
     render() {
         const compactClass = this.compact ? 'compact' : '';
-        return (h(Host, { key: 'f0864eac8a491150b1ef02a46fcf46b8fa4fc2d9', role: "menubar", class: `${compactClass}` }, h("slot", { key: '2a5bd884d6ee88c0ee73c3e48d7f9670fffc986e' })));
+        return (h(Host, { key: '43aff9eafd66ec2fb7c45a4707c758b3b182f64b', role: "menubar", class: `${compactClass}` }, h("slot", { key: '66b8748a5d4395bd03edff1b9490bdc0fe63f01a' })));
     }
     static get is() { return "road-navbar-v2"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/patterns/link.stories.js

@@ -9,6 +9,11 @@ export const Playground = () => html`
 
 <br><br>
 
+<a class="link-reverse link-default" href="#">Link</a>
+
+<br><br>
+
+
 <a class="link d-inline-flex align-items-center" href="#">
   <road-icon size="sm" class="mr-4" name="edit-pen" role="img"></road-icon>
   Link

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: '6484c3286ae67049e9bc24a0e3db17e5e93b7014' }, h("div", { key: 'f96292d1fa43ec2f4906d50b90a0ba3a17415efb', class: 'phone-number-inputs-container' }, h("div", { key: 'b30839876469719ce35173992099324238f4ec4c', class: `road-phone-input-select ${isErrorClass} ${isInvalidClass}`, slot: "prepend" }, h("select", { key: '1bf90e0a150f635f9767a85ad2c2ff93c93bd84b', 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: '133877fea8231cea94b93d8f41d81fa19d3c9a3f', class: "form-select-area-label", id: labelId, htmlFor: selectId }, this.codeLabel), h("label", { key: '7358d197f64ad8764ca5e026af67af841f38851f', class: "form-select-area-value", id: valueId, htmlFor: selectId }, "+", this.selectedCountryCode)), h("input", { key: 'ff03e87a9197bd48792c19ab28914fae980fc743', 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: '078d25b45ec64f653002b9d2302c555eea3f2c18', class: "phone-number-input-label", id: labelId, htmlFor: inputId }, this.phoneLabel)), this.errorMessage
+        return (h(Host, { key: 'b35e9d16e6e4f29defef7bdcd5cf8c2a2bd2c861' }, h("div", { key: '4c2a4f6b4d6d28bfc90b2cc85d9ab3a2c5989a2b', class: 'phone-number-inputs-container' }, h("div", { key: '5c94cfdfb637deabaaee01375f80276bb37f2ac3', class: `road-phone-input-select ${isErrorClass} ${isInvalidClass}`, slot: "prepend" }, h("select", { key: '8b226ae681f17788d5c476d531614b6063eff700', 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: 'b12b6fcbf96de164bca500332d9f9b363e6af4bc', class: "form-select-area-label", id: labelId, htmlFor: selectId }, this.codeLabel), h("label", { key: '04843eb39336e241d60d5983c1e92a6af3edead4', class: "form-select-area-value", id: valueId, htmlFor: selectId }, "+", this.selectedCountryCode)), h("input", { key: 'fb9a9b002c1638df2eb593c6f95181cca6b91c14', 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: '83bafd94dea321d0a8ab7cd50cc6d29f71d83d34', class: "phone-number-input-label", id: labelId, htmlFor: inputId }, this.phoneLabel)), this.errorMessage
             && this.errorMessage !== ''
-            && h("p", { key: '845c8c6c41455aa8f172c835c9ea382461d60974', class: "invalid-feedback" }, h("road-icon", { key: 'f9ad73e78eb3a099e5b28dd23d57cc729491ca7a', slot: "start", color: 'danger', name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), this.errorMessage)));
+            && h("p", { key: '01aafef72de6d89f0f8bbd912759ea98b3992e87', class: "invalid-feedback" }, h("road-icon", { key: '02a98a05942b1c096a70a4112c0f074faa5843d7', 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: 'ad922da7a29eb59b3add23952cf559f8f26401e0', class: `plate-number plate-number-${this.country.toLowerCase()} ${motorbikeClass}` }, h("label", { key: 'ed0cec493069943e524a6e1030096e7632f050d8', slot: "prepend", class: "input-group-prepend" }, h("div", { key: 'dc913e16afacb76d9c4a87bf17c00f67d6ec3202', class: "plate-number-start" }, h("road-icon", { key: 'f2042fdf0a83c2db908190e286812878f6f50195', class: "plate-number-icon", icon: licensePlateStarEu }), h("div", { key: 'a5d86d712badf1d58c7ed639b35977024659270b', class: "plate-number-location", "aria-label": this.country, role: "img" }, this.countries
+        return (h("road-input-group", { key: 'ff8a8904113c2ba38d351de6d7e8a5ca6552344e', class: `plate-number plate-number-${this.country.toLowerCase()} ${motorbikeClass}` }, h("label", { key: '00a82c0c874d044dffae46bcd3c125cabf93871e', slot: "prepend", class: "input-group-prepend" }, h("div", { key: 'f19852dda75eead5634c48bdd95db8e69b3fcf2d', class: "plate-number-start" }, h("road-icon", { key: '9e8ec737ee80c35402b26ac104a31f9df199fe86', class: "plate-number-icon", icon: licensePlateStarEu }), h("div", { key: '2f3483237c65a1cb542ebd3abd7caa43c8d0fb60', 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: '8019dc8f6742725e7f98d0c2dd8a14c237aeaf5a', slot: "append", class: "input-group-append" }, h("div", { key: '3fa83252e8743dc64bbe74bf0e56f2794ac6d7bc', 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: '0378a2bbcaa0fd90f7a3f195f1a4e31806e2ff13', slot: "append", class: "input-group-append" }, h("div", { key: 'fddb65007529730731c4410cf407bdcbcfcbbf93', 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: '4c6962a4781dd3d5a6e6eef529f048f13de405ac', class: "dropdown", open: this.isOpen }, h("summary", { key: 'a90e142e8508b169a9e7f08faba4e87fee14bedf', "aria-expanded": `${this.isOpen}`, tabindex: "0", role: "button", onClick: this.onClick }, h("div", { key: 'c53e854e8a9584ad3fbcbe970a09e08d5880d6e5', class: `d-flex` }, h("div", { key: '9acbc23adba42ac6322f12c100c6691df0947234' }, h("road-avatar", { key: '3447cf1cc5bc838dfcf0f6711845bd70e255b5b1' }, h("slot", { key: '99c11772dc9b2355394a65133fcbbbf890f809da', name: "avatar" }))))), h("div", { key: '026dca27e856092b7f649a87b6808e47a497c44a', class: `dropdown-menu` }, h("div", { key: '1399d368e674f8c35c15f78a7d5751b9b9be062c', class: "profil-item" }, h("road-avatar", { key: '0571aecb63ccb518d6987e22dcdc00a857ff2c86', size: "sm" }, h("slot", { key: '848ca5a83485fdc1754dce1a1fb3cb5b297a5416', name: "avatarItem" })), h("div", { key: '5327823b0e03cae6b8ebe0ead29dd40e6f131429', class: "profil-item-info" }, h("span", { key: '834775e093e0db9d6e0cc97b133e0e3397c1a6b1', class: "profil-item-info-name" }, h("slot", { key: '01c8c2278afc8daccc8bc29dae4ec100761891ed', name: "name" })), h("road-label", { key: '7e5c94cadda56ed66aba93607cf70caf2fca5240' }, h("slot", { key: '56b80c83fd4b63679489ca8e43f0dd2a10f4b1fb', name: "email" })))), h("slot", { key: '3371b449984237cf223f4da5f2636829deb233b7', name: "list" }))));
+        return (h("details", { key: 'b87c57717a2b24c36a021566c0caf902be2dc730', class: "dropdown", open: this.isOpen }, h("summary", { key: '5b8a7a636d992b9f7cf087de5792f77570b031a7', "aria-expanded": `${this.isOpen}`, tabindex: "0", role: "button", onClick: this.onClick }, h("div", { key: '8fa86bcbcb09361bbddbdaf02e239c1a6ee439b2', class: `d-flex` }, h("div", { key: '8f72235d6d44e20671022d84718aecf76cb0f2a2' }, h("road-avatar", { key: '5a3075b025e47fd0c5e092863fae3a111ca5b737' }, h("slot", { key: 'e736fe17013d86ca78a4bca99af10e6a595c151c', name: "avatar" }))))), h("div", { key: 'c12f79bff86f7674764ff9f498394a172044997a', class: `dropdown-menu` }, h("div", { key: '9ea9939892d5b0b21a45d99120981887ee7816ed', class: "profil-item" }, h("road-avatar", { key: '3c24e96cf92bc6979c0d5212cb58285b35598de9', size: "sm" }, h("slot", { key: 'c8ce0ac4929af5c830628c477cec9dbfc584fd7e', name: "avatarItem" })), h("div", { key: '981466eec9a42648620fa4d77d0294bdde264316', class: "profil-item-info" }, h("span", { key: 'aca08ad4ffb9439e649a5f83d3b34a4813465372', class: "profil-item-info-name" }, h("slot", { key: 'c7fa79f90c906e705cb89b1b1eea664f7852aa60', name: "name" })), h("road-label", { key: '77410fe9d9f4af29ecc59f787840a39490ebbf26' }, h("slot", { key: '5055c32f3bfefc68084e42417ab54959e2d1fae7', name: "email" })))), h("slot", { key: '656ad0ffc1bb8ebb1725ddf823ffc29384448a0a', name: "list" }))));
     }
     static get is() { return "road-profil-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -40,7 +40,7 @@ export class ProgressBar {
         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: '080af439e45c901c8a033c66bbb5681746e371fb', class: "progress-element" }, h("div", { key: 'efcafa89891a4d9f62c50816d5fc357fa0431569', class: `${light} progress-${this.color} ${animation}` }, h("div", { key: '03ae558c17cae1c974160626509ce7abd0a5be48', 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: 'c5e0c2bb85b8e9fbe624dcd6feb7aab1ec807883', class: `${fullwidth}` }, h("span", { key: '050c1d441d79a81cd3b0d9a77a3358ccfa0e3112', class: "progress-element-label" }, this.label), this.showstep && h("span", { key: 'e46a1315cb8cfd61a62bd64c88b7403a28b54e51', class: "progress-element-step" }, valueRound, "/", this.numbersteps))));
+        return (h(Host, { key: '61241f17f6940f6952d6167024a884a1c568384b', class: "progress-element" }, h("div", { key: '97d64b38a2f46e9805bb76fa73d67fcd28a54dba', class: `${light} progress-${this.color} ${animation}` }, h("div", { key: '275c170d8a016e4db0a840e65aa42bfca9f75f45', 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: '50d933874085cb3831ae6950fc1377ecece5724f', class: `${fullwidth}` }, h("span", { key: '166a60c0f771060852783af7f932892bdb16c0b7', class: "progress-element-label" }, this.label), this.showstep && h("span", { key: 'e7ba9b328ddff0d722e0ee5e22aef7746f0e085a', class: "progress-element-step" }, valueRound, "/", 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: 'c7b533fd5241dbaf0c3275844b411d2a6c4a57ec' }, h("nav", { key: '3679fc96e8af765c77d79cd66100c9d038d675ff' }, h("ul", { key: '88c8020ee996810f49725b51f5fb4118fbffe4a7', class: `${colorClass}` }, h("li", { key: '961e19ae0950052ba5ca3653fde8e66254b600aa', class: `${stateClass}` }, h("a", { key: '339beb73a406c196770f0c832fbe7b1d4452e97f', class: "progress-indicator-horizontal-link", href: `${urlStep1}` }, h("span", { key: '910003e080c3c111613120cd7c09ce925b32925b', class: "progress-indicator-horizontal-icon" }, h("slot", { key: '264e33aab1b7b4776a8b8535a923bfc6311be561', name: "progress-indicator-horizontal-icon" })), h("span", { key: '2bf6210a8a99fb0c766cd895e889bf463ea0d1fc', class: "progress-indicator-horizontal-title" }, h("slot", { key: '8b10230923c8a6051592bfd740dcc31c3617ff36', name: "progress-indicator-horizontal-title" })))), h("li", { key: '829f421c2f7b8342a951037f369eb792128c48d0', class: `${stateSecondStepClass}` }, h("a", { key: 'fa0f0c8b6151121db0b050fbcde512364073566a', class: "progress-indicator-horizontal-link", href: `${urlStep2}` }, h("span", { key: 'b7621f5a2018cc48dee843757c219e4d0a803c7f', class: "progress-indicator-horizontal-icon" }, h("slot", { key: 'f849e2604e24e7dc403451f1f285f7366cf28f09', name: "progress-indicator-horizontal-icon2" })), h("span", { key: 'efc1eb034b566279037db371d480c9344390f957', class: "progress-indicator-horizontal-title" }, h("slot", { key: 'b274a56147cb164a44780d7c4a02043d123012a6', name: "progress-indicator-horizontal-title2" })))), this.numberStep == 3 && h("li", { key: '6cd846d302ea7fed863b59a8954803d5591602cb', class: `${stateThirdStepClass}` }, h("a", { key: 'dd94c6d10ec7f36ea98994a277282a721d290b15', class: "progress-indicator-horizontal-link", href: `${urlStep3}` }, h("span", { key: '64c4471bb5f2098e188866b83907557c296d59d6', class: "progress-indicator-horizontal-icon" }, h("slot", { key: '471413fe74772fba4724c93791c59d4353be1c50', name: "progress-indicator-horizontal-icon3" })), h("span", { key: '9339d6d80e7f30e15335000dabba92c976a43a92', class: "progress-indicator-horizontal-title" }, h("slot", { key: 'a8055c4f80695160b3ef9210a060f5b4d2039b67', name: "progress-indicator-horizontal-title3" }))))))));
+        return (h(Host, { key: '2f7ef35d5517a148676c46d55561a47092ed0ff3' }, h("nav", { key: 'efe3d51a472a7472a9f2f0da1403e223bca22513' }, h("ul", { key: 'f4046d581b8ed717bda8be93efa0870bfa7e4369', class: `${colorClass}` }, h("li", { key: 'fb431196011a0cd284847f13b1d5999e69487b5b', class: `${stateClass}` }, h("a", { key: '28b3e5b0c12593b2c26832777766524f5342c253', class: "progress-indicator-horizontal-link", href: `${urlStep1}` }, h("span", { key: '535d3f5fc73aa22f87a9284ee4498dd975c3e977', class: "progress-indicator-horizontal-icon" }, h("slot", { key: '492dbf0cfff34689a1513714c475a9f2b4cc6727', name: "progress-indicator-horizontal-icon" })), h("span", { key: 'ecaf988f2dec663478169103b34820cdf7da4702', class: "progress-indicator-horizontal-title" }, h("slot", { key: '4443bf77b78b0fcbb44046b95a9121abe0e22226', name: "progress-indicator-horizontal-title" })))), h("li", { key: '15328f9d9a15ada2ff751b651084bfa0e83f7d5a', class: `${stateSecondStepClass}` }, h("a", { key: '441f9a53903b3a14d0fab8296213ce10f16dc5b6', class: "progress-indicator-horizontal-link", href: `${urlStep2}` }, h("span", { key: '31b6487818279d37e486acb20363b527762481da', class: "progress-indicator-horizontal-icon" }, h("slot", { key: 'b03d967c5a09640253b5edb8425f855d8eb790bc', name: "progress-indicator-horizontal-icon2" })), h("span", { key: 'bfcd4994aa5fb7eee27419033b87f0e248ddeb81', class: "progress-indicator-horizontal-title" }, h("slot", { key: 'f5a493c800b9f7466ffb85d37d460844cbb05573', name: "progress-indicator-horizontal-title2" })))), this.numberStep == 3 && h("li", { key: 'bca52096f27dc5e9ae3e12419882b4dd7a8bc1d9', class: `${stateThirdStepClass}` }, h("a", { key: '74f8d7e8fef0f43a07d1cca3f5233d364e77eca5', class: "progress-indicator-horizontal-link", href: `${urlStep3}` }, h("span", { key: 'f37905f33aa30a1fe5d64bea3ed352bd22faf729', class: "progress-indicator-horizontal-icon" }, h("slot", { key: '27666dc115efe677af2bf91d73dd5a1f35c28518', name: "progress-indicator-horizontal-icon3" })), h("span", { key: 'cd081a852ac065372324b17e8a3992429b87b16e', class: "progress-indicator-horizontal-title" }, h("slot", { key: 'fd71af01b710df38a3a06ed75757d2df1d8193ea', 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: '5fe5373acd2c35744a9b60bc7e91ed5bbb2a1ada' }, h("nav", { key: '7d7a3bfac49b57a6a4c57726c855d8e50801fcc5' }, h("ul", { key: '4205db5a5873f0f0bcef1d735d7c44e8690c3442' }, h("li", { key: '49cce64e4e60bc908af6febbdf077b361307f8a4' }, h("slot", { key: '00c252a9949779a2d3148a3eb404410cfec6a466' }))))));
+        return (h(Host, { key: '8df70b09eb63e027b39c4843ae497cef5e39c2ed' }, h("nav", { key: '0d6025a44bd845363096fc6e002a334263dac3c9' }, h("ul", { key: '4d81713de26f798637118ee3af681eb6f668513f' }, h("li", { key: 'bb4bf5dd01f940e3811ab5adf4a90d05ef4fab8c' }, h("slot", { key: '18e8f5f3cddb2a2c6816127596d469a93ca2430c' }))))));
     }
     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: '7cafa7410a58d53c1e369efa22cdc994fa961082' }, h("slot", { key: '1c7bfb9947f8db82d1248b61a2e59a261a015576' })));
+        return (h(Host, { key: '17ae276834ff832dcf77111aeeda48b8ca9dc72e' }, h("slot", { key: '624e68ac134752cb835e1cfdba7aa1db8d1f5152' })));
     }
     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: '4b800c967f9856eb3f9300052bb2bf25923d89d2' }, h("nav", { key: '3fb92e245b3e9e6b7fea1c32243a57abcbaa12e7' }, h("ul", { key: '969719a6a169ab1746c651f8585d75ef3149adc3' }, h("li", { key: '9f9a1f612e18de1589be43f60a1543288d100c02' }, h("slot", { key: 'ad39bd1a8e16ca349a2de0b100d5202130f0c362' }))))));
+        return (h(Host, { key: '558bbc6dc32d8f5e29cd9dd0e33ff210bc8e231f' }, h("nav", { key: '386429b7b2670bd9e1cfde6eb895fcdb9fc26a66' }, h("ul", { key: '67357a2d0f7777b39b390a6fc1f2609f7e504f0d' }, h("li", { key: '6bd942a3d6c358f1988b58b16c65bc1f635c690f' }, h("slot", { key: '47ab21f544caa20f3623d7a6b299a84cb17b2927' }))))));
     }
     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: '0c16e41e50d438bad6afb7e663a70543aeaa8676' }, h("slot", { key: '416aee7102487a9a8aed3c0ea8558852bb823818' })));
+        return (h(Host, { key: 'f0323f8e11d15162868f6679d958a7eb3c732c94' }, h("slot", { key: 'f723c3ff78b34c68bbe3f675d93ff61a6eb24a27' })));
     }
     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: 'f5b027dc16bc641585e97550ad766623135e9c41', class: `form-radio ${inlineClass}` }, h("input", { key: '3b00622bdf8dd0f896e894fc467371d7f4457150', 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: '52ab130dbc0eba9dd863a8a0265933ee0ff5319b', class: `form-radio-label ${inverseClass}`, id: labelId, htmlFor: this.radioId }, this.label, " ", h("span", { key: 'b7dd11638e9de4e2a9fd248c3c6dcbabc1ce8767', class: "form-radio-label-span" }, this.secondaryLabel))));
+        return (h(Host, { key: '586f04a19cf450f18483a2b9efa5b28d44e1677c', class: `form-radio ${inlineClass}` }, h("input", { key: 'd66ab388470a1c6e2f4ae3ceb5ae8aa8c85eecf5', 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: '709969471cc1db265d7eb44e608ed0ef496cc72d', class: `form-radio-label ${inverseClass}`, id: labelId, htmlFor: this.radioId }, this.label, " ", h("span", { key: 'd551c29f4895ca78cb7bb331861d783281416749', 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: '300a4069b88a6a118306571a8d5d7fcf5a217b2d', class: `form-radio ${inlineClass}` }, h("div", { key: '9c77a91579d59e96e80e68e2ba441c4a141e3d0f', class: `radio-card ${selectedClass}  ${disabledClass}`, onClick: this.onClick }, h("input", { key: '9f06c516bb66a8443b5d2e1599df8a69d4e3b0fb', 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: 'a1b878ff8b9cd9c950d888218e776d62d35ebfd5', class: "form-radio-label", htmlFor: this.radioId, id: labelId }, h("div", { key: 'd52d210696979c4e1e05fd508ed97c40214efb21', class: "slot-wrapper" }, h("slot", { key: 'bad9aa4fdbb018560fb17f0dc3a1530c590e215a' }))))));
+        return (h(Host, { key: 'c0910c6654a5a43b06b48b784177d52fcad7d0e9', class: `form-radio ${inlineClass}` }, h("div", { key: '52b04eb5baf4321d07da8dc13cb213491c7f8376', class: `radio-card ${selectedClass}  ${disabledClass}`, onClick: this.onClick }, h("input", { key: 'e196a6962b45f72b80f3f5837e168fb3a29618f0', 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: '2bfe44595464f2977c3ce6603a1e6b74e5b36a25', class: "form-radio-label", htmlFor: this.radioId, id: labelId }, h("div", { key: 'b7e50b7fc4ace0011ba413bffa7d99d048083710', class: "slot-wrapper" }, h("slot", { key: '2026d471ed70c8bd6a773ec108583eeb2d721b93' }))))));
     }
     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: 'a5f1ffd34e8e7352cd7a2b7d543c498a681eb8ed', role: "radiogroup", class: `form-group ${isInvalidClass}`, "aria-label": this.ariaLabel, onClick: this.onClick }, this.label && h("p", { key: '4e1c213e7eb56deb2f7596517010934494607443', class: "text-content", id: labelId }, this.label, " ", this.asterisk && h("span", { key: '0a6111208c8cbdd2eedd074d3a46f9ab54a912fe', class: "asterisk" }, "*")), h("slot", { key: 'fbd7f1c60b05fca674acd83b13f44dbb104199e7' }), this.error && this.error !== '' && h("p", { key: '5a5fd7cece4df1151a6de47b69276a4aa2ae7a1f', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: 'd49b4ab899c4b43a7ce1bac4c1b087a5a8733d5c', class: "helper" }, this.helper)));
+        return (h(Host, { key: '92a0a50c9deb1ec6e7e14a18c953019deac3aa5a', role: "radiogroup", class: `form-group ${isInvalidClass}`, "aria-label": this.ariaLabel, onClick: this.onClick }, this.label && h("p", { key: '5b6cc3d7aed55eb469fc0abf5b85c93402df832f', class: "text-content", id: labelId }, this.label, " ", this.asterisk && h("span", { key: '8d38bdc1820b184757bed13a389cd81179a4eab6', class: "asterisk" }, "*")), h("slot", { key: '6e45e1330d3f2a078ec3e3e6562a14025d377f6b' }), this.error && this.error !== '' && h("p", { key: '8271bf6be84430530d6f13ff30b4589ea018a322', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: 'ffe6ae4713d74c66f995f0b6ed7e459a5096d5f1', 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: 'cb1120583650d9c52b4aa9f03fa71d90103e39c9', tabindex: "0", class: { disabled: this.disabled } }, h("div", { key: 'b435ff0be2c86b9598f7c525413943b4df0470f3', class: "form-group d-flex align-items-end" }, this.showTick && (h("road-icon", { key: '7d093d346aa1d5f1a305eaa6f798e54581e86820', icon: navigationAddLessSolid, class: "mr-8", size: "sm" })), h("div", { key: '6e8a3d9fbedbe1645f529df428f1d2d954c107e1', class: "form-range", style: {
+        return (h(Host, { key: '70682c392f1e20883fb831efc8de0f9a067b3009', tabindex: "0", class: { disabled: this.disabled } }, h("div", { key: '981f26d40294cd905075d0745e4728543bdc618e', class: "form-group d-flex align-items-end" }, this.showTick && (h("road-icon", { key: '43f2969c43d2573de4db51261263ff22d834cc89', icon: navigationAddLessSolid, class: "mr-8", size: "sm" })), h("div", { key: '2009bfe7013711fcac093f8c67f54daf8f293d05', 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: '0b073c56edf53783bc572b26ea4686a260eb25c4' }), this.showLabels && h("slot", { key: 'fff8d5daad01eb14a609b2eefd9a98603cfb8f52', name: "datalist" }), h("input", { key: '1a13b5d7438a90848de90f357946161ff1f34f0c', 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: '3212a0c931c4c7f1ccbf42207df18089c16219d0', class: "form-range-label" }, "Valeur"), h("div", { key: '91fad7b8831a2729c0eef1d6926216ca512a681a', class: "form-range-progress" })), this.showTick && (h("road-icon", { key: '8eb7262328aecab4ab5049144ddddbb61fe0d86f', icon: navigationAddMoreSolid, class: "ml-8", size: "sm" })))));
+            } }, this.showValue && h("output", { key: 'b918d44808d44f446f88781b56a18da28768d184' }), this.showLabels && h("slot", { key: '341f43e617bca8decaa791170065658cf5c57923', name: "datalist" }), h("input", { key: '20d9d42bcfd89eb76a9459571cec4e790d8904f4', 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: '6ff1fbdc6111509511a1e50e0e65f43ec692f74f', class: "form-range-label" }, "Valeur"), h("div", { key: 'fadff2d5d9fda1b85290a4c39697968b13470412', class: "form-range-progress" })), this.showTick && (h("road-icon", { key: '79f4b51b9e695692777ab37b36511dfc8209812c', 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: '1f8f39ccb9cf1626c9202fa36ac1961a9d4723a3' }, h("div", { key: 'de2a92ba11560ed1dbfb93972ad0f07aed30e7c8', 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: '6093c5e21eb0e0f47de0335a8877038af0009816', class: `${sizeRatingNumberClass}`, href: this.url }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")"), this.readonly == true && this.showreviews && h("road-label", { key: '5d11f24f8d2356666e328fc86e0f5557093793ed', class: `${sizeRatingNumberClass} ${readOnly}` }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")")));
+        return (h(Host, { key: 'de9146b27a97204cf394332ed3cd39872b2021be' }, h("div", { key: '10e5404e7b77281cbc6db3c7b5443158cff0d5d2', 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: 'ba4c82ef9eff58a95cb6049839c26c2a2e74dd2d', class: `${sizeRatingNumberClass}`, href: this.url }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")"), this.readonly == true && this.showreviews && h("road-label", { key: 'd7066a54aecd03e699e63ef2c4546a350252712a', 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: '09ff16b1adc520c9cdef2c6f896f3bdc39c955ce' }, h("slot", { key: 'cb9611e0e0d56ebd9b6eb9796fe80755d2cf1e1d' })));
+        return (h(Host, { key: 'c38bbf8641a80fc8ebb76c25f5cec3070127c569' }, h("slot", { key: 'b8459fd13efb02e5b04fb4558533f89f37cbe858' })));
     }
     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: '863bee27ee0f19d6db0382687b0e8e79bd013a98', 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: 'f97ac52e941a6d41c3cc1ebde88396c7a88bcc5b', 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: '9e16e5ad2ce62ecbf1d27c01ce0fe5fbdfae023e', tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, h("span", { key: '96f9bf0fac28111e1b400a3f721ad6df4d726253', class: "button-content" }, h("slot", { key: '474845bdcfbc64a70581c715efaa74e87631875a' })))));
+            } }, h("span", { key: 'd608b3b0da3af5184b3a4faeda5bfc6d643cb14f', tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, h("span", { key: '6aab4780198238402d5911e60b905d8187624266', class: "button-content" }, h("slot", { key: '12d3b5ebb3de039dffd9d99bd658de975a2ed6df' })))));
     }
     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: '20a78b478a8d346e40af1065cfc57e273498d389', role: "tablist" }, h("slot", { key: 'aadc0d0830d3110041dc4e0fa7f93f0a42fdefc5' })));
+        return (h(Host, { key: 'a5bf3fc09d2e077e087ae5246ee562aed29472a5', role: "tablist" }, h("slot", { key: '48a1e2e24b79f769bc35e4d048218210be1b0d56' })));
     }
     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: '760ffd7c98659dc00187c97e3d01ce92409584a5', onRoadSegmentedButtonClick: this.onTabClicked }, h("slot", { key: 'dfd7acfd76741333868ff7dce2f88c27f2413808', name: "top" }), h("slot", { key: 'e7ed6139b95280e972025c5028e0694da0f26265' })));
+        return (h(Host, { key: 'd1d9e0ab7ed50aa338646a473b2c3e22d4a30f6b', onRoadSegmentedButtonClick: this.onTabClicked }, h("slot", { key: '681bb4fdcf7bc99dd558723c85ea65b6182a7556', name: "top" }), h("slot", { key: '395d680d41e4c831d7e12e2d4b5e83e74d1128cf' })));
     }
     static get is() { return "road-segmented-buttons"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select/select.css

@@ -179,3 +179,12 @@
 .was-validated .form-select:invalid ~ .invalid-feedback {
   display: block;
 }
+
+/* HELPER
+ -------------------- */
+
+.helper {
+  margin-top: 0.5rem;
+  font-size: var(--road-body-small);
+  color: var(--road-on-surface-weak);
+}

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: '531ff3e04c4447214779844ba29b2208ded29d12', class: this.sizes && `select-${this.sizes}` }, h("select", { key: 'e5336849c3992793152ffcc2b3670f96c0c1129b', 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: 'f9f2f7857d3ce3cdb0205b5589388ad0417d6802', 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: '4c2d444e030ef6168b4871ae5381550295b91e5f', class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && h("p", { key: '40808526b05350e9d59dedd814ca620368fa6098', class: "invalid-feedback" }, this.error)));
+        return (h(Host, { key: 'fb313bb494596711a3b9f5c893ad32718d8b91b9', class: this.sizes && `select-${this.sizes}` }, h("select", { key: '1414476677d43a66f4386b33d0e214dfda608f3c', 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: 'e76bb7a68a1876237168287ed1c644489b01ae1d', 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: 'a8e873fecdd61d0b329cac070f3705aaf534e846', class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && h("p", { key: '82ba6e3b17d05cd9b90ce1b47c1fabe7673753d2', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: '6641b93d7b62266d671196f340d8ff2b385b5159', class: "helper" }, this.helper)));
     }
     static get is() { return "road-select"; }
     static get encapsulation() { return "scoped"; }
@@ -231,6 +231,25 @@ export class Select {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "helper": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper message for the field"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "helper",
+                "reflect": false
+            },
             "size": {
                 "type": "number",
                 "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'road-select',\n  styleUrl: 'select.css',\n  scoped: true,\n})\nexport class Select {\n\n  /**\n   * The id of select\n   */\n  @Prop() selectId: string = `road-select-${selectIds++}`;\n\n  /**\n   * List of options of the select\n   */\n  @Prop() options: Array<{\n    value: string | number;\n    label: string;\n    selected?: boolean;\n  }> = [];\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n   */\n  @Prop() autofocus: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the select.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.selectId;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If the control is presented as a scrolling list box (e.g. when multiple is specified),\n   * this attribute represents the number of rows in the list that should be visible at one time.\n   */\n  @Prop() size: number = 0;\n\n  /**\n   * The sizes of the input.\n   */\n  @Prop() sizes: 'md' | 'lg' | 'xl' = 'xl';\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.selectId}-label`;\n\n  /**\n   * Error message for the field\n   */\n  @Prop() error?: string;\n\n  /**\n   * the value of the select.\n   */\n  @Prop({ mutable: true }) value?: any | null;\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  /**\n   * Emitted when the select has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  @Watch('value')\n  valueChanged() {\n    if (this.value === null) {\n      this.resetSelection();\n    } else {\n      this.addSelected();\n    }\n\n    this.roadchange.emit({\n      value: this.value,\n    });\n    this.roadChange.emit({\n      value: this.value,\n    });\n  }\n\n  componentWillLoad() {\n    if (this.value === null) {\n      this.resetSelection();\n    } else {\n      this.addSelected();\n    }\n  }\n\n  addSelected() {\n    // Désélection de toutes les options\n    this.options.forEach(option => option.selected = false);\n\n    // Sélection de la nouvelle option si elle correspond à la valeur actuelle\n    const selectedOption = this.options.find(option => option.value == this.value);\n    if (selectedOption) {\n      selectedOption.selected = true;\n    }\n  }\n\n  resetSelection() {\n    this.value = null;\n    this.options.forEach(option => option.selected = false);\n  }\n\n  private onChange = (ev: Event) => {\n    const select = ev.target as HTMLSelectElement | null;\n    if (select) {\n      this.value = select.value || null;\n    }\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  render() {\n    const labelId = this.selectId + '-label';\n    const hasValueClass = this.value && this.value !== '' ? 'has-value' : '';\n    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host class={this.sizes && `select-${this.sizes}`}>\n        <select\n        class={`form-select ${hasValueClass} ${isInvalidClass}`}\n        id={this.selectId}\n        aria-disabled={this.disabled ? 'true' : null}\n        autoFocus={this.autofocus}\n        disabled={this.disabled}\n        name={this.name}\n        required={this.required}\n        size={this.size}\n        onChange={this.onChange}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n      >\n        <option\n          selected={!this.value} // sélectionné si this.value est null ou vide\n          disabled\n          hidden\n          style={{ display: 'none' }}\n          value=\"\"\n        >\n        </option>\n        {this.options && this.options.map(option => (\n          <option\n            value={option.value}\n            selected={this.value !== null && option.value == this.value}\n          >\n            {option.label}\n          </option>\n        ))}\n      </select>\n        <label class=\"form-select-label\" id={labelId} htmlFor={this.selectId}>{this.label}</label>\n        {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n      </Host>\n    );\n  }\n\n}\n\nlet selectIds = 0;\n"]}
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'road-select',\n  styleUrl: 'select.css',\n  scoped: true,\n})\nexport class Select {\n\n  /**\n   * The id of select\n   */\n  @Prop() selectId: string = `road-select-${selectIds++}`;\n\n  /**\n   * List of options of the select\n   */\n  @Prop() options: Array<{\n    value: string | number;\n    label: string;\n    selected?: boolean;\n  }> = [];\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n   */\n  @Prop() autofocus: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the select.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.selectId;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Helper message for the field\n   */\n  @Prop() helper?: string;\n\n  /**\n   * If the control is presented as a scrolling list box (e.g. when multiple is specified),\n   * this attribute represents the number of rows in the list that should be visible at one time.\n   */\n  @Prop() size: number = 0;\n\n  /**\n   * The sizes of the input.\n   */\n  @Prop() sizes: 'md' | 'lg' | 'xl' = 'xl';\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.selectId}-label`;\n\n  /**\n   * Error message for the field\n   */\n  @Prop() error?: string;\n\n  /**\n   * the value of the select.\n   */\n  @Prop({ mutable: true }) value?: any | null;\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  /**\n   * Emitted when the select has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  @Watch('value')\n  valueChanged() {\n    if (this.value === null) {\n      this.resetSelection();\n    } else {\n      this.addSelected();\n    }\n\n    this.roadchange.emit({\n      value: this.value,\n    });\n    this.roadChange.emit({\n      value: this.value,\n    });\n  }\n\n  componentWillLoad() {\n    if (this.value === null) {\n      this.resetSelection();\n    } else {\n      this.addSelected();\n    }\n  }\n\n  addSelected() {\n    // Désélection de toutes les options\n    this.options.forEach(option => option.selected = false);\n\n    // Sélection de la nouvelle option si elle correspond à la valeur actuelle\n    const selectedOption = this.options.find(option => option.value == this.value);\n    if (selectedOption) {\n      selectedOption.selected = true;\n    }\n  }\n\n  resetSelection() {\n    this.value = null;\n    this.options.forEach(option => option.selected = false);\n  }\n\n  private onChange = (ev: Event) => {\n    const select = ev.target as HTMLSelectElement | null;\n    if (select) {\n      this.value = select.value || null;\n    }\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  render() {\n    const labelId = this.selectId + '-label';\n    const hasValueClass = this.value && this.value !== '' ? 'has-value' : '';\n    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host class={this.sizes && `select-${this.sizes}`}>\n        <select\n        class={`form-select ${hasValueClass} ${isInvalidClass}`}\n        id={this.selectId}\n        aria-disabled={this.disabled ? 'true' : null}\n        autoFocus={this.autofocus}\n        disabled={this.disabled}\n        name={this.name}\n        required={this.required}\n        size={this.size}\n        onChange={this.onChange}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n      >\n        <option\n          selected={!this.value} // sélectionné si this.value est null ou vide\n          disabled\n          hidden\n          style={{ display: 'none' }}\n          value=\"\"\n        >\n        </option>\n        {this.options && this.options.map(option => (\n          <option\n            value={option.value}\n            selected={this.value !== null && option.value == this.value}\n          >\n            {option.label}\n          </option>\n        ))}\n      </select>\n        <label class=\"form-select-label\" id={labelId} htmlFor={this.selectId}>{this.label}</label>\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}\n\nlet selectIds = 0;\n"]}

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

@@ -38,6 +38,10 @@ export default {
       description: "The sizes of the input.",
       control: 'number',
     },
+    helper: {
+      description: "Helper message for the field",
+      control: 'text',
+    },
     sizes: {
       description: "If the control is presented as a scrolling list box (e.g. when multiple is specified),\nthis attribute represents the number of rows in the list that should be visible at one time.",
       options: ['md', 'lg', 'xl'],
@@ -95,6 +99,7 @@ export default {
 const Template = (args) => html`
   <road-select 
     .options=${args.options}
+    helper="${ifDefined(args.helper)}"
     label="${ifDefined(args.label)}"
     disabled="${ifDefined(args.disabled)}"
     required="${ifDefined(args.required)}"
@@ -129,3 +134,8 @@ export const Error = Template.bind({});
 Error.args = {
   error: 'Select an item',
 };
+
+export const Helper = Template.bind({});
+Helper.args = {
+  helper: 'Helper text',
+};

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: 'eb209aa9c9421eca958fe21a8598edc774d61406', "is-active": isActive }, h("slot", { key: '4c7bc828b789101338eafd5091cde5fe749db9a9' }), this.isOpen && (h("div", { key: '4f7f5ade504721515a8f5f5ffd6ec93178336b4d', 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: 'b1411c1e27ab139c15417acfe996f70f1412f049', "is-active": isActive }, h("slot", { key: 'cf2229232ebeb1b781f44dac2ce2bcc19eb56282' }), this.isOpen && (h("div", { key: '568f2f9ea1dfa8f6178805062cc5d391fbb1e122', 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: 'd0f6fa2c6d1346b4dbdf15e3a2d8f5776961a625' }, "\u00A0"));
+        return (h("span", { key: '33cfe20d51c54101ccf43a5027549fa79d707cab' }, "\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: 'a13fe873d986f18ad6e24d03c8ed2cc08d111bfb', class: `${sizeClass}`, viewBox: "25 25 50 50" }, h("circle", { key: '2be205cfa0e2fb9898578db0205ecabc865cddf2', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
+        return (h("svg", { key: '90d3a6eafbf227b79edf5b298b2bd5e212436c7a', class: `${sizeClass}`, viewBox: "25 25 50 50" }, h("circle", { key: '9a90e8724a39005b1a51029b25401fc876149571', 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

@@ -0,0 +1,94 @@
+/*
+ * Status Chip
+ *
+ * Index
+ * - Icon
+ * - Size
+ */
+
+:host {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  height: 1.5rem;
+  margin-bottom: 0.5rem;
+  font-size: var(--road-font-size-14);
+  cursor: pointer;
+  border: 0;
+  border-radius: 1.625rem;
+  outline: 0;
+  background-color: var(--road-info-surface);
+  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;
+}
+
+.chip-description {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--road-spacing-01) var(--road-spacing-05) var(--road-spacing-01) var(--road-spacing-03);
+}
+
+/* ICON
+ -------------------- */
+
+.chip-icon {
+  width: 1rem;
+  height: 1rem;
+  margin-right: var(--road-spacing-03);
+  border-radius: 50%;
+  transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+
+/* SIZE
+ -------------------- */
+
+
+:host(.chip-md) {
+  height: 2rem;
+  font-size: var(--road-font-size-16);
+}
+
+
+:host(.chip-md) .chip-description {
+  padding: var(--road-spacing-02) var(--road-spacing-05) var(--road-spacing-02) var(--road-spacing-03);
+}
+
+:host(.chip-md) .chip-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+:host(.chip-lg) {
+  height: 2.5rem;
+  font-size: var(--road-font-size-16);
+}
+
+:host(.chip-lg) .chip-description {
+  padding: var(--road-spacing-02) var(--road-spacing-06) var(--road-spacing-02) var(--road-spacing-04);
+}
+
+:host(.chip-lg) .chip-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+/**
+ * Hover state
+ */
+
+
+:host(:hover),
+:host(.focus-visible)  {
+    background: var(--road-info-90);
+}
+
+
+/**
+ * Active
+ */
+
+:host(:active) {
+    background: var(--road-info-80);
+}