@roadtrip/components 3.39.2 → 3.41.0

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-fee0103c.js');
-const index$1 = require('./index-bf8a763e.js');
+const index$1 = require('./index-0e4df560.js');
 
 const rangeCss = ".sc-road-range-h{display:block}.form-group.sc-road-range{width:100%}.form-range.sc-road-range{position:relative;display:flex;flex-direction:column;width:100%;margin-bottom:6px}.form-range-input.sc-road-range{position:relative;z-index:1;width:100%;background:transparent;outline:0;appearance:none}.form-range.sc-road-range>output.sc-road-range::after{display:block;font-size:var(--road-label-medium);text-align:right;content:counter(variable);counter-reset:variable var(--value)}.form-range-label.sc-road-range{position:absolute;top:0;left:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}.form-range-progress.sc-road-range{position:relative;z-index:0;display:block;width:100%;margin-top:-1rem}.form-range-input.sc-road-range::-webkit-slider-runnable-track{border:0;appearance:none}.form-range-input.sc-road-range::-moz-range-track{height:0.5rem;border:0;appearance:none}.form-range-progress.sc-road-range::before{display:block;height:0.5rem;content:\"\";background-color:var(--road-on-surface-disabled);border:0;border-radius:1.125rem}.form-range-progress.sc-road-range.sc-road-range::after{position:absolute;top:0;right:0;left:0;display:block;width:calc(((var(--value) - var(--min)) * 100%) / (var(--max) - var(--min)));height:0.5rem;content:\"\";background:var(--road-primary);border-radius:1.125rem}.disabled.sc-road-range-h .form-range-progress.sc-road-range.sc-road-range::after{background:var(--road-surface-disabled)}.form-range-input.sc-road-range::-webkit-slider-thumb{position:relative;z-index:1;width:1.625rem;height:1.625rem;cursor:grab;background:var(--road-surface);border:none;border-radius:1.625rem;box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);appearance:none}.form-range-input.sc-road-range::-moz-range-thumb{position:relative;z-index:1;box-sizing:border-box;width:1.625rem;height:1.625rem;margin-top:-0.625rem;cursor:grab;background:var(--road-surface);border:none;border-radius:1.625rem;box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);appearance:none}.disabled.sc-road-range-h .form-range-input.sc-road-range::-webkit-slider-thumb,.disabled.sc-road-range-h .form-range-input.sc-road-range::-moz-range-thumb{cursor:not-allowed;background:var(--road-on-surface-disabled);box-shadow:none}.disabled.sc-road-range-h .form-range-input.sc-road-range{pointer-events:none}.disabled.sc-road-range-h{cursor:not-allowed}.sc-road-range-h:not(.disabled).focus-visible .form-range-input.sc-road-range::-webkit-slider-thumb,.sc-road-range-h:not(.disabled):active .form-range-input.sc-road-range::-webkit-slider-thumb,.sc-road-range-h:not(.disabled):focus .form-range-input.sc-road-range::-webkit-slider-thumb{background:var(--road-input-surface-variant);border:0.5rem solid var(--road-grey-100-new)}.sc-road-range-h:not(.disabled).focus-visible .form-range-input.sc-road-range::-moz-range-thumb,.sc-road-range-h:not(.disabled):active .form-range-input.sc-road-range::-moz-range-thumb,.sc-road-range-h:not(.disabled):focus .form-range-input.sc-road-range::-moz-range-thumb{background:var(--road-input-surface-variant);border:0.5rem solid var(--road-grey-100-new)}.sc-road-range-s>datalist{display:flex;justify-content:space-between}.sc-road-range-s>datalist option{width:32px;margin:0;font-size:var(--road-label-medium);text-align:center}";
 const RoadRangeStyle0 = rangeCss;
@@ -90,14 +90,14 @@ const Range = class {
     render() {
         const value = this.getValue();
         const datalist = this.showLabels !== undefined ? `tickmarks` : "";
-        return (index.h(index.Host, { key: 'cb1120583650d9c52b4aa9f03fa71d90103e39c9', tabindex: "0", class: { disabled: this.disabled } }, index.h("div", { key: 'b435ff0be2c86b9598f7c525413943b4df0470f3', class: "form-group d-flex align-items-end" }, this.showTick && (index.h("road-icon", { key: '7d093d346aa1d5f1a305eaa6f798e54581e86820', icon: index$1.navigationAddLessSolid, class: "mr-8", size: "sm" })), index.h("div", { key: '6e8a3d9fbedbe1645f529df428f1d2d954c107e1', class: "form-range", style: {
+        return (index.h(index.Host, { key: '70682c392f1e20883fb831efc8de0f9a067b3009', tabindex: "0", class: { disabled: this.disabled } }, index.h("div", { key: '981f26d40294cd905075d0745e4728543bdc618e', class: "form-group d-flex align-items-end" }, this.showTick && (index.h("road-icon", { key: '43f2969c43d2573de4db51261263ff22d834cc89', icon: index$1.navigationAddLessSolid, class: "mr-8", size: "sm" })), index.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 && index.h("output", { key: '0b073c56edf53783bc572b26ea4686a260eb25c4' }), this.showLabels && index.h("slot", { key: 'fff8d5daad01eb14a609b2eefd9a98603cfb8f52', name: "datalist" }), index.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 }), index.h("label", { key: '3212a0c931c4c7f1ccbf42207df18089c16219d0', class: "form-range-label" }, "Valeur"), index.h("div", { key: '91fad7b8831a2729c0eef1d6926216ca512a681a', class: "form-range-progress" })), this.showTick && (index.h("road-icon", { key: '8eb7262328aecab4ab5049144ddddbb61fe0d86f', icon: index$1.navigationAddMoreSolid, class: "ml-8", size: "sm" })))));
+            } }, this.showValue && index.h("output", { key: 'b918d44808d44f446f88781b56a18da28768d184' }), this.showLabels && index.h("slot", { key: '341f43e617bca8decaa791170065658cf5c57923', name: "datalist" }), index.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 }), index.h("label", { key: '6ff1fbdc6111509511a1e50e0e65f43ec692f74f', class: "form-range-label" }, "Valeur"), index.h("div", { key: 'fadff2d5d9fda1b85290a4c39697968b13470412', class: "form-range-progress" })), this.showTick && (index.h("road-icon", { key: '79f4b51b9e695692777ab37b36511dfc8209812c', icon: index$1.navigationAddMoreSolid, class: "ml-8", size: "sm" })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-fee0103c.js');
-const index$1 = require('./index-bf8a763e.js');
+const index$1 = require('./index-0e4df560.js');
 
 const ratingCss = ":host{display:flex;align-items:center}.rating-stars{display:inline-flex;flex-shrink:0}.rating-star{color:var(--road-surface-disabled)}.rating-stars.rating-stars--small .icon-sm,.rating-stars.rating-stars--extra-small .icon-sm{width:1rem;height:1rem}.rating-number{margin-left:0.5rem;font-size:var(--road-link-medium);color:var(--road-on-surface);text-decoration:underline}.rating-number.rating-number--small{font-size:var(--road-link-small)}.rating-number.rating-number--extra-small{font-size:var(--road-link-extra-small)}.rating-number.readonly{text-decoration:none}";
 const RoadRatingStyle0 = ratingCss;
@@ -46,7 +46,7 @@ const Rating = class {
         const sizeRatingStarsClass = this.size !== undefined ? `rating-stars rating-stars--${this.size}` : 'rating-stars';
         const sizeRatingNumberClass = this.size !== undefined ? `rating-number rating-number--${this.size}` : 'rating-number';
         const readOnly = this.readonly == true ? `readonly` : '';
-        return (index.h(index.Host, { key: '1f8f39ccb9cf1626c9202fa36ac1961a9d4723a3' }, index.h("div", { key: 'de2a92ba11560ed1dbfb93972ad0f07aed30e7c8', class: `${sizeRatingStarsClass}` }, [...Array(rate)].map(() => index.h("road-icon", { icon: index$1.star, size: "sm", color: "warning" })), [...Array(rateDecimale)].map(() => index.h("road-icon", { icon: index$1.starHalfColor, size: "sm", class: "rating-star" })), [...Array(5 - rate - rateDecimale)].map(() => index.h("road-icon", { icon: index$1.star, size: "sm", class: "rating-star" }))), this.readonly == false && this.showreviews && index.h("a", { key: '6093c5e21eb0e0f47de0335a8877038af0009816', class: `${sizeRatingNumberClass}`, href: this.url }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")"), this.readonly == true && this.showreviews && index.h("road-label", { key: '5d11f24f8d2356666e328fc86e0f5557093793ed', class: `${sizeRatingNumberClass} ${readOnly}` }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")")));
+        return (index.h(index.Host, { key: 'de9146b27a97204cf394332ed3cd39872b2021be' }, index.h("div", { key: '10e5404e7b77281cbc6db3c7b5443158cff0d5d2', class: `${sizeRatingStarsClass}` }, [...Array(rate)].map(() => index.h("road-icon", { icon: index$1.star, size: "sm", color: "warning" })), [...Array(rateDecimale)].map(() => index.h("road-icon", { icon: index$1.starHalfColor, size: "sm", class: "rating-star" })), [...Array(5 - rate - rateDecimale)].map(() => index.h("road-icon", { icon: index$1.star, size: "sm", class: "rating-star" }))), this.readonly == false && this.showreviews && index.h("a", { key: 'ba4c82ef9eff58a95cb6049839c26c2a2e74dd2d', class: `${sizeRatingNumberClass}`, href: this.url }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")"), this.readonly == true && this.showreviews && index.h("road-label", { key: 'd7066a54aecd03e699e63ef2c4546a350252712a', class: `${sizeRatingNumberClass} ${readOnly}` }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")")));
     }
 };
 Rating.style = RoadRatingStyle0;

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

