@roadtrip/components 3.40.0 → 3.41.1

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

@@ -1,20 +1,80 @@
-import { r as registerInstance, h, H as Host } from './index-8dc34f94.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-8dc34f94.js';
+import { a as navigationClose } from './index-6de77b28.js';
 
-const alertCss = ":host{position:relative;display:flex;align-items:flex-start;padding:0.5rem 1rem 0.5rem 0.5rem;font-family:var(--road-font, sans-serif);font-size:var(--road-body-medium);line-height:1.25;color:var(--road-on-surface);border:1px solid transparent;border-radius:0.25rem}.alert-icon{flex-shrink:0;width:2rem;height:2rem;margin-right:0.5rem}.alert-title{padding:0.375rem 0 0;font-weight:700}.alert-link{display:block;margin:0;color:var(--road-on-surface);text-decoration:underline}.alert-description{padding:0.375rem 0;margin:0}:host(.alert-info){color:var(--road-on-info-surface);background:var(--road-info-surface);border-color:var(--road-info-outline)}:host(.alert-info) ::slotted(road-icon){fill:var(--road-info-default)}:host(.alert-info) ::slotted(road-button){display:block;margin:0.375rem 0 0;color:var(--road-on-info-surface-inverse);background:var(--road-info-surface-inverse);fill:var(--road-on-info-surface-inverse)}:host(.alert-info) .alert-link{color:var(--road-on-info-surface)}:host(.alert-success){color:var(--road-on-success-surface);background:var(--road-success-surface);border-color:var(--road-success-outline)}:host(.alert-success) ::slotted(road-icon){fill:var(--road-success-icon)}:host(.alert-success) ::slotted(road-button){display:block;margin:0.375rem 0 0;color:var(--road-on-success-surface-inverse);background:var(--road-success-surface-inverse);fill:var(--road-on-success-surface-inverse)}:host(.alert-success) .alert-link{color:var(--road-on-success-surface)}:host(.alert-warning){color:var(--road-on-warning-surface);background:var(--road-warning-surface);border-color:var(--road-warning-outline)}:host(.alert-warning) ::slotted(road-icon){fill:var(--road-warning-icon)}:host(.alert-warning) ::slotted(road-button){display:block;margin:0.375rem 0 0;color:var(--road-on-warning-surface-inverse);background:var(--road-warning-surface-inverse);fill:var(--road-on-warning-surface-inverse)}:host(.alert-warning) .alert-link{color:var(--road-on-warning-surface)}:host(.alert-danger){color:var(--road-on-danger-surface);background:var(--road-danger-surface);border-color:var(--road-danger-outline)}:host(.alert-danger) ::slotted(road-icon){fill:var(--road-danger-icon)}:host(.alert-danger) ::slotted(road-button){display:block;margin:0.375rem 0 0;color:var(--road-on-danger-surface-inverse);background:var(--road-danger-surface-inverse);fill:var(--road-on-danger-surface-inverse)}:host(.alert-danger) .alert-link{color:var(--road-on-danger-surface)}";
+const alertCss = ":host{position:relative;display:flex;align-items:flex-start;padding:0.5rem 1rem 0.5rem 0.5rem;font-family:var(--road-font, sans-serif);font-size:var(--road-body-medium);line-height:1.25;color:var(--road-on-surface);border:1px solid transparent;border-radius:0.25rem}.alert-icon{flex-shrink:0;width:2rem;height:2rem;margin-right:0.5rem}.alert-title{margin:0.375rem 0 var(--road-spacing-03);display:block;font-weight:700}.alert-container{position:relative;display:flex;align-items:start;justify-content:space-between;width:100%;flex-direction:column}.alert-container-horizontal{position:relative;display:flex;align-items:start;justify-content:space-between;width:100%;flex-direction:row}.alert-link{display:block;margin:0;margin:var(--road-spacing-03) 0 0;color:var(--road-on-surface);text-decoration:underline}.alert-description{margin:0}.btn-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;justify-content:center;margin-top:var(--road-spacing-03)}.btn-container.justify-end{padding-top:var(--road-spacing-07);justify-content:end}.alert-button{margin-left:var(--road-spacing-07)}.alert-close{display:flex;position:absolute;top:0;right:0;align-items:center;justify-content:center;padding:0;font-weight:700;color:inherit;cursor:pointer;background:transparent;border:0;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}:host(.alert-info){color:var(--road-on-info-surface);background:var(--road-info-surface);border-color:var(--road-info-outline)}:host(.alert-info) ::slotted(road-icon){fill:var(--road-info-default)}:host(.alert-info) ::slotted(road-button){display:block;margin:0.375rem 0 0;color:var(--road-on-info-surface-inverse);background:var(--road-info-surface-inverse);fill:var(--road-on-info-surface-inverse)}:host(.alert-info) .alert-link{color:var(--road-on-info-surface)}:host(.alert-success){color:var(--road-on-success-surface);background:var(--road-success-surface);border-color:var(--road-success-outline)}:host(.alert-success) ::slotted(road-icon){fill:var(--road-success-icon)}:host(.alert-success) ::slotted(road-button){display:block;margin:0.375rem 0 0;color:var(--road-on-success-surface-inverse);background:var(--road-success-surface-inverse);fill:var(--road-on-success-surface-inverse)}:host(.alert-success) .alert-link{color:var(--road-on-success-surface)}:host(.alert-warning){color:var(--road-on-warning-surface);background:var(--road-warning-surface);border-color:var(--road-warning-outline)}:host(.alert-warning) ::slotted(road-icon){fill:var(--road-warning-icon)}:host(.alert-warning) ::slotted(road-button){display:block;margin:0.375rem 0 0;color:var(--road-on-warning-surface-inverse);background:var(--road-warning-surface-inverse);fill:var(--road-on-warning-surface-inverse)}:host(.alert-warning) .alert-link{color:var(--road-on-warning-surface)}:host(.alert-danger){color:var(--road-on-danger-surface);background:var(--road-danger-surface);border-color:var(--road-danger-outline)}:host(.alert-danger) ::slotted(road-icon){fill:var(--road-danger-icon)}:host(.alert-danger) ::slotted(road-button){display:block;margin:0.375rem 0 0;color:var(--road-on-danger-surface-inverse);background:var(--road-danger-surface-inverse);fill:var(--road-on-danger-surface-inverse)}:host(.alert-danger) .alert-link{color:var(--road-on-danger-surface)}";
 const RoadAlertStyle0 = alertCss;
 
 const Alert = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.onClose = createEvent(this, "close", 7);
         /**
          * Set the color of alert. e.g. info, success, warning, danger
          */
         this.color = 'info';
