@roadtrip/components 3.46.0 → 3.47.0

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

@@ -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: 'f3317daf4cdd2e6a539936c9dbe095c791ce883d' }, index.h("div", { key: 'fe4e3b262592ca714e26f7cc03ac9ba4435d0b51', 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: '17bd3fb3ecbbd6e040c3c9c70fb92b9af90ee6b1', class: `${sizeRatingNumberClass}`, href: this.url }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")"), this.readonly == true && this.showreviews && index.h("road-label", { key: '5dba1d64ca367649797df7b872789e7cdc130e8c', class: `${sizeRatingNumberClass} ${readOnly}` }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")")));
+        return (index.h(index.Host, { key: 'f746ba94159c130ca443d88ff3cb2f19183f014a' }, index.h("div", { key: 'bd36bdd0b94d67ed435554a674a4a9aba0a12c2f', 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: '432a059b4b6e69201f90d0e807b6e30b25bd9b55', class: `${sizeRatingNumberClass}`, href: this.url }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")"), this.readonly == true && this.showreviews && index.h("road-label", { key: '65aedc2c22b39e22b48afed4595a0db0829e373a', 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: 'd4cf00bc997e0ed05484681fb5fc5f554b3d6fbd', role: "tablist" }, index.h("slot", { key: 'cadf449cf80d55a0fe297fff440f65f6c096c371' })));
+        return (index.h(index.Host, { key: '9d6937fa6b2840970dd93648f1e79724562d91bf', role: "tablist" }, index.h("slot", { key: '63de3253cb8eb6e9d4fa2374a1fab04ff64b174a' })));
     }
     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: '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 (index.h(index.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,
-            } }, index.h("span", { key: '2e4d84a1561a9c09b441fd858c3625f784c6794c', tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, index.h("span", { key: '2acfa633cb9a32c3554ac7067fd62737bc45b172', class: "button-content" }, index.h("slot", { key: '1b133f39ff11f8bdd8be0b3d7f780262f0af2e18' })))));
+            } }, index.h("span", { key: 'cf51481805c04571bc3ef97a150b011bd8c0e79e', tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, index.h("span", { key: '595aae2ef9621aa6a39ef2388373ec3708972bbb', class: "button-content" }, index.h("slot", { key: '9b6e874b79e88265b6c56465e9f84a5849363016' })))));
     }
     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: '51b943aa1730a5869b8d4616e5b9d0a883c3e17c', onRoadSegmentedButtonClick: this.onTabClicked }, index.h("slot", { key: '14c0de7b24f8a960a331c258ac91dd2ec4e1dda2', name: "top" }), index.h("slot", { key: 'b8d71615b2b6bbee3ce95754f0b2f0a7c5ef3385' })));