@@ -28,7 +28,7 @@ const ButtonBar = class {
         this.selectedTabChanged();
     }
     render() {
-        return (index.h(index.Host, { key: '20a78b478a8d346e40af1065cfc57e273498d389', role: "tablist" }, index.h("slot", { key: 'aadc0d0830d3110041dc4e0fa7f93f0a42fdefc5' })));
+        return (index.h(index.Host, { key: 'a5bf3fc09d2e077e087ae5246ee562aed29472a5', role: "tablist" }, index.h("slot", { key: '48a1e2e24b79f769bc35e4d048218210be1b0d56' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -59,10 +59,10 @@ const SegmentedButton = class {
     render() {
         const { tabIndex, selected, tab } = this;
         const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';
-        return (index.h(index.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 (index.h(index.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,
-            } }, index.h("span", { key: '9e16e5ad2ce62ecbf1d27c01ce0fe5fbdfae023e', tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, index.h("span", { key: '96f9bf0fac28111e1b400a3f721ad6df4d726253', class: "button-content" }, index.h("slot", { key: '474845bdcfbc64a70581c715efaa74e87631875a' })))));
+            } }, index.h("span", { key: 'd608b3b0da3af5184b3a4faeda5bfc6d643cb14f', tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, index.h("span", { key: '6aab4780198238402d5911e60b905d8187624266', class: "button-content" }, index.h("slot", { key: '12d3b5ebb3de039dffd9d99bd658de975a2ed6df' })))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -95,7 +95,7 @@ const Tabs = class {
         return Array.from(this.el.querySelectorAll('road-tab'));
     }
     render() {
-        return (index.h(index.Host, { key: '760ffd7c98659dc00187c97e3d01ce92409584a5', onRoadSegmentedButtonClick: this.onTabClicked }, index.h("slot", { key: 'dfd7acfd76741333868ff7dce2f88c27f2413808', name: "top" }), index.h("slot", { key: 'e7ed6139b95280e972025c5028e0694da0f26265' })));
+        return (index.h(index.Host, { key: 'd1d9e0ab7ed50aa338646a473b2c3e22d4a30f6b', onRoadSegmentedButtonClick: this.onTabClicked }, index.h("slot", { key: '681bb4fdcf7bc99dd558723c85ea65b6182a7556', name: "top" }), index.h("slot", { key: '395d680d41e4c831d7e12e2d4b5e83e74d1128cf' })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -1968,7 +1968,7 @@ const SelectFilter = class {
         const options = this.filteredOptions;
         const isActive = this.isActive ? 'true' : 'false';
         const notActive = this.isActive ? '' : 'not-active';
-        return (index.h(index.Host, { key: 'eb209aa9c9421eca958fe21a8598edc774d61406', "is-active": isActive }, index.h("slot", { key: '4c7bc828b789101338eafd5091cde5fe749db9a9' }), this.isOpen && (index.h("div", { key: '4f7f5ade504721515a8f5f5ffd6ec93178336b4d', class: `${notActive} select-filter-list`, role: "listbox", onMouseLeave: this.handleMouseLeave }, options.length === 0 ? (index.h("div", { class: "select-filter-empty" }, "Aucune option")) : (index.h("ul", { class: "pl-0" }, options.map((option, idx) => (index.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 (index.h(index.Host, { key: 'b1411c1e27ab139c15417acfe996f70f1412f049', "is-active": isActive }, index.h("slot", { key: 'cf2229232ebeb1b781f44dac2ce2bcc19eb56282' }), this.isOpen && (index.h("div", { key: '568f2f9ea1dfa8f6178805062cc5d391fbb1e122', class: `${notActive} select-filter-list`, role: "listbox", onMouseLeave: this.handleMouseLeave }, options.length === 0 ? (index.h("div", { class: "select-filter-empty" }, "Aucune option")) : (index.h("ul", { class: "pl-0" }, options.map((option, idx) => (index.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 })))))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-fee0103c.js');
 
-const selectCss = ".sc-road-select-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface)}.form-select.sc-road-select{box-sizing:border-box;display:block;width:100%;height:auto;padding:0.75rem 3rem 0 1rem;margin:0;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface);background:url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right 1rem center/1.5rem 2rem;background-color:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;box-shadow:none;appearance:none}.form-select.sc-road-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000000}.form-select.sc-road-select::-ms-expand{display:none}.form-select.sc-road-select::placeholder{color:var(--road-on-surface-extra-weak)}@media (hover: hover){.form-select.sc-road-select:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-select.sc-road-select:focus~.form-select-label.sc-road-select,.form-select[required].sc-road-select:valid~.form-select-label.sc-road-select,.form-select.has-value.sc-road-select~.form-select-label.sc-road-select{transform:scale(0.625) translateY(-0.625rem)}.form-select.sc-road-select:disabled,.form-select[readonly].sc-road-select{color:var(--road-on-surface-disabled);cursor:not-allowed;background-color:var(--road-surface-disabled);opacity:1}.form-select-label.sc-road-select{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-label-medium);line-height:1.5;color:var(--road-on-surface-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.form-select.sc-road-select:required~.form-select-label.sc-road-select::after{color:var(--road-on-danger-surface);content:\" *\"}.select-xl.sc-road-select-h .form-select.sc-road-select{min-height:3.5rem;padding:1rem 1rem 0}.select-xl.sc-road-select-h .form-select-label.sc-road-select{top:1rem}.select-xl.sc-road-select-h .form-select.sc-road-select:focus~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select[required].sc-road-select:valid~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select.has-value.sc-road-select~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select[type=\"date\"].sc-road-select~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select[type=\"time\"].sc-road-select~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.select-xl.sc-road-select-h .form-select.sc-road-select:placeholder-shown~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.select-lg.sc-road-select-h .form-select.sc-road-select{min-height:3rem}.select-md.sc-road-select-h .form-select.sc-road-select{min-height:2.5rem;padding:1rem 1rem 0;font-size:var(--road-body-small)}.select-md.sc-road-select-h .form-select-label.sc-road-select{top:0.5rem}.select-md.sc-road-select-h .form-select.sc-road-select:focus~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select[required].sc-road-select:valid~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select.has-value.sc-road-select~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select[type=\"date\"].sc-road-select~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select[type=\"time\"].sc-road-select~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.select-md.sc-road-select-h .form-select.sc-road-select:placeholder-shown~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-select{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-body-small);color:var(--road-on-danger-surface)}.form-select.is-invalid.sc-road-select,.was-validated.sc-road-select .form-select.sc-road-select:invalid{border-color:var(--road-on-danger-surface)}.form-select.is-invalid.sc-road-select~.invalid-feedback.sc-road-select,.was-validated.sc-road-select .form-select.sc-road-select:invalid~.invalid-feedback.sc-road-select{display:block}";
+const selectCss = ".sc-road-select-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface)}.form-select.sc-road-select{box-sizing:border-box;display:block;width:100%;height:auto;padding:0.75rem 3rem 0 1rem;margin:0;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface);background:url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right 1rem center/1.5rem 2rem;background-color:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;box-shadow:none;appearance:none}.form-select.sc-road-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000000}.form-select.sc-road-select::-ms-expand{display:none}.form-select.sc-road-select::placeholder{color:var(--road-on-surface-extra-weak)}@media (hover: hover){.form-select.sc-road-select:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-select.sc-road-select:focus~.form-select-label.sc-road-select,.form-select[required].sc-road-select:valid~.form-select-label.sc-road-select,.form-select.has-value.sc-road-select~.form-select-label.sc-road-select{transform:scale(0.625) translateY(-0.625rem)}.form-select.sc-road-select:disabled,.form-select[readonly].sc-road-select{color:var(--road-on-surface-disabled);cursor:not-allowed;background-color:var(--road-surface-disabled);opacity:1}.form-select-label.sc-road-select{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-label-medium);line-height:1.5;color:var(--road-on-surface-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.form-select.sc-road-select:required~.form-select-label.sc-road-select::after{color:var(--road-on-danger-surface);content:\" *\"}.select-xl.sc-road-select-h .form-select.sc-road-select{min-height:3.5rem;padding:1rem 1rem 0}.select-xl.sc-road-select-h .form-select-label.sc-road-select{top:1rem}.select-xl.sc-road-select-h .form-select.sc-road-select:focus~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select[required].sc-road-select:valid~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select.has-value.sc-road-select~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select[type=\"date\"].sc-road-select~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select[type=\"time\"].sc-road-select~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.select-xl.sc-road-select-h .form-select.sc-road-select:placeholder-shown~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.select-lg.sc-road-select-h .form-select.sc-road-select{min-height:3rem}.select-md.sc-road-select-h .form-select.sc-road-select{min-height:2.5rem;padding:1rem 1rem 0;font-size:var(--road-body-small)}.select-md.sc-road-select-h .form-select-label.sc-road-select{top:0.5rem}.select-md.sc-road-select-h .form-select.sc-road-select:focus~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select[required].sc-road-select:valid~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select.has-value.sc-road-select~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select[type=\"date\"].sc-road-select~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select[type=\"time\"].sc-road-select~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.select-md.sc-road-select-h .form-select.sc-road-select:placeholder-shown~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-select{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-body-small);color:var(--road-on-danger-surface)}.form-select.is-invalid.sc-road-select,.was-validated.sc-road-select .form-select.sc-road-select:invalid{border-color:var(--road-on-danger-surface)}.form-select.is-invalid.sc-road-select~.invalid-feedback.sc-road-select,.was-validated.sc-road-select .form-select.sc-road-select:invalid~.invalid-feedback.sc-road-select{display:block}.helper.sc-road-select{margin-top:0.5rem;font-size:var(--road-body-small);color:var(--road-on-surface-weak)}";
 const RoadSelectStyle0 = selectCss;
 
 const Select = class {
@@ -107,7 +107,7 @@ const Select = class {
         const labelId = this.selectId + '-label';
         const hasValueClass = this.value && this.value !== '' ? 'has-value' : '';
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-        return (index.h(index.Host, { key: '531ff3e04c4447214779844ba29b2208ded29d12', class: this.sizes && `select-${this.sizes}` }, index.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 }, index.h("option", { key: 'f9f2f7857d3ce3cdb0205b5589388ad0417d6802', selected: !this.value, disabled: true, hidden: true, style: { display: 'none' }, value: "" }), this.options && this.options.map(option => (index.h("option", { value: option.value, selected: this.value !== null && option.value == this.value }, option.label)))), index.h("label", { key: '4c2d444e030ef6168b4871ae5381550295b91e5f', class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && index.h("p", { key: '40808526b05350e9d59dedd814ca620368fa6098', class: "invalid-feedback" }, this.error)));
+        return (index.h(index.Host, { key: 'fb313bb494596711a3b9f5c893ad32718d8b91b9', class: this.sizes && `select-${this.sizes}` }, index.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 }, index.h("option", { key: 'e76bb7a68a1876237168287ed1c644489b01ae1d', selected: !this.value, disabled: true, hidden: true, style: { display: 'none' }, value: "" }), this.options && this.options.map(option => (index.h("option", { value: option.value, selected: this.value !== null && option.value == this.value }, option.label)))), index.h("label", { key: 'a8e873fecdd61d0b329cac070f3705aaf534e846', class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && index.h("p", { key: '82ba6e3b17d05cd9b90ce1b47c1fabe7673753d2', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && index.h("p", { key: '6641b93d7b62266d671196f340d8ff2b385b5159', class: "helper" }, this.helper)));
     }
     static get watchers() { return {
         "value": ["valueChanged"]

package/dist/cjs/road-select.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"road-select.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/select/select.css?tag=road-select&encapsulation=scoped","src/components/select/select.tsx"],"sourcesContent":["/*\n * Select\n *\n * Index\n * - Select\n * - Label\n * - Sizes\n * - Error\n */\n\n\n:host {\n  position: relative;\n  display: block;\n  margin-bottom: 1rem;\n  font-family: var(--road-font, sans-serif);\n  color: var(--road-on-surface);\n}\n\n/* SELECT\n -------------------- */\n\n.form-select {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  height: auto;\n  padding: 0.75rem 3rem 0 1rem;\n  margin: 0;\n  font-size: var(--road-body-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n  background: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right 1rem center/1.5rem 2rem;\n  background-color: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 0.25rem;\n  box-shadow: none;\n  appearance: none;\n}\n\n.form-select:-moz-focusring {\n  color: transparent;\n  text-shadow: 0 0 0 #000000;\n}\n\n.form-select::-ms-expand { /* IE fix remove native arrow */\n  display: none;\n}\n\n/**\n * Placeholder\n */\n\n.form-select::placeholder {\n  color: var(--road-on-surface-extra-weak);\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .form-select:not(:disabled):hover {\n    border-color: var(--road-input-outline-variant);\n  }\n}\n\n/**\n * Focus state\n */\n\n.form-select:focus ~ .form-select-label,\n.form-select[required]:valid ~ .form-select-label,\n.form-select.has-value ~ .form-select-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n\n/**\n * Disabled state\n */\n\n.form-select:disabled,\n.form-select[readonly] {\n  color: var(--road-on-surface-disabled);\n  cursor: not-allowed;\n  background-color: var(--road-surface-disabled);\n  opacity: 1;\n}\n\n/* LABEL\n -------------------- */\n\n.form-select-label {\n  position: absolute;\n  top: 0.75rem;\n  left: 1rem;\n  display: block;\n  font-size: var(--road-label-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface-weak);\n  pointer-events: none;\n  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n  transform-origin: 0 0;\n}\n\n.form-select:required ~ .form-select-label::after{\n  color: var(--road-on-danger-surface);\n  content: \" *\";\n}\n\n/* SIZES\n -------------------- */\n\n:host(.select-xl) .form-select {\n  min-height: 3.5rem;\n  padding: 1rem 1rem 0;\n}\n\n:host(.select-xl) .form-select-label {\n  top: 1rem;\n}\n\n:host(.select-xl) .form-select:focus ~ .form-select-label,\n:host(.select-xl) .form-select[required]:valid ~ .form-select-label,\n:host(.select-xl) .form-select.has-value ~ .form-select-label,\n:host(.select-xl) .form-select[type=\"date\"] ~ .form-select-label,\n:host(.select-xl) .form-select[type=\"time\"] ~ .form-select-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-xl) .form-select:placeholder-shown ~ .form-select-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-lg) .form-select {\n  min-height: 3rem;\n}\n\n:host(.select-md) .form-select {\n  min-height: 2.5rem;\n  padding: 1rem 1rem 0;\n  font-size: var(--road-body-small);\n}\n\n:host(.select-md) .form-select-label {\n  top: 0.5rem;\n}\n\n:host(.select-md) .form-select:focus ~ .form-select-label,\n:host(.select-md) .form-select[required]:valid ~ .form-select-label,\n:host(.select-md) .form-select.has-value ~ .form-select-label,\n:host(.select-md) .form-select[type=\"date\"] ~ .form-select-label,\n:host(.select-md) .form-select[type=\"time\"] ~ .form-select-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-md) .form-select:placeholder-shown ~ .form-select-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n  display: none;\n  width: 100%;\n  margin-top: 0.5rem;\n  font-size: var(--road-body-small);\n  color: var(--road-on-danger-surface);\n}\n\n.form-select.is-invalid,\n.was-validated .form-select:invalid {\n  border-color: var(--road-on-danger-surface);\n}\n\n.form-select.is-invalid ~ .invalid-feedback,\n.was-validated .form-select:invalid ~ .invalid-feedback {\n  display: block;\n}\n","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":"road-select.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/select/select.css?tag=road-select&encapsulation=scoped","src/components/select/select.tsx"],"sourcesContent":["/*\n * Select\n *\n * Index\n * - Select\n * - Label\n * - Sizes\n * - Error\n */\n\n\n:host {\n  position: relative;\n  display: block;\n  margin-bottom: 1rem;\n  font-family: var(--road-font, sans-serif);\n  color: var(--road-on-surface);\n}\n\n/* SELECT\n -------------------- */\n\n.form-select {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  height: auto;\n  padding: 0.75rem 3rem 0 1rem;\n  margin: 0;\n  font-size: var(--road-body-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n  background: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right 1rem center/1.5rem 2rem;\n  background-color: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 0.25rem;\n  box-shadow: none;\n  appearance: none;\n}\n\n.form-select:-moz-focusring {\n  color: transparent;\n  text-shadow: 0 0 0 #000000;\n}\n\n.form-select::-ms-expand { /* IE fix remove native arrow */\n  display: none;\n}\n\n/**\n * Placeholder\n */\n\n.form-select::placeholder {\n  color: var(--road-on-surface-extra-weak);\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .form-select:not(:disabled):hover {\n    border-color: var(--road-input-outline-variant);\n  }\n}\n\n/**\n * Focus state\n */\n\n.form-select:focus ~ .form-select-label,\n.form-select[required]:valid ~ .form-select-label,\n.form-select.has-value ~ .form-select-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n\n/**\n * Disabled state\n */\n\n.form-select:disabled,\n.form-select[readonly] {\n  color: var(--road-on-surface-disabled);\n  cursor: not-allowed;\n  background-color: var(--road-surface-disabled);\n  opacity: 1;\n}\n\n/* LABEL\n -------------------- */\n\n.form-select-label {\n  position: absolute;\n  top: 0.75rem;\n  left: 1rem;\n  display: block;\n  font-size: var(--road-label-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface-weak);\n  pointer-events: none;\n  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n  transform-origin: 0 0;\n}\n\n.form-select:required ~ .form-select-label::after{\n  color: var(--road-on-danger-surface);\n  content: \" *\";\n}\n\n/* SIZES\n -------------------- */\n\n:host(.select-xl) .form-select {\n  min-height: 3.5rem;\n  padding: 1rem 1rem 0;\n}\n\n:host(.select-xl) .form-select-label {\n  top: 1rem;\n}\n\n:host(.select-xl) .form-select:focus ~ .form-select-label,\n:host(.select-xl) .form-select[required]:valid ~ .form-select-label,\n:host(.select-xl) .form-select.has-value ~ .form-select-label,\n:host(.select-xl) .form-select[type=\"date\"] ~ .form-select-label,\n:host(.select-xl) .form-select[type=\"time\"] ~ .form-select-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-xl) .form-select:placeholder-shown ~ .form-select-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-lg) .form-select {\n  min-height: 3rem;\n}\n\n:host(.select-md) .form-select {\n  min-height: 2.5rem;\n  padding: 1rem 1rem 0;\n  font-size: var(--road-body-small);\n}\n\n:host(.select-md) .form-select-label {\n  top: 0.5rem;\n}\n\n:host(.select-md) .form-select:focus ~ .form-select-label,\n:host(.select-md) .form-select[required]:valid ~ .form-select-label,\n:host(.select-md) .form-select.has-value ~ .form-select-label,\n:host(.select-md) .form-select[type=\"date\"] ~ .form-select-label,\n:host(.select-md) .form-select[type=\"time\"] ~ .form-select-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-md) .form-select:placeholder-shown ~ .form-select-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n  display: none;\n  width: 100%;\n  margin-top: 0.5rem;\n  font-size: var(--road-body-small);\n  color: var(--road-on-danger-surface);\n}\n\n.form-select.is-invalid,\n.was-validated .form-select:invalid {\n  border-color: var(--road-on-danger-surface);\n}\n\n.form-select.is-invalid ~ .invalid-feedback,\n.was-validated .form-select:invalid ~ .invalid-feedback {\n  display: block;\n}\n\n/* HELPER\n -------------------- */\n\n.helper {\n  margin-top: 0.5rem;\n  font-size: var(--road-body-small);\n  color: var(--road-on-surface-weak);\n}\n","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"],"version":3}

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

@@ -12,7 +12,7 @@ const Skeleton = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("span", { key: 'd0f6fa2c6d1346b4dbdf15e3a2d8f5776961a625' }, "\u00A0"));
+        return (index.h("span", { key: '33cfe20d51c54101ccf43a5027549fa79d707cab' }, "\u00A0"));
     }
 };
 Skeleton.style = RoadSkeletonStyle0;

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

@@ -22,7 +22,7 @@ const Spinner = class {
     render() {
         const sizeClass = this.size !== undefined ? `spinner spinner--${this.size}` : 'spinner';
         const colorClass = this.size !== undefined ? `spinner-circle spinner-circle--${this.color}` : 'spinner-circle';
-        return (index.h("svg", { key: 'a13fe873d986f18ad6e24d03c8ed2cc08d111bfb', class: `${sizeClass}`, viewBox: "25 25 50 50" }, index.h("circle", { key: '2be205cfa0e2fb9898578db0205ecabc865cddf2', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
+        return (index.h("svg", { key: '90d3a6eafbf227b79edf5b298b2bd5e212436c7a', class: `${sizeClass}`, viewBox: "25 25 50 50" }, index.h("circle", { key: '9a90e8724a39005b1a51029b25401fc876149571', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
     }
 };
 Spinner.style = RoadSpinnerStyle0;

package/dist/cjs/road-status-chip.cjs.entry.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-fee0103c.js');
+const index$1 = require('./index-0e4df560.js');
+require('./polyfill-8e8d96b1.js');
+
+const statusChipCss = ":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)}.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}: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}:host(:hover),:host(.focus-visible){background:var(--road-info-90)}:host(:active){background:var(--road-info-80)}";
+const RoadStatusChipStyle0 = statusChipCss;
+
+const Chip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * The chip size.
+         */
+        this.size = 'sm';
+    }
+    render() {
+        return (index.h(index.Host, { key: '66bf3407592164729d81e1269900dfff160d60ce', class: `chip-${this.size}`, tabindex: "0" }, index.h("div", { key: 'e037baad33a3be2b430f9c2325abc81f4e7fd015', class: "chip-description" }, index.h("road-icon", { key: '961d65ef9f31be4444c983c0bd178e19c0f06692', class: "chip-icon", color: "info", icon: index$1.alertInfoSolid }), index.h("slot", { key: '3f1852768aa6a6dc6b234832688f6868b9676591' }))));
+    }
+};
+Chip.style = RoadStatusChipStyle0;
+
+exports.road_status_chip = Chip;
+
+//# sourceMappingURL=road-status-chip.cjs.entry.js.map

package/dist/cjs/road-status-chip.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"road-status-chip.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,yyCAAyyC,CAAC;AACh0C,6BAAe,aAAa;;MCYf,IAAI;IALjB;;;;;QAUU,SAAI,GAAwB,IAAI,CAAC;KAe1C;IAbC,MAAM;QAEJ,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAC,GAAG,IAExCD,kEAAK,KAAK,EAAC,kBAAkB,IAC3BA,wEAAW,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAEE,sBAAc,GAAc,EAC5EF,oEAAO,CACH,CACD,EACP;KACH;;;;;;","names":["h","Host","alertInfoSolid"],"sources":["src/components/status-chip/status-chip.css?tag=road-status-chip&encapsulation=shadow","src/components/status-chip/status-chip.tsx"],"sourcesContent":["/*\n * Status Chip\n *\n * Index\n * - Icon\n * - Size\n */\n\n:host {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  height: 1.5rem;\n  margin-bottom: 0.5rem;\n  font-size: var(--road-font-size-14);\n  cursor: pointer;\n  border: 0;\n  border-radius: 1.625rem;\n  outline: 0;\n  background-color: var(--road-info-surface);\n  color: var(--road-on-info-surface);\n  font-weight: 700;\n  transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n.chip-description {\n  display: inline-flex;\n  align-items: center;\n  padding: var(--road-spacing-01) var(--road-spacing-05) var(--road-spacing-01) var(--road-spacing-03);\n}\n\n/* ICON\n -------------------- */\n\n.chip-icon {\n  width: 1rem;\n  height: 1rem;\n  margin-right: var(--road-spacing-03);\n  border-radius: 50%;\n  transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n\n/* SIZE\n -------------------- */\n\n\n:host(.chip-md) {\n  height: 2rem;\n  font-size: var(--road-font-size-16);\n}\n\n\n:host(.chip-md) .chip-description {\n  padding: var(--road-spacing-02) var(--road-spacing-05) var(--road-spacing-02) var(--road-spacing-03);\n}\n\n:host(.chip-md) .chip-icon {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n:host(.chip-lg) {\n  height: 2.5rem;\n  font-size: var(--road-font-size-16);\n}\n\n:host(.chip-lg) .chip-description {\n  padding: var(--road-spacing-02) var(--road-spacing-06) var(--road-spacing-02) var(--road-spacing-04);\n}\n\n:host(.chip-lg) .chip-icon {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n/**\n * Hover state\n */\n\n\n:host(:hover),\n:host(.focus-visible)  {\n    background: var(--road-info-90);\n}\n\n\n/**\n * Active\n */\n\n:host(:active) {\n    background: var(--road-info-80);\n}\n","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}

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

@@ -85,11 +85,11 @@ const Switch = class {
     }
     render() {
         const labelId = this.switchId + '-label';
-        const textLabel = index.h("label", { key: '430104d38d5703aa56ce1976a977a126468ec741', class: "form-switch-label", id: labelId, htmlFor: this.switchId }, this.label);
+        const textLabel = index.h("label", { key: 'ce7aa5f11558ca65be5c3e67fa4bd195befb93fb', 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 (index.h(index.Host, { key: '2bfcb70289e7a90964e1211569ab02e1097cd12b' }, index.h("input", { key: '7c9e3273d965e895479da1fb4349bb35fa5efc3b', 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 }), index.h("label", { key: 'af4acb92308e858b7188c71bdd2cb1e5bb368e31', class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, index.h("div", { key: '0dcc70814eb2ae967bf5235bb6aac1ba7205d7b4', class: `form-switch-lever ${rightSwitchClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
+        return (index.h(index.Host, { key: '67cb125cd5c23b799ae301f584fe2fbf446a35dd' }, index.h("input", { key: 'dc19948d6370b14e077eb4725cfcb35916eb779f', 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 }), index.h("label", { key: 'fb2645a723c66e5d45d621260f4ef18a172dccc4', class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, index.h("div", { key: 'a0e6f831b9136f89fcc70ed3004a8551c4b10760', class: `form-switch-lever ${rightSwitchClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
     }
     static get watchers() { return {
         "checked": ["checkedChanged"]

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

@@ -44,11 +44,11 @@ const TabBar = class {
     }
     render() {
         const { expand, center, secondary } = this;
-        return (index.h(index.Host, { key: '683e4f5c99d335ec1c744830237bd3cd23db8c75', role: "tablist", class: {
+        return (index.h(index.Host, { key: 'a40a29c3f335bd4b49495203834bb937af77a4bb', role: "tablist", class: {
                 'tab-expand': expand,
                 'tab-center': center,
                 'tab-secondary': secondary,
-            } }, index.h("slot", { key: '0757eeb70b98263e316b408bc420fee186de03b0' })));
+            } }, index.h("slot", { key: 'b7abc10609ae8939e729c735fb942b1b89c604ad' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -77,7 +77,7 @@ const TabButton = class {
             rel,
             target,
         };
-        return (index.h(index.Host, { key: '6fdae83a0fe22652c51b92874265e2c32787063d', 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 (index.h(index.Host, { key: '3cb6c6f8dcab1715547dfa6fc43c4e6ec3234507', 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,
@@ -85,7 +85,7 @@ const TabButton = class {
                 'tab-has-icon-only': hasIcon && !hasLabel,
                 [`tab-layout-${layout}`]: true,
                 'tab-disabled': disabled, // Classe CSS pour les styles désactivés
-            } }, index.h("a", Object.assign({ key: 'dc85019d7861a227495a165790d2e5b025f1f979' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), index.h("span", { key: '59d9387c00bb48a34f425d9af782e3568f566263', class: "button-inner" }, index.h("slot", { key: '54290ac6eee4506846c8756f5141b493e6ebcc13' })))));
+            } }, index.h("a", Object.assign({ key: '7f07a67f84c56857ac864b2d56c1698f31f618d5' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), index.h("span", { key: 'b6b0a2caa81b69199bf85210cec8722846a413b8', class: "button-inner" }, index.h("slot", { key: 'efbc557b0428fe1513f150ed97f0c9037284daa2' })))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -27,9 +27,9 @@ const Tab = class {
     }
     render() {
         const { tab, active } = this;
-        return (index.h(index.Host, { key: '10d79bb43319e005cf57d629ea4f678e3f3a5ae2', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (index.h(index.Host, { key: '3027c31c282565b7d5905d3b3031db04ba1bed44', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'tab-hidden': !active,
-            } }, index.h("slot", { key: 'd11c7858cddf2b5da0db945ee9f69f52d02d7c16' })));
+            } }, index.h("slot", { key: '70ae19f3e889a8c46d062363445185055a6c1133' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/road-table.cjs.entry.js

@@ -12,7 +12,7 @@ const Table = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("slot", { key: 'e8b08c7f5bbb8fd61ae6d73278b61c8838bbabf4' }));
+        return (index.h("slot", { key: '4fbbf196c158059cc8c375e9fcd848cd8e2d864f' }));
     }
 };
 Table.style = RoadTableStyle0;

package/dist/cjs/road-tabs.cjs.entry.js

@@ -108,7 +108,7 @@ const Tabs = class {
         return Array.from(this.el.querySelectorAll('road-tab'));
     }
     render() {
-        return (index.h(index.Host, { key: '5ac640c40ecdf802d7d56a662d5aa107ced242ef', onRoadTabButtonClick: this.onTabClicked }, index.h("slot", { key: '8f50a94ef5602b121eaf7406c6d83ed93c50a7aa', name: "top" }), index.h("div", { key: 'fb87539786bf6f7d1e3d7a9766b191bca35ce312', class: "tabs-inner" }, index.h("slot", { key: '32f22aabd7e38881d289fbd0af69669d62d918cc' }))));
+        return (index.h(index.Host, { key: '5bea03df378d3de02ca7dec12e9794a8edbb073c', onRoadTabButtonClick: this.onTabClicked }, index.h("slot", { key: '9f6d69f412a26dce57a919d02003e7548e824b08', name: "top" }), index.h("div", { key: '05058a9ec02a249ab6bc9d0f2bc301c1803e1e20', class: "tabs-inner" }, index.h("slot", { key: 'f10bf6e9d99a0c040dd4045b18f22f288e19fc2e' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/road-tag.cjs.entry.js

@@ -22,7 +22,7 @@ const Tag = class {
     }
     render() {
         const contrastClass = this.contrast ? `tag-${this.color} tag-${this.color}-contrast` : `tag-${this.color}`;
-        return (index.h(index.Host, { key: '81f24465ee40fd72b3095258f67f9d46b0f663e2', class: `${contrastClass}` }, index.h("slot", { key: 'baf9168e522f8f4cf682f03c40304d5052a030f2' })));
+        return (index.h(index.Host, { key: '2639b90b789a6fde1fae0f3201236a7c9f4e1aad', class: `${contrastClass}` }, index.h("slot", { key: '8039feeab97b500f0828e1efa751b9771f4f5e65' })));
     }
 };
 Tag.style = RoadTagStyle0;

package/dist/cjs/road-text.cjs.entry.js

@@ -17,7 +17,7 @@ const Text = class {
     }
     render() {
         const colorClass = this.color !== undefined ? `text-${this.color}` : '';
-        return (index.h(index.Host, { key: '8c3872a70719feac2cbf76f50b7491b838fb393b', class: `${colorClass}` }, index.h("slot", { key: 'b746e561a4c05d829492a023120a7d1ade1c146f' })));
+        return (index.h(index.Host, { key: '2b1df03bfadf4021cf4016c584cdbd0ccf09324c', class: `${colorClass}` }, index.h("slot", { key: '6966b8ebe4a2eb48b1fd020a707c6a37a519b099' })));
     }
 };
 Text.style = RoadTextStyle0;

package/dist/cjs/road-textarea.cjs.entry.js

@@ -99,7 +99,7 @@ const Textarea = class {
         const hasValueClass = this.value !== '' ? 'has-value' : '';
         const noResizeClass = this.resize == false ? 'no-resize' : '';
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-        return (index.h(index.Host, { key: 'f67a9451b99f450ee2828ea5eb5dc3728795c1dd', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, index.h("textarea", { key: '27f3c926911126812156ccc87172c3e71f634b7c', 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 }), index.h("label", { key: '081afb27b83557ce88db5c78d6e90c138f69c0d4', class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && index.h("p", { key: '3509594cc1523c401e12a796216ed3c97813f419', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && index.h("p", { key: 'ede03d506c01bf3eae5a633a534eeed696df819d', class: "helper" }, this.helper)));
+        return (index.h(index.Host, { key: 'cc414e4da358e65b430b91b0f834cbe403993693', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, index.h("textarea", { key: '0d0a45eaf71ada8178387d6debfc5e3d6da6cb4f', 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 }), index.h("label", { key: 'a74070b2761b5ced0251f5bce4ef48837d892c9d', class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && index.h("p", { key: 'ba52ee759d52772a2eac2e9948c64309164aabdc', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && index.h("p", { key: '377f7c03d77aad381b2bdd63c4753369870612df', class: "helper" }, this.helper)));
     }
     static get watchers() { return {
         "value": ["valueChanged"]

package/dist/cjs/road-time-range-picker.cjs.entry.js

@@ -0,0 +1,100 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-fee0103c.js');
+
+const timeRangePickerCss = ".required-indicator.sc-road-time-range-picker{color:var(--road-on-danger-surface);content:\" *\"}.time-range-picker-content.sc-road-time-range-picker road-input.sc-road-time-range-picker{margin-bottom:0}.time-range-picker.sc-road-time-range-picker .messages.sc-road-time-range-picker{display:flex;flex-direction:column}.invalid-feedback.sc-road-time-range-picker{font-size:var(--road-helper-medium);color:var(--road-on-danger-surface);display:flex;align-items:center;gap:4px}.invalid-feedback.sc-road-time-range-picker road-icon.sc-road-time-range-picker{color:var(--road-danger-icon)}.sc-road-time-range-picker-h road-input.error-border.sc-road-time-range-picker{border-radius:0.25rem;outline:1px solid var(--road-danger-outline);outline-offset:-1px}";
+const RoadTimeRangePickerStyle0 = timeRangePickerCss;
+
+const RoadTimeRangePicker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.roadChange = index.createEvent(this, "roadChange", 7);
+        this.roadInput = index.createEvent(this, "roadInput", 7);
+        this.roadFocus = index.createEvent(this, "roadFocus", 7);
+        this.roadBlur = index.createEvent(this, "roadBlur", 7);
+        /** Désactivation du picker */
+        this.disabled = false;
+        /** Si `true`, l’utilisateur doit remplir avant submit */
+        this.required = false;
+        /** Taille du champ */
+        this.sizes = 'lg';
+        /** Handle change depuis le slot start */
+        this.handleStartChange = (e) => {
+            var _a;
+            this.start = (_a = e.detail.value) !== null && _a !== void 0 ? _a : undefined;
+            this.emitChange();
+        };
+        /** Handle change depuis le slot end */
+        this.handleEndChange = (e) => {
+            var _a;
+            this.end = (_a = e.detail.value) !== null && _a !== void 0 ? _a : undefined;
+            this.emitChange();
+        };
+    }
+    /** Retourne les messages d'erreur sous forme de tableau */
+    get errorMessages() {
+        if (!this.error)
+            return [];
+        if (Array.isArray(this.error))
+            return this.error.flatMap(e => (typeof e === 'string' ? e.split(',') : [e]));
+        return this.error.split(',');
+    }
+    /** Ajoute ou retire la classe error-border sur le road-input */
+    async updateInvalidClasses() {
+        var _a;
+        const inputs = Array.from(this.hostEl.querySelectorAll('road-input[slot="start"], road-input[slot="end"]'));
+        for (const inputEl of inputs) {
+            await ((_a = inputEl.componentOnReady) === null || _a === void 0 ? void 0 : _a.call(inputEl));
+            if (this.errorMessages.length > 0) {
+                inputEl.style.borderRadius = '0.25rem';
+                inputEl.style.outline = `1px solid var(--road-danger-outline)`;
+                inputEl.style.outlineOffset = '-1px';
+            }
+            else {
+                inputEl.style.borderRadius = '';
+                inputEl.style.outline = '';
+                inputEl.style.outlineOffset = '';
+            }
+        }
+    }
+    /** Vérifie que start <= end et met à jour l’erreur */
+    validateRange() {
+        if (this.start && this.end && this.start > this.end) {
+            this.error = 'L’heure de début doit être inférieure à l’heure de fin.';
+        }
+        else {
+            this.error = undefined;
+        }
+    }
+    /** Émet les changements */
+    async emitChange() {
+        this.validateRange();
+        this.roadChange.emit({ start: this.start, end: this.end });
+        await this.updateInvalidClasses();
+    }
+    componentDidLoad() {
+        const startSlot = this.hostEl.querySelector('[slot="start"]');
+        const endSlot = this.hostEl.querySelector('[slot="end"]');
+        if (startSlot) {
+            startSlot.addEventListener('roadChange', this.handleStartChange);
+        }
+        if (endSlot) {
+            endSlot.addEventListener('roadChange', this.handleEndChange);
+        }
+        this.updateInvalidClasses();
+    }
+    async getRange() {
+        return { start: this.start, end: this.end };
+    }
+    render() {
+        return (index.h(index.Host, { key: 'c1528d80635b8cfdf6dbd01f890f20b12cb5948b', class: `time-range-picker input-${this.sizes}` }, this.label && (index.h("p", { key: '2d97d59a6b8449695537ad1a5bd0991e01c19bac', class: "label m-0" }, this.label, this.required && index.h("span", { key: '156a83258da14bc98be719155735afdbb17ccd50', class: "required-indicator" }, " *"))), index.h("div", { key: '836ab421c7c9ddbcd0e51a135d670962a0a27bf3', class: "time-range-picker-content d-flex align-items-center my-4" }, index.h("slot", { key: '66f945df18b1b404aa073d38501e11ee8bd5a1f0', name: "start" }), index.h("span", { key: '392ade369762ccf97ca3a8cf69398ca3a247f14e', class: "separator mx-12" }, this.separator), index.h("slot", { key: 'afac72354a5166ece7fcfea81c7115c599c61b85', name: "end" })), index.h("div", { key: '1a6d049fbe026f2c76cfb9164a3fff7983174ac4', class: "messages mt-1" }, this.errorMessages.map((msg, index$1) => (index.h("p", { key: index$1, class: "invalid-feedback m-0" }, index.h("road-icon", { slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), msg.trim())))), this.helper && index.h("p", { key: 'dacbada369bbbe28302070d11e2242958ee2d983', class: "helper mt-1" }, this.helper)));
+    }
+    get hostEl() { return index.getElement(this); }
+};
+RoadTimeRangePicker.style = RoadTimeRangePickerStyle0;
+
+exports.road_time_range_picker = RoadTimeRangePicker;
+
+//# sourceMappingURL=road-time-range-picker.cjs.entry.js.map

package/dist/cjs/road-time-range-picker.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"road-time-range-picker.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,ivBAAivB,CAAC;AAC7wB,kCAAe,kBAAkB;;MCYpB,mBAAmB;IALhC;;;;;;;QAeU,aAAQ,GAAG,KAAK,CAAC;;QASjB,aAAQ,GAAG,KAAK,CAAC;;QAMjB,UAAK,GAAgB,IAAI,CAAC;;QA0D1B,sBAAiB,GAAG,CAAC,CAA6D;;YACxF,IAAI,CAAC,KAAK,GAAG,MAAA,CAAC,CAAC,MAAM,CAAC,KAAK,mCAAI,SAAS,CAAC;YACzC,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB,CAAC;;QAGM,oBAAe,GAAG,CAAC,CAA6D;;YACtF,IAAI,CAAC,GAAG,GAAG,MAAA,CAAC,CAAC,MAAM,CAAC,KAAK,mCAAI,SAAS,CAAC;YACvC,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB,CAAC;KAyDH;;IA9GC,IAAY,aAAa;QACvB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,EAAE,CAAC;QAC3B,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;YAAE,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,KAAK,OAAO,CAAC,KAAK,QAAQ,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC5G,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;KAC9B;;IAGK,MAAM,oBAAoB;;QAChC,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CACvB,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,kDAAkD,CAAC,CACxE,CAAC;QAEX,KAAK,MAAM,OAAO,IAAI,MAAM,EAAE;YAC5B,OAAM,MAAA,OAAO,CAAC,gBAAgB,uDAAI,CAAA,CAAC;YACnC,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;gBACjC,OAAO,CAAC,KAAK,CAAC,YAAY,GAAG,SAAS,CAAC;gBACvC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,sCAAsC,CAAC;gBAC/D,OAAO,CAAC,KAAK,CAAC,aAAa,GAAG,MAAM,CAAC;aACtC;iBAAM;gBACL,OAAO,CAAC,KAAK,CAAC,YAAY,GAAG,EAAE,CAAC;gBAChC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;gBAC3B,OAAO,CAAC,KAAK,CAAC,aAAa,GAAG,EAAE,CAAC;aAClC;SACF;KACF;;IAIS,aAAa;QACnB,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE;YACnD,IAAI,CAAC,KAAK,GAAG,yDAAyD,CAAC;SACxE;aAAM;YACL,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;SACxB;KACF;;IAGO,MAAM,UAAU;QACtB,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;QAC3D,MAAM,IAAI,CAAC,oBAAoB,EAAE,CAAC;KACnC;IAcD,gBAAgB;QACd,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,gBAAgB,CAAQ,CAAC;QACrE,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,cAAc,CAAQ,CAAC;QAEjE,IAAI,SAAS,EAAE;YACb,SAAS,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAkC,CAAC,CAAC;SACnF;QACD,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,eAAgC,CAAC,CAAC;SAC/E;QAED,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;IAGD,MAAM,QAAQ;QACZ,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC;KAC7C;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAE,2BAA2B,IAAI,CAAC,KAAK,EAAE,IAEjD,IAAI,CAAC,KAAK,KACTD,gEAAG,KAAK,EAAC,WAAW,IACjB,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,QAAQ,IAAIA,mEAAM,KAAK,EAAC,oBAAoB,SAAU,CAC1D,CACL,EAEDA,kEAAK,KAAK,EAAC,0DAA0D,IAEnEA,mEAAM,IAAI,EAAC,OAAO,GAAQ,EAE1BA,mEAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,SAAS,CAAQ,EAGrDA,mEAAM,IAAI,EAAC,KAAK,GAAQ,CACpB,EAGNA,kEAAK,KAAK,EAAC,eAAe,IACvB,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,GAAG,EAAEE,OAAK,MACjCF,eAAG,GAAG,EAAEE,OAAK,EAAE,KAAK,EAAC,sBAAsB,IACzCF,uBAAW,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,mBAAmB,iBAAa,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG,EAC/E,GAAG,CAAC,IAAI,EAAE,CACT,CACL,CAAC,CACE,EAGL,IAAI,CAAC,MAAM,IAAIA,gEAAG,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,MAAM,CAAK,CACnD,EACP;KACH;;;;;;;","names":["h","Host","index"],"sources":["src/components/time-range-picker/time-range-picker.css?tag=road-time-range-picker&encapsulation=scoped","src/components/time-range-picker/time-range-picker.tsx"],"sourcesContent":["/*\n * Time range \n */\n\n\n.required-indicator {\n  color: var(--road-on-danger-surface);\n  content: \" *\";\n}\n\n.time-range-picker-content road-input{\n  margin-bottom: 0;\n}\n\n.time-range-picker .messages {\n  display: flex;\n  flex-direction: column;\n}\n\n.invalid-feedback {\n  font-size: var(--road-helper-medium);\n  color: var(--road-on-danger-surface);\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.invalid-feedback road-icon{\n  color: var(--road-danger-icon);\n}\n\n/* Cible directement le road-input avec la classe error-border */\n:host() road-input.error-border{\n  border-radius: 0.25rem;\n  outline: 1px solid var(--road-danger-outline);\n  outline-offset: -1px;\n}\n\n\n\n\n\n\n","import { Component, Event, EventEmitter, h, Host, Method, Prop, Element } from '@stencil/core';\nimport type { RoadInputCustomEvent } from '../../components';\n\n/**\n * @slot start - Input de début\n * @slot end - Input de fin\n * @slot separator - Label séparateur (optionnel)\n */\n@Component({\n  tag: 'road-time-range-picker',\n  styleUrl: 'time-range-picker.css',\n  scoped: true,\n})\nexport class RoadTimeRangePicker {\n  @Element() hostEl!: HTMLElement;\n\n  /** Heure de début */\n  @Prop({ mutable: true }) start?: string;\n\n  /** Heure de fin */\n  @Prop({ mutable: true }) end?: string;\n\n  /** Désactivation du picker */\n  @Prop() disabled = false;\n\n  /** Helper message */\n  @Prop() helper?: string;\n\n  /** Separator label */\n  @Prop() separator?: string;\n\n  /** Si `true`, l’utilisateur doit remplir avant submit */\n  @Prop() required = false;\n\n  /** Label global du champ */\n  @Prop() label?: string;\n\n  /** Taille du champ */\n  @Prop() sizes: 'lg' | 'xl' = 'lg';\n\n  /** Error messages */\n  @Prop() error?: string | string[];\n\n  /** Événement quand la plage change */\n  @Event() roadChange!: EventEmitter<{ start?: string; end?: string }>;\n\n  /** Forward des events enfants */\n  @Event() roadInput!: EventEmitter<{ start?: string; end?: string }>;\n  @Event() roadFocus!: EventEmitter<'start' | 'end'>;\n  @Event() roadBlur!: EventEmitter<'start' | 'end'>;\n\n  /** Retourne les messages d'erreur sous forme de tableau */\n  private get errorMessages(): string[] {\n    if (!this.error) return [];\n    if (Array.isArray(this.error)) return this.error.flatMap(e => (typeof e === 'string' ? e.split(',') : [e]));\n    return this.error.split(',');\n  }\n\n  /** Ajoute ou retire la classe error-border sur le road-input */\nprivate async updateInvalidClasses() {\n  const inputs = Array.from(\n    this.hostEl.querySelectorAll('road-input[slot=\"start\"], road-input[slot=\"end\"]')\n  ) as any[];\n\n  for (const inputEl of inputs) {\n    await inputEl.componentOnReady?.();\n    if (this.errorMessages.length > 0) {\n      inputEl.style.borderRadius = '0.25rem';\n      inputEl.style.outline = `1px solid var(--road-danger-outline)`;\n      inputEl.style.outlineOffset = '-1px';\n    } else {\n      inputEl.style.borderRadius = '';\n      inputEl.style.outline = '';\n      inputEl.style.outlineOffset = '';\n    }\n  }\n}\n\n\n  /** Vérifie que start <= end et met à jour l’erreur */\n  private validateRange() {\n    if (this.start && this.end && this.start > this.end) {\n      this.error = 'L’heure de début doit être inférieure à l’heure de fin.';\n    } else {\n      this.error = undefined;\n    }\n  }\n\n  /** Émet les changements */\n  private async emitChange() {\n    this.validateRange();\n    this.roadChange.emit({ start: this.start, end: this.end });\n    await this.updateInvalidClasses();\n  }\n\n  /** Handle change depuis le slot start */\n  private handleStartChange = (e: RoadInputCustomEvent<{ value: string | null | undefined }>) => {\n    this.start = e.detail.value ?? undefined;\n    this.emitChange();\n  };\n\n  /** Handle change depuis le slot end */\n  private handleEndChange = (e: RoadInputCustomEvent<{ value: string | null | undefined }>) => {\n    this.end = e.detail.value ?? undefined;\n    this.emitChange();\n  };\n\n  componentDidLoad() {\n    const startSlot = this.hostEl.querySelector('[slot=\"start\"]') as any;\n    const endSlot = this.hostEl.querySelector('[slot=\"end\"]') as any;\n\n    if (startSlot) {\n      startSlot.addEventListener('roadChange', this.handleStartChange as EventListener);\n    }\n    if (endSlot) {\n      endSlot.addEventListener('roadChange', this.handleEndChange as EventListener);\n    }\n\n    this.updateInvalidClasses();\n  }\n\n  @Method()\n  async getRange() {\n    return { start: this.start, end: this.end };\n  }\n\n  render() {\n    return (\n      <Host class={`time-range-picker input-${this.sizes}`}>\n        {/* Label global */}\n        {this.label && (\n          <p class=\"label m-0\">\n            {this.label}\n            {this.required && <span class=\"required-indicator\"> *</span>}\n          </p>\n        )}\n\n        <div class=\"time-range-picker-content d-flex align-items-center my-4\">\n          {/* Slot start */}\n          <slot name=\"start\"></slot>\n\n          <span class=\"separator mx-12\">{this.separator}</span>\n\n          {/* Slot end */}\n          <slot name=\"end\"></slot>\n        </div>\n\n        {/* Messages error */}\n        <div class=\"messages mt-1\">\n          {this.errorMessages.map((msg, index) => (\n            <p key={index} class=\"invalid-feedback m-0\">\n              <road-icon slot=\"start\" name=\"alert-error-solid\" aria-hidden=\"true\" size=\"sm\" />\n              {msg.trim()}\n            </p>\n          ))}\n        </div>\n\n        {/* Helper */}\n        {this.helper && <p class=\"helper mt-1\">{this.helper}</p>}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/road-toast.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-fee0103c.js');
-const index$1 = require('./index-bf8a763e.js');
+const index$1 = require('./index-0e4df560.js');
 
 const toastCss = ":host{position:fixed;right:0;bottom:1rem;left:0;z-index:1;display:flex;justify-content:center;width:328px;margin:0 auto;pointer-events:none;visibility:hidden;opacity:0;transition:opacity .3s ease-in-out,visibility .15s,transform .3s ease-in-out;transform:translateY(-100%)}@media (min-width: 1200px){:host{right:1.5rem;bottom:3rem;left:auto;width:auto;transform:translateX(100%)}}:host(.toast-open){visibility:visible;opacity:1;transform:none}.toast{position:relative;box-sizing:border-box;display:flex;flex:0 0 100%;flex-flow:wrap;align-items:flex-start;width:328px;padding:0.75rem 2rem 0.6rem 1rem;font-family:var(--road-font);font-size:var(--road-body-medium);line-height:1.4;color:var(--road-on-info-surface-inverse);text-align:left;background:var(--road-info-surface-inverse);border-radius:0.25rem}@media (min-width: 575px){.toast{padding:1rem;margin-right:auto;margin-left:auto}}.toast-danger{color:var(--road-on-danger-surface-inverse);pointer-events:all;background:var(--road-danger-surface-inverse)}.toast-danger road-icon{color:var(--road-danger-icon-inverse)}.toast-warning{color:var(--road-on-warning-surface-inverse);background:var(--road-warning-surface-inverse)}.toast-warning road-icon{color:var(--road-warning-icon-inverse)}.toast-success{color:var(--road-on-success-surface-inverse);background:var(--road-success-surface-inverse)}.toast-success road-icon{color:var(--road-success-icon-inverse)}.toast-info{color:var(--road-on-info-surface-inverse);background:var(--road-info-surface-inverse)}.toast-info road-icon{color:var(--road-info-icon-inverse)}.toast-icon{top:auto;left:0.5rem;margin-top:-5px;margin-right:0.5rem}@media (min-width: 575px){.toast-icon{position:relative;top:auto;left:auto;margin-right:0.5rem}}.toast-close{position:absolute;right:0.5rem;padding:0;color:inherit;cursor:pointer;background:none;border:0;border-radius:4px;fill:var(--road-info-icon-inverse)}.toast-warning .toast-close{fill:var(--road-warning-icon-inverse)}.toast-close:focus{border-color:var(--road-info-surface-inverse);outline:none}.toast-label{width:240px;margin:0}:host ::slotted(road-progress){position:absolute;bottom:-8px;left:0;flex-basis:100%;width:100%;margin-top:0.5rem}@keyframes load{0%{width:0}100%{width:100%}}";
 const RoadToastStyle0 = toastCss;
@@ -88,7 +88,7 @@ const Toast = class {
         if (this.color == 'danger') {
             this.timeout = 0;
         }
-        return (index.h(index.Host, { key: '6f7087bd4eb183f58cde02e0a890e6ab18b6c5b8', class: `${toastIsOpenClass}`, role: "alert" }, index.h("div", { key: 'a2494ef9b74ad9fac5d8b81c810bdcfe52936fef', class: `toast toast-${this.color}` }, index.h("road-icon", { key: '4be95019df5ab21b94508a62afd80f0d89d42150', class: "toast-icon", icon: icon, "aria-hidden": "true" }), index.h("p", { key: 'ca9901aed33cf158c16eadf8587b90ae235dd933', class: "toast-label" }, this.label), index.h("button", { key: 'abdb172097d82844c78e608264995aa8568fdf23', type: "button", class: "toast-close", "aria-label": "Close", onClick: this.onClick }, index.h("road-icon", { key: 'a6c17efe9a3255210498348ced0ab1e7b5dd8b8c', icon: index$1.navigationClose, size: "md" })), index.h("slot", { key: 'ee1c9f42ddb4efaf69466d51edd10c256b35bd22', name: "progress" }))));
+        return (index.h(index.Host, { key: '7e6b8eb5b97d93b1c0da2b5fca2b95d7fe53b464', class: `${toastIsOpenClass}`, role: "alert" }, index.h("div", { key: '928fcd556ba9573248c0bf136d41ae385fef3c0f', class: `toast toast-${this.color}` }, index.h("road-icon", { key: '6620412742937e307d6677bdfeb5b3df34403cee', class: "toast-icon", icon: icon, "aria-hidden": "true" }), index.h("p", { key: 'b7fa0b376a936b6ddf6f7a995fbd531b6657dc72', class: "toast-label" }, this.label), index.h("button", { key: 'c38b2ab0f05605a9c428684e31ef07a8ee03491c', type: "button", class: "toast-close", "aria-label": "Close", onClick: this.onClick }, index.h("road-icon", { key: '71820f58335f516f7660650e10f042b347922113', icon: index$1.navigationClose, size: "md" })), index.h("slot", { key: '52cc64d445b08d0f3a993deae2228e8da87ba5f5', name: "progress" }))));
     }
     static get watchers() { return {
         "isOpen": ["isOpenChanged"]

package/dist/cjs/road-toggle.cjs.entry.js

@@ -73,11 +73,11 @@ const toggle = class {
     }
     render() {
         const labelId = this.toggleId + '-label';
-        const textLabel = index.h("label", { key: 'da8146433e72a0e4c38d89cd50f2ef4989558500', class: "form-toggle-label", id: labelId, htmlFor: this.toggleId }, this.label);
+        const textLabel = index.h("label", { key: '200063a0e964b5a6cc9694a6aae1b45418751867', class: "form-toggle-label", id: labelId, htmlFor: this.toggleId }, this.label);
         const isSpacedClass = this.isSpaced && 'form-toggle-spaced';
         const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';
         const disabledClass = this.disabled ? 'disabled' : '';
-        return (index.h(index.Host, { key: 'd936b14ef2a1a616059096240699b133be29bcd4' }, index.h("input", { key: '7d5948cd6098c951a31442fb1e2cfc3b8589d2c1', class: "form-toggle-input", type: "checkbox", id: this.toggleId, 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 }), index.h("label", { key: '4717080e6a38b326a21f0e2e5bfebab37de21663', class: `form-toggle-label ${isSpacedClass} ${disabledClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, index.h("div", { key: '1f84a49b36dcc9b0203eba5827c045b0294030ee', class: `form-toggle-lever ${righttoggleClass}` }, this.checked ? (index.h("road-icon", { name: "check-small-solid", class: "form-toggle-lever-check", size: "md" })) : (index.h("road-icon", { name: "navigation-close-solid", class: "form-toggle-lever-close", size: "md" }))), this.hasLeftLabel ? '' : textLabel)));
+        return (index.h(index.Host, { key: '65b426ec8ab4b2e9c1f773e92c5034cb67893ded' }, index.h("input", { key: 'a92fd1807ad4fa13492cc7dc3664b088228d020b', class: "form-toggle-input", type: "checkbox", id: this.toggleId, 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 }), index.h("label", { key: '4ad95f0f23572757d568923e88b29f7c7a24bbfa', class: `form-toggle-label ${isSpacedClass} ${disabledClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, index.h("div", { key: 'd82522fd9584390936eaf96b65a6a6fb14713794', class: `form-toggle-lever ${righttoggleClass}` }, this.checked ? (index.h("road-icon", { name: "check-small-solid", class: "form-toggle-lever-check", size: "md" })) : (index.h("road-icon", { name: "navigation-close-solid", class: "form-toggle-lever-close", size: "md" }))), this.hasLeftLabel ? '' : textLabel)));
     }
     static get watchers() { return {
         "checked": ["checkedChanged"]

package/dist/cjs/road-toolbar-title-page.cjs.entry.js

@@ -12,7 +12,7 @@ const ToolbarAppName = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: '1c1ecd0a39d2929bca5c324fe67bdc18a18b5390', class: "toolbar-title-page" }, index.h("slot", { key: '0b52cf3cf5b7a6d5f41ec4c8f839731cb48315c9' })));
+        return (index.h("div", { key: 'fa5fa9ad6f5e3a1d562bdc38b312c16cc9483d54', class: "toolbar-title-page" }, index.h("slot", { key: 'b35389dcc32ff0ba0c163e5916d701c79fbf8ba9' })));
     }
 };
 ToolbarAppName.style = RoadToolbarTitlePageStyle0;