@roadtrip/components 3.33.7 → 3.35.0

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

@@ -43,10 +43,11 @@ export default {
       control: 'text',
     },
     roadchange: {
-      description: "Emitted when the value has changed.",
       action: 'roadchange',
-      control: {
-        type: null,
+      description: "Emitted when the value has changed.",
+      table: {
+        category: 'Events',
+        type: { summary: 'CustomEvent' },
       },
     },
     disabled: {

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

@@ -37,7 +37,7 @@ export class Rating {
         const sizeRatingStarsClass = this.size !== undefined ? `rating-stars rating-stars--${this.size}` : 'rating-stars';
         const sizeRatingNumberClass = this.size !== undefined ? `rating-number rating-number--${this.size}` : 'rating-number';
         const readOnly = this.readonly == true ? `readonly` : '';
-        return (h(Host, { key: 'd81a376cdf8e7a268335c62cadff3a3a5945c334' }, h("div", { key: 'c7f9a63a11399a60d3daa6e3f8f11b8b4f640e96', 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: '5b1a38a0f8fdabe757a79f7b5000481d03d8225e', class: `${sizeRatingNumberClass}`, href: this.url }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")"), this.readonly == true && this.showreviews && h("road-label", { key: '337a9e94914d57278d8d15c8889b258bff8ea751', class: `${sizeRatingNumberClass} ${readOnly}` }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")")));
+        return (h(Host, { key: '85efd8ef2ccfcecd3740e72a5ba7ce4760e0d9d6' }, h("div", { key: 'eab49904c7777e7f760d8ea79d970a76f0e1e32d', 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: 'd63c93743802e7fd5cb49c972bc39802eb6ee586', class: `${sizeRatingNumberClass}`, href: this.url }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")"), this.readonly == true && this.showreviews && h("road-label", { key: '57ca56a99dfa88b79b242a6b1ab92c08596bd0a8', class: `${sizeRatingNumberClass} ${readOnly}` }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")")));
     }
     static get is() { return "road-rating"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class Row {
     render() {
-        return (h(Host, { key: '891c70924e7955aa953e3e233cd57dd6aff4068a' }, h("slot", { key: 'acb726260f4492a126b9aa1f51d89b329bf6a09c' })));
+        return (h(Host, { key: '6ee0a00bc04c580a827d19c99ec3e818d6def582' }, h("slot", { key: '6ad15bc804554c3e72dec334b40d7d28e277e92f' })));
     }
     static get is() { return "road-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -52,10 +52,10 @@ export class SegmentedButton {
     render() {
         const { tabIndex, selected, tab } = this;
         const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';
-        return (h(Host, { key: 'c94bfffcbff45b20dc349a3545bd195a95d68273', 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: '6433591d09a54719de64718201a2a51ad79ae28b', 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: '87ee95ccb7c44cfe7bff797d1b693f1ae4cf0ad7', tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, h("slot", { key: 'a6fd94b01bba4f71b3689f62a736050e7132add0' }))));
+            } }, h("span", { key: 'f3e0bf769c686b17171afe0130ac5e4736aa2ff4', tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, h("slot", { key: '496201687fa4e9138d1a817215c4c90255f7232c' }))));
     }
     static get is() { return "road-segmented-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -18,7 +18,7 @@ export class ButtonBar {
         this.selectedTabChanged();
     }
     render() {
-        return (h(Host, { key: 'cbe94587012819876109399d72bb1715ac334a9f', role: "tablist" }, h("slot", { key: 'a1ba2feec5c649ea44f6b534a10a18fc738fede5' })));
+        return (h(Host, { key: 'afd642615f117aadf941aa07e1006b87bc7af6ee', role: "tablist" }, h("slot", { key: '331b574bb64568dc247cd9789232d4dffebec937' })));
     }
     static get is() { return "road-segmented-button-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -86,7 +86,7 @@ export class Tabs {
         return Array.from(this.el.querySelectorAll('road-tab'));
     }
     render() {
-        return (h(Host, { key: '8e28299a9d4821c74d9e62b25b6b8ad72fac01da', onRoadSegmentedButtonClick: this.onTabClicked }, h("slot", { key: '2e154363be587d35480818a016f9bc8973709724', name: "top" }), h("slot", { key: '77044401892a3a9245eb9029178d82df516c7252' })));
+        return (h(Host, { key: '0fe1c4ddf4b2d269ed66c456e411263d8de29c3f', onRoadSegmentedButtonClick: this.onTabClicked }, h("slot", { key: 'da756417993e0157ed3a7a4dda96abcdfc3d6c05', name: "top" }), h("slot", { key: '37678b31b482735d1a1cc5ed2c37f4a8d4d7ee4b' })));
     }
     static get is() { return "road-segmented-buttons"; }
     static get encapsulation() { return "shadow"; }

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

@@ -92,7 +92,7 @@ export class Select {
         const labelId = this.selectId + '-label';
         const hasValueClass = this.value && this.value !== '' ? 'has-value' : '';
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-        return (h(Host, { key: '81206f7f9840b7700814260f6a7b8cf78fd7e536', class: this.sizes && `select-${this.sizes}` }, h("select", { key: '8118f6d0f6c2d59be3d0c873398c195a8525c0cc', 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: '4e87320134e62248e7c9e805761226f5403472a9', 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: '32191859474bee5f86d21ad9f81d01bc088d07cd', class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && h("p", { key: '47ecadf397bc303ca9347fc2c426dd4a3f608057', class: "invalid-feedback" }, this.error)));
+        return (h(Host, { key: 'f587a8414c05e32346f937765d28bce047615a39', class: this.sizes && `select-${this.sizes}` }, h("select", { key: 'e7b292e72914e7dacf0291609a0cb1d65eb0a3fa', 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: '24d8ce15efedece915747955ae8a0842e5578e54', 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: '128f0f39050595aac1833f642b2742429a4c96cd', class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && h("p", { key: '94fffc12a2be58bf311b4588ead8fa0331e0c3ca', class: "invalid-feedback" }, this.error)));
     }
     static get is() { return "road-select"; }
     static get encapsulation() { return "scoped"; }

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

@@ -54,22 +54,27 @@ export default {
       control: 'text',
     },
     roadblur: {
+      action: 'roadblur',
       description: "Emitted when the select loses focus.",
-      control: {
-        type: null,
+      table: {
+        category: 'Events',
+        type: { summary: 'CustomEvent' },
       },
     },
     roadfocus: {
+      action: 'roadfocus',
       description: "Emitted when the select has focus.",
-      control: {
-        type: null,
+      table: {
+        category: 'Events',
+        type: { summary: 'CustomEvent' },
       },
     },
     roadchange: {
-      description: "Emitted when the value has changed.",
       action: 'roadchange',
-      control: {
-        type: null,
+      description: "Emitted when the value has changed.",
+      table: {
+        category: 'Events',
+        type: { summary: 'CustomEvent' },
       },
     },
   },

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

@@ -107,8 +107,8 @@ export class SelectFilter {
         const options = this.filteredOptions;
         const isActive = this.isActive ? 'true' : 'false';
         const notActive = this.isActive ? '' : 'not-active';
-        return (h(Host, { key: '4443cee3d13ade9d17d364aa112f7d13ac9a27d1', "is-active": isActive }, h("slot", { key: 'ed15841a9e665154f9988f76e8ac56c1788fd750' }), this.isOpen &&
-            h("ul", { key: '4ab28fd0fb00759e86e30fe14ded0de207dfde7c', class: `${notActive} select-filter-list`, role: "listbox", onMouseLeave: this.handleMouseLeave }, options.map((option, idx) => (h("li", { class: `select-filter-item ${this.activeIndex === idx ? 'active' : ''}`, role: "option", "aria-selected": this.activeIndex === idx ? 'true' : 'false', onClick: () => this.handleOptionClick(option.item.value, option.item.label.replace(/(<([^>]+)>)/gi, "")), onMouseOver: () => this.handleOptionMouseOver(idx), innerHTML: option.item.label, tabindex: this.activeIndex === idx ? 0 : -1 }))))));
+        return (h(Host, { key: 'ff1cb375e4108fbfe44f307ad6d00be4fec03430', "is-active": isActive }, h("slot", { key: '987d24b1f5ad17ef8a0e83e3165d1e137bf4d6e5' }), this.isOpen &&
+            h("ul", { key: '41e10aed226c8131e4313ea33da1ea6c79969b80', class: `${notActive} select-filter-list`, role: "listbox", onMouseLeave: this.handleMouseLeave }, options.map((option, idx) => (h("li", { class: `select-filter-item ${this.activeIndex === idx ? 'active' : ''}`, role: "option", "aria-selected": this.activeIndex === idx ? 'true' : 'false', onClick: () => this.handleOptionClick(option.item.value, option.item.label.replace(/(<([^>]+)>)/gi, "")), onMouseOver: () => this.handleOptionMouseOver(idx), innerHTML: option.item.label, tabindex: this.activeIndex === idx ? 0 : -1 }))))));
     }
     static get is() { return "road-select-filter"; }
     static get encapsulation() { return "scoped"; }

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

@@ -29,8 +29,10 @@ export default {
     },
     roadselected: {
       action: 'roadselected',
-      control: {
-        type: null,
+      description: 'Emitted when the value is selected.',
+      table: {
+        category: 'Events',
+        type: { summary: 'CustomEvent' },
       },
     },
     '--margin-top': {

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

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

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

@@ -13,7 +13,7 @@ export class Spinner {
     render() {
         const sizeClass = this.size !== undefined ? `spinner spinner--${this.size}` : 'spinner';
         const colorClass = this.size !== undefined ? `spinner-circle spinner-circle--${this.color}` : 'spinner-circle';
-        return (h("svg", { key: '66ff9c668eec8fc73a2f93015094934b9fb0b181', class: `${sizeClass}`, viewBox: "25 25 50 50" }, h("circle", { key: '5b2c9b4c104607084c0d2249c5b7dc31429ad39a', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
+        return (h("svg", { key: '3e1e5094311da649229f7fa9b3bc7b12d5251cda', class: `${sizeClass}`, viewBox: "25 25 50 50" }, h("circle", { key: '6257e336cdf32cfa80973f4466eb9adcbf7fa239', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
     }
     static get is() { return "road-spinner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -70,11 +70,11 @@ export class Switch {
     }
     render() {
         const labelId = this.switchId + '-label';
-        const textLabel = h("label", { key: 'f8a8b7641286294d251bc6d10b45fc97607cba49', class: "form-switch-label", id: labelId, htmlFor: this.switchId }, this.label);
+        const textLabel = h("label", { key: 'a94f02e2edb416513ef6285b89c221a8fe1d5884', 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: '9c43f0996fdcd4962776919b92b94eb7fbb9ad57' }, h("input", { key: '756db832dbd73ec0c59ed9ec2ae76b1851a8f22d', 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: '927bdd4ef11db9a6039ffd028994caa4667519fe', class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, h("div", { key: '0f3011ab70a432f99319331bb0e2009fa11e50ce', class: `form-switch-lever ${rightSwitchClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
+        return (h(Host, { key: '5f93e9f0cd857f38d2f70152774b2ae0239ed342' }, h("input", { key: '42528718ca88666d428048a7477ac9ba611f12aa', 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: '0d5c0ef117c9235387e47b628c9036c3844cb9be', class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, h("div", { key: '0d16ade7abfe28bae3f7d756b89799aa737dd653', class: `form-switch-lever ${rightSwitchClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
     }
     static get is() { return "road-switch"; }
     static get encapsulation() { return "scoped"; }

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

@@ -21,9 +21,9 @@ export class Tab {
     }
     render() {
         const { tab, active } = this;
-        return (h(Host, { key: '24b66a77921452273dbf57f3f44ac3cffbaecf8f', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: '4559e255fa71417fe4fcd713b91c2186d55653c0', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'tab-hidden': !active,
-            } }, h("slot", { key: '63f0d57bf74b8d562fecfbc881f8199d68080e89' })));
+            } }, h("slot", { key: '3ec299696cf719bf911fe0c27befb34d8de3afcd' })));
     }
     static get is() { return "road-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,11 +36,11 @@ export class TabBar {
     }
     render() {
         const { expand, center, secondary } = this;
-        return (h(Host, { key: '7c2795d50362e570f6a3371fde1e987bfc6389fd', role: "tablist", class: {
+        return (h(Host, { key: '793bbb41d74e6e4dd0a7a5ee67b418fd59f61c7c', role: "tablist", class: {
                 'tab-expand': expand,
                 'tab-center': center,
                 'tab-secondary': secondary,
-            } }, h("slot", { key: '94d18f97a0e96a8e8cef400b4b08feef32210782' })));
+            } }, h("slot", { key: '4e2713a1a01ed7fcd8503a8231223d2793e8f808' })));
     }
     static get is() { return "road-tab-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -71,7 +71,7 @@ export class TabButton {
             rel,
             target,
         };
-        return (h(Host, { key: '1bf7c7301f66cecd4bfbf5cb332fb443dbd17a73', 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: '4766bf5988d063443b6a7958fe1c18ab20b4392d', onClick: (ev) => !disabled && this.onClick(ev), onKeyup: (ev) => !disabled && this.onKeyUp(ev), role: "tab", tabindex: disabled ? -1 : tabIndex, "aria-selected": selected ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 'tab-selected': selected,
                 'tab-has-label': hasLabel,
                 'tab-has-icon': hasIcon,
@@ -79,7 +79,7 @@ export class TabButton {
                 'tab-has-icon-only': hasIcon && !hasLabel,
                 [`tab-layout-${layout}`]: true,
                 'tab-disabled': disabled, // Classe CSS pour les styles désactivés
-            } }, h("a", Object.assign({ key: 'c15a1634befc28787a96baa630bcb65bfac9dcc7' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { key: '8f1f273aea98fd8680b5787223f8fe730055d9c3', class: "button-inner" }, h("slot", { key: '24f7dceead533f266dcdd4cb80f792b2ae85db2c' })))));
+            } }, h("a", Object.assign({ key: 'f11c00761d9057129770874f321f3afaa18a53e0' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { key: '51c886bf60aa0544124c0e2cb19b20d9e0bb720e', class: "button-inner" }, h("slot", { key: '6f7d6d16789eb4db922fd3b49cbbe2df68fc71a1' })))));
     }
     static get is() { return "road-tab-button"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -99,7 +99,7 @@ export class Tabs {
         return Array.from(this.el.querySelectorAll('road-tab'));
     }
     render() {
-        return (h(Host, { key: 'bc3d78f5653f637d9b0c23a732cfb715a0490e09', onRoadTabButtonClick: this.onTabClicked }, h("slot", { key: 'be1082d53eb88ff1e0aa1222dbea8a5bcc65c77a', name: "top" }), h("div", { key: '4e29d83d3f1473b27b720a049c7201f632fbe11b', class: "tabs-inner" }, h("slot", { key: 'd9ed82d2d6cb976d65c9349e286190033f859ebd' }))));
+        return (h(Host, { key: '156304acaa7819f6a6420cc16ef1610e3ac3c729', onRoadTabButtonClick: this.onTabClicked }, h("slot", { key: 'd955421ac3b039e41c557ca80f02e9dba4c8bae1', name: "top" }), h("div", { key: 'a44620d8828baeeb94eee27d59a598de1ae6c723', class: "tabs-inner" }, h("slot", { key: '493a7741ad834c244c4c01ac7875b94a0e698b20' }))));
     }
     static get is() { return "road-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,7 +16,7 @@ export class Tag {
     }
     render() {
         const contrastClass = this.contrast ? `tag-${this.color} tag-${this.color}-contrast` : `tag-${this.color}`;
-        return (h(Host, { key: '474f7b6662f78c0258d4573377bca6c8cda09bbb', class: `${contrastClass}` }, h("slot", { key: 'f58667d0bd8ffc1839df5b0c1572447d8445d4ae' })));
+        return (h(Host, { key: '03130dbfae36eca95f41b5a0024b7b4cd06c310a', class: `${contrastClass}` }, h("slot", { key: '5adabe2b8a1ef7a17fca7dcd24fbaf0cf234ab6e' })));
     }
     static get is() { return "road-tag"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,7 +11,7 @@ export class Text {
     }
     render() {
         const colorClass = this.color !== undefined ? `text-${this.color}` : '';
-        return (h(Host, { key: 'bb23b71b76a33ff446f23c24ba4f53f41bf2445f', class: `${colorClass}` }, h("slot", { key: 'd1a14d98cae107a96314bbaea01687183cf60447' })));
+        return (h(Host, { key: 'ce661d8700a5de9f45c8eadb585db40c170ab783', class: `${colorClass}` }, h("slot", { key: '403d340719d454fb54288e5447beb06e0fa429ac' })));
     }
     static get is() { return "road-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textarea/textarea.css

@@ -124,6 +124,9 @@
   pointer-events: none;
   transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
   transform-origin: 0 0;
+  width: 95%;
+  white-space: normal;
+  overflow-wrap: break-word;
 }
 
 /* SIZES
@@ -146,12 +149,12 @@
 :host(.input-xl) .form-control.has-value ~ .form-label,
 :host(.input-xl) .form-control[type="date"] ~ .form-label,
 :host(.input-xl) .form-control[type="time"] ~ .form-label {
-  width: 100vw;
+  width:100%;
   transform: scale(0.75) translateY(-0.625rem);
 }
 
 :host(.input-xl) .form-control:placeholder-shown ~ .form-label {
-  width: 100vw;
+  width: 100%;
   transform: scale(0.75) translateY(-0.625rem);
 }
 

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

@@ -82,7 +82,7 @@ export class Textarea {
         const hasValueClass = this.value !== '' ? 'has-value' : '';
         const noResizeClass = this.resize == false ? 'no-resize' : '';
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-        return (h(Host, { key: '8f1bce355f73fef1b81fb71025b23aa9734106a2', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, h("textarea", { key: 'eefe6f4bcb3723e01c5b5a7b30b52eddd947de54', 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: '8a2dd19323c6bb8b889b35328081d75d143a36e9', class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && h("p", { key: '514875f36258918863ec6320c870fe4454d3ece2', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: '586ba5819e534bc379788b45b6160e8880cff3a0', class: "helper" }, this.helper)));
+        return (h(Host, { key: 'c975447632482840e56666485cecf4713d1c758b', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, h("textarea", { key: 'de0054b753bf6d54722ee04e31d320a71d3a7c2f', 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: 'a9b5b3d50110501e54d55c65485b4cd71b18f0e3', class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && h("p", { key: '98af05a2b982faa261cd6330a267870bd0011e71', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: '5f37d2a87cb0f3c73e33efe9e301aab4a28b3041', class: "helper" }, this.helper)));
     }
     static get is() { return "road-textarea"; }
     static get encapsulation() { return "scoped"; }

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

@@ -120,29 +120,35 @@ export default {
       },
     },
     roadblur: {
-      description: "Emitted when the textarea loses focus.",
-      control: {
-        type: null,
+      action: 'roadblur',
+      description: 'Emitted when the input loses focus.',
+      table: {
+        category: 'Events',
+        type: { summary: 'CustomEvent' },
       },
     },
     roadfocus: {
-      description: "Emitted when the textarea has focus.",
-      control: {
-        type: null,
+      action: 'roadfocus',
+      description: 'Emitted when the input loses focus.',
+      table: {
+        category: 'Events',
+        type: { summary: 'CustomEvent' },
       },
     },
     roadchange: {
-      description: "Emitted when the value has changed.",
       action: 'roadchange',
-      control: {
-        type: null,
+      description: 'Emitted when the value has changed.',
+      table: {
+        category: 'Events',
+        type: { summary: 'CustomEvent' },
       },
     },
     roadinput: {
-      description: "Emitted when a keyboard input occurred.",
       action: 'roadinput',
-      control: {
-        type: null,
+      description: "Emitted when a keyboard input occurred.",
+      table: {
+        category: 'Events',
+        type: { summary: 'CustomEvent' },
       },
     },
   },

package/dist/collection/components/toast/toast.js

@@ -86,7 +86,7 @@ export class Toast {
         if (this.color == 'danger') {
             this.timeout = 0;
         }
-        return (h(Host, { key: '1e5de437f471e4a0a4c4a328b41c39e2f84aeb87', class: `${toastIsOpenClass}`, role: "alert" }, h("div", { key: '1086cd53128b3312632be7e791fdb83c2b44a931', class: `toast toast-${this.color}` }, h("road-icon", { key: '053ac170976e5266f80b584943ef9fe6c440d290', class: "toast-icon", icon: icon, "aria-hidden": "true" }), h("p", { key: 'edcbf5c89984660d5c8eb82a329d22ea941e6fdc', class: "toast-label" }, this.label), h("button", { key: '7ca0f0ee6c0166be548ff66423772dd8f74b0ecb', type: "button", class: "toast-close", "aria-label": "Close", onClick: this.onClick }, h("road-icon", { key: 'd11b87da89cf1057349214b04468e387484db3da', icon: navigationClose, size: "md" })), h("slot", { key: 'd4db3d4c547ea47bd1aab1a462b8975d8b4368d6', name: "progress" }))));
+        return (h(Host, { key: '351715fec925da6fd5e8e6a4472641ea72b4a6a9', class: `${toastIsOpenClass}`, role: "alert" }, h("div", { key: '196d201202dbf45d927c2d7c39b8b0d30b9d29c6', class: `toast toast-${this.color}` }, h("road-icon", { key: 'ad32e677786cad46be2183ca649fc680e43d3b93', class: "toast-icon", icon: icon, "aria-hidden": "true" }), h("p", { key: '2146a9cde7ea10fdd61e8f6342dc8bb8c3de2c49', class: "toast-label" }, this.label), h("button", { key: 'ce28e9b8eecc98e798349a92d71c7e5ba8873944', type: "button", class: "toast-close", "aria-label": "Close", onClick: this.onClick }, h("road-icon", { key: 'b46a0b3dfd3d8c583b97acb4cf619f53f19f2bab', icon: navigationClose, size: "md" })), h("slot", { key: '4905ebcf66402dc304218db52c3d2cb5cbc41139', name: "progress" }))));
     }
     static get is() { return "road-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -37,9 +37,11 @@ export default {
     },
     close: {
       description: "Indicate when closing the toast",
-      control: {
-        type: null,
+      table: {
+        category: 'Events',
+        type: { summary: 'CustomEvent' },
       },
+      control: { type: null }, // Désactive l'affichage du contrôle dans Storybook
     },
     progress: {
       description: "the progress bar in the toast.\ncolor=\"info\" for Info\ncolor=\"success\" for success\ncolor=\"warning\" for warning\ncolor=\"danger\" for danger",

package/dist/collection/components/toggle/toggle.js

@@ -66,11 +66,11 @@ export class toggle {
     }
     render() {
         const labelId = this.toggleId + '-label';
-        const textLabel = h("label", { key: 'd8f6f793ae322fc4f3c78d627858836a8ace0b1e', class: "form-toggle-label", id: labelId, htmlFor: this.toggleId }, this.label);
+        const textLabel = h("label", { key: 'a6f6e6a7afaeebdf6f72430ae0044299cbc4b272', 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: '5b975533cbd7705fb47773942d43ca00f9c67777' }, h("input", { key: '2f02aaaf3815db82b246eccc65b95ff80028fef3', 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: '922fd52175937ca1749eac085776411c2f6b2517', class: `form-toggle-label ${isSpacedClass} ${disabledClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, h("div", { key: '0b7e003b92aaa2bb7f02ac19bba110d959349d84', class: `form-toggle-lever ${righttoggleClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
+        return (h(Host, { key: '6954fa13dc3f49af5c8d8b94f4436915b461843c' }, h("input", { key: '3ee599b527d81fade1ecf752baa9647294de1286', 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: '7650fa09df528c9b4ac08d71336443707ee2648f', class: `form-toggle-label ${isSpacedClass} ${disabledClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, h("div", { key: '69a1ad619c7f748d225f1a474813bfbc3ff79fe2', class: `form-toggle-lever ${righttoggleClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
     }
     static get is() { return "road-toggle"; }
     static get encapsulation() { return "scoped"; }

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

@@ -51,22 +51,27 @@ export default {
       control: 'boolean',
     },
     roadblur: {
+      action: 'roadblur',
       description: "Emitted when the toggle loses focus.",
-      control: {
-        type: null,
+      table: {
+        category: 'Events',
+        type: { summary: 'CustomEvent' },
       },
     },
     roadfocus: {
+      action: 'roadfocus',
       description: "Emitted when the toggle has focus.",
-      control: {
-        type: null,
+      table: {
+        category: 'Events',
+        type: { summary: 'CustomEvent' },
       },
     },
     roadchange: {
-      description: "Emitted when the checked property has changed.",
       action: 'roadchange',
-      control: {
-        type: null,
+      description: "Emitted when the checked property has changed.",
+      table: {
+        category: 'Events',
+        type: { summary: 'CustomEvent' },
       },
     },
     '--toggle-lever-width': {

package/dist/collection/components/toolbar/toolbar.js

@@ -10,7 +10,7 @@ import { Host, h } from "@stencil/core";
 export class Toolbar {
     render() {
         const colorClass = this.color !== undefined ? `toolbar-${this.color}` : '';
-        return (h(Host, { key: '3babdf893a7a89e310b620737ef852ee133ccebb', class: colorClass }, h("div", { key: 'de9400a86c87d427d22b496cd6ceb31cb93ccf54', class: "toolbar-container" }, h("slot", { key: '50559e69631b7581ad67338aea96acd42926b9ab', name: "start" }), h("slot", { key: '40bcbd63fb2f83d7c8294154734c58c0650ee182', name: "primary" }), h("div", { key: '4eec60ca600f33e3e0c6d9056c9913d8df7e62bd', class: "toolbar-content" }, h("slot", { key: 'f1105dc9a8ac7ff4cfc7e8e166d8a0e13c1bee73' })), h("slot", { key: 'ca6e18fc20fb0a636d54573ffb99074940e41bcc', name: "secondary" }), h("slot", { key: 'c73721561d9d3d38c38a9dc453757b185bbd81a5', name: "end" }))));
+        return (h(Host, { key: 'e73328139400d6f013e7beecab915cf38df79a23', class: colorClass }, h("div", { key: 'c83dfa77c85cca464db9fd21eed80efe21cc2573', class: "toolbar-container" }, h("slot", { key: '776839dba2b309b5de820daf9c480b4e8b401c43', name: "start" }), h("slot", { key: '5e81470ffc0f7d8d8cb47b7e4463d34d70d7f709', name: "primary" }), h("div", { key: '772294cc4194faf593c95c8cac10490b44bd5605', class: "toolbar-content" }, h("slot", { key: '1dd60892af9491f0f552f29d70f2f678481d5654' })), h("slot", { key: '749502b121ed0c7b92bf7d21db885642d0f0fe2f', name: "secondary" }), h("slot", { key: '5766725c5390520eee5a03bb2f8f41e1a64e84df', name: "end" }))));
     }
     static get is() { return "road-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toolbar-title/toolbar-title.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class ToolbarTitle {
     render() {
-        return (h("div", { key: '79254e204a533572207f3779ee0d20d814bbbecd', class: "toolbar-title" }, h("slot", { key: '29cce3ccf19f113e99e1b2b4c84322efc0b94f94' })));
+        return (h("div", { key: '2bc8875e6f067415f19c944cc319a9457fa305df', class: "toolbar-title" }, h("slot", { key: '7031e74b2fec0447701528d2a0c02795a038f281' })));
     }
     static get is() { return "road-toolbar-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toolbar-title-page/toolbar-title-page.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class ToolbarAppName {
     render() {
-        return (h("div", { key: 'dc61258415913c4112dd06bcc23a94db38fab00e', class: "toolbar-title-page" }, h("slot", { key: 'f39c19ff690566100558556751e8380bb448eb72' })));
+        return (h("div", { key: 'd76c2100a700d99524ec69c76bf08e56ff7d0998', class: "toolbar-title-page" }, h("slot", { key: '9f22898e163ba4e81ff054b46a3e5e640abf7a7b' })));
     }
     static get is() { return "road-toolbar-title-page"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,7 +9,7 @@ import { Host, h } from "@stencil/core";
  */
 export class ToolbarV2 {
     render() {
-        return (h(Host, { key: 'a020bd723a459c6bb443645007df7b1f215ea851', class: "toolbar" }, h("div", { key: '2d2cc4b896593cf69c7046ee877b5c9b7ba53eb5', class: "toolbar-container" }, h("div", { key: '55c6f4b55cc7c5ddae5965a156bcfb6cafec1d49', class: "toolbar-container-content-left" }, h("slot", { key: '6b249b32d73240846717ac50a8d1544511a2fe6d', name: "start" }), h("slot", { key: '9187ad0c4fc712d3ad16af1f72db9bd7382d8e6e', name: "primary" })), h("div", { key: 'f5936eb58c38d6cd5758d213f40e6bc09df3f7e8', class: "toolbar-content" }, h("slot", { key: 'c61051186fb1f726fcc104d9f3a827e091b46ff3' })), h("div", { key: '7ee04f220d5377315bc8c320461963def7a7d05f', class: "toolbar-container-content-right" }, h("slot", { key: '196976ade22edf382dee91352082d31b5fce015f', name: "secondary" }), h("slot", { key: 'ea25da8140c7525ce6ed3e712c64ccb105fcbb71', name: "end" })))));
+        return (h(Host, { key: 'c2aa891f0a092a2ad818049cd7bd8216921085d6', class: "toolbar" }, h("div", { key: '0c8154579c5c164907b6a9f8e28c65e85a9383c8', class: "toolbar-container" }, h("div", { key: '5b7b972cf8e9d8728438e6beef791753c9ed8122', class: "toolbar-container-content-left" }, h("slot", { key: 'a388f0d9cc1aa4624fd456ab5fd6adc978adeb79', name: "start" }), h("slot", { key: '747be87afdac650da865f8b47ee63d8d228e4dc6', name: "primary" })), h("div", { key: '8377a0ab5534f3979572dd2a06cc39290ca6acdc', class: "toolbar-content" }, h("slot", { key: '7a74325743d4eef911088f09a242c0a0fb740999' })), h("div", { key: '03077029d30c10847b70b9b910cceedbd575fad0', class: "toolbar-container-content-right" }, h("slot", { key: '00590e6e694304b4a78634905332d8450c5679ed', name: "secondary" }), h("slot", { key: '3debaefb441cfb2a6bd5c1fa2555a500e3770bc8', name: "end" })))));
     }
     static get is() { return "road-toolbar-v2"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/tooltip.css

@@ -115,6 +115,20 @@
   transform: translateY(-100%);
 }
 
+/**
+ * Top end
+ */
+
+ :host([data-tooltip-position="top-end"]) .tooltip {
+  left: auto;
+  right: 0%;
+  transform: translateY(-70%);
+}
+
+:host([data-tooltip-position="top-end"]) .tooltip-open {
+  transform: translateY(-100%);
+}
+
 /**
  * Left
  */
@@ -175,6 +189,23 @@
   transform: translateY(-6%);
 }
 
+
+/**
+ * Bottom end
+ */
+
+ :host([data-tooltip-position="bottom-end"]) .tooltip {
+  margin-top: 0.5rem;
+  left: auto;
+  top: 100%;
+  right: 0;
+  transform: translateY(-40%);
+}
+
+:host([data-tooltip-position="bottom-end"]) .tooltip-open {
+  transform: translateY(-6%);
+}
+
 /**
  * Right
  */

package/dist/collection/components/tooltip/tooltip.js

@@ -95,12 +95,12 @@ export class Tooltip {
         return triggers.includes(triggerType);
     }
     render() {
-        return (h(Host, { key: 'a41350a6114e63e0d73759b29c0afa19d467ac4b', 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: '2645780b6948b64ee79bebba713a1bc96bf3edc9', 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: 'e2985be0f2af606eb675875a1ef0e53190c54b50', "aria-describedby": this.tooltipId }), h("div", { key: '45f8da72265c812ebbc781cafd7356f02294c2ae', part: "tooltip", id: this.tooltipId, class: {
+            "data-tooltip-position": this.position }, h("slot", { key: '968912545c373f15578acfa6d251393f9713beea', "aria-describedby": this.tooltipId }), h("div", { key: 'a64601f45c06e1087e0f955dc6dd958fcec40268', 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: 'a3d80cc2d48e26c0a5c2f45e38854601c1f3ea83', name: "tooltip-content" }))));
+            }, role: "tooltip", "aria-hidden": !this.isOpen ? 'true' : 'false' }, this.content, h("slot", { key: 'a0cd1d74da1cd571bb847b04ae609dd3a3cc281d', name: "tooltip-content" }))));
     }
     static get is() { return "road-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -160,8 +160,8 @@ export class Tooltip {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "| 'top'\n    | 'right'\n    | 'bottom'\n    | 'top-left'\n    | 'top-right'\n    | 'bottom-left'\n    | 'bottom-right'\n    | 'left'",
-                    "resolved": "\"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"right\" | \"top\" | \"top-left\" | \"top-right\"",
+                    "original": "| 'top'\n    | 'right'\n    | 'bottom'\n    | 'top-left'\n    | 'top-right'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom-left'\n    | 'bottom-right'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-left\" | \"bottom-right\" | \"bottom-start\" | \"left\" | \"right\" | \"top\" | \"top-end\" | \"top-left\" | \"top-right\" | \"top-start\"",
                     "references": {}
                 },
                 "required": false,