@roadtrip/components 3.45.2 → 3.47.0

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

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

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

@@ -57,7 +57,7 @@ const RadioCard = class {
         const inlineClass = this.inline ? 'form-radio-inline' : '';
         const selectedClass = this.isSelected || this.selected ? 'radio-card-selected' : '';
         const disabledClass = this.disabled ? 'radio-card-disabled' : '';
-        return (h(Host, { key: '855a082bcd5ab1d2a76e276c9e026efda529b785', class: `form-radio ${inlineClass}` }, h("div", { key: '1b76deba72dbfb07eb160c7791a9b02b4b5bcc5b', class: `radio-card ${selectedClass}  ${disabledClass}`, onClick: this.onClick }, h("input", { key: '34d7a61463f55efcb9a13b4651f297d89e0a922b', ref: el => this.inputEl = el, class: "form-radio-input", type: "radio", id: this.radioId, name: this.name, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, checked: this.isSelected || this.selected, "aria-labelledby": labelId, value: this.value, onFocus: this.onFocus, onBlur: this.onBlur, onChange: () => { } }), h("label", { key: '1f0d49a8d711e9c6f232f82bce3f9a942544b124', class: "form-radio-label", htmlFor: this.radioId, id: labelId }, h("div", { key: '7349a2e57c95bcc4c43314cdfe270b7c51f33146', class: "slot-wrapper" }, h("slot", { key: '433d85a6e2807076f215d2c52f1d077030e9f2da' }))))));
+        return (h(Host, { key: '5895d04cdb20013dc850dbded6005cd7280838af', class: `form-radio ${inlineClass}` }, h("div", { key: 'd12cd0ba4ec697307f833afec78c7bbe058cb782', class: `radio-card ${selectedClass}  ${disabledClass}`, onClick: this.onClick }, h("input", { key: '30ff38097eeb93342dcfe8358642f8910bbd7a05', ref: el => this.inputEl = el, class: "form-radio-input", type: "radio", id: this.radioId, name: this.name, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, checked: this.isSelected || this.selected, "aria-labelledby": labelId, value: this.value, onFocus: this.onFocus, onBlur: this.onBlur, onChange: () => { } }), h("label", { key: '43e6a5f291aa394da3b0100c7c915987090dd863', class: "form-radio-label", htmlFor: this.radioId, id: labelId }, h("div", { key: '49a9e20e549ed5d79943a3fce2aa3f234774a76a', class: "slot-wrapper" }, h("slot", { key: 'cbc19c8a4fa7a6be3511d5790247b39e5ded48a4' }))))));
     }
     get el() { return getElement(this); }
 };

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

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

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

@@ -81,7 +81,7 @@ const Radio = class {
         const inverseClass = this.inverse && 'form-radio-inverse';
         const isInvalidClass = this.error ? 'is-invalid' : '';
         const inlineClass = this.inline ? 'form-radio-inline' : '';
-        return (h(Host, { key: '8527b5ca6ed9c45a9fe7fc8dca12b6dafb159175', class: `form-radio ${inlineClass}` }, h("input", { key: '82f44c9ebb76379f1c2ae8e7978b82167929729d', class: `form-radio-input ${isInvalidClass}`, type: "radio", id: this.radioId, name: this.name, required: this.required, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, checked: this.checked, "aria-checked": `${this.checked}`, "aria-labelledby": labelId, value: this.value, onFocus: this.onFocus, onBlur: this.onBlur }), h("label", { key: '5e12d52490a2ae6cacf0eef9abb225626ec75a2c', class: `form-radio-label ${inverseClass}`, id: labelId, htmlFor: this.radioId }, this.label, " ", h("span", { key: '8c1c4c69075836741bbc89a0460fc47f8d4486e1', class: "form-radio-label-span" }, this.secondaryLabel))));
+        return (h(Host, { key: '1b2343fc9a114afc9506ff040f28a6061a5c9f56', class: `form-radio ${inlineClass}` }, h("input", { key: 'ada87aa55c1d5a778e40fd25c103d0229ecfeec6', class: `form-radio-input ${isInvalidClass}`, type: "radio", id: this.radioId, name: this.name, required: this.required, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, checked: this.checked, "aria-checked": `${this.checked}`, "aria-labelledby": labelId, value: this.value, onFocus: this.onFocus, onBlur: this.onBlur }), h("label", { key: '5690c2d0fc4a0c7b6e03c5fa3c1603a61a2a906f', class: `form-radio-label ${inverseClass}`, id: labelId, htmlFor: this.radioId }, this.label, " ", h("span", { key: '84ce9ad88d4a2612a176b0420ac114c1a648a5a8', class: "form-radio-label-span" }, this.secondaryLabel))));
     }
     get el() { return getElement(this); }
 };

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