+        /**
+         * position of the button
+         */
+        this.layout = 'vertical';
+        /**
+         * Show / hide close icon
+         */
+        this.hasCloseIcon = false;
+        /**
+         * Set isOpen propertie to true to show the modal
+         */
+        this.isOpen = false;
+        /**
+         * Close the dialog when clicking on the cross or layer
+         */
+        this.onClick = (ev) => {
+            ev.stopPropagation();
+            ev.preventDefault();
+            this.close();
+        };
+    }
+    /**
+     * Open the modal
+     */
+    async open() {
+        this.isOpen = true;
+    }
+    /**
+     * Close the modal
+     */
+    async close() {
+        this.isOpen = false;
+        this.el.addEventListener('transitionend', () => {
+            this.onClose.emit();
+        }, { once: true });
+    }
+    /**
+     * Close the dialog when press Escape key
+     */
+    onEscape(event) {
+        if (event.key === 'Escape' || event.key === "Esc") {
+            this.close();
+        }
+    }
+    /**
+     * Call close function when clicking an element with data-dismiss="modal" attribute
+     */
+    componentDidLoad() {
+        this.el.querySelectorAll('[data-dismiss="modal"]').forEach(item => {
+            item.addEventListener('click', () => this.close());
+        });
     }
     render() {
         const colorClass = this.color !== undefined ? `alert-${this.color}` : '';
-        return (h(Host, { key: 'b654cd8f516e47f8a6c0e7a1a4bfd9cae09076e0', class: colorClass, role: "alert" }, h("div", { key: '280b009d269a3dd510bcfabf8f4d7e5eb61cda80', class: "alert-icon" }, h("slot", { key: '17d81df60b117ab8b246d9b73c832954ec7296d1', name: "icon" })), h("div", { key: '46f8799b8b2ef9e525a4d7f00b5c53ddd98fe4d1' }, this.label && h("span", { key: '900b5b9f095356d008fb2bae5c03cc28eb828a8a', class: "alert-title d-block" }, this.label), h("p", { key: 'c65304f2cb7c7109350f3265a88a507ff84bb0c8', class: "alert-description" }, h("slot", { key: '3f34a35e3bbfd3a2fe96531e9d7a0cfd00df7b74' }), this.link && h("a", { key: '4149db714ea2fc13148d1e44d6e0dd9cc73dee45', href: this.url, class: "alert-link link link-default" }, this.link)))));
+        let layoutClass = 'alert-container'; // valeur par défaut
+        if (this.layout === 'horizontal') {
+            layoutClass = 'alert-container-horizontal';
+        }
+        const btnContainerClass = this.hasCloseIcon ? 'btn-container justify-end' : 'btn-container';
+        const closeIconElement = this.hasCloseIcon ? (h("button", { type: "button", class: "alert-close", onClick: this.onClick, "aria-label": "Close" }, h("road-icon", { icon: navigationClose, "aria-hidden": "true" }))) : null;
+        return (h(Host, { key: '358c0b9ba649dc7f2a04f7cf1973fc8136e55d8d', class: colorClass, role: "alert" }, h("div", { key: '08a81f21c4f8a773fca419c2ced43fb0fbd9c34f', class: "alert-icon" }, h("slot", { key: '677101a86efc495b8001d13170c2b88b35a3b59b', name: "icon" })), h("div", { key: '150ee6c4569c39ae1a76a4b560957fba71e06658', class: layoutClass }, h("div", { key: 'a5989623d9b6a2147e76359ddab2a3d052859695', class: "alert-container-content" }, this.label && h("span", { key: '165687f382f202899d8991a1dea3984a6b13a1bb', class: "alert-title d-block" }, this.label), h("p", { key: 'ae7a4dcd6b3f6e68dfe7493175ceeca56be2ac99', class: "alert-description" }, h("slot", { key: 'b6514df3aa0793ed4296856292860e9baf10caec' })), this.link && h("a", { key: 'c8db33f73ca8585369a7edfe91d92af9219d0bd4', href: this.url, class: "alert-link link link-default" }, this.link)), h("div", { key: '43f6da1950628cf9304f0e501c5cb2ce67bf203c', class: btnContainerClass }, h("slot", { key: 'c5b94ccd205912f8a23ddd0397483c370444e5ec', name: "button" })), closeIconElement)));
     }
+    get el() { return getElement(this); }
 };
 Alert.style = RoadAlertStyle0;
 

package/dist/esm/road-alert.entry.js.map