+        return (index.h(index.Host, { key: 'df0d2cbe2bf0647686439e58ab7e47067bb85a18', onRoadSegmentedButtonClick: this.onTabClicked }, index.h("slot", { key: '0181d346ee8cf63cab8eac42c8932e1f5477288f', name: "top" }), index.h("slot", { key: 'c3c0f5c41618721ace911e149d1218b0f8412369' })));
     }
     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: '56283f348c18c9f4da780910a296dff17656881e', "is-active": isActive }, index.h("slot", { key: '43a5b9dadb04f532e62259a415d921b731b7911e' }), this.isOpen && (index.h("div", { key: 'cac8b402cfaa77e6c84e60a50f73d148475c93f7', 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: '5d0540d59c53f2506b97fdaa40a1fae6381098f5', "is-active": isActive }, index.h("slot", { key: 'e7b5e449426fe5364b5a12a5aa408a98a033869e' }), this.isOpen && (index.h("div", { key: '01f532bba66042887e23c5892609e4dd174d8330', 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

@@ -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: '252c4ae08501f73688cf0c7c7b0830439f1f8e1f', class: this.sizes && `select-${this.sizes}` }, index.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 }, index.h("option", { key: '8933f32a5982c18c456bb06e22a28f67320927b0', 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: '49e2bd5cff399c79900ac65dd37e73bc862f3d00', class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && index.h("p", { key: 'e3a55cc35184e8767ba35ac87cb45e7e24f3c116', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && index.h("p", { key: 'd824610dfb9031aecee47f63c288069ca3aed0b6', class: "helper" }, this.helper)));
+        return (index.h(index.Host, { key: 'e86d30d1fe1fd95d7b70140a57d76f3992cbc035', class: this.sizes && `select-${this.sizes}` }, index.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 }, index.h("option", { key: '67d63f752f9f0fa2d48ee4ec07029c7e43706729', 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: 'c07e091eb4b6da4ab793c2056131c16bf9ee4723', class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && index.h("p", { key: 'd01132cad717c35ca5a5afe2ad8effb697037a13', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && index.h("p", { key: '2f884ebd87cf990ab093ee5a023cd698c6883a8f', class: "helper" }, this.helper)));
     }
     static get watchers() { return {
         "value": ["valueChanged"]

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: 'f938a4cd82c542599e6729e9bbfca3fa51573956' }, "\u00A0"));
+        return (index.h("span", { key: 'ec2419ddcf62a6b2aeedd68ec0c1eb8e430f8185' }, "\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: '1465d5db948734bba9d01c1371fbe97fba33ccb5', class: `${sizeClass}`, viewBox: "25 25 50 50" }, index.h("circle", { key: 'f7dd929e5cdef073f60d8e6d651fc3e64e594ced', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
+        return (index.h("svg", { key: 'fc286db53f3b74155c3221474abb9472d774e89d', class: `${sizeClass}`, viewBox: "25 25 50 50" }, index.h("circle", { key: 'a40ef2366ff12fe69486f3db0d92b7d49affd370', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
     }
 };
 Spinner.style = RoadSpinnerStyle0;

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

@@ -6,23 +6,33 @@ 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 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) {
         index.registerInstance(this, hostRef);
+        this.chipClick = index.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 (index.h(index.Host, { key: '22343d5f99de6406223630ccc5ddc4c8363f87ff', class: `chip-${this.size}`, tabindex: "0" }, index.h("div", { key: '53693f688a08c07d7c5c5c8f6f4ab6ecbad5c783', class: "chip-description" }, index.h("road-icon", { key: 'd66577297e5c33d7722c3026293830092e9f0239', class: "chip-icon", color: "info", icon: index$1.alertInfoSolid }), index.h("slot", { key: '248ca83089bffdb3695d953cb14ac38a27e10b4d' }))));
+        return (index.h(index.Host, { key: '178e109ebeac6b66b105e3aa12cfc1cd942e83cc', class: `chip-${this.size}`, tabindex: "0", role: "button", onClick: this.onActivate, onKeyDown: this.onKeyDown }, index.h("div", { key: '5904c24f62ed7636205a0bf05431f698930ae615', class: "chip-description" }, index.h("road-icon", { key: '5a6767d216edc33ba42b6788102e90469c276a7e', class: "chip-icon", color: "info", icon: index$1.alertInfoSolid }), index.h("slot", { key: '03dfda63fce2ecbfeac0b16e1f54157f75bbe156' }))));
     }
 };
-Chip.style = RoadStatusChipStyle0;
+StatusChip.style = RoadStatusChipStyle0;
 
-exports.road_status_chip = Chip;
+exports.road_status_chip = StatusChip;
 
 //# sourceMappingURL=road-status-chip.cjs.entry.js.map

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

@@ -1 +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}
+{"file":"road-status-chip.entry.cjs.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,QACEA,QAACC,UAAI,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,IAEzBD,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  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/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: 'b0499c36ab0eb33ac879c37115b6a4754c5d1529', class: "form-switch-label", id: labelId, htmlFor: this.switchId }, this.label);
+        const textLabel = index.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 (index.h(index.Host, { key: 'a9365fb9fd70d406e5a90d740cead5094861ac79' }, index.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 }), index.h("label", { key: 'b181aecf57662fe3d9c4032ef5fbd47709730e85', class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, index.h("div", { key: '4c6da52b6e04657d6749eec12c3c6ff5f97ce762', class: `form-switch-lever ${rightSwitchClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
+        return (index.h(index.Host, { key: 'afcb3cea4c1ee2740769cc1364d9175d5a144ba7' }, index.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 }), index.h("label", { key: '81450123a463b3619774e65b7e49c3637b5d0037', class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, index.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/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: 'c88f5a50d83ec07361ed5dd08d5b8a29fd4ac13d', role: "tablist", class: {
+        return (index.h(index.Host, { key: 'c44503ddd4b988d4c35891794c92998299811acb', role: "tablist", class: {
                 'tab-expand': expand,
                 'tab-center': center,
                 'tab-secondary': secondary,
-            } }, index.h("slot", { key: '9a9f51b48cef50e484e4e6b0696108e9263f0f48' })));
+            } }, index.h("slot", { key: '356756006ef297ea0933437004f703dc8eccacf9' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-fee0103c.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 {
@@ -77,7 +77,7 @@ const TabButton = class {
             rel,
             target,
         };
-        return (index.h(index.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 (index.h(index.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,
@@ -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: '81f0045d7d4b05e70ddcbab15866ed09d70eff11' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), index.h("span", { key: 'f167d63f29af54aa2632a0e46ca64499a70b3a22', class: "button-inner" }, index.h("slot", { key: '1b91f5ba629820ef6764eba4064d551ac8b6f820' })))));
+            } }, index.h("a", Object.assign({ key: '8808982bb613680dcf3e7e330d6ac113f2d2f47f' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), index.h("span", { key: 'cc2bb1c13f607c1e3c8088179c3c6ce49f272222', class: "button-inner" }, index.h("slot", { key: 'a471b49c35cdfc57bd2f5a7156381ea051f1649f' })))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -1 +1 @@
-{"file":"road-tab-button.entry.cjs.js","mappings":"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","names":["h","Host"],"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.cjs.js","mappings":"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","names":["h","Host"],"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/cjs/road-tab.cjs.entry.js

@@ -27,9 +27,9 @@ const Tab = class {
     }
     render() {
         const { tab, active } = this;
-        return (index.h(index.Host, { key: '925b7e9bcb116de9081e0f238799e28a31d385a1', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (index.h(index.Host, { key: '1f2746fc33e9b879bc8558f18685bdf2f243fdf1', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'tab-hidden': !active,
-            } }, index.h("slot", { key: 'c4ae28afb00bd729cc5b2c434b8ac62d94d8b5f3' })));
+            } }, index.h("slot", { key: '38d4df4049aa57b8160855d33990f1b2db21d259' })));
     }
     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: '62d09e884d94443c31146ec24273a787c6ee3787' }));
+        return (index.h("slot", { key: 'df60a444f486b688b982684f727e28468022b801' }));
     }
 };
 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: '27ab87f41f3d6751434e8d6a2631cbe82d0a0cbc', onRoadTabButtonClick: this.onTabClicked }, index.h("slot", { key: 'bbb551131576e4eee16b94217507c31c2c60a6be', name: "top" }), index.h("div", { key: 'f8b534238faee2fc29784b7e1725b15191349838', class: "tabs-inner" }, index.h("slot", { key: 'a7314be1ed2375a652afab28df2c3bb0e5a154f2' }))));
+        return (index.h(index.Host, { key: '09627e578a4f116e875445939739ffb334429c05', onRoadTabButtonClick: this.onTabClicked }, index.h("slot", { key: 'ffe9f5b8d3ac85e47a16650254e94376a59376de', name: "top" }), index.h("div", { key: '1443f709510efff63fdb972db851916406321ac5', class: "tabs-inner" }, index.h("slot", { key: 'ce206df02b9e5e4933bf1dde5447313cb2ecd900' }))));
     }
     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: '0310697bbc0e468cfb7a7c2c2d1b6c7b00e5c8a1', class: `${contrastClass}` }, index.h("slot", { key: '70eb0d5b559ca409cb1eae30a258fada641009d3' })));
+        return (index.h(index.Host, { key: 'e69d81ddb79dcbc736b38c9f7f0e15d5328444ee', class: `${contrastClass}` }, index.h("slot", { key: '0dc393d2b05bb35d1d17696ea3771ad067a30962' })));
     }
 };
 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: '9d1a62edc9a4602497b542292a0313ed52fc6156', class: `${colorClass}` }, index.h("slot", { key: '9aa0f728eae087590555f108f6562b96f5a926ed' })));
+        return (index.h(index.Host, { key: '0601af1046143f243308bb9923105842fe2c25ea', class: `${colorClass}` }, index.h("slot", { key: '7aa5402a3d3bbface4a39414a5415bce1b0ac878' })));
     }
 };
 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: 'b77fec4a19c3443154c949db07408a4a5c453f24', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, index.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 }), index.h("label", { key: 'c59652092cfebc7a0cb9b1165b9387fd9a18c8d4', class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && index.h("p", { key: '7f2edce4666cc9a30bc365db10917a6b3c9f28da', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && index.h("p", { key: '98885d35065c4309cfa1fcf4d20188fcd17c7e49', class: "helper" }, this.helper)));
+        return (index.h(index.Host, { key: '7f097d22080a94c592b2959db0f9102054bbdc9c', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, index.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 }), index.h("label", { key: 'a19dd99c28772692927f4b7d5652d8c76f7d84e0', class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && index.h("p", { key: 'cb94c1bac1f4e88df2b1b4b7502677298e09c599', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && index.h("p", { key: '03a2fea4ed00b0c1897161812dbc01598db4296f', class: "helper" }, this.helper)));
     }
     static get watchers() { return {
         "value": ["valueChanged"]

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

@@ -89,7 +89,7 @@ const RoadTimeRangePicker = class {
         return { start: this.start, end: this.end };
     }
     render() {
-        return (index.h(index.Host, { key: '685a7671de7ffed7e612757dd378605b3036834b', class: `time-range-picker input-${this.sizes}` }, this.label && (index.h("p", { key: '12e0ed7a4983760428896639991992f954b1f2c9', class: "label m-0" }, this.label, this.required && index.h("span", { key: '7074c6b2ac09d83213c2e3fccd80a8669120ba54', class: "required-indicator" }, " *"))), index.h("div", { key: '623dc14b5b941c44b2cd6a3877c6f898f788f758', class: "time-range-picker-content d-flex align-items-center my-4" }, index.h("slot", { key: '35188a877334036853d72ef053e39ac6a2900d90', name: "start" }), index.h("span", { key: '1e1d3b4f5d21390c05f13e38d5e3333a555e1a62', class: "separator mx-12" }, this.separator), index.h("slot", { key: 'dd753814efa448dac72354add6e2774c22147139', name: "end" })), index.h("div", { key: '02f8b622150eda4e4499e658799894de74a20958', 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: '0d61bde2b23a43bf9fd726586de324c9d1e45954', class: "helper mt-1" }, this.helper)));
+        return (index.h(index.Host, { key: 'f7a337665eb1016b95f56541fdf7b6cdcdc780c8', class: `time-range-picker input-${this.sizes}` }, this.label && (index.h("p", { key: '772b61e54d0ca9502478ad77c187a5cc335428d4', class: "label m-0" }, this.label, this.required && index.h("span", { key: 'efabe848fff7e3ce895912147f88f6761a771ab0', class: "required-indicator" }, " *"))), index.h("div", { key: '40b1b5929465e8535e228208c7296fa4deb3854f', class: "time-range-picker-content d-flex align-items-center my-4" }, index.h("slot", { key: 'b49add1d8f8b7ae6555313e2d5bc0f53a885d3aa', name: "start" }), index.h("span", { key: '2cdd55b31ddbe0d5746512ad1541caf98c5a63e2', class: "separator mx-12" }, this.separator), index.h("slot", { key: '28b5151feb9c22781cb7c0a9f0896a5cd9138d92', name: "end" })), index.h("div", { key: '478b58bb644b82daa44f0ca9660a3f5c16b0515e', 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: '6fe2ec16f7f8094c8a023bba654252cc6f366cbc', class: "helper mt-1" }, this.helper)));
     }
     get hostEl() { return index.getElement(this); }
 };

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

@@ -88,7 +88,7 @@ const Toast = class {
         if (this.color == 'danger') {
             this.timeout = 0;
         }
-        return (index.h(index.Host, { key: 'a23d9efd2c57c549c299afa7397c1d54da39fad4', class: `${toastIsOpenClass}`, role: "alert" }, index.h("div", { key: '2a2781c355e65842713a0fb011b24f13da018809', class: `toast toast-${this.color}` }, index.h("road-icon", { key: 'bdc30f61254fa6a358780a9eb24f5951ffe12684', class: "toast-icon", icon: icon, "aria-hidden": "true" }), index.h("p", { key: '26690a7b4c4d2c9b5111226e37e50f04900e7322', class: "toast-label" }, this.label), index.h("button", { key: '4b02f4e03ecfa6f9587808884f60852af9eed9ee', type: "button", class: "toast-close", "aria-label": "Close", onClick: this.onClick }, index.h("road-icon", { key: 'b7558ca5cce55da8fc90eb3011a0ba449a476289', icon: index$1.navigationClose, size: "md" })), index.h("slot", { key: 'cf46edeb98030ef816a3c0029265a53783d9ed56', name: "progress" }))));
+        return (index.h(index.Host, { key: '3a4496171b17207f7a0511b651561e8044dc5254', class: `${toastIsOpenClass}`, role: "alert" }, index.h("div", { key: '5f3849481ca612dd87581ffe82de019c19023c33', class: `toast toast-${this.color}` }, index.h("road-icon", { key: 'cd71e4aedb6571159d879ae2a04b003be7d35e7c', class: "toast-icon", icon: icon, "aria-hidden": "true" }), index.h("p", { key: '4ab5b0b0ce22a200bde67b6d53ff895b3319ca70', class: "toast-label" }, this.label), index.h("button", { key: '9c29206da5cc529f72af8423d551956574a1dfe9', type: "button", class: "toast-close", "aria-label": "Close", onClick: this.onClick }, index.h("road-icon", { key: '1c288981ec46bd178f457103a1cf50151ed2b112', icon: index$1.navigationClose, size: "md" })), index.h("slot", { key: '0d1a04e456a142b1b6f3d6ecc851d775a4139a9f', 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: 'ba35148ac26c71b2bc262b3fe9f7dc3de5f08370', class: "form-toggle-label", id: labelId, htmlFor: this.toggleId }, this.label);
+        const textLabel = index.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 (index.h(index.Host, { key: 'f534525f661135af3465bf513fbffe03dc56ab38' }, index.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 }), index.h("label", { key: '62460c291d7d6a518e5c5d08fa5776050d95110c', class: `form-toggle-label ${isSpacedClass} ${disabledClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, index.h("div", { key: '43512b3f7203bee3137e986ee021bd1107f118cc', 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: 'babe45bd3028fdb56410decc3685ab608a5f73f1' }, index.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 }), index.h("label", { key: '523e11101552847180e7d9509345349940f449b0', class: `form-toggle-label ${isSpacedClass} ${disabledClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, index.h("div", { key: 'ffc04b50698e2a4cd7ac59c1d6dd18423e298e48', 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: '5b3f14f6952d3601e6e998ff2b727424fab555cd', class: "toolbar-title-page" }, index.h("slot", { key: '9f0eb9f41cc22369bc1867ebd5f28b89fa442eba' })));
+        return (index.h("div", { key: '865af785629a79a7448df7721885cbe25eead4f1', class: "toolbar-title-page" }, index.h("slot", { key: 'a0778c790e42b8b54db2c5407d874d5e7924ab86' })));
     }
 };
 ToolbarAppName.style = RoadToolbarTitlePageStyle0;

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

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

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

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

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

@@ -113,12 +113,12 @@ const Tooltip = class {
         return triggers.includes(triggerType);
     }
     render() {
-        return (index.h(index.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 (index.h(index.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 }, index.h("slot", { key: '11b94662e222cdb59b71a2f261788860444ae274', "aria-describedby": this.tooltipId }), index.h("div", { key: '59cc457c5e21956d9c395b82db9bc0e1cd867432', part: "tooltip", id: this.tooltipId, class: {
+            "data-tooltip-position": this.position }, index.h("slot", { key: '9540439d97de9867f32349f2b37dd50242522744', "aria-describedby": this.tooltipId }), index.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, index.h("slot", { key: '4ce82842f3a6a7c91c6e8f2c7c7f86775f83a2c3', name: "tooltip-content" }))));
+            }, role: "tooltip", "aria-hidden": !this.isOpen ? "true" : "false" }, this.content, index.h("slot", { key: '974f5455db23669fd1dbc9b4c15a8919ccd0b751', name: "tooltip-content" }))));
     }
     get el() { return index.getElement(this); }
 };