@roadtrip/components 3.40.0 → 3.41.1

package/dist/collection/components/alert/alert.js

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { navigationClose } from "../../../icons";
 /**
  * @slot icon - Icon of the alert, it should be a road-icon element.
  * @slot  - Message of the alert.
@@ -9,10 +10,67 @@ export class Alert {
          * 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)));
     }
     static get is() { return "road-alert"; }
     static get encapsulation() { return "shadow"; }
@@ -54,6 +112,26 @@ export class Alert {
                 "reflect": false,
                 "defaultValue": "'info'"
             },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical' |'default'",
+                    "resolved": "\"default\" | \"horizontal\" | \"vertical\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "position of the button"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "layout",
+                "reflect": false,
+                "defaultValue": "'vertical'"
+            },
             "label": {
                 "type": "string",
                 "mutable": false,
@@ -129,8 +207,114 @@ export class Alert {
                 "setter": false,
                 "attribute": "url",
                 "reflect": false
+            },
+            "hasCloseIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show / hide close icon"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "has-close-icon",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isOpen": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set isOpen propertie to true to show the modal"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-open",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
+    static get events() {
+        return [{
+                "method": "onClose",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicate when closing the modal"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Open the modal",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Close the modal",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "keyup",
+                "method": "onEscape",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=alert.js.map

package/dist/collection/components/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../src/components/alert/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAIzD;;;GAGG;AAOH,MAAM,OAAO,KAAK;IALlB;QAOE;;WAEG;QACK,UAAK,GAAmB,MAAM,CAAC;KAyCxC;IAlBE,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAEzE,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAC,OAAO;YACnC,4DAAK,KAAK,EAAC,YAAY;gBACrB,6DAAM,IAAI,EAAC,MAAM,GAAE,CACf;YACN;gBACG,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAQ;gBACpE,0DAAG,KAAK,EAAC,mBAAmB;oBAC1B,8DAAO;oBACN,IAAI,CAAC,IAAI,IAAI,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,IAAI,CAAK,CACnF,CACA,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACH","sourcesContent":["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":"alert.js","sourceRoot":"","sources":["../../../src/components/alert/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AACvG,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGjD;;;GAGG;AAOH,MAAM,OAAO,KAAK;IALlB;QAYE;;WAEG;QACK,UAAK,GAAmB,MAAM,CAAC;QAEvC;;WAEG;QACO,WAAM,GAA0C,UAAU,CAAC;QAuBrE;;WAEG;QACK,iBAAY,GAAY,KAAK,CAAC;QAEtC;;WAEG;QACsB,WAAM,GAAY,KAAK,CAAC;QA0BjD;;WAEG;QACK,YAAO,GAAG,CAAC,EAAW,EAAE,EAAE;YAChC,EAAE,CAAC,eAAe,EAAE,CAAC;YACrB,EAAE,CAAC,cAAc,EAAE,CAAC;YAEpB,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC,CAAC;KA8DH;IAzFC;;OAEG;IAEH,KAAK,CAAC,IAAI;QACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,KAAK;QACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,GAAG,EAAE;YAC7C,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QACtB,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;IACpB,CAAC;IAYD;;OAEG;IAEH,QAAQ,CAAC,KAAoB;QAC3B,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;YAClD,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC;IACH,CAAC;IAED;;OAEG;IACH,gBAAgB;QACd,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YAChE,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QACrD,CAAC,CAAC,CAAC;IACL,CAAC;IAEH,MAAM;QAEJ,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACzE,IAAI,WAAW,GAAG,iBAAiB,CAAC,CAAC,oBAAoB;QACvD,IAAI,IAAI,CAAC,MAAM,KAAK,YAAY,EAAE,CAAC;YACjC,WAAW,GAAG,4BAA4B,CAAC;QAC7C,CAAC;QACH,MAAM,iBAAiB,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,eAAe,CAAC;QAC5F,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAC3C,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,gBACV,OAAO;YAElB,iBAAW,IAAI,EAAE,eAAe,iBAAc,MAAM,GAAa,CAC1D,CACV,CAAC,CAAC,CAAC,IAAI,CAAC;QAET,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAC,OAAO;YACnC,4DAAK,KAAK,EAAC,YAAY;gBACrB,6DAAM,IAAI,EAAC,MAAM,GAAE,CACf;YACN,4DAAK,KAAK,EAAE,WAAW;gBACrB,4DAAK,KAAK,EAAC,yBAAyB;oBACjC,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAQ;oBACpE,0DAAG,KAAK,EAAC,mBAAmB;wBAC1B,8DAAO,CACL;oBACH,IAAI,CAAC,IAAI,IAAI,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,IAAI,CAAK,CACjF;gBACN,4DAAK,KAAK,EAAE,iBAAiB;oBAC3B,6DAAM,IAAI,EAAC,QAAQ,GAAE,CACjB;gBACL,gBAAgB,CACb,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEA","sourcesContent":["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}"]}

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

@@ -10,15 +10,23 @@ export default {
     color: {
       description: "Set the color of alert. e.g. info, success, warning, danger",
       options: ['info', 'success', 'warning', 'danger'],
-      control: {
-        type: 'radio',
-      },
+      control: { type: 'radio' },
+    },
+    layout: {
+      description: "For the button position",
+      options: ['vertical', 'horizontal'],
+      control: { type: 'radio' },
     },
     icon: {
       description: "Icon of the alert, it should be a road-icon element.",
       options: list,
-      control: {
-        type: 'select',
+      control: { type: 'select' },
+    },
+    'has-close-icon': {
+      description: "Show / hide close icon",
+      control: 'boolean',
+      table: {
+        defaultValue: { summary: 'false' },
       },
     },
     link: {
@@ -26,7 +34,7 @@ export default {
       control: 'text',
     },
     button: {
-      description: "Button display in the alert\n`<road-button size=\"sm\">Label</road-button>`",
+      description: "Text of the button slot\n(slot name=\"button\")",
       control: 'text',
     },
     label: {
@@ -44,18 +52,30 @@ export default {
   },
   args: {
     color: 'info',
+    layout: 'vertical',
     icon: `alert-info`,
-    button: ``,
+    label: `Titre`,
+    button: ``, // vide par défaut
     ' ': `Information`,
+    'has-close-icon': null,
   },
 };
 
 const Template = (args) => html`
-<road-alert color="${ifDefined(args.color)}" label="${ifDefined(args.label)}" link="${ifDefined(args.link)}" url="${ifDefined(args.url)}">
-  <road-icon slot="icon" name="${ifDefined(args.icon)}" role="img"></road-icon>
-  ${unsafeHTML(args[' '])}
-  ${unsafeHTML(args.button)}
-</road-alert>
+  <road-alert
+    color="${ifDefined(args.color)}"
+    layout="${ifDefined(args.layout)}"
+    label="${ifDefined(args.label)}"
+    link="${ifDefined(args.link)}"
+    url="${ifDefined(args.url)}"
+    has-close-icon="${ifDefined(args['has-close-icon'])}" 
+  >
+    <road-icon slot="icon" name="${ifDefined(args.icon)}" role="img"></road-icon>
+    ${unsafeHTML(args[' '])}
+    ${args.button
+      ? html`<road-button size="sm" slot="button" class="m-0">${args.button}</road-button>`
+      : ''}
+  </road-alert>
 `;
 
 export const Playground = Template.bind({});
@@ -63,6 +83,7 @@ Playground.args = {
   color: 'info',
   icon: `alert-info`,
   ' ': `Information`,
+  button: `Action`,
 };
 
 export const Success = Template.bind({});
@@ -70,6 +91,7 @@ Success.args = {
   color: 'success',
   icon: `alert-success`,
   ' ': `Success`,
+  button: `OK`,
 };
 
 export const Warning = Template.bind({});
@@ -85,3 +107,12 @@ Danger.args = {
   icon: `alert-danger`,
   ' ': `Danger`,
 };
+
+export const Horizontal = Template.bind({});
+Horizontal.args = {
+  color: 'info',
+  icon: `alert-info`,
+  ' ': `Information`,
+  button: `Action`,
+  layout: 'horizontal'
+};

package/dist/collection/components/area-code/area-code.js

@@ -87,7 +87,7 @@ export class RoadAreaCode {
         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 is() { return "road-area-code"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/aspect-ratio/aspect-ratio.js

@@ -11,7 +11,7 @@ export class RoadAspectRatio {
         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' })))));
     }
     static get is() { return "road-aspect-ratio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/autocomplete/autocomplete.js

@@ -31,8 +31,8 @@ export class Autocomplete {
         }
     }
     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))))));
     }
     static get is() { return "road-autocomplete"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/avatar/avatar.js

@@ -11,7 +11,7 @@ export class Avatar {
     }
     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' })));
     }
     static get is() { return "road-avatar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/badge/badge.js

@@ -21,7 +21,7 @@ export class Badge {
         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' })));
     }
     static get is() { return "road-badge"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/banner/banner.js

@@ -28,7 +28,7 @@ export class Banner {
     }
     render() {
         const bannerIsOpenClass = this.isOpen ? 'banner-open' : '';
-        return (h(Host, { key: '4d49fae1622403ba54ebbc2eca8e07d56644fa03', class: bannerIsOpenClass }, h("div", { key: 'f61d750fcb78721f8b8f420b77557393c660cb5d' }, h("span", { key: 'b4e13489b0556fa523c1ba3d07c479d8b6e26313', class: "banner-open-label" }, this.label), this.link && h("a", { key: 'b1eeb51ac02e37aeda15c1bf263ed30b71d1fbd0', href: this.url, class: "banner-open-link" }, this.link), h("button", { key: '57f443865461c27103bfbaea56bb7ce134f39b79', type: "button", class: "banner-close", onClick: this.onClick, "aria-label": "closed" }, h("road-icon", { key: 'adf3326dad26eb587666707695a0d82bd0f985e4', icon: navigationClose, size: "md" })))));
+        return (h(Host, { key: 'f1658b8509590ec8c76dbd0a4a04fb7c4b200277', class: bannerIsOpenClass }, h("div", { key: 'b17259ee98bb232c81aa0eb32250be7b8db8f6fe' }, h("span", { key: '07226e7728ae246d5c3f9c15737d77a52912a867', class: "banner-open-label" }, this.label), this.link && h("a", { key: '70dddd7a3782c10ef65aa100f96732e791ae913b', href: this.url, class: "banner-open-link" }, this.link), h("button", { key: '79eecde11b356d2cdfa4f5ea3292b50bd55cac47', type: "button", class: "banner-close", onClick: this.onClick, "aria-label": "closed" }, h("road-icon", { key: 'c2e0b9079e37ff4062fdd7694c33f8ab8f95150c', icon: navigationClose, size: "md" })))));
     }
     static get is() { return "road-banner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -79,7 +79,7 @@ export class Button {
         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" }))));
     }
     static get is() { return "road-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -51,7 +51,7 @@ export class Button {
     render() {
         const TagType = this.href === undefined ? 'button' : 'a';
         const positionClass = this.position !== undefined ? `position-${this.position}` : '';
-        return (h(Host, { key: '938acf5a3e44873d4a569d8cd4094bcbf62ce7ea', onClick: this.onClick, class: `${positionClass}` }, h(TagType, { key: '466e5439251ec22e926f71838965dc91dc2b8a23', class: "button-native", part: "native", onFocus: this.onFocus, onBlur: this.onBlur }, h("slot", { key: '228e1c27116209bf5313d72c5cb02f154fc19260', name: "start" }), h("slot", { key: '2798856c774a56592061acea33db051c0ff88340' }))));
+        return (h(Host, { key: 'c92dd334acedc9c577901d339dfa121b63c0d8d0', onClick: this.onClick, class: `${positionClass}` }, h(TagType, { key: '10398fbc53a8e72cfc12975c6351dfe5430af311', class: "button-native", part: "native", onFocus: this.onFocus, onBlur: this.onBlur }, h("slot", { key: '22d572c54bd1defb07f45426f0bbab05666feb83', name: "start" }), h("slot", { key: 'aad19f6d9af9b534ae7aa36485639a928c77d287' }))));
     }
     static get is() { return "road-button-floating"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card/card.js

@@ -57,7 +57,7 @@ export class Card {
     render() {
         const { elevation } = this;
         const elevationClass = this.elevation ? `card-elevation-${elevation}` : ``;
-        return (h(Host, { key: 'ffbda1214eff7cb57679b63404dabc2cffc7bd97', class: `${elevationClass}` }, this.renderCard()));
+        return (h(Host, { key: 'f5bd5b9245b805dbd174a96b76b349af87e4e938', class: `${elevationClass}` }, this.renderCard()));
     }
     static get is() { return "road-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/carousel/carousel.js

@@ -270,7 +270,7 @@ export class Carousel {
         });
     }
     render() {
-        return (h(Host, { key: '6449f5e58d3e1a7baf245b033a6a40acef669404', class: "swiper-container", tabindex: "0" }, h("div", { key: '8f9d9f5904bb748ef003a950ab36ab1c79a6456f', class: "swiper-wrapper" }, h("slot", { key: 'e9cbe92181342bab76e895601b37fd05853143e5' })), this.pager && h("div", { key: '2cecb4484335481e87198f36a7e2aebbed48cfd7', class: "swiper-pagination", ref: el => this.paginationEl = el }), this.arrows && (h("div", { key: '0388684ad428f8e18c3e9e4098cf23f99ec5fd1a', role: "button", class: "swiper-button-prev", tabindex: "0", "aria-label": "Previous slide", onClick: () => this.slidePrev() }, h("road-icon", { key: '5f8a74db627f7d35889fe49ea4aa575b39c87edd', icon: navigationChevron, rotate: "180" }))), this.arrows && (h("div", { key: 'ed352be39dd46d2b8244529836497c5e960f7bb6', role: "button", class: "swiper-button-next", tabindex: "0", "aria-label": "Next slide", onClick: () => this.slideNext() }, h("road-icon", { key: '8ec1e89b91cd14b5ff0d32eb496b56fa6015803e', icon: navigationChevron })))));
+        return (h(Host, { key: 'ade421fc79d745727fe78ca3e95fe16e3415137e', class: "swiper-container", tabindex: "0" }, h("div", { key: 'd52f527ab0a2a4bd64e2098cc588f3ae6b874bcb', class: "swiper-wrapper" }, h("slot", { key: '0f9426dca0b1ba1341793bd04e847f261f2c1046' })), this.pager && h("div", { key: '3479c07552381ba5a162e012b52fc7da06f41172', class: "swiper-pagination", ref: el => this.paginationEl = el }), this.arrows && (h("div", { key: '9a9b215a9e21380b57b75e4ba371c2c0e2176d56', role: "button", class: "swiper-button-prev", tabindex: "0", "aria-label": "Previous slide", onClick: () => this.slidePrev() }, h("road-icon", { key: '1f78835d575dcad28f3bd6cf55a9f0d34d90f809', icon: navigationChevron, rotate: "180" }))), this.arrows && (h("div", { key: '287a27ab8483e6833bd27aeceeb62d51313ee606', role: "button", class: "swiper-button-next", tabindex: "0", "aria-label": "Next slide", onClick: () => this.slideNext() }, h("road-icon", { key: 'de2b38ddb9afd1e8140f1233a9da42ae12b4793e', icon: navigationChevron })))));
     }
     static get is() { return "road-carousel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/carousel-item/carousel-item.js

@@ -4,10 +4,10 @@ import { Host, h } from "@stencil/core";
  */
 export class CarouselItem {
     render() {
-        return (h(Host, { key: '5351b52cd1a420fdc954e510a9d5cb04eb93b692', class: {
+        return (h(Host, { key: '9505d58be5a5b79ca69b82808b1ffd06ba6bf5ae', class: {
                 'swiper-slide': true,
                 'swiper-zoom-container': true,
-            } }, h("slot", { key: 'bb54a4caad4c46b881ad0d8e09071adbd086bfac' })));
+            } }, h("slot", { key: 'e5c79e5ae3ca8cb8d69cd37a5b55496e04b26652' })));
     }
     static get is() { return "road-carousel-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/checkbox/checkbox.js

@@ -69,7 +69,7 @@ export class Checkbox {
         const labelId = this.checkboxId + '-label';
         const inverseClass = this.inverse && 'form-checkbox-inverse';
         const isInvalidClass = this.error !== undefined && !this.checked && this.error !== '' ? 'is-invalid' : '';
-        return (h(Host, { key: '29f815ab6351bdfe05a5e0c3e505c667ed1f41d5' }, h("input", { key: 'fc0a8ea36dd49755ee30a392e2d288e45848e540', class: `form-check-input ${isInvalidClass}`, type: "checkbox", id: this.checkboxId, name: this.name, required: this.required, disabled: this.disabled, indeterminate: this.indeterminate, checked: this.checked, 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: 'c56457ee2f3ab825780c7026eda32708a90d341b', class: `form-check-label ${inverseClass}`, id: labelId, htmlFor: this.checkboxId }, h("div", { key: '45d6b492f1156d5a7544eeba2327b297aea81632' }, this.label, " ", h("span", { key: '3f7d67a6b26bcd07a2e4ea632a15988f6218be63', class: "form-check-label-span" }, this.secondaryLabel), h("slot", { key: 'fae0610a4929379c9751e207c438a019033fc6cc' })), this.checked && !this.indeterminate && h("road-icon", { key: '2426aad5abfd67d57d3997800c5e320db7642478', class: "form-check-icon", icon: checkWide }), this.indeterminate && h("road-icon", { key: '180a14b27de4c0304dd38b88e09237a51ef24481', class: "form-check-icon", icon: navigationAddLess })), this.error && this.error !== '' && h("p", { key: '50f964421ef90d53ef663030cd64f02f6dbea7e4', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: 'd7119a7d7323df974d0af3c7ee30fed64f019f62', class: "helper" }, this.helper)));
+        return (h(Host, { key: '6c65aa807587f38c0d6fcba34c1606431dfa1997' }, h("input", { key: '6a3aa3c88b3fd4bdc23bc3881c7b72e8d7591964', class: `form-check-input ${isInvalidClass}`, type: "checkbox", id: this.checkboxId, name: this.name, required: this.required, disabled: this.disabled, indeterminate: this.indeterminate, checked: this.checked, 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: '3614ccc3ffbeacfd1e1b237da2b9c78ce7b8eecc', class: `form-check-label ${inverseClass}`, id: labelId, htmlFor: this.checkboxId }, h("div", { key: '5c3b311e9a816bd504780c2ba4009f5ab69d4b8e' }, this.label, " ", h("span", { key: 'cc588cbde6b8fbdea9ee0d861e265b994c8c5fa6', class: "form-check-label-span" }, this.secondaryLabel), h("slot", { key: 'd92e1174f5d8bc282938dde2532a065b4511f5e2' })), this.checked && !this.indeterminate && h("road-icon", { key: 'f4d26476c8686fc1d210378c581a5dedb6fb9ca3', class: "form-check-icon", icon: checkWide }), this.indeterminate && h("road-icon", { key: '2701bbb698f4558edb21e024d9f803d4227f1eec', class: "form-check-icon", icon: navigationAddLess })), this.error && this.error !== '' && h("p", { key: 'c39dc46b6aa89becc12a0277fddea6afe8c2f447', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: 'bbd1c57d3d9bc9c13664a829927cb26c560bf075', class: "helper" }, this.helper)));
     }
     static get is() { return "road-checkbox"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/chip/chip.js

@@ -25,7 +25,7 @@ export class Chip {
     }
     render() {
         const outlineClass = this.outline ? 'chip-outline' : '';
-        return (h(Host, { key: 'd62cb5ab9adddd6249a39b2f9e0aca4163fe2269', class: `${outlineClass} chip-${this.color} chip-${this.size}`, tabindex: "0" }, h("div", { key: '30a200dc140ac7de7a7c38ec5f3c5aebcf30ec06', class: "chip-description" }, h("slot", { key: '4e49f38d9ea9c4f5d7cc465473089b5fd3e2407e' })), this.hasCloseIcon && h("road-icon", { key: 'd04755df3acef36413f551ce3a76e3970be05205', class: "chip-close", icon: navigationClose })));
+        return (h(Host, { key: 'a3d6d90495d0d68b83b3ddbaed51378dedf4d63a', class: `${outlineClass} chip-${this.color} chip-${this.size}`, tabindex: "0" }, h("div", { key: 'a59a6d3451042a9d04cda50c82615fc59465fdf7', class: "chip-description" }, h("slot", { key: '4219f60dc0bd8fda2be79f0ecd2b21075054c046' })), this.hasCloseIcon && h("road-icon", { key: 'c9426711dcf68f15413a3cd1a4f0c65cd09aa548', class: "chip-close", icon: navigationClose })));
     }
     static get is() { return "road-chip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/col/col.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class Col {
     render() {
-        return (h("slot", { key: '0b3251e270d85e236cfb3e19d1652a99250a97f7' }));
+        return (h("slot", { key: 'a2621927906372b10b73caae4ddb4eca67ca3077' }));
     }
     static get is() { return "road-col"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/collapse/collapse.js

@@ -32,7 +32,7 @@ export class Collapse {
         const isOpenClass = this.isOpen ? 'collapse-open' : '';
         const buttonText = this.isOpen ? this.showLess : this.showMore;
         const centerClass = this.centered ? 'collapse-btn-centered' : '';
-        return (h(Host, { key: 'dea3ae21ebf2c66c4eab20547d7c7cf983c80e8c' }, h("slot", { key: '3e24d28e832b7c7fad8f44b5838e70729599a807' }), h("div", { key: 'd98b7a9fa8f06be816d7f606bb323dda6c6bbc35', class: `collapsed-content ${isOpenClass}` }, h("slot", { key: '9766bde1f82e72fcdb2029e881358198afecf8f6', name: "collapsed-content" })), h("div", { key: '526b71c8edb30c0969196e91123107d41f6101ff', class: `collapse-btn-wrapper ${centerClass}` }, h("road-button", { key: '9660be0a97c94df0457afe3d7e7490c298d5ae17', onClick: this.onClick, class: "collapse-btn btn-link" }, buttonText))));
+        return (h(Host, { key: 'dc4faac44b6213b807e1c1b935474e61ecffc229' }, h("slot", { key: '007dc5698f07c530416b96319c087c70cc2e0928' }), h("div", { key: '88f368b345b0d27a467bf120f4c461f409f43187', class: `collapsed-content ${isOpenClass}` }, h("slot", { key: '253c48a56447a867c6b9f99ec485d3f444166f5a', name: "collapsed-content" })), h("div", { key: 'ce988a1da4251516b4e6a751cd214931e608a586', class: `collapse-btn-wrapper ${centerClass}` }, h("road-button", { key: 'd52107ea32b0cf25f490e7b1d38425df9fdd7d58', onClick: this.onClick, class: "collapse-btn btn-link" }, buttonText))));
     }
     static get is() { return "road-collapse"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/content-card/content-card.js

@@ -14,7 +14,7 @@ export class ContentCard {
     }
     render() {
         const insetImageClass = this.insetImage ? '' : 'content-card-image';
-        return (h(Host, { key: '360033db419c221742546ef2d0e5929bb300efcd' }, h("road-img", { key: '013523dcbb0b7296401a07d602a367c6655d7c28', src: "https://s1.medias-norauto.fr/visuals/desktop/fr/banners/blog_loimontagne.png", alt: "loi montagne", class: insetImageClass }), h("div", { key: '6078dca52c93745082547511d6eec6ddb3470032', class: "content-card-description" }, h("road-label", { key: '89860de59698bb7053363602402e5702f6903680', class: "content-card-description-title" }, h("slot", { key: 'f911c334a22308ed45ceb5dfb9785f44ebd71b4c', name: "label" })), h("p", { key: 'abdcfc5bd409339e499de259c566cb1972359a68', class: "content-card-description-text" }, h("slot", { key: '542fd9cc261c1b01ea9eb328ac39d332aa6758c0', name: "description" })), h("div", { key: '976680d7b4e76b451497486b5fcc9fd2080ac9ad', class: "content-card-description-buttons" }, h("slot", { key: 'ed7f0248f86a76328a070cbcf52966587f0ac008' })))));
+        return (h(Host, { key: '0929d51b0a1629b1d983f114f1a0a5109db72d5b' }, h("road-img", { key: '289c2d4def77b4bae2f0ab1ce5e3569367b8bfcf', src: "https://s1.medias-norauto.fr/visuals/desktop/fr/banners/blog_loimontagne.png", alt: "loi montagne", class: insetImageClass }), h("div", { key: 'a22a7377c03e7b9f715b723ac454375785ee4765', class: "content-card-description" }, h("road-label", { key: 'e43c2c05a422a9aff793cf67ce7d3810689470b5', class: "content-card-description-title" }, h("slot", { key: '474ee1adb66d34157ad37b3a06546b8000d49a7a', name: "label" })), h("p", { key: 'd8cb29dba572569025b961e4fc08e51cc19fdeea', class: "content-card-description-text" }, h("slot", { key: '2751c5b213c615a8b4e70808da4ee5cdc3e7f26c', name: "description" })), h("div", { key: 'cce3d9833cda5f79b06c5f909af9fae197544204', class: "content-card-description-buttons" }, h("slot", { key: '2f75207ca66a7346c19f521c35ca8772ed3202c9' })))));
     }
     static get is() { return "road-content-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/counter/counter.js

@@ -154,7 +154,7 @@ export class Counter {
     }
     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" }))));
     }
     static get is() { return "road-counter"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/dialog/dialog.js

@@ -85,11 +85,11 @@ export class Dialog {
                     break;
             }
         }
-        return (h(Host, { key: '290c0636b8ef1edfd35e4273b16e9ac05bb088c7', class: `dialog ${modalIsOpenClass} ${modalhasClose}`, role: "alertdialog", "aria-modal": "true", tabindex: "-1", "aria-label": "dialogLabel" }, h("div", { key: 'e150afc757aaa616abba21261f5fc4e7a7035cdc', class: "dialog-overlay", onClick: this.hasCloseIcon === true ? this.onClick : undefined, tabindex: "-1" }), h("div", { key: '30dcf17bb1765dd295f9b5b38a18441b922ea6f2', class: "dialog-modal", role: "document", tabindex: "0" }, h("div", { key: 'a0ffb5263da02b6677f5ca4410601bed109fa524', class: "dialog-content" }, h("header", { key: 'f37da11d3b3b70fb4c7ee83bec7a289607ef4217', class: "dialog-header" }, this.hasCloseIcon
+        return (h(Host, { key: 'e2ee13cb0fd6330b23224504c717efe8c68df097', class: `dialog ${modalIsOpenClass} ${modalhasClose}`, role: "alertdialog", "aria-modal": "true", tabindex: "-1", "aria-label": "dialogLabel" }, h("div", { key: 'c5f3ecaae31debea9afe6a712308520cd092fc23', class: "dialog-overlay", onClick: this.hasCloseIcon === true ? this.onClick : undefined, tabindex: "-1" }), h("div", { key: 'b28e1225a56208c8ff7891856a49b171bf09f88b', class: "dialog-modal", role: "document", tabindex: "0" }, h("div", { key: 'd799e1b00205d54e96e52f2e95b63e4c4327db2f', class: "dialog-content" }, h("header", { key: 'a3d16ae59ee42a9a61f4849c779dbf2f2a8066c9', class: "dialog-header" }, this.hasCloseIcon
             ? h("button", { type: "button", class: "dialog-close", onClick: this.onClick, "aria-label": "Close" }, h("road-icon", { icon: navigationClose, "aria-hidden": "true" }))
-            : ''), h("div", { key: '9194a50bc0595a94170864de94f1ff1716693ee5', class: "dialog-body" }, this.color !== undefined
+            : ''), h("div", { key: 'fadeb8d0776e92809c1f4fdda9d24fe325640103', class: "dialog-body" }, this.color !== undefined
             ? h("road-icon", { class: "dialog-icon", part: "dialog-icon", color: this.color, icon: icon, "aria-hidden": "true" })
-            : '', h("h2", { key: 'cceab62ea959bd00196b3a1953c7f99495aa1d8a', class: "dialog-title" }, this.label), h("p", { key: '147c9dec3808c463a363cd30fb2ab5b26818c8d8', class: "dialog-description", id: "dialogDesc" }, this.description)), h("footer", { key: '8fc28a19c581eef87c45aae031902e27aeb9dc59', class: "dialog-footer" }, h("slot", { key: '5245e5168dcc7011f534d2c2901207ad0f08a617' }))))));
+            : '', h("h2", { key: '06cbf8264b6336cb98b19e7bda1a80fb7d7a9271', class: "dialog-title" }, this.label), h("p", { key: 'f82e151b413764289e3d430b76d987a8eaa1d7b3', class: "dialog-description", id: "dialogDesc" }, this.description)), h("footer", { key: 'cbc9e71ad7aed7eab7bca5d9818dcbceb3cbcce2', class: "dialog-footer" }, h("slot", { key: '41d4e4dd47ecf92e96396316e27ff8218ced5f2c' }))))));
     }
     static get is() { return "road-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/drawer/drawer.js

@@ -138,7 +138,7 @@ export class Drawer {
         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" }))))));
     }
     static get is() { return "road-drawer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown/dropdown.js

@@ -23,7 +23,7 @@ export class Dropdown {
         const positionClass = this.position ? `position-${this.position}` : '';
         const dropdownClass = this.position ? `dropdown-${this.position}` : '';
         const directionClass = this.direction ? `direction-${this.direction}` : '';
-        return (h("details", { key: '211f088489a5a72f91c44f5838094abd80070d7e', class: "dropdown", open: this.isOpen }, h("summary", { key: 'e0fbbc21fdf4e495f8cb350f4406e9b078c80a74', "aria-expanded": this.isOpen.toString(), tabindex: "0", role: "button", onClick: this.onClick, "tab-index": "0" }, h("div", { key: '5c212e3034b30a2ed9bf7f81e9184683c106142e', class: `d-flex ${positionClass}` }, h("div", { key: '6ca46e2494cd89ba85efc4a11aea6fb464dec232', class: `${isLightButtonDropDown} ${isMediumButtonDropDown}` }, h("road-icon", { key: 'd0ad2f329b888a9fd19aac3841f45e7d26c3e0bd', name: "navigation-more", class: "dropdown-button-icon", "aria-hidden": "true" })))), h("div", { key: 'a67a0e81ef1402bddb223545b3825e9cdf4a7c2b', class: `dropdown-menu ${directionClass} ${dropdownClass}` }, h("slot", { key: '3f135ccb24eb38de0961c28e83ed20154f33da77', name: "list" }))));
+        return (h("details", { key: '0b6d1adf874e559fb90a471aabda2c01090c48b9', class: "dropdown", open: this.isOpen }, h("summary", { key: '83139e232e4c74c84831d20e5ed32cea245b8102', "aria-expanded": this.isOpen.toString(), tabindex: "0", role: "button", onClick: this.onClick, "tab-index": "0" }, h("div", { key: 'd427dcd5a8c534a4fb1e3874cb2ac279d3b9a5f2', class: `d-flex ${positionClass}` }, h("div", { key: 'b9bbebff325eb4c2ed9e088b7064ead91b2c55f8', class: `${isLightButtonDropDown} ${isMediumButtonDropDown}` }, h("road-icon", { key: '72d9a1fd48cca91d8f16494d731898e3625e47e3', name: "navigation-more", class: "dropdown-button-icon", "aria-hidden": "true" })))), h("div", { key: '2434438ec14e86f8fb78378b3eb88f0a39abb6f2', class: `dropdown-menu ${directionClass} ${dropdownClass}` }, h("slot", { key: '1eb1bc0bdfdbaa13689e0552c8fa278381777863', name: "list" }))));
     }
     static get is() { return "road-dropdown"; }
     static get encapsulation() { return "shadow"; }