@@ -1 +1 @@
-{"file":"road-alert.entry.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,u6EAAu6E,CAAC;AACz7E,wBAAe,QAAQ;;MCaV,KAAK;IALlB;;;;;QAUU,UAAK,GAAmB,MAAM,CAAC;KAyCxC;IAlBE,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,SAAS,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC;QAEzE,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAC,OAAO,IACnC,4DAAK,KAAK,EAAC,YAAY,IACrB,6DAAM,IAAI,EAAC,MAAM,GAAE,CACf,EACN,8DACG,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACpE,0DAAG,KAAK,EAAC,mBAAmB,IAC1B,8DAAO,EACN,IAAI,CAAC,IAAI,IAAI,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,IAAI,CAAK,CACnF,CACA,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/alert/alert.css?tag=road-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["/*\n * Alert\n *\n * Index\n * - Alert\n * - Icon\n * - Description\n * - Feedback\n */\n\n\n/* ALERT\n -------------------- */\n\n:host {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  padding: 0.5rem 1rem 0.5rem 0.5rem;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-body-medium);\n  line-height: 1.25;\n  color: var(--road-on-surface);\n  border: 1px solid transparent;\n  border-radius: 0.25rem;\n}\n\n/* ICON\n -------------------- */\n\n.alert-icon {\n  flex-shrink: 0;\n  width: 2rem;\n  height: 2rem;\n  margin-right: 0.5rem;\n}\n\n/* ALERT TITLE\n -------------------- */\n\n.alert-title {\n  padding: 0.375rem 0 0;\n  font-weight: 700;\n}\n\n/* ALERT LINK\n -------------------- */\n\n.alert-link {\n  display: block;\n  margin: 0;\n  color: var(--road-on-surface);\n  text-decoration: underline;\n}\n\n/* DESCRIPTION\n -------------------- */\n\n.alert-description {\n  padding: 0.375rem 0;\n  margin: 0;\n}\n\n/* FEEDBACK\n -------------------- */\n\n/**\n * Info\n */\n\n:host(.alert-info) {\n  color: var(--road-on-info-surface);\n  background: var(--road-info-surface);\n  border-color: var(--road-info-outline);\n}\n\n:host(.alert-info) ::slotted(road-icon) {\n  fill: var(--road-info-default);\n}\n\n:host(.alert-info) ::slotted(road-button) {\n  display: block;\n  margin: 0.375rem 0 0;\n  color: var(--road-on-info-surface-inverse);\n  background: var(--road-info-surface-inverse);\n  fill: var(--road-on-info-surface-inverse);\n}\n\n:host(.alert-info) .alert-link {\n  color: var(--road-on-info-surface);\n}\n\n\n/**\n * Success\n */\n\n:host(.alert-success) {\n  color: var(--road-on-success-surface);\n  background: var(--road-success-surface);\n  border-color: var(--road-success-outline);\n}\n\n:host(.alert-success) ::slotted(road-icon) {\n  fill: var(--road-success-icon);\n}\n\n:host(.alert-success) ::slotted(road-button) {\n  display: block;\n  margin: 0.375rem 0 0;\n  color: var(--road-on-success-surface-inverse);\n  background: var(--road-success-surface-inverse);\n  fill: var(--road-on-success-surface-inverse);\n}\n\n:host(.alert-success) .alert-link {\n  color: var(--road-on-success-surface);\n}\n\n/**\n * Warning\n */\n\n:host(.alert-warning) {\n  color: var(--road-on-warning-surface);\n  background: var(--road-warning-surface);\n  border-color: var(--road-warning-outline);\n}\n\n:host(.alert-warning) ::slotted(road-icon) {\n  fill: var(--road-warning-icon);\n}\n\n:host(.alert-warning) ::slotted(road-button) {\n  display: block;\n  margin: 0.375rem 0 0;\n  color: var(--road-on-warning-surface-inverse);\n  background: var(--road-warning-surface-inverse);\n  fill: var(--road-on-warning-surface-inverse);\n}\n\n:host(.alert-warning) .alert-link {\n  color: var(--road-on-warning-surface);\n}\n\n/**\n * Danger\n */\n\n:host(.alert-danger) {\n  color: var(--road-on-danger-surface);\n  background: var(--road-danger-surface);\n  border-color: var(--road-danger-outline);\n}\n\n:host(.alert-danger) ::slotted(road-icon) {\n  fill: var(--road-danger-icon);\n}\n\n:host(.alert-danger) ::slotted(road-button) {\n  display: block;\n  margin: 0.375rem 0 0;\n  color: var(--road-on-danger-surface-inverse);\n  background: var(--road-danger-surface-inverse);\n  fill: var(--road-on-danger-surface-inverse);\n}\n\n:host(.alert-danger) .alert-link {\n  color: var(--road-on-danger-surface);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\nimport { FeedbackColors } from '../../interface';\n\n/**\n * @slot icon - Icon of the alert, it should be a road-icon element.\n * @slot  - Message of the alert.\n */\n\n@Component({\n  tag: 'road-alert',\n  styleUrl: 'alert.css',\n  shadow: true,\n})\nexport class Alert {\n\n  /**\n   * Set the color of alert. e.g. info, success, warning, danger\n   */\n  @Prop() color: FeedbackColors = 'info';\n\n  /**\n   * Title display in the alert\n   */\n   @Prop() label?: string;\n\n   /**\n   * Button display in the alert\n   * `<road-button size=\"sm\">Label</road-button>`\n   */\n   @Prop() button?: string;\n\n   /**\n   * Text Link display in the alert\n   */\n   @Prop() link?: string;\n\n   /**\n    * url display in the link\n    */\n   @Prop() url?: string;\n\n   render() {\n     const colorClass = this.color !== undefined ? `alert-${this.color}` : '';\n\n     return (\n       <Host class={colorClass} role=\"alert\">\n         <div class=\"alert-icon\">\n           <slot name=\"icon\"/>\n         </div>\n         <div>\n           {this.label && <span class=\"alert-title d-block\">{this.label}</span>}\n           <p class=\"alert-description\">\n             <slot/>\n             {this.link && <a href={this.url} class=\"alert-link link link-default\">{this.link}</a>}\n           </p>\n         </div>\n       </Host>\n     );\n   }\n}"],"version":3}
+{"file":"road-alert.entry.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,kvGAAkvG,CAAC;AACpwG,wBAAe,QAAQ;;MCaV,KAAK;IALlB;;;;;;QAeU,UAAK,GAAmB,MAAM,CAAC;;;;QAK7B,WAAM,GAA0C,UAAU,CAAC;;;;QA0B7D,iBAAY,GAAY,KAAK,CAAC;;;;QAKb,WAAM,GAAY,KAAK,CAAC;;;;QA6BzC,YAAO,GAAG,CAAC,EAAW;YAC5B,EAAE,CAAC,eAAe,EAAE,CAAC;YACrB,EAAE,CAAC,cAAc,EAAE,CAAC;YAEpB,IAAI,CAAC,KAAK,EAAE,CAAC;SACd,CAAC;KA8DH;;;;IArFC,MAAM,IAAI;QACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;KACpB;;;;IAMD,MAAM,KAAK;QACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE;YACxC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;SACrB,EAAE,EAAE,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;KACnB;;;;IAgBD,QAAQ,CAAC,KAAoB;QAC3B,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;YACjD,IAAI,CAAC,KAAK,EAAE,CAAC;SACd;KACF;;;;IAKD,gBAAgB;QACd,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC,OAAO,CAAC,IAAI;YAC7D,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;SACpD,CAAC,CAAC;KACJ;IAEH,MAAM;QAEJ,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,SAAS,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC;QACzE,IAAI,WAAW,GAAG,iBAAiB,CAAC;QAClC,IAAI,IAAI,CAAC,MAAM,KAAK,YAAY,EAAE;YAChC,WAAW,GAAG,4BAA4B,CAAC;SAC5C;QACH,MAAM,iBAAiB,GAAG,IAAI,CAAC,YAAY,GAAG,2BAA2B,GAAG,eAAe,CAAC;QAC5F,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,IACxC,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,gBACV,OAAO,IAElB,iBAAW,IAAI,EAAE,eAAe,iBAAc,MAAM,GAAa,CAC1D,IACP,IAAI,CAAC;QAET,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAC,OAAO,IACnC,4DAAK,KAAK,EAAC,YAAY,IACrB,6DAAM,IAAI,EAAC,MAAM,GAAE,CACf,EACN,4DAAK,KAAK,EAAE,WAAW,IACrB,4DAAK,KAAK,EAAC,yBAAyB,IACjC,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACpE,0DAAG,KAAK,EAAC,mBAAmB,IAC1B,8DAAO,CACL,EACH,IAAI,CAAC,IAAI,IAAI,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,IAAI,CAAK,CACjF,EACN,4DAAK,KAAK,EAAE,iBAAiB,IAC3B,6DAAM,IAAI,EAAC,QAAQ,GAAE,CACjB,EACL,gBAAgB,CACb,CACD,EACP;KACH;;;;;;;","names":[],"sources":["src/components/alert/alert.css?tag=road-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["/*\n * Alert\n *\n * Index\n * - Alert\n * - Icon\n * - Description\n * - Feedback\n */\n\n\n/* ALERT\n -------------------- */\n\n:host {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  padding: 0.5rem 1rem 0.5rem 0.5rem;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-body-medium);\n  line-height: 1.25;\n  color: var(--road-on-surface);\n  border: 1px solid transparent;\n  border-radius: 0.25rem;\n}\n\n/* ICON\n -------------------- */\n\n.alert-icon {\n  flex-shrink: 0;\n  width: 2rem;\n  height: 2rem;\n  margin-right: 0.5rem;\n}\n\n/* ALERT TITLE\n -------------------- */\n\n.alert-title {\n  margin: 0.375rem 0 var(--road-spacing-03);\n  display: block;\n  font-weight: 700;\n}\n\n/* ALERT CONTAINER\n -------------------- */\n\n.alert-container {\n  position: relative;\n  display: flex;\n  align-items: start;\n  justify-content: space-between;\n  width: 100%;\n  flex-direction: column;\n}\n\n.alert-container-horizontal {\n  position: relative;\n  display: flex;\n  align-items: start;\n  justify-content: space-between;\n  width: 100%;\n  flex-direction: row;\n}\n\n/* ALERT LINK\n -------------------- */\n\n.alert-link {\n  display: block;\n  margin: 0;\n  margin: var(--road-spacing-03) 0 0;\n  color: var(--road-on-surface);\n  text-decoration: underline;\n}\n\n/* DESCRIPTION\n -------------------- */\n\n.alert-description {\n  margin: 0;\n}\n\n/* BUTTON CONTAINER\n -------------------- */\n\n.btn-container {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  align-self: stretch;\n  justify-content: center;\n  margin-top: var(--road-spacing-03);\n}\n\n.btn-container.justify-end {\n  padding-top: var(--road-spacing-07);\n  justify-content: end;\n}\n\n/* ALERT BUTTON\n -------------------- */\n\n.alert-button {\n  margin-left: var(--road-spacing-07);\n}\n\n/* ALERT CLOSE\n -------------------- */\n\n.alert-close {\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  font-weight: 700;\n  color: inherit;\n  cursor: pointer;\n  background: transparent;\n  border: 0;\n  appearance: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/* FEEDBACK\n -------------------- */\n\n/**\n * Info\n */\n\n:host(.alert-info) {\n  color: var(--road-on-info-surface);\n  background: var(--road-info-surface);\n  border-color: var(--road-info-outline);\n}\n\n:host(.alert-info) ::slotted(road-icon) {\n  fill: var(--road-info-default);\n}\n\n:host(.alert-info) ::slotted(road-button) {\n  display: block;\n  margin: 0.375rem 0 0;\n  color: var(--road-on-info-surface-inverse);\n  background: var(--road-info-surface-inverse);\n  fill: var(--road-on-info-surface-inverse);\n}\n\n:host(.alert-info) .alert-link {\n  color: var(--road-on-info-surface);\n}\n\n\n/**\n * Success\n */\n\n:host(.alert-success) {\n  color: var(--road-on-success-surface);\n  background: var(--road-success-surface);\n  border-color: var(--road-success-outline);\n}\n\n:host(.alert-success) ::slotted(road-icon) {\n  fill: var(--road-success-icon);\n}\n\n:host(.alert-success) ::slotted(road-button) {\n  display: block;\n  margin: 0.375rem 0 0;\n  color: var(--road-on-success-surface-inverse);\n  background: var(--road-success-surface-inverse);\n  fill: var(--road-on-success-surface-inverse);\n}\n\n:host(.alert-success) .alert-link {\n  color: var(--road-on-success-surface);\n}\n\n/**\n * Warning\n */\n\n:host(.alert-warning) {\n  color: var(--road-on-warning-surface);\n  background: var(--road-warning-surface);\n  border-color: var(--road-warning-outline);\n}\n\n:host(.alert-warning) ::slotted(road-icon) {\n  fill: var(--road-warning-icon);\n}\n\n:host(.alert-warning) ::slotted(road-button) {\n  display: block;\n  margin: 0.375rem 0 0;\n  color: var(--road-on-warning-surface-inverse);\n  background: var(--road-warning-surface-inverse);\n  fill: var(--road-on-warning-surface-inverse);\n}\n\n:host(.alert-warning) .alert-link {\n  color: var(--road-on-warning-surface);\n}\n\n/**\n * Danger\n */\n\n:host(.alert-danger) {\n  color: var(--road-on-danger-surface);\n  background: var(--road-danger-surface);\n  border-color: var(--road-danger-outline);\n}\n\n:host(.alert-danger) ::slotted(road-icon) {\n  fill: var(--road-danger-icon);\n}\n\n:host(.alert-danger) ::slotted(road-button) {\n  display: block;\n  margin: 0.375rem 0 0;\n  color: var(--road-on-danger-surface-inverse);\n  background: var(--road-danger-surface-inverse);\n  fill: var(--road-on-danger-surface-inverse);\n}\n\n:host(.alert-danger) .alert-link {\n  color: var(--road-on-danger-surface);\n}\n","import { Component, Host, Prop, h, Listen, Event, Method, EventEmitter, Element } from '@stencil/core';\nimport { navigationClose } from '../../../icons';\nimport { FeedbackColors } from '../../interface';\n\n/**\n * @slot icon - Icon of the alert, it should be a road-icon element.\n * @slot  - Message of the alert.\n */\n\n@Component({\n  tag: 'road-alert',\n  styleUrl: 'alert.css',\n  shadow: true,\n})\nexport class Alert {\n\n    /**\n     * Current reference of the modal\n     */\n    @Element() el!: HTMLRoadAlertElement;\n\n  /**\n   * Set the color of alert. e.g. info, success, warning, danger\n   */\n  @Prop() color: FeedbackColors = 'info';\n\n  /**\n   * position of the button \n   */\n    @Prop() layout?: 'horizontal' | 'vertical' |'default' = 'vertical';\n\n  /**\n   * Title display in the alert\n   */\n   @Prop() label?: string;\n\n   /**\n   * Button display in the alert\n   * `<road-button size=\"sm\">Label</road-button>`\n   */\n   @Prop() button?: string;\n\n   /**\n   * Text Link display in the alert\n   */\n   @Prop() link?: string;\n\n   /**\n    * url display in the link\n    */\n   @Prop() url?: string;\n\n  /**\n   * Show / hide close icon\n   */\n  @Prop() hasCloseIcon: boolean = false;\n\n  /**\n   * Set isOpen propertie to true to show the modal\n   */\n  @Prop({ mutable: true }) isOpen: boolean = false;\n\n  /**\n   * Indicate when closing the modal\n   */\n  @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n  /**\n   * Open the modal\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the modal\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n    this.el.addEventListener('transitionend', () => {\n      this.onClose.emit();\n    }, { once: true});\n  }\n\n  /**\n   * Close the dialog when clicking on the cross or layer\n   */\n  private onClick = (ev: UIEvent) => {\n    ev.stopPropagation();\n    ev.preventDefault();\n\n    this.close();\n  };\n\n  /**\n   * Close the dialog when press Escape key\n   */\n  @Listen('keyup', { target: 'document' })\n  onEscape(event: KeyboardEvent) {\n    if (event.key === 'Escape' || event.key === \"Esc\") {\n      this.close();\n    }\n  }\n\n  /**\n   * Call close function when clicking an element with data-dismiss=\"modal\" attribute\n   */\n  componentDidLoad() {\n    this.el.querySelectorAll('[data-dismiss=\"modal\"]').forEach(item => {\n      item.addEventListener('click', () => this.close());\n    });\n  }\n\nrender() {\n\n  const colorClass = this.color !== undefined ? `alert-${this.color}` : '';\n  let layoutClass = 'alert-container'; // valeur par défaut\n    if (this.layout === 'horizontal') {\n      layoutClass = 'alert-container-horizontal';\n    }\n  const btnContainerClass = this.hasCloseIcon ? 'btn-container justify-end' : 'btn-container';\n  const closeIconElement = this.hasCloseIcon ? (\n    <button\n      type=\"button\"\n      class=\"alert-close\"\n      onClick={this.onClick}\n      aria-label=\"Close\"\n    >\n      <road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon>\n    </button>\n  ) : null;\n\n  return (\n    <Host class={colorClass} role=\"alert\">\n      <div class=\"alert-icon\">\n        <slot name=\"icon\"/>\n      </div>\n      <div class={layoutClass}>\n        <div class=\"alert-container-content\">\n          {this.label && <span class=\"alert-title d-block\">{this.label}</span>}\n          <p class=\"alert-description\">\n            <slot/>\n          </p>\n          {this.link && <a href={this.url} class=\"alert-link link link-default\">{this.link}</a>}\n        </div>\n        <div class={btnContainerClass}>\n          <slot name=\"button\"/>\n        </div>\n        {closeIconElement}\n      </div>\n    </Host>\n  );\n}\n\n}"],"version":3}

package/dist/esm/road-area-code.entry.js

@@ -98,7 +98,7 @@ const RoadAreaCode = class {
         const labelId = this.selectId + '-label';
         const valueId = this.selectId + '-value';
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-        return (h(Host, { key: '5284737f6b5095e033ea92a070f097c5f484228c', class: this.sizes && `select-${this.sizes}` }, h("select", { key: '4dc67cb4f98cedadf7e9e37ac9ec21e7626e549e', class: `form-select-area has-value ${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 }, this.options && this.options.map(option => (h("option", { value: option.value, selected: option.selected }, option.label)))), h("label", { key: '91861b51dc10637ecf2a224209bd0b189fa50430', class: "form-select-area-label", id: labelId, htmlFor: this.selectId }, this.label), h("label", { key: '426fa27d96b289f7197e533fc350e0fcfe6e6522', class: "form-select-area-value", id: valueId, htmlFor: this.selectId }, "+", this.selectedValue), this.error && this.error !== '' && h("p", { key: 'c3d0eda1463b66ce02d6ae126454b27696283fbe', class: "invalid-feedback" }, this.error)));
+        return (h(Host, { key: 'a9c180581aad52a237a69f0260225358bed4c7d9', class: this.sizes && `select-${this.sizes}` }, h("select", { key: 'acf9b38d0a25646ea6f580d713ecadb12e0f3638', class: `form-select-area has-value ${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 }, this.options && this.options.map(option => (h("option", { value: option.value, selected: option.selected }, option.label)))), h("label", { key: 'd0e9b3b99c5ee593e93866e8c97587459fd520cd', class: "form-select-area-label", id: labelId, htmlFor: this.selectId }, this.label), h("label", { key: '363d2951d028db2c2a6efe1e09f8605a684e0fbc', class: "form-select-area-value", id: valueId, htmlFor: this.selectId }, "+", this.selectedValue), this.error && this.error !== '' && h("p", { key: '160c054f3ac74eb46b625cba25676e430a45f52f', class: "invalid-feedback" }, this.error)));
     }
     static get watchers() { return {
         "value": ["valueChanged"]

package/dist/esm/road-aspect-ratio.entry.js

@@ -16,7 +16,7 @@ const RoadAspectRatio = class {
         return `${w} / ${h}`;
     }
     render() {
-        return (h(Host, { key: 'c1c6ae9772b75e1696785e3c41459c68a3a6cbe1', style: { '--road-aspect-ratio': this.getCssRatio() } }, h("div", { key: '477454fdd1c450a55a0607f0d1b6a56c108e3b84', class: "aspect-ratio-wrapper" }, h("div", { key: '73b1e25932a094dc8c09b1954f925b9d579d0649', class: "aspect-ratio-content" }, h("slot", { key: 'c9df17df97851d1f00cdc2079185105040dcfc47' })))));
+        return (h(Host, { key: '0b5d1fb507a3e9a3e7a122d55809ed24ea0a917d', style: { '--road-aspect-ratio': this.getCssRatio() } }, h("div", { key: 'a012fb3c04da5357ea277074ce08a784400068f9', class: "aspect-ratio-wrapper" }, h("div", { key: 'cb533bcb6b16cb21112b96ad862739deffec11e1', class: "aspect-ratio-content" }, h("slot", { key: '8c1737d96c384f55f876c5a3588a79b2381b01a1' })))));
     }
 };
 RoadAspectRatio.style = RoadAspectRatioStyle0;

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

@@ -35,8 +35,8 @@ const Autocomplete = class {
         }
     }
     render() {
-        return (h(Host, { key: '6a7b7719e53b273bc42dd8052753d5e681d6956a' }, h("slot", { key: '019abf952b3a3e53a4074f94f0fb791abf4fb5c4' }), this.visible && this.options.length > 0 &&
-            h("ul", { key: '3da2bc611a92c411822456a6b161737da6b2a883', class: "autocomplete-list" }, this.options && this.options.map(option => (h("li", { class: "autocomplete-item", role: "menuitem", onClick: () => this.onClick(option.value, option.label), tabindex: "0" }, option.label))))));
+        return (h(Host, { key: '73780efbf9fbb131958cf95d82e917400b7cc7a7' }, h("slot", { key: 'cb9d4ba58dbee2802504aaaf49223d0905cebeb5' }), this.visible && this.options.length > 0 &&
+            h("ul", { key: '0b1f5afaf5a3d0fc088b0e3dc614cdad92d60031', class: "autocomplete-list" }, this.options && this.options.map(option => (h("li", { class: "autocomplete-item", role: "menuitem", onClick: () => this.onClick(option.value, option.label), tabindex: "0" }, option.label))))));
     }
     get el() { return getElement(this); }
 };

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

@@ -13,7 +13,7 @@ const Avatar = class {
     }
     render() {
         const sizeClass = this.size !== undefined ? `avatar-${this.size}` : '';
-        return (h(Host, { key: '809031e64b8792227b7a948393206b6de50dfb07', class: `${sizeClass}` }, h("slot", { key: 'b2399051f7515542c87d88f93ed33f390ed9b0b9' })));
+        return (h(Host, { key: 'a36243469cae6cdd1743417f76a261cb7a82d3fd', class: `${sizeClass}` }, h("slot", { key: '656c8a8119209d27897087be9c5a11ed0679dbed' })));
     }
 };
 Avatar.style = RoadAvatarStyle0;

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

@@ -27,7 +27,7 @@ const Badge = class {
         const colorClass = this.color !== undefined ? `badge-${this.color}` : '';
         const bubbleClass = this.bubble ? 'badge-bubble' : '';
         const sizeClass = this.size !== undefined ? `badge-${this.size}` : '';
-        return (h(Host, { key: '64a2f40fc51250d4b7091bba38c5cf734e760e59', class: `${colorClass} ${bubbleClass} ${sizeClass}` }, h("slot", { key: 'ef6b01447aa596b1ce0bbbc629879fc940d6ad17' })));
+        return (h(Host, { key: '272af446e438ac2c9df336d12cd0bfbc3485af77', class: `${colorClass} ${bubbleClass} ${sizeClass}` }, h("slot", { key: 'da72ac86b6650797cd4a4e16a5afe85e2090f325' })));
     }
 };
 Badge.style = RoadBadgeStyle0;
@@ -111,7 +111,7 @@ const Button = class {
         const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';
         const expandClass = this.expand ? 'btn-block' : '';
         const iconOnlyClass = this.iconOnly ? 'btn-icon' : '';
-        return (h(Host, { key: '353ab4e4ca1b5b3f7ece1355e060d6b19a677a45', class: [colorClass, sizeClass, expandClass, iconOnlyClass].filter(Boolean).join(' '), onClick: this.onClick, "aria-disabled": disabled ? 'true' : null }, h(TagType, Object.assign({ key: '3ec8936e02703cb0044c8cbf40bf0c23a48eaad1' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }), h("slot", { key: 'b4aa9975c778b2b50d5df3d83d95d9bae9fa3873', name: "start" }), h("slot", { key: 'b852b3dece59f85d1f97bec6b05e721cb5039606' }), h("slot", { key: 'ca7ec24ac0d462311d8e40ee626992138f47170c', name: "end" }))));
+        return (h(Host, { key: '79d849dd58e95934ff3ab4c9c5b5edd65fb4c899', class: [colorClass, sizeClass, expandClass, iconOnlyClass].filter(Boolean).join(' '), onClick: this.onClick, "aria-disabled": disabled ? 'true' : null }, h(TagType, Object.assign({ key: '764448aaf4c6c221563aa2d9b00c0b55c0fdea21' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }), h("slot", { key: '54a7978f6da8b45b48db0ab31cec66d592172e90', name: "start" }), h("slot", { key: '09f29be168b254fa9e3d73273938493d14cbca2f' }), h("slot", { key: '8a014e7ebeed34446a89729ff771ac0a7c97639e', name: "end" }))));
     }
     get el() { return getElement(this); }
 };
@@ -125,7 +125,7 @@ const Col = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("slot", { key: '0b3251e270d85e236cfb3e19d1652a99250a97f7' }));
+        return (h("slot", { key: 'a2621927906372b10b73caae4ddb4eca67ca3077' }));
     }
 };
 Col.style = RoadColStyle0;