@@ -86,14 +86,14 @@ const Range = class {
     render() {
         const value = this.getValue();
         const datalist = this.showLabels !== undefined ? `tickmarks` : "";
-        return (h(Host, { key: '4a3eac8fe972c4da37712c2bfb9f9368a2c5e0e4', tabindex: "0", class: { disabled: this.disabled } }, h("div", { key: '7ede74bdbb7f85124b250a02f312e0fa8672b445', class: "form-group d-flex align-items-end" }, this.showTick && (h("road-icon", { key: 'bbfe778ba2082b82dac80d2c9b11b032ae4d3dc5', icon: navigationAddLessSolid, class: "mr-8", size: "sm" })), h("div", { key: 'a5617bb934ee0e8f481d4cbbe334ecdcccb80f4a', class: "form-range", style: {
+        return (h(Host, { key: 'c3920abc285183763dbc8f2aa4773cca370bcd07', tabindex: "0", class: { disabled: this.disabled } }, h("div", { key: 'dd1886b51d24f6c964d589759c69ee01984f8e37', class: "form-group d-flex align-items-end" }, this.showTick && (h("road-icon", { key: '55aa2746dd83c6145722eb580a811607cb5dc07f', icon: navigationAddLessSolid, class: "mr-8", size: "sm" })), h("div", { key: 'd17f88478bd99fca6656a9d14dc173e84e377310', class: "form-range", style: {
                 "--min": this.min,
                 "--max": this.max,
                 "--value": value,
                 "--background-color": this.disabled
                     ? "var(--road-surface-disabled)"
                     : "initial",
-            } }, this.showValue && h("output", { key: 'f8fb6174412f03e9e0ada70b79715b8892c394e7' }), this.showLabels && h("slot", { key: '77278e535a1cf754b21ef12ebd1650aa03942ad0', name: "datalist" }), h("input", { key: 'c40fc31c0744955b440b162e5cddaa7c7b2119a3', type: "range", class: "form-range-input", id: this.rangeId, min: this.min, max: this.max, value: value, onInput: this.onInput, list: datalist, "aria-label": "Valeur", tabindex: "0", disabled: this.disabled }), h("label", { key: 'ec72158b6b0f7128aee76222506a6ecf80bbf43c', class: "form-range-label" }, "Valeur"), h("div", { key: 'ec3ba04cbb45a2af707f81e0fd05fbbb868c8187', class: "form-range-progress" })), this.showTick && (h("road-icon", { key: '293312e73482a2dafe8ef694ae2e56e3f37955bb', icon: navigationAddMoreSolid, class: "ml-8", size: "sm" })))));
+            } }, this.showValue && h("output", { key: '85a0ba0f128f123b97ba55420bccfd39eb889c39' }), this.showLabels && h("slot", { key: 'ff35158ff5adf21ce51b01ed74d109a3db0944be', name: "datalist" }), h("input", { key: '5e6d7d1812c96be847f091003c0cb36ebc390802', type: "range", class: "form-range-input", id: this.rangeId, min: this.min, max: this.max, value: value, onInput: this.onInput, list: datalist, "aria-label": "Valeur", tabindex: "0", disabled: this.disabled }), h("label", { key: 'd0c8ec02d5ab901104b0d75a2b03ec759db92869', class: "form-range-label" }, "Valeur"), h("div", { key: 'e95ec94dd77494301597108e379db793571aabaf', class: "form-range-progress" })), this.showTick && (h("road-icon", { key: 'e3b009fb2cacb8e2b0bbc22fa99dda889911ebc6', icon: navigationAddMoreSolid, class: "ml-8", size: "sm" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -42,7 +42,7 @@ const Rating = class {
         const sizeRatingStarsClass = this.size !== undefined ? `rating-stars rating-stars--${this.size}` : 'rating-stars';
         const sizeRatingNumberClass = this.size !== undefined ? `rating-number rating-number--${this.size}` : 'rating-number';
         const readOnly = this.readonly == true ? `readonly` : '';
-        return (h(Host, { key: 'f3317daf4cdd2e6a539936c9dbe095c791ce883d' }, h("div", { key: 'fe4e3b262592ca714e26f7cc03ac9ba4435d0b51', class: `${sizeRatingStarsClass}` }, [...Array(rate)].map(() => h("road-icon", { icon: star, size: "sm", color: "warning" })), [...Array(rateDecimale)].map(() => h("road-icon", { icon: starHalfColor, size: "sm", class: "rating-star" })), [...Array(5 - rate - rateDecimale)].map(() => h("road-icon", { icon: star, size: "sm", class: "rating-star" }))), this.readonly == false && this.showreviews && h("a", { key: '17bd3fb3ecbbd6e040c3c9c70fb92b9af90ee6b1', class: `${sizeRatingNumberClass}`, href: this.url }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")"), this.readonly == true && this.showreviews && h("road-label", { key: '5dba1d64ca367649797df7b872789e7cdc130e8c', class: `${sizeRatingNumberClass} ${readOnly}` }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")")));
+        return (h(Host, { key: 'f746ba94159c130ca443d88ff3cb2f19183f014a' }, h("div", { key: 'bd36bdd0b94d67ed435554a674a4a9aba0a12c2f', class: `${sizeRatingStarsClass}` }, [...Array(rate)].map(() => h("road-icon", { icon: star, size: "sm", color: "warning" })), [...Array(rateDecimale)].map(() => h("road-icon", { icon: starHalfColor, size: "sm", class: "rating-star" })), [...Array(5 - rate - rateDecimale)].map(() => h("road-icon", { icon: star, size: "sm", class: "rating-star" }))), this.readonly == false && this.showreviews && h("a", { key: '432a059b4b6e69201f90d0e807b6e30b25bd9b55', class: `${sizeRatingNumberClass}`, href: this.url }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")"), this.readonly == true && this.showreviews && h("road-label", { key: '65aedc2c22b39e22b48afed4595a0db0829e373a', class: `${sizeRatingNumberClass} ${readOnly}` }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")")));
     }
 };
 Rating.style = RoadRatingStyle0;

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

@@ -24,7 +24,7 @@ const ButtonBar = class {
         this.selectedTabChanged();
     }
     render() {
-        return (h(Host, { key: 'd4cf00bc997e0ed05484681fb5fc5f554b3d6fbd', role: "tablist" }, h("slot", { key: 'cadf449cf80d55a0fe297fff440f65f6c096c371' })));
+        return (h(Host, { key: '9d6937fa6b2840970dd93648f1e79724562d91bf', role: "tablist" }, h("slot", { key: '63de3253cb8eb6e9d4fa2374a1fab04ff64b174a' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -55,10 +55,10 @@ const SegmentedButton = class {
     render() {
         const { tabIndex, selected, tab } = this;
         const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';
-        return (h(Host, { key: '8b14a7cc7b693e9738cc01498921b86f01a5e2a5', onClick: this.onClick, onKeyup: this.onKeyUp, role: "tab", tabindex: tabIndex, "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: '20194d71e8ca1c839c4a6287511fcb9ad1318e67', onClick: this.onClick, onKeyup: this.onKeyUp, role: "tab", tabindex: tabIndex, "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 'tab-selected': selected,
                 [`${sizeClass}`]: true,
-            } }, h("span", { key: '2e4d84a1561a9c09b441fd858c3625f784c6794c', tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, h("span", { key: '2acfa633cb9a32c3554ac7067fd62737bc45b172', class: "button-content" }, h("slot", { key: '1b133f39ff11f8bdd8be0b3d7f780262f0af2e18' })))));
+            } }, h("span", { key: 'cf51481805c04571bc3ef97a150b011bd8c0e79e', tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, h("span", { key: '595aae2ef9621aa6a39ef2388373ec3708972bbb', class: "button-content" }, h("slot", { key: '9b6e874b79e88265b6c56465e9f84a5849363016' })))));
     }
     get el() { return getElement(this); }
 };

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

@@ -91,7 +91,7 @@ const Tabs = class {
         return Array.from(this.el.querySelectorAll('road-tab'));
     }
     render() {
-        return (h(Host, { key: '51b943aa1730a5869b8d4616e5b9d0a883c3e17c', onRoadSegmentedButtonClick: this.onTabClicked }, h("slot", { key: '14c0de7b24f8a960a331c258ac91dd2ec4e1dda2', name: "top" }), h("slot", { key: 'b8d71615b2b6bbee3ce95754f0b2f0a7c5ef3385' })));
+        return (h(Host, { key: 'df0d2cbe2bf0647686439e58ab7e47067bb85a18', onRoadSegmentedButtonClick: this.onTabClicked }, h("slot", { key: '0181d346ee8cf63cab8eac42c8932e1f5477288f', name: "top" }), h("slot", { key: 'c3c0f5c41618721ace911e149d1218b0f8412369' })));
     }
     get el() { return getElement(this); }
 };

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

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

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

@@ -103,7 +103,7 @@ const Select = class {
         const labelId = this.selectId + '-label';
         const hasValueClass = this.value && this.value !== '' ? 'has-value' : '';
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-        return (h(Host, { key: '252c4ae08501f73688cf0c7c7b0830439f1f8e1f', class: this.sizes && `select-${this.sizes}` }, h("select", { key: '28001067f4222640b9a7d4a93692ff94593651c1', class: `form-select ${hasValueClass} ${isInvalidClass}`, id: this.selectId, "aria-disabled": this.disabled ? 'true' : null, autoFocus: this.autofocus, disabled: this.disabled, name: this.name, required: this.required, size: this.size, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }, h("option", { key: '8933f32a5982c18c456bb06e22a28f67320927b0', selected: !this.value, disabled: true, hidden: true, style: { display: 'none' }, value: "" }), this.options && this.options.map(option => (h("option", { value: option.value, selected: this.value !== null && option.value == this.value }, option.label)))), h("label", { key: '49e2bd5cff399c79900ac65dd37e73bc862f3d00', class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && h("p", { key: 'e3a55cc35184e8767ba35ac87cb45e7e24f3c116', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: 'd824610dfb9031aecee47f63c288069ca3aed0b6', class: "helper" }, this.helper)));
+        return (h(Host, { key: 'e86d30d1fe1fd95d7b70140a57d76f3992cbc035', class: this.sizes && `select-${this.sizes}` }, h("select", { key: '9a438873eedc20213b7e6c8bae2c648c9c1e0ad1', class: `form-select ${hasValueClass} ${isInvalidClass}`, id: this.selectId, "aria-disabled": this.disabled ? 'true' : null, autoFocus: this.autofocus, disabled: this.disabled, name: this.name, required: this.required, size: this.size, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }, h("option", { key: '67d63f752f9f0fa2d48ee4ec07029c7e43706729', selected: !this.value, disabled: true, hidden: true, style: { display: 'none' }, value: "" }), this.options && this.options.map(option => (h("option", { value: option.value, selected: this.value !== null && option.value == this.value }, option.label)))), h("label", { key: 'c07e091eb4b6da4ab793c2056131c16bf9ee4723', class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && h("p", { key: 'd01132cad717c35ca5a5afe2ad8effb697037a13', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: '2f884ebd87cf990ab093ee5a023cd698c6883a8f', class: "helper" }, this.helper)));
     }
     static get watchers() { return {
         "value": ["valueChanged"]

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

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

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

@@ -18,7 +18,7 @@ const Spinner = class {
     render() {
         const sizeClass = this.size !== undefined ? `spinner spinner--${this.size}` : 'spinner';
         const colorClass = this.size !== undefined ? `spinner-circle spinner-circle--${this.color}` : 'spinner-circle';
-        return (h("svg", { key: '1465d5db948734bba9d01c1371fbe97fba33ccb5', class: `${sizeClass}`, viewBox: "25 25 50 50" }, h("circle", { key: 'f7dd929e5cdef073f60d8e6d651fc3e64e594ced', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
+        return (h("svg", { key: 'fc286db53f3b74155c3221474abb9472d774e89d', class: `${sizeClass}`, viewBox: "25 25 50 50" }, h("circle", { key: 'a40ef2366ff12fe69486f3db0d92b7d49affd370', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
     }
 };
 Spinner.style = RoadSpinnerStyle0;

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

@@ -1,24 +1,34 @@
-import { r as registerInstance, h, H as Host } from './index-8dc34f94.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-8dc34f94.js';
 import { k as alertInfoSolid } from './index-6de77b28.js';
 import './polyfill-24c8f970.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 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;outline:1px solid var(--road-info-outline)}.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){background:var(--road-info-90);outline:2px solid var(--road-info-outline)}:host(:focus-visible),:host(.focus-visible){background:var(--road-info-90);border-radius:1.625rem;width:fit-content;overflow:auto;outline:6px double var(--road-info-outline)}:host(:active){background:var(--road-info-80);outline:3px solid var(--road-info-outline)}";
 const RoadStatusChipStyle0 = statusChipCss;
 
-const Chip = class {
+const StatusChip = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.chipClick = createEvent(this, "chipClick", 7);
         /**
          * The chip size.
          */
         this.size = 'sm';
+        this.onActivate = () => {
+            this.chipClick.emit();
+        };
+        this.onKeyDown = (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.onActivate();
+            }
+        };
     }
     render() {
-        return (h(Host, { key: '22343d5f99de6406223630ccc5ddc4c8363f87ff', class: `chip-${this.size}`, tabindex: "0" }, h("div", { key: '53693f688a08c07d7c5c5c8f6f4ab6ecbad5c783', class: "chip-description" }, h("road-icon", { key: 'd66577297e5c33d7722c3026293830092e9f0239', class: "chip-icon", color: "info", icon: alertInfoSolid }), h("slot", { key: '248ca83089bffdb3695d953cb14ac38a27e10b4d' }))));
+        return (h(Host, { key: '178e109ebeac6b66b105e3aa12cfc1cd942e83cc', class: `chip-${this.size}`, tabindex: "0", role: "button", onClick: this.onActivate, onKeyDown: this.onKeyDown }, h("div", { key: '5904c24f62ed7636205a0bf05431f698930ae615', class: "chip-description" }, h("road-icon", { key: '5a6767d216edc33ba42b6788102e90469c276a7e', class: "chip-icon", color: "info", icon: alertInfoSolid }), h("slot", { key: '03dfda63fce2ecbfeac0b16e1f54157f75bbe156' }))));
     }
 };
-Chip.style = RoadStatusChipStyle0;
+StatusChip.style = RoadStatusChipStyle0;
 
-export { Chip as road_status_chip };
+export { StatusChip as road_status_chip };
 
 //# sourceMappingURL=road-status-chip.entry.js.map

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

@@ -1 +1 @@
-{"file":"road-status-chip.entry.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,yyCAAyyC,CAAC;AACh0C,6BAAe,aAAa;;MCYf,IAAI;IALjB;;;;;QAUU,SAAI,GAAwB,IAAI,CAAC;KAe1C;IAbC,MAAM;QAEJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAC,GAAG,IAExC,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,kEAAW,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,cAAc,GAAc,EAC5E,8DAAO,CACH,CACD,EACP;KACH;;;;;;","names":[],"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}
+{"file":"road-status-chip.entry.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,kkDAAkkD,CAAC;AACzlD,6BAAe,aAAa;;MCYf,UAAU;IALvB;;;;;;QAUU,SAAI,GAAwB,IAAI,CAAC;QAIjC,eAAU,GAAG;YACnB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;SACvB,CAAC;QAEM,cAAS,GAAG,CAAC,CAAgB;YACnC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;gBACtC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,UAAU,EAAE,CAAC;aACnB;SACF,CAAC;KAkBH;IAhBC,MAAM;QAEJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAC,GAAG,EACxC,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,SAAS,EAAE,IAAI,CAAC,SAAS,IAEzB,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,kEAAW,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,cAAc,GAAc,EAC5E,8DAAO,CACH,CACD,EACP;KACH;;;;;;","names":[],"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  outline: 1px solid var(--road-info-outline);\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    background: var(--road-info-90);\n    outline: 2px solid var(--road-info-outline);\n}\n\n:host(:focus-visible),\n:host(.focus-visible)   {\n    background: var(--road-info-90);\n    border-radius: 1.625rem;;\n    width: fit-content;\n    overflow: auto;\n    outline: 6px double var(--road-info-outline);\n}\n\n\n/**\n * Active\n */\n\n:host(:active) {\n    background: var(--road-info-80);\n    outline: 3px solid var(--road-info-outline);\n}\n","import { Component, Host, Prop, Event, EventEmitter, h } from '@stencil/core';\nimport { alertInfoSolid } from '../../../icons';\nimport './../../utils/polyfill';\n\n/**\n * @slot - Content of the chip.\n */\n\n@Component({\n  tag: 'road-status-chip',\n  styleUrl: 'status-chip.css',\n  shadow: true,\n})\nexport class StatusChip {\n\n  /**\n   * The chip size.\n   */\n  @Prop() size: 'sm' |  'md' | 'lg' = 'sm';\n\n  @Event() chipClick!: EventEmitter<void>;\n\n  private onActivate = () => {\n    this.chipClick.emit();\n  };\n\n  private onKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.onActivate();\n    }\n  };\n\n  render() {\n\n    return (\n      <Host\n        class={`chip-${this.size}`} tabindex=\"0\"\n        role=\"button\" \n        onClick={this.onActivate}\n        onKeyDown={this.onKeyDown}\n      >\n        <div class=\"chip-description\">\n          <road-icon class=\"chip-icon\" color=\"info\" icon={alertInfoSolid}></road-icon>\n          <slot/>\n        </div>\n      </Host>\n    );\n  }\n}"],"version":3}

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

@@ -81,11 +81,11 @@ const Switch = class {
     }
     render() {
         const labelId = this.switchId + '-label';
-        const textLabel = h("label", { key: 'b0499c36ab0eb33ac879c37115b6a4754c5d1529', class: "form-switch-label", id: labelId, htmlFor: this.switchId }, this.label);
+        const textLabel = h("label", { key: '22fa2b6f8be006647d123f0fc8eb077afad13aca', class: "form-switch-label", id: labelId, htmlFor: this.switchId }, this.label);
         const colorClass = this.color !== undefined ? 'form-switch-' + this.color : '';
         const isSpacedClass = this.isSpaced && 'form-switch-spaced';
         const rightSwitchClass = this.hasLeftLabel ? 'form-switch-right' : '';
-        return (h(Host, { key: 'a9365fb9fd70d406e5a90d740cead5094861ac79' }, h("input", { key: '8714e6da068a91604e19dfbdba6f6c712c339c07', class: "form-switch-input", type: "checkbox", id: this.switchId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), h("label", { key: 'b181aecf57662fe3d9c4032ef5fbd47709730e85', class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, h("div", { key: '4c6da52b6e04657d6749eec12c3c6ff5f97ce762', class: `form-switch-lever ${rightSwitchClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
+        return (h(Host, { key: 'afcb3cea4c1ee2740769cc1364d9175d5a144ba7' }, h("input", { key: '2dace2130557a4c73b79dcd494cc33a7541e6737', class: "form-switch-input", type: "checkbox", id: this.switchId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), h("label", { key: '81450123a463b3619774e65b7e49c3637b5d0037', class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, h("div", { key: '4bf60bf353f80414ac1bba264966b0ca00405b07', class: `form-switch-lever ${rightSwitchClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
     }
     static get watchers() { return {
         "checked": ["checkedChanged"]

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

@@ -40,11 +40,11 @@ const TabBar = class {
     }
     render() {
         const { expand, center, secondary } = this;
-        return (h(Host, { key: 'c88f5a50d83ec07361ed5dd08d5b8a29fd4ac13d', role: "tablist", class: {
+        return (h(Host, { key: 'c44503ddd4b988d4c35891794c92998299811acb', role: "tablist", class: {
                 'tab-expand': expand,
                 'tab-center': center,
                 'tab-secondary': secondary,
-            } }, h("slot", { key: '9a9f51b48cef50e484e4e6b0696108e9263f0f48' })));
+            } }, h("slot", { key: '356756006ef297ea0933437004f703dc8eccacf9' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-8dc34f94.js';
 
-const tabButtonCss = ":host{box-sizing:border-box;font-weight:700;color:var(--tab-color);outline:0;transition:background 0.15s ease-in-out}:host(.tab-secondary){--tab-underline-selected:var(--road-secondary-600)}:host(.tab-selected){color:var(--tab-color-selected)}:host(.tab-selected) ::slotted(road-icon){color:var(--tab-color-selected)}:host(.tab-selected) .button-native::after{height:2px;background:var(--tab-underline-selected);opacity:1;transform:none}:host(:hover){background:var(--tab-background-hover)}:host(.focus-visible){background:var(--tab-background-focused);outline:auto}:host(.tab-disabled){background:var(--road-surface-disabled)}:host(.tab-disabled) .button-native{cursor:not-allowed}:host(.tab-disabled) ::slotted(road-label){color:var(--road-on-surface-disabled)}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;min-height:3.5rem;padding:0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);margin:0;overflow:hidden;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;-webkit-user-drag:none;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.button-native::after{position:absolute;bottom:0;left:0;display:block;width:100%;height:0;content:\"\";background-color:var(--road-input-outline);opacity:1;transition:transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transform:none;transform-origin:center}.button-inner{position:relative;z-index:1;display:flex;flex-flow:inherit;align-items:center;justify-content:center;width:100%;height:100%}:host ::slotted(road-icon){color:var(--tab-color)}:host(.tab-layout-icon-start) ::slotted(road-icon){margin-right:0.5rem}:host(.tab-layout-icon-top) .button-inner{flex-direction:column}:host ::slotted(road-label){display:-webkit-box;max-width:12.5rem;overflow:hidden;font-size:1rem;color:var(--road-on-surface);-webkit-line-clamp:1;-webkit-box-orient:vertical;text-align:center;text-overflow:ellipsis;white-space:inherit}:host(.tab-layout-icon-top) ::slotted(road-label){margin-top:0.25rem;font-size:1rem}";
+const tabButtonCss = ":host{box-sizing:border-box;font-weight:700;color:var(--tab-color);outline:0;transition:background 0.15s ease-in-out}:host(.tab-secondary){--tab-underline-selected:var(--road-secondary-600)}:host(.tab-selected){color:var(--tab-color-selected)}:host(.tab-selected) ::slotted(road-icon){color:var(--tab-color-selected)}:host(.tab-selected) ::slotted(road-label){color:var(--road-on-surface)}:host(.tab-selected) .button-native::after{height:2px;background:var(--tab-underline-selected);opacity:1;transform:none}:host(:hover){background:var(--tab-background-hover)}:host(.focus-visible){background:var(--tab-background-focused);outline:auto}:host(.tab-disabled){background:var(--road-surface-disabled)}:host(.tab-disabled) .button-native{cursor:not-allowed}:host(.tab-disabled) ::slotted(road-label){color:var(--road-on-surface-disabled)}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;min-height:3.5rem;padding:0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);margin:0;overflow:hidden;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;-webkit-user-drag:none;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.button-native::after{position:absolute;bottom:0;left:0;display:block;width:100%;height:0;content:\"\";background-color:var(--road-input-outline);opacity:1;transition:transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transform:none;transform-origin:center}.button-inner{position:relative;z-index:1;display:flex;flex-flow:inherit;align-items:center;justify-content:center;width:100%;height:100%}:host ::slotted(road-icon){color:var(--tab-color)}:host(.tab-layout-icon-start) ::slotted(road-icon){margin-right:0.5rem}:host(.tab-layout-icon-top) .button-inner{flex-direction:column}:host ::slotted(road-label){display:flex;align-items:center;max-width:12.5rem;overflow:hidden;font-size:1rem;color:var(--road-on-surface-weak);-webkit-line-clamp:1;-webkit-box-orient:vertical;text-align:center;text-overflow:ellipsis;white-space:inherit}:host(.tab-layout-icon-top) ::slotted(road-label){margin-top:0.25rem;font-size:1rem}";
 const RoadTabButtonStyle0 = tabButtonCss;
 
 const TabButton = class {
@@ -73,7 +73,7 @@ const TabButton = class {
             rel,
             target,
         };
-        return (h(Host, { key: 'd10e81cf00ff7acb3888181bf7b60db6b7e24162', onClick: (ev) => !disabled && this.onClick(ev), onKeyup: (ev) => !disabled && this.onKeyUp(ev), role: "tab", tabindex: disabled ? -1 : tabIndex, "aria-selected": selected ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: '15684e85cbefb6d8646231adfc2bd423a59edb84', onClick: (ev) => !disabled && this.onClick(ev), onKeyup: (ev) => !disabled && this.onKeyUp(ev), role: "tab", tabindex: disabled ? -1 : tabIndex, "aria-selected": selected ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 'tab-selected': selected,
                 'tab-has-label': hasLabel,
                 'tab-has-icon': hasIcon,
@@ -81,7 +81,7 @@ const TabButton = class {
                 'tab-has-icon-only': hasIcon && !hasLabel,
                 [`tab-layout-${layout}`]: true,
                 'tab-disabled': disabled, // Classe CSS pour les styles désactivés
-            } }, h("a", Object.assign({ key: '81f0045d7d4b05e70ddcbab15866ed09d70eff11' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { key: 'f167d63f29af54aa2632a0e46ca64499a70b3a22', class: "button-inner" }, h("slot", { key: '1b91f5ba629820ef6764eba4064d551ac8b6f820' })))));
+            } }, h("a", Object.assign({ key: '8808982bb613680dcf3e7e330d6ac113f2d2f47f' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { key: 'cc2bb1c13f607c1e3c8088179c3c6ce49f272222', class: "button-inner" }, h("slot", { key: 'a471b49c35cdfc57bd2f5a7156381ea051f1649f' })))));
     }
     get el() { return getElement(this); }
 };

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

@@ -1 +1 @@
-{"file":"road-tab-button.entry.js","mappings":"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","names":[],"sources":["src/components/tab-button/tab-button.css?tag=road-tab-button&encapsulation=shadow","src/components/tab-button/tab-button.tsx"],"sourcesContent":["/*\n * Tab button\n *\n * Index\n * - Button\n * - Native\n * - Underline\n * - Inner\n * - Icon\n * - Label\n *\n */\n\n/**\n * @prop --padding-start: Left padding  of the button\n * @prop --padding-end: Right padding of the button\n * @prop --tab-color: Default color of the tab button text\n * @prop --tab-color-selected: Color of the tab button text when selected\n * @prop --tab-unerline-selected: Color of the tab button underline when selected\n * @prop --tab-background-hover: Color of the tab button when hover by a mouse\n * @prop --tab-background-focused: Color of the tab button when focused with the tab key\n */\n\n\n/* BUTTON\n -------------------- */\n\n:host {\n  box-sizing: border-box;\n  font-weight: 700;\n  color: var(--tab-color);\n  outline: 0;\n  transition: background 0.15s ease-in-out;\n}\n\n/**\n * Active state\n */\n\n:host(.tab-secondary) {\n  --tab-underline-selected: var(--road-secondary-600);\n}\n\n:host(.tab-selected) {\n  color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) ::slotted(road-icon) {\n  color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) .button-native::after {\n  height: 2px;\n  background: var(--tab-underline-selected);\n  opacity: 1;\n  transform: none;\n}\n\n/**\n * Hover state\n */\n\n:host(:hover) {\n  background: var(--tab-background-hover);\n}\n\n/**\n * Focus state\n */\n\n:host(.focus-visible) {\n  background: var(--tab-background-focused);\n  outline: auto;\n}\n\n/**\n * Disabled\n */\n\n:host(.tab-disabled) {\n  background: var(--road-surface-disabled);\n}\n\n:host(.tab-disabled) .button-native{\n  cursor: not-allowed;\n}\n\n:host(.tab-disabled) ::slotted(road-label) {\n  color: var(--road-on-surface-disabled);\n}\n\n\n/* NATIVE\n -------------------- */\n\n.button-native {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n  width: 100%;\n  height: 100%;\n  min-height: 3.5rem;\n  padding: 0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);\n  margin: 0;\n  overflow: hidden;\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  color: inherit;\n  text-align: inherit;\n  text-decoration: none;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  letter-spacing: inherit;\n  white-space: inherit;\n  cursor: pointer;\n  background: transparent;\n  -webkit-user-drag: none;\n  border-color: initial;\n  border-style: initial;\n  border-width: 0;\n  border-radius: inherit;\n  border-image: initial;\n  outline: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/* UNDERLINE\n -------------------- */\n\n.button-native::after {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  display: block;\n  width: 100%;\n  height: 0;\n  content: \"\";\n  background-color: var(--road-input-outline);\n  opacity: 1;\n  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  transform: none;\n  transform-origin: center;\n}\n\n/* INNER\n -------------------- */\n\n.button-inner {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-flow: inherit;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n/* ICON\n -------------------- */\n\n:host ::slotted(road-icon) {\n  color: var(--tab-color);\n}\n\n:host(.tab-layout-icon-start) ::slotted(road-icon) {\n  margin-right: 0.5rem;\n}\n\n:host(.tab-layout-icon-top) .button-inner {\n  flex-direction: column;\n}\n\n/* LABEL\n -------------------- */\n\n:host ::slotted(road-label) {\n  display: -webkit-box;\n  max-width: 12.5rem;\n  overflow: hidden;\n  font-size: 1rem;\n  color: var(--road-on-surface);\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: inherit;\n}\n\n:host(.tab-layout-icon-top) ::slotted(road-label) {\n  margin-top: 0.25rem;\n  font-size: 1rem;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/**\n * @slot  - Content of the tab-button, it should be road-icon and road-label elements.\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-tab-button',\n  styleUrl: 'tab-button.css',\n  shadow: true,\n})\nexport class TabButton {\n\n  @Element() el!: HTMLRoadTabButtonElement;\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download: string | undefined;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel: string | undefined;\n\n  /**\n   * Set the layout of the text and icon in the tab bar.\n   * It defaults to `'icon-start'`.\n   */\n  @Prop() layout?: 'icon-start' | 'icon-top' = 'icon-start';\n\n  /**\n   * The selected tab component\n   */\n  @Prop({ mutable: true }) selected = false;\n\n    /**\n   * The disabled tab \n   */\n    @Prop({ mutable: true }) disabled = false;\n\n  /**\n   * A tab id must be provided for each `road-tab`. It's used internally to reference\n   */\n  @Prop() tab?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target: string | undefined;\n\n  /**\n   * Emitted when the tab bar is clicked\n   * @internal\n   */\n  @Event() roadtabbuttonclick!: EventEmitter;\n  /** @internal */\n  @Event() roadTabButtonClick!: EventEmitter;\n\n  @Listen('roadTabBarChanged', { target: 'window' })\n  @Listen('roadTabbarchanged', { target: 'window' })\n  onTabBarChanged(ev: CustomEvent) {\n    const dispatchedFrom = ev.target as HTMLElement;\n    const parent = this.el.parentElement as EventTarget;\n\n    if ((ev.composedPath && ev.composedPath().includes(parent)) || (dispatchedFrom && dispatchedFrom.contains(this.el))) {\n      this.selected = this.tab === ev.detail.tab;\n    }\n  }\n\n  private selectTab(ev: Event | KeyboardEvent) {\n    if (this.tab !== undefined) {\n      this.roadtabbuttonclick.emit({\n        tab: this.tab,\n        href: this.href,\n        selected: this.selected,\n      });\n      this.roadTabButtonClick.emit({\n        tab: this.tab,\n        href: this.href,\n        selected: this.selected,\n      });\n\n      ev.preventDefault();\n    }\n  }\n\n  private get hasLabel() {\n    return !!this.el.querySelector('road-label');\n  }\n\n  private get hasIcon() {\n    return !!this.el.querySelector('road-icon');\n  }\n\n  private get tabIndex() {\n    const hasTabIndex = this.el.hasAttribute('tabindex');\n\n    if (hasTabIndex) {\n      return this.el.getAttribute('tabindex');\n    }\n\n    return 0;\n  }\n\n  private onKeyUp = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter' || ev.key === ' ') {\n      this.selectTab(ev);\n    }\n  };\n\n  private onClick = (ev: Event) => {\n    this.selectTab(ev);\n  };\n\n  render() {\n    const { hasIcon, hasLabel, tabIndex, href, rel, target, layout, selected, tab, disabled } = this;\n    const attrs = {\n      download: this.download,\n      href: !disabled ? href : undefined, // Ne pas inclure le lien si désactivé\n      rel,\n      target,\n    };\n  \n    return (\n      <Host\n        onClick={(ev: Event) => !disabled && this.onClick(ev)} // Bloquer les clics si désactivé\n        onKeyup={(ev: KeyboardEvent) => !disabled && this.onKeyUp(ev)} // Bloquer les interactions clavier si désactivé\n        role=\"tab\"\n        tabindex={disabled ? -1 : tabIndex} // Désactiver le focus si désactivé\n        aria-selected={selected ? 'true' : 'false'}\n        aria-disabled={disabled ? 'true' : null} // Ajout pour l'accessibilité\n        id={tab !== undefined ? `tab-button-${tab}` : null}\n        class={{\n          'tab-selected': selected,\n          'tab-has-label': hasLabel,\n          'tab-has-icon': hasIcon,\n          'tab-has-label-only': hasLabel && !hasIcon,\n          'tab-has-icon-only': hasIcon && !hasLabel,\n          [`tab-layout-${layout}`]: true,\n          'tab-disabled': disabled, // Classe CSS pour les styles désactivés\n        }}\n      >\n        <a {...attrs} tabIndex={-1} class=\"button-native\" part=\"native\">\n          <span class=\"button-inner\">\n            <slot/>\n          </span>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"road-tab-button.entry.js","mappings":"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","names":[],"sources":["src/components/tab-button/tab-button.css?tag=road-tab-button&encapsulation=shadow","src/components/tab-button/tab-button.tsx"],"sourcesContent":["/*\n * Tab button\n *\n * Index\n * - Button\n * - Native\n * - Underline\n * - Inner\n * - Icon\n * - Label\n *\n */\n\n/**\n * @prop --padding-start: Left padding  of the button\n * @prop --padding-end: Right padding of the button\n * @prop --tab-color: Default color of the tab button text\n * @prop --tab-color-selected: Color of the tab button text when selected\n * @prop --tab-unerline-selected: Color of the tab button underline when selected\n * @prop --tab-background-hover: Color of the tab button when hover by a mouse\n * @prop --tab-background-focused: Color of the tab button when focused with the tab key\n */\n\n\n/* BUTTON\n -------------------- */\n\n:host {\n  box-sizing: border-box;\n  font-weight: 700;\n  color: var(--tab-color);\n  outline: 0;\n  transition: background 0.15s ease-in-out;\n}\n\n/**\n * Active state\n */\n\n:host(.tab-secondary) {\n  --tab-underline-selected: var(--road-secondary-600);\n}\n\n:host(.tab-selected) {\n  color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) ::slotted(road-icon) {\n  color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) ::slotted(road-label) {\n  color: var(--road-on-surface);\n}\n\n:host(.tab-selected) .button-native::after {\n  height: 2px;\n  background: var(--tab-underline-selected);\n  opacity: 1;\n  transform: none;\n}\n\n/**\n * Hover state\n */\n\n:host(:hover) {\n  background: var(--tab-background-hover);\n}\n\n/**\n * Focus state\n */\n\n:host(.focus-visible) {\n  background: var(--tab-background-focused);\n  outline: auto;\n}\n\n/**\n * Disabled\n */\n\n:host(.tab-disabled) {\n  background: var(--road-surface-disabled);\n}\n\n:host(.tab-disabled) .button-native{\n  cursor: not-allowed;\n}\n\n:host(.tab-disabled) ::slotted(road-label) {\n  color: var(--road-on-surface-disabled);\n}\n\n\n/* NATIVE\n -------------------- */\n\n.button-native {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n  width: 100%;\n  height: 100%;\n  min-height: 3.5rem;\n  padding: 0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);\n  margin: 0;\n  overflow: hidden;\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  color: inherit;\n  text-align: inherit;\n  text-decoration: none;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  letter-spacing: inherit;\n  white-space: inherit;\n  cursor: pointer;\n  background: transparent;\n  -webkit-user-drag: none;\n  border-color: initial;\n  border-style: initial;\n  border-width: 0;\n  border-radius: inherit;\n  border-image: initial;\n  outline: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/* UNDERLINE\n -------------------- */\n\n.button-native::after {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  display: block;\n  width: 100%;\n  height: 0;\n  content: \"\";\n  background-color: var(--road-input-outline);\n  opacity: 1;\n  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  transform: none;\n  transform-origin: center;\n}\n\n/* INNER\n -------------------- */\n\n.button-inner {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-flow: inherit;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n/* ICON\n -------------------- */\n\n:host ::slotted(road-icon) {\n  color: var(--tab-color);\n}\n\n:host(.tab-layout-icon-start) ::slotted(road-icon) {\n  margin-right: 0.5rem;\n}\n\n:host(.tab-layout-icon-top) .button-inner {\n  flex-direction: column;\n}\n\n/* LABEL\n -------------------- */\n\n:host ::slotted(road-label) {\n  display: flex;\n  align-items: center;\n  max-width: 12.5rem;\n  overflow: hidden;\n  font-size: 1rem;\n  color: var(--road-on-surface-weak);\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: inherit;\n}\n\n:host(.tab-layout-icon-top) ::slotted(road-label) {\n  margin-top: 0.25rem;\n  font-size: 1rem;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/**\n * @slot  - Content of the tab-button, it should be road-icon and road-label elements.\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-tab-button',\n  styleUrl: 'tab-button.css',\n  shadow: true,\n})\nexport class TabButton {\n\n  @Element() el!: HTMLRoadTabButtonElement;\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download: string | undefined;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel: string | undefined;\n\n  /**\n   * Set the layout of the text and icon in the tab bar.\n   * It defaults to `'icon-start'`.\n   */\n  @Prop() layout?: 'icon-start' | 'icon-top' = 'icon-start';\n\n  /**\n   * The selected tab component\n   */\n  @Prop({ mutable: true }) selected = false;\n\n    /**\n   * The disabled tab \n   */\n    @Prop({ mutable: true }) disabled = false;\n\n  /**\n   * A tab id must be provided for each `road-tab`. It's used internally to reference\n   */\n  @Prop() tab?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target: string | undefined;\n\n  /**\n   * Emitted when the tab bar is clicked\n   * @internal\n   */\n  @Event() roadtabbuttonclick!: EventEmitter;\n  /** @internal */\n  @Event() roadTabButtonClick!: EventEmitter;\n\n  @Listen('roadTabBarChanged', { target: 'window' })\n  @Listen('roadTabbarchanged', { target: 'window' })\n  onTabBarChanged(ev: CustomEvent) {\n    const dispatchedFrom = ev.target as HTMLElement;\n    const parent = this.el.parentElement as EventTarget;\n\n    if ((ev.composedPath && ev.composedPath().includes(parent)) || (dispatchedFrom && dispatchedFrom.contains(this.el))) {\n      this.selected = this.tab === ev.detail.tab;\n    }\n  }\n\n  private selectTab(ev: Event | KeyboardEvent) {\n    if (this.tab !== undefined) {\n      this.roadtabbuttonclick.emit({\n        tab: this.tab,\n        href: this.href,\n        selected: this.selected,\n      });\n      this.roadTabButtonClick.emit({\n        tab: this.tab,\n        href: this.href,\n        selected: this.selected,\n      });\n\n      ev.preventDefault();\n    }\n  }\n\n  private get hasLabel() {\n    return !!this.el.querySelector('road-label');\n  }\n\n  private get hasIcon() {\n    return !!this.el.querySelector('road-icon');\n  }\n\n  private get tabIndex() {\n    const hasTabIndex = this.el.hasAttribute('tabindex');\n\n    if (hasTabIndex) {\n      return this.el.getAttribute('tabindex');\n    }\n\n    return 0;\n  }\n\n  private onKeyUp = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter' || ev.key === ' ') {\n      this.selectTab(ev);\n    }\n  };\n\n  private onClick = (ev: Event) => {\n    this.selectTab(ev);\n  };\n\n  render() {\n    const { hasIcon, hasLabel, tabIndex, href, rel, target, layout, selected, tab, disabled } = this;\n    const attrs = {\n      download: this.download,\n      href: !disabled ? href : undefined, // Ne pas inclure le lien si désactivé\n      rel,\n      target,\n    };\n  \n    return (\n      <Host\n        onClick={(ev: Event) => !disabled && this.onClick(ev)} // Bloquer les clics si désactivé\n        onKeyup={(ev: KeyboardEvent) => !disabled && this.onKeyUp(ev)} // Bloquer les interactions clavier si désactivé\n        role=\"tab\"\n        tabindex={disabled ? -1 : tabIndex} // Désactiver le focus si désactivé\n        aria-selected={selected ? 'true' : 'false'}\n        aria-disabled={disabled ? 'true' : null} // Ajout pour l'accessibilité\n        id={tab !== undefined ? `tab-button-${tab}` : null}\n        class={{\n          'tab-selected': selected,\n          'tab-has-label': hasLabel,\n          'tab-has-icon': hasIcon,\n          'tab-has-label-only': hasLabel && !hasIcon,\n          'tab-has-icon-only': hasIcon && !hasLabel,\n          [`tab-layout-${layout}`]: true,\n          'tab-disabled': disabled, // Classe CSS pour les styles désactivés\n        }}\n      >\n        <a {...attrs} tabIndex={-1} class=\"button-native\" part=\"native\">\n          <span class=\"button-inner\">\n            <slot/>\n          </span>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

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

@@ -8,7 +8,7 @@ const Table = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("slot", { key: '62d09e884d94443c31146ec24273a787c6ee3787' }));
+        return (h("slot", { key: 'df60a444f486b688b982684f727e28468022b801' }));
     }
 };
 Table.style = RoadTableStyle0;

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

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

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

@@ -18,7 +18,7 @@ const Tag = class {
     }
     render() {
         const contrastClass = this.contrast ? `tag-${this.color} tag-${this.color}-contrast` : `tag-${this.color}`;
-        return (h(Host, { key: '0310697bbc0e468cfb7a7c2c2d1b6c7b00e5c8a1', class: `${contrastClass}` }, h("slot", { key: '70eb0d5b559ca409cb1eae30a258fada641009d3' })));
+        return (h(Host, { key: 'e69d81ddb79dcbc736b38c9f7f0e15d5328444ee', class: `${contrastClass}` }, h("slot", { key: '0dc393d2b05bb35d1d17696ea3771ad067a30962' })));
     }
 };
 Tag.style = RoadTagStyle0;

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

@@ -13,7 +13,7 @@ const Text = class {
     }
     render() {
         const colorClass = this.color !== undefined ? `text-${this.color}` : '';
-        return (h(Host, { key: '9d1a62edc9a4602497b542292a0313ed52fc6156', class: `${colorClass}` }, h("slot", { key: '9aa0f728eae087590555f108f6562b96f5a926ed' })));
+        return (h(Host, { key: '0601af1046143f243308bb9923105842fe2c25ea', class: `${colorClass}` }, h("slot", { key: '7aa5402a3d3bbface4a39414a5415bce1b0ac878' })));
     }
 };
 Text.style = RoadTextStyle0;

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

@@ -95,7 +95,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 (h(Host, { key: 'b77fec4a19c3443154c949db07408a4a5c453f24', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, h("textarea", { key: 'ca0a2c4c1e436b3e99933eab9c3dd420693dd5ce', class: `form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`, id: this.textareaId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, value: value, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }), h("label", { key: 'c59652092cfebc7a0cb9b1165b9387fd9a18c8d4', class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && h("p", { key: '7f2edce4666cc9a30bc365db10917a6b3c9f28da', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: '98885d35065c4309cfa1fcf4d20188fcd17c7e49', class: "helper" }, this.helper)));
+        return (h(Host, { key: '7f097d22080a94c592b2959db0f9102054bbdc9c', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, h("textarea", { key: '96a40416be94b422af9b68d7aad0e7b3f4af3b1e', class: `form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`, id: this.textareaId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, value: value, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }), h("label", { key: 'a19dd99c28772692927f4b7d5652d8c76f7d84e0', class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && h("p", { key: 'cb94c1bac1f4e88df2b1b4b7502677298e09c599', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: '03a2fea4ed00b0c1897161812dbc01598db4296f', class: "helper" }, this.helper)));
     }
     static get watchers() { return {
         "value": ["valueChanged"]

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

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

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

@@ -84,7 +84,7 @@ const Toast = class {
         if (this.color == 'danger') {
             this.timeout = 0;
         }
-        return (h(Host, { key: 'a23d9efd2c57c549c299afa7397c1d54da39fad4', class: `${toastIsOpenClass}`, role: "alert" }, h("div", { key: '2a2781c355e65842713a0fb011b24f13da018809', class: `toast toast-${this.color}` }, h("road-icon", { key: 'bdc30f61254fa6a358780a9eb24f5951ffe12684', class: "toast-icon", icon: icon, "aria-hidden": "true" }), h("p", { key: '26690a7b4c4d2c9b5111226e37e50f04900e7322', class: "toast-label" }, this.label), h("button", { key: '4b02f4e03ecfa6f9587808884f60852af9eed9ee', type: "button", class: "toast-close", "aria-label": "Close", onClick: this.onClick }, h("road-icon", { key: 'b7558ca5cce55da8fc90eb3011a0ba449a476289', icon: navigationClose, size: "md" })), h("slot", { key: 'cf46edeb98030ef816a3c0029265a53783d9ed56', name: "progress" }))));
+        return (h(Host, { key: '3a4496171b17207f7a0511b651561e8044dc5254', class: `${toastIsOpenClass}`, role: "alert" }, h("div", { key: '5f3849481ca612dd87581ffe82de019c19023c33', class: `toast toast-${this.color}` }, h("road-icon", { key: 'cd71e4aedb6571159d879ae2a04b003be7d35e7c', class: "toast-icon", icon: icon, "aria-hidden": "true" }), h("p", { key: '4ab5b0b0ce22a200bde67b6d53ff895b3319ca70', class: "toast-label" }, this.label), h("button", { key: '9c29206da5cc529f72af8423d551956574a1dfe9', type: "button", class: "toast-close", "aria-label": "Close", onClick: this.onClick }, h("road-icon", { key: '1c288981ec46bd178f457103a1cf50151ed2b112', icon: navigationClose, size: "md" })), h("slot", { key: '0d1a04e456a142b1b6f3d6ecc851d775a4139a9f', name: "progress" }))));
     }
     static get watchers() { return {
         "isOpen": ["isOpenChanged"]

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

@@ -69,11 +69,11 @@ const toggle = class {
     }
     render() {
         const labelId = this.toggleId + '-label';
-        const textLabel = h("label", { key: 'ba35148ac26c71b2bc262b3fe9f7dc3de5f08370', class: "form-toggle-label", id: labelId, htmlFor: this.toggleId }, this.label);
+        const textLabel = h("label", { key: '8cc1a41d36f0201ba392d57fc2424aa3026f5b9e', 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 (h(Host, { key: 'f534525f661135af3465bf513fbffe03dc56ab38' }, h("input", { key: '7f81baf61ec97adcce01edaee0bf758e5523d71b', 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 }), h("label", { key: '62460c291d7d6a518e5c5d08fa5776050d95110c', class: `form-toggle-label ${isSpacedClass} ${disabledClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, h("div", { key: '43512b3f7203bee3137e986ee021bd1107f118cc', class: `form-toggle-lever ${righttoggleClass}` }, this.checked ? (h("road-icon", { name: "check-small-solid", class: "form-toggle-lever-check", size: "md" })) : (h("road-icon", { name: "navigation-close-solid", class: "form-toggle-lever-close", size: "md" }))), this.hasLeftLabel ? '' : textLabel)));
+        return (h(Host, { key: 'babe45bd3028fdb56410decc3685ab608a5f73f1' }, h("input", { key: 'eb99e00634ede458e45553c629a693a9faa4583e', 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 }), h("label", { key: '523e11101552847180e7d9509345349940f449b0', class: `form-toggle-label ${isSpacedClass} ${disabledClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, h("div", { key: 'ffc04b50698e2a4cd7ac59c1d6dd18423e298e48', class: `form-toggle-lever ${righttoggleClass}` }, this.checked ? (h("road-icon", { name: "check-small-solid", class: "form-toggle-lever-check", size: "md" })) : (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/esm/road-toolbar-title-page.entry.js

@@ -8,7 +8,7 @@ const ToolbarAppName = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: '5b3f14f6952d3601e6e998ff2b727424fab555cd', class: "toolbar-title-page" }, h("slot", { key: '9f0eb9f41cc22369bc1867ebd5f28b89fa442eba' })));
+        return (h("div", { key: '865af785629a79a7448df7721885cbe25eead4f1', class: "toolbar-title-page" }, h("slot", { key: 'a0778c790e42b8b54db2c5407d874d5e7924ab86' })));
     }
 };
 ToolbarAppName.style = RoadToolbarTitlePageStyle0;

package/dist/esm/road-toolbar-title.entry.js

@@ -8,7 +8,7 @@ const ToolbarTitle = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: '742688fba3267e9a387d8ae176d5af3112035686', class: "toolbar-title" }, h("slot", { key: '23f50e8813d852a95e6489272b90bc6698772a4e' })));
+        return (h("div", { key: '67ddb57f9717084f519746e8f19fe61f1ccf9641', class: "toolbar-title" }, h("slot", { key: '6bd026b79603afd9e96a09b4d52da882681fef50' })));
     }
 };
 ToolbarTitle.style = RoadToolbarTitleStyle0;

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

@@ -8,7 +8,7 @@ const ToolbarV2 = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '62ea20f134b10b364d0c9238aa64ba1d75a9191a', class: "toolbar" }, h("div", { key: 'c3b5a93350cbf7de5d5224c04fd082ff993020b1', class: "toolbar-container" }, h("div", { key: 'e3d8b61c07cbeef7720fce382d78668f6d74ae35', class: "toolbar-container-content-left" }, h("slot", { key: '7255141af24d37a06e36f5c565c95b918d53392e', name: "start" }), h("slot", { key: 'ce9156a72df70dae4e725a5d145af1ba32078c17', name: "primary" })), h("div", { key: '27f73e3afe5a75911165cc4beea2a5aa9f57bab4', class: "toolbar-content" }, h("slot", { key: 'a11fa5976a59e1e34375a43ed3f4f7dc4aec1fb9' })), h("div", { key: 'c1d147e5883163ef8dd8aa3c2498d577166aade7', class: "toolbar-container-content-right" }, h("slot", { key: 'f85a1e5cda535a862fa19660e369b72d1927fd33', name: "secondary" }), h("slot", { key: '4a66978a37a7203b583c6c3c6b907db4b77f2be2', name: "end" })))));
+        return (h(Host, { key: '09a228e4eafc2393b30c140b7287c6c881b8d7db', class: "toolbar" }, h("div", { key: '562c83b301107143e3531f374ee4aab6c2d6a8a1', class: "toolbar-container" }, h("div", { key: '9b6ddce805a701bab76529aac5c36e28161ec7e4', class: "toolbar-container-content-left" }, h("slot", { key: '521da1cfda1737f3fb71b8a15380a890eded2b72', name: "start" }), h("slot", { key: '4b777b4cbdabe61de6503d6f455c9952851aa1b8', name: "primary" })), h("div", { key: '513270582ea6cab3852f71ebf5bbbcfa4a085bbe', class: "toolbar-content" }, h("slot", { key: '41ae313ad235be1b2376199ea769fa48dec4cf20' })), h("div", { key: 'd051c5ca9c5a97bb9598c25794dcfc79a446b983', class: "toolbar-container-content-right" }, h("slot", { key: 'a9344e556ba87fb7041eb430ad401474bdf37385', name: "secondary" }), h("slot", { key: '128c4b1aa6e53b84cb7112540f6cdbad02f942f1', name: "end" })))));
     }
 };
 ToolbarV2.style = RoadToolbarV2Style0;

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

@@ -109,12 +109,12 @@ const Tooltip = class {
         return triggers.includes(triggerType);
     }
     render() {
-        return (h(Host, { key: '9150dafd734e51cf806d8fe9dd9f7cabb30516f0', onMouseOver: this.onMouseOver, onMouseOut: this.onMouseOut, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur, tabindex: "0" // Makes the element focusable
+        return (h(Host, { key: '1c4d0674f907e8e3006c88119ecd9d4c327597a7', onMouseOver: this.onMouseOver, onMouseOut: this.onMouseOut, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur, tabindex: "0" // Makes the element focusable
             ,
-            "data-tooltip-position": this.position }, h("slot", { key: '11b94662e222cdb59b71a2f261788860444ae274', "aria-describedby": this.tooltipId }), h("div", { key: '59cc457c5e21956d9c395b82db9bc0e1cd867432', part: "tooltip", id: this.tooltipId, class: {
+            "data-tooltip-position": this.position }, h("slot", { key: '9540439d97de9867f32349f2b37dd50242522744', "aria-describedby": this.tooltipId }), h("div", { key: '72eee89fa5a31dd67ddae13f444a2ba40ab55d95', part: "tooltip", id: this.tooltipId, class: {
                 tooltip: true,
                 "tooltip-open": this.isOpen,
-            }, role: "tooltip", "aria-hidden": !this.isOpen ? "true" : "false" }, this.content, h("slot", { key: '4ce82842f3a6a7c91c6e8f2c7c7f86775f83a2c3', name: "tooltip-content" }))));
+            }, role: "tooltip", "aria-hidden": !this.isOpen ? "true" : "false" }, this.content, h("slot", { key: '974f5455db23669fd1dbc9b4c15a8919ccd0b751', name: "tooltip-content" }))));
     }
     get el() { return getElement(this); }
 };