@@ -291,7 +291,7 @@ const Counter = class {
     }
     render() {
         const dataCi = this.isDustbinVisible ? "road-dustbin" : "";
-        return (h("road-input-group", { key: '3bb999a2b567deabe7b48ed0583e06618665b6f7', class: this.size && `counter-${this.size}` }, h("road-button", { key: '64f881a027b7cb96fa788f6e0a42d6c3fdc3c538', slot: "prepend", size: this.size, onClick: this.decrease, class: this.leftIconClasses, "data-cy": "road-decrease" }, h("road-icon", { key: '56b8a9f64c76e84cadd1846bb4891048e8c5fc81', name: this.isDustbinVisible ? "delete-forever" : "navigation-add-less", ref: (el) => this.iconCounterLess = el, size: this.size, "data-cy": dataCi, role: "button" })), h("road-input", { key: '5e202c695ea45fa5862099f9a7ca9bc060d85e5e', ref: (el) => this.inputElement = el, type: "number", min: this.min.toString(), max: (this.max && this.max.toString()), step: this.step, value: this.value, onRoadChange: this.onRoadChange, onKeyUp: this.checkValue, "data-cy": "road-input-counter", readonly: this.readonly, label: "Quantit\u00E9" }), h("road-button", { key: '8dfd4ef49c6e29c8d69f7790f96c1aaa8284e9b1', slot: "append", size: this.size, onClick: this.increase, class: this.rightIconClasses, "data-cy": "road-increase" }, h("road-icon", { key: '908626b28f6de3bf65b717a998a1c3b574a7af6c', name: "navigation-add-more", size: this.size, role: "button" }))));
+        return (h("road-input-group", { key: '820b0cc9986dcb4e4c234f6c7046c14b3a3df095', class: this.size && `counter-${this.size}` }, h("road-button", { key: 'fab3f2d7e20855197f186f0e281d064befb95bbd', slot: "prepend", size: this.size, onClick: this.decrease, class: this.leftIconClasses, "data-cy": "road-decrease" }, h("road-icon", { key: '03c83781abc87777441b607b9722bf8d4ea30e03', name: this.isDustbinVisible ? "delete-forever" : "navigation-add-less", ref: (el) => this.iconCounterLess = el, size: this.size, "data-cy": dataCi, role: "button" })), h("road-input", { key: 'dd8911ac1c4b2c08ad876629962cd6b8b9531a61', ref: (el) => this.inputElement = el, type: "number", min: this.min.toString(), max: (this.max && this.max.toString()), step: this.step, value: this.value, onRoadChange: this.onRoadChange, onKeyUp: this.checkValue, "data-cy": "road-input-counter", readonly: this.readonly, label: "Quantit\u00E9" }), h("road-button", { key: '79bb668b3831df7ce76d1d3691f2c9ef6a3e56a8', slot: "append", size: this.size, onClick: this.increase, class: this.rightIconClasses, "data-cy": "road-increase" }, h("road-icon", { key: '035e4cacd9c843fd6b08a15ea40953bee8fcaa17', name: "navigation-add-more", size: this.size, role: "button" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -437,7 +437,7 @@ const Drawer = class {
         const drawerWidthValue = this.position === 'bottom' ? '100%' : `${this.drawerWidth}px`;
         const footerSlotElement = (_d = this.el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('slot[name="footer"]');
         const hasFooterContent = footerSlotElement instanceof HTMLSlotElement && footerSlotElement.assignedNodes().length > 0;
-        return (h(Host, { key: '93072c8fcb535cf6c89bd5e27ad1b3ed8e0f97eb', class: `${drawerIsOpenClass}  drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, h("div", { key: 'cb58c1f0b63aaad7cdf0bf7fb8f18926221774a6', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { key: 'ec9d9d1f3cc85a18083c42d6984fe7710f319895', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document", tabindex: "0" }, h("div", { key: '62f30769800c93b30192390e7cfbba1bab4c7112', class: "drawer-content" }, h("header", { key: 'c46be7930ae6e16d7987b7c4c4d3514c14da446a', class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle ? (h("h2", { class: "drawer-title" }, this.drawerTitle)) : (h("div", { class: "drawer-title" }, h("slot", { name: "title" }))), closeIconElement), h("div", { key: '2f88f1ffa5f1de87e65f10403d06fd6b2be0732c', class: `drawer-body ${removePaddingClass}` }, h("slot", { key: '1e4566f2b0ab9526a2105b677c52b3aa35498207' })), h("footer", { key: 'da00c01c908b22f1f1d134d36a37debf0921abfb', class: `drawer-footer ${removePaddingClass}`, style: { display: hasFooterContent ? 'block' : 'none' } }, h("slot", { key: '7083046d31f374bcd957bc5b8f45968f7c5cb05f', name: "footer" }))))));
+        return (h(Host, { key: '8a221daad83a03c6635059b21b807ea546f94033', class: `${drawerIsOpenClass}  drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, h("div", { key: '28de6daf4125334413589e02b3c568936fd54596', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { key: '555dd191eb27d3b5b0e97d1a0a29065e1d019195', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document", tabindex: "0" }, h("div", { key: 'ca12f58fd65bec534130f96de55781440a99a3f3', class: "drawer-content" }, h("header", { key: '3fbdbf60e39f0bb41de438fca2f90dd7368d2360', class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle ? (h("h2", { class: "drawer-title" }, this.drawerTitle)) : (h("div", { class: "drawer-title" }, h("slot", { name: "title" }))), closeIconElement), h("div", { key: '2c87df1cd3e5aeaff575e06a21cc95bb58e123d5', class: `drawer-body ${removePaddingClass}` }, h("slot", { key: '146a53a578800960a1ec69a9ad73fab9f7ec1d08' })), h("footer", { key: 'b67cf3313766e0b1ec4e903c536c68f8dfbc3cc9', class: `drawer-footer ${removePaddingClass}`, style: { display: hasFooterContent ? 'block' : 'none' } }, h("slot", { key: '2fa3f2e7b39ec3b03fba1a76ceb3a5c64d00c0e5', name: "footer" }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -454,7 +454,7 @@ const Grid = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("slot", { key: 'b9907edc844e7e9249634561fba9dfb7c3c5b260' }));
+        return (h("slot", { key: '8f4662a444e12323e10cda6ecc7a2fe9b2199ff3' }));
     }
 };
 Grid.style = RoadGridStyle0;
@@ -17831,7 +17831,7 @@ var lodash = {exports: {}};
 }.call(commonjsGlobal));
 }(lodash, lodash.exports));
 
-const inputCss = ".sc-road-input-h{--height:3rem;--border-radius:0.25rem;--input-text-align:left;--margin-bottom:1rem;position:relative;display:block;margin-bottom:var(--margin-bottom);font-family:var(--road-font, sans-serif);color:var(--road-grey-10)}.form-control.sc-road-input{box-sizing:border-box;display:block;width:100%;height:var(--height);padding:0.75rem 1rem 0;margin:0;font-size:var(--road-body-medium);color:var(--road-on-surface);text-align:var(--input-text-align);background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:var(--border-radius);box-shadow:none;appearance:none}.form-control[type=\"number\"].sc-road-input{appearance:textfield}.form-control.sc-road-input::-webkit-calendar-picker-indicator{margin-top:-0.75rem}.form-control.sc-road-input::-webkit-date-and-time-value{padding-top:0.625rem}.form-control.sc-road-input::placeholder{color:var(--road-on-surface-extra-weak);opacity:1}@media (hover: hover){.form-control.sc-road-input:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-control.sc-road-input:focus~.form-label.sc-road-input,.form-control[required].sc-road-input:valid~.form-label.sc-road-input,.form-control.has-value.sc-road-input~.form-label.sc-road-input,.form-control[type=\"date\"].sc-road-input~.form-label.sc-road-input,.form-control[type=\"time\"].sc-road-input~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:placeholder-shown~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:-ms-input-placeholder~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:not(:disabled):focus,.form-control[autofocus].sc-road-input,.form-control.sc-road-input:focus-visible{border-color:var(--road-input-outline-variant)}.form-control.sc-road-input:disabled,.form-control[readonly].sc-road-input{color:var(--road-on-surface-disabled);cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.form-label.sc-road-input{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.form-control.sc-road-input:required~.form-label.sc-road-input::after{color:var(--road-danger-default);content:\" *\"}.sc-road-input-h:has([disabled]) .form-label.sc-road-input{color:var(--road-on-surface-disabled)}.less-label.sc-road-input{padding-top:0}.input-xl.sc-road-input-h{--height:3.5rem}.input-xl.sc-road-input-h .form-control.sc-road-input{padding:1rem 1rem 0}.phone-number.sc-road-input-h .form-control.sc-road-input{padding-left:2rem}.phone-number.sc-road-input-h .form-label.sc-road-input{left:2rem}.input-xl.sc-road-input-h .form-label.sc-road-input{top:1rem}.input-xl.sc-road-input-h .form-control.sc-road-input:focus~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[autofocus].sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[required].sc-road-input:valid~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control.has-value.sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[type=\"date\"].sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[type=\"time\"].sc-road-input~.form-label.sc-road-input{transform:scale(0.75) translateY(-0.625rem)}.input-xl.sc-road-input-h .form-control.sc-road-input:placeholder-shown~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.invalid-feedback.sc-road-input{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-on-danger-surface)}.invalid-feedback.sc-road-input road-icon.sc-road-input{color:var(--road-danger-icon);margin-right:var(--road-spacing-02)}.form-control.is-invalid.sc-road-input,.was-validated.sc-road-input .form-control.sc-road-input:invalid{border-color:var(--road-danger-outline)}.form-control.is-invalid.sc-road-input~.invalid-feedback.sc-road-input,.was-validated.sc-road-input .form-control.sc-road-input:invalid~.invalid-feedback.sc-road-input{display:flex}.helper.sc-road-input{margin-top:0.5rem;font-size:var(--road-body-small);color:var(--road-on-surface-weak)}.form-control[type=\"password\"].sc-road-input~.checklist-password.sc-road-input .invalid.sc-road-input{color:var(--road-on-surface-weak)}";
+const inputCss = ".sc-road-input-h{--height:3rem;--border-radius:0.25rem;--input-text-align:left;--margin-bottom:1rem;position:relative;display:block;margin-bottom:var(--margin-bottom);font-family:var(--road-font, sans-serif);color:var(--road-grey-10)}.form-control.sc-road-input{box-sizing:border-box;display:block;width:100%;height:var(--height);padding:0.75rem 1rem 0;margin:0;font-size:var(--road-body-medium);color:var(--road-on-surface);text-align:var(--input-text-align);background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:var(--border-radius);box-shadow:none;appearance:none}.form-control[type=\"number\"].sc-road-input{appearance:textfield}.form-control.sc-road-input::-webkit-calendar-picker-indicator{margin-top:-0.75rem}.form-control.sc-road-input::-webkit-date-and-time-value{padding-top:0.625rem}.form-control.sc-road-input::placeholder{color:var(--road-on-surface-extra-weak);opacity:1}@media (hover: hover){.form-control.sc-road-input:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-control.sc-road-input:focus~.form-label.sc-road-input,.form-control[required].sc-road-input:valid~.form-label.sc-road-input,.form-control.has-value.sc-road-input~.form-label.sc-road-input,.form-control[type=\"date\"].sc-road-input~.form-label.sc-road-input,.form-control[type=\"time\"].sc-road-input~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:placeholder-shown~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:-ms-input-placeholder~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:not(:disabled):focus,.form-control[autofocus].sc-road-input,.form-control.sc-road-input:focus-visible{border-color:var(--road-input-outline-variant)}.form-control.sc-road-input:disabled,.form-control[readonly].sc-road-input{color:var(--road-on-surface-disabled);cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.form-label.sc-road-input{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.form-control.sc-road-input:required~.form-label.sc-road-input::after{color:var(--road-danger-default);content:\" *\"}.sc-road-input-h:has([disabled]) .form-label.sc-road-input{color:var(--road-on-surface-disabled)}.less-label.sc-road-input{padding-top:0}.input-xl.sc-road-input-h{--height:3.5rem}.input-xl.sc-road-input-h .form-control.sc-road-input{padding:1rem 1rem 0}.phone-number.sc-road-input-h .form-control.sc-road-input{padding-left:2rem}.phone-number.sc-road-input-h .form-label.sc-road-input{left:2rem}.input-xl.sc-road-input-h .form-label.sc-road-input{top:1rem}.input-xl.sc-road-input-h .form-control.sc-road-input:focus~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[autofocus].sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[required].sc-road-input:valid~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control.has-value.sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[type=\"date\"].sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[type=\"time\"].sc-road-input~.form-label.sc-road-input{transform:scale(0.75) translateY(-0.625rem)}.input-xl.sc-road-input-h .form-control.sc-road-input:placeholder-shown~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.invalid-feedback.sc-road-input{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-on-danger-surface)}.invalid-feedback.sc-road-input road-icon.sc-road-input{color:var(--road-danger-icon);margin-right:var(--road-spacing-02)}.form-control.is-invalid.sc-road-input,.was-validated.sc-road-input .form-control.sc-road-input:invalid{border-color:var(--road-danger-outline)}.form-control.is-invalid.sc-road-input~.invalid-feedback.sc-road-input,.was-validated.sc-road-input .form-control.sc-road-input:invalid~.invalid-feedback.sc-road-input{display:flex}.form-control.is-valid.sc-road-input,.was-validated.sc-road-input .form-control.sc-road-input:valid{border-color:var(--road-success-outline)}.helper.sc-road-input{margin-top:0.5rem;font-size:var(--road-body-small);color:var(--road-on-surface-weak)}.form-control[type=\"password\"].sc-road-input~.checklist-password.sc-road-input .invalid.sc-road-input{color:var(--road-on-surface-weak)}";
 const RoadInputStyle0 = inputCss;
 
 const Input = class {
@@ -17901,6 +17901,10 @@ const Input = class {
          * Label for the field
          */
         this.label = '';
+        /**
+       * The valid fields adopt an appearance that helps the user confirm that their data is formatted properly.
+       */
+        this.success = false;
         /**
          * Set the amount of time, in milliseconds, to wait to trigger the `roadChange` event after each keystroke.
          */
@@ -18034,11 +18038,12 @@ const Input = class {
         const hasValueClass = this.value !== '' && this.value !== null ? 'has-value' : '';
         const lessLabelClass = this.label !== '' ? '' : 'less-label';
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-        return (h(Host, { key: 'd019b1873a3e1c5757c977ae55192cdc0a66c4eb', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}`, value: value, blockdecimal: this.blockdecimal }, h("input", { key: '37a9106a95c0f211fce126474d5cb44a8160173d', class: `form-control ${hasValueClass} ${isInvalidClass} ${lessLabelClass}`, id: this.inputId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, enterKeyHint: this.enterkeyhint, autoFocus: this.autofocus, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.type === 'number' ? (event) => this.handleKeyDown(event) : undefined, "data-cy": 'road-input', ref: el => (this.inputEl = el) }), h("label", { key: '4dbcf9261d01528924480686246e9e1bd0b7b1fe', class: "form-label", id: labelId, htmlFor: this.inputId }, this.label), this.error && this.error !== '' && (Array.isArray(this.error)
+        const isValidClass = this.success == true ? 'is-valid' : '';
+        return (h(Host, { key: 'e1c39fcb1d557fa2317201767d3d8ab78f9d3a49', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}`, value: value, blockdecimal: this.blockdecimal }, h("input", { key: '5ae23298f7781fa0480e1d34d50add334f1ab10f', class: `form-control ${hasValueClass} ${isInvalidClass} ${isValidClass} ${lessLabelClass}`, id: this.inputId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, enterKeyHint: this.enterkeyhint, autoFocus: this.autofocus, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.type === 'number' ? (event) => this.handleKeyDown(event) : undefined, "data-cy": 'road-input', ref: el => (this.inputEl = el) }), h("label", { key: 'd6f5b0aa7e14eb4c06fb3af037f9bda656a98282', class: "form-label", id: labelId, htmlFor: this.inputId }, this.label), this.error && this.error !== '' && (Array.isArray(this.error)
             ? // Si error est un tableau, on itère et génère un <p> pour chaque élément
                 this.error.map((err, index) => (h("p", { key: index, class: "invalid-feedback" }, h("road-icon", { slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), err.trim(), " ")))
             : // Si error est une chaîne, on la divise avec split et génère un <p> pour chaque élément
-                this.error.split(',').map((err, index) => (h("p", { key: index, class: "invalid-feedback" }, h("road-icon", { slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), err.trim(), " ")))), this.helper && this.helper !== '' && h("p", { key: 'ee3378bbe749156f5348babd0a20032f576357b8', class: "helper" }, this.helper), this.type && this.type == 'password' && h("slot", { key: 'a69022948c4fb3d15cdad7666d14533320b70215', name: "checklistPassword" })));
+                this.error.split(',').map((err, index) => (h("p", { key: index, class: "invalid-feedback" }, h("road-icon", { slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), err.trim(), " ")))), this.helper && this.helper !== '' && h("p", { key: '049438b598d8a81b1d8bdadfbd615f66914db3e1', class: "helper" }, this.helper), this.type && this.type == 'password' && h("slot", { key: 'f804b3b5727fa91623defc4f5209d865bc461f21', name: "checklistPassword" })));
     }
     static get watchers() { return {
         "debounce": ["debounceChanged"],
@@ -18106,7 +18111,7 @@ const InputGroup = class {
             ? `size-${this.el.querySelector('road-input').sizes}`
             : '';
         const disabledClass = this.disabled ? 'is-disabled' : '';
-        return (h("div", { key: 'e5669c39b4c4d0d760797fac436e3f412bd98484', class: `input-group ${errorClass} ${disabledClass} ${sizeClass}` }, h("div", { key: 'e7b9878ffaefe2c47ab335e622cf0a4055463494', class: "input-group-prepend" }, h("slot", { key: '058abc4cf531ebc2618d00d003e247056b69efc6', name: "prepend" })), h("slot", { key: '173e96ad66826900cabf549e73da58c16ed0be52' }), h("div", { key: '6cc0416927fd6c8cb103dda53dfe08028ec2f0e0', class: "input-group-append" }, h("slot", { key: '5c860ee978a4eeceb0bb51e060d02783d94d6428', name: "append" }))));
+        return (h("div", { key: 'c789f52752140cc0f396a8e2e2fcf9725ca974d2', class: `input-group ${errorClass} ${disabledClass} ${sizeClass}` }, h("div", { key: '41870e22ddc72cd42c6b737962c11e075af78f91', class: "input-group-prepend" }, h("slot", { key: '80322c2acb0bfe220cef11df0a7fd03aad98186a', name: "prepend" })), h("slot", { key: '3b3c02a69bba482658a95f26fa46cb365ab373a5' }), h("div", { key: '2551b5848533d7564872892e04380a68216a4979', class: "input-group-append" }, h("slot", { key: 'c030afa5616bf26d7bcf99f09adc644fc2eeb2ca', name: "append" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -18169,13 +18174,13 @@ const Item = class {
                 target,
             };
         const showDetail = detail !== undefined && detail;
-        return (h(Host, { key: '9259fa99977924426712f7ee15a5682f02169405', "aria-disabled": disabled ? 'true' : null, class: {
+        return (h(Host, { key: '0aea3486ca34a04bfa7e0690181466e0f563ecdd', "aria-disabled": disabled ? 'true' : null, class: {
                 [`item-lines-${lines}`]: lines !== undefined,
-            } }, h(TagType, Object.assign({ key: '9cb8745d6101b92e3e78b109162ab553264c77b1' }, attrs, { class: {
+            } }, h(TagType, Object.assign({ key: 'a2b491a400eb88b4af1ac7a26a5a00e32fde08cb' }, attrs, { class: {
                 'item-native': true,
                 'item-active': this.active,
                 [`layout-${layout}`]: layout !== undefined,
-            }, part: "native", disabled: disabled }), h("slot", { key: '3bd615ec7ca9a34c52d48e0064fff1c20201fbc4', name: "start" }), h("div", { key: '686b9fe5bea511fc6c5dbdbbf54b357242fb5eae', class: "item-inner" }, h("div", { key: 'f443d8c131f47e3b1a884c038f02ff16fb787b5e', class: "input-wrapper" }, h("slot", { key: '0c694f293f2cb663360c092991e047ece261e11d' }), h("div", { key: '3b63e2654c7b5d07bede2920c2ad9bcc652d139c', class: "input-wrapper-info" }, h("road-label", { key: '383661f5be57349babd599419e0d39ab89aff47b', class: "input-wrapper-info-title" }, this.titleItem), h("p", { key: '238616644fa4771c4f1b037999f564889617a362', class: "input-wrapper-info-text" }, this.text))), h("slot", { key: 'c40987509754fd69dacb0728bd498871ea867c82', name: "end" }), showDetail && h("road-icon", { key: '75e65156e78c475adeddaf152ffe47dd6e55c24e', icon: detailIcon, lazy: false, class: "item-detail-icon" })))));
+            }, part: "native", disabled: disabled }), h("slot", { key: 'b78e532a469747c50da1368932d4f582eb87f28b', name: "start" }), h("div", { key: 'de095dfd6b972de3daebc9217842f3b5b2f593c8', class: "item-inner" }, h("div", { key: '9f43e5afd0c887e8f5df8fee8b6a4e95b205fbd0', class: "input-wrapper" }, h("slot", { key: '29497de23731ee53ee5e7665a03959e7fdc5df9b' }), h("div", { key: '16a247a409fa1803a0026c6923fc2b99b64b351b', class: "input-wrapper-info" }, h("road-label", { key: 'aefe0b6c06109bd0c17d405968344c24549332e7', class: "input-wrapper-info-title" }, this.titleItem), h("p", { key: '9296d6542fee43a933193b284bc7cc8a1e1c5048', class: "input-wrapper-info-text" }, this.text))), h("slot", { key: 'f66a05fb104f8ddf9553a99e8a75a59b0f24d9d7', name: "end" }), showDetail && h("road-icon", { key: '5eab0e8ca80203ec5d276a8403aba93746953b7e', icon: detailIcon, lazy: false, class: "item-detail-icon" })))));
     }
     get el() { return getElement(this); }
 };
@@ -18189,7 +18194,7 @@ const Label = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("slot", { key: '7b38ec4e17b246e6625f361419d19d8d34793609' }));
+        return (h("slot", { key: 'f59ac081c472add0201c72c48c5146a231bf05fd' }));
     }
 };
 Label.style = RoadLabelStyle0;
@@ -18203,9 +18208,9 @@ const List = class {
     }
     render() {
         const { lines } = this;
-        return (h(Host, { key: 'eed6c97be3b96a23d563989e1a848664ef2ae6ba', class: {
+        return (h(Host, { key: '2c2537547489eb97f46ccb6306d3d697773ab719', class: {
                 [`list-lines-${lines}`]: lines !== undefined,
-            } }, h("slot", { key: '1e96c87c4f15aca5f1a1d288019fd082467d5d67' })));
+            } }, h("slot", { key: 'f4449d3df668e2d77f83103bb2e87915ef101efc' })));
     }
 };
 List.style = RoadListStyle0;
@@ -18218,7 +18223,7 @@ const Row = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '09ff16b1adc520c9cdef2c6f896f3bdc39c955ce' }, h("slot", { key: 'cb9611e0e0d56ebd9b6eb9796fe80755d2cf1e1d' })));
+        return (h(Host, { key: 'c38bbf8641a80fc8ebb76c25f5cec3070127c569' }, h("slot", { key: 'b8459fd13efb02e5b04fb4558533f89f37cbe858' })));
     }
 };
 Row.style = RoadRowStyle0;
@@ -18232,7 +18237,7 @@ const Toolbar = class {
     }
     render() {
         const colorClass = this.color !== undefined ? `toolbar-${this.color}` : '';
-        return (h(Host, { key: '430839d8ecf890d663ebbf8158e5b191f56fad51', class: colorClass }, h("div", { key: '225454eab55f9c782d292b764e1b1f47281cbdbd', class: "toolbar-container" }, h("slot", { key: 'b670ec9458f059e031bb6d86fd6683dad1814e16', name: "start" }), h("slot", { key: 'b5f63c94f29945cff073d9a5cb28a55eff3e28d9', name: "primary" }), h("div", { key: '4f5101eb324a7420694bd6f867c484212b07d339', class: "toolbar-content" }, h("slot", { key: '3e7668f653254047299357108e0fbd296a79b0f3' })), h("slot", { key: '035eb2541ac67ed8b96fa0670a86831910ca910d', name: "secondary" }), h("slot", { key: 'd1ceacd507277daa4a837225e2c5f4c686e2e34d', name: "end" }))));
+        return (h(Host, { key: '4155097cf17050c6f1c9ddd4ad66c153f005fa45', class: colorClass }, h("div", { key: '74c8520959b7893b32c59744ad5486ed075d5ee1', class: "toolbar-container" }, h("slot", { key: '37605f2014027e0f12b5c80b2f57db710ae3b726', name: "start" }), h("slot", { key: '9162f18c3fc3fab8ce1491841889a2d9616ab0e9', name: "primary" }), h("div", { key: 'fdf739135446b6977e3d89537118a3417c0bfd86', class: "toolbar-content" }, h("slot", { key: '48434e192dd116fe52796dbe3f62d6bed0ac5a79' })), h("slot", { key: '5eee5c80975129ed993ce466e5d96efdd6854922', name: "secondary" }), h("slot", { key: 'c52c70da47aea897e50c7eab9a3fdfba5f9056e3', name: "end" }))));
     }
 };
 Toolbar.style = RoadToolbarStyle0;