@roadtrip/components 3.37.0 → 3.38.1

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

@@ -96,12 +96,12 @@ const Tooltip = class {
         return triggers.includes(triggerType);
     }
     render() {
-        return (index.h(index.Host, { key: '9974df998afe22033c77d8a8c284b18fa1468e34', onMouseOver: this.onMouseOver, onMouseOut: this.onMouseOut, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur, tabindex: "0" // Makes the element focusable
+        return (index.h(index.Host, { key: 'ad1b13ff6747008a6039e26c77229e09c0424481', onMouseOver: this.onMouseOver, onMouseOut: this.onMouseOut, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur, tabindex: "0" // Makes the element focusable
             ,
-            "data-tooltip-position": this.position }, index.h("slot", { key: '15e3cc059e35c96f2e203de5de21e200e160fbb2', "aria-describedby": this.tooltipId }), index.h("div", { key: '46ba12db578600e5b3d6fc0e087e544c0de44063', part: "tooltip", id: this.tooltipId, class: {
+            "data-tooltip-position": this.position }, index.h("slot", { key: '55ab7033c6d5cbc3941c77faa0d9bab9a7a25c11', "aria-describedby": this.tooltipId }), index.h("div", { key: 'bb7b2d992d7a7a201eb6c6e70ee1d455407b7427', part: "tooltip", id: this.tooltipId, class: {
                 tooltip: true,
                 'tooltip-open': this.isOpen,
-            }, role: "tooltip", "aria-hidden": !this.isOpen ? 'true' : 'false' }, this.content, index.h("slot", { key: 'b25d32f47c23c2b530e4e637132b8a7408fac8ba', name: "tooltip-content" }))));
+            }, role: "tooltip", "aria-hidden": !this.isOpen ? 'true' : 'false' }, this.content, index.h("slot", { key: '6c8ea046ac67c764b0626b41ba3d6586615ef7bb', name: "tooltip-content" }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -15,6 +15,10 @@ export class Dialog {
          * Show / hide the close icon
          */
         this.hasCloseIcon = true;
+        /**
+         * Set the color of information dialog. e.g. info, success, warning, danger
+         */
+        this.color = 'info';
         /**
          * Close the dialog when clicking on the cross or layer
          */
@@ -81,11 +85,11 @@ export class Dialog {
                     break;
             }
         }
-        return (h(Host, { key: '585f4f16ab43fe79d33c999683203e6d10e3ffa5', class: `dialog ${modalIsOpenClass} ${modalhasClose}`, role: "alertdialog", "aria-modal": "true", tabindex: "-1", "aria-label": "dialogLabel" }, h("div", { key: 'b7e2a84719b84a5feb0cac721dd20b5007175f26', class: "dialog-overlay", onClick: this.hasCloseIcon === true ? this.onClick : undefined, tabindex: "-1" }), h("div", { key: '1da28c734c66f5661764b7984c8883b4b2f24473', class: "dialog-modal", role: "document", tabindex: "0" }, h("div", { key: '0fbdc11f8fa43fc52571a423b12486a22745b2bc', class: "dialog-content" }, h("header", { key: '6c00560182da0c434ecfe2897cebd91f715a937e', class: "dialog-header" }, this.hasCloseIcon
+        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
             ? h("button", { type: "button", class: "dialog-close", onClick: this.onClick, "aria-label": "Close" }, h("road-icon", { icon: navigationClose, "aria-hidden": "true" }))
-            : ''), h("div", { key: '1ae3985cdec1c5fb457744801871fc84df6d015f', class: "dialog-body" }, this.color !== undefined
+            : ''), h("div", { key: '9194a50bc0595a94170864de94f1ff1716693ee5', 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: 'c24ea765e3e64ae26ccc3eb0908b0efc63da5884', class: "dialog-title" }, this.label), h("p", { key: '754a7efb432ab20511326ceea3d0b9fe91860ea2', class: "dialog-description", id: "dialogDesc" }, this.description)), h("footer", { key: '240048df6011880999f5981269b35b8bdb64c555', class: "dialog-footer" }, h("slot", { key: '3a1edc953449d6c3df50e766a3fa06d7326e9062' }))))));
+            : '', 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' }))))));
     }
     static get is() { return "road-dialog"; }
     static get encapsulation() { return "shadow"; }
@@ -164,7 +168,8 @@ export class Dialog {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "'info'"
             },
             "icon": {
                 "type": "string",

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

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host } from '@stencil/core';\nimport { FeedbackColors } from '../../interface';\nimport { navigationClose, alertDangerOutline, alertInfoOutline, alertSuccessOutline, alertWarningOutline } from '../../../icons';\n\n/**\n * @slot  - Content of the footer dialog if it's an action dialog add action buttons here.\n *\n * @part dialog-icon - main icon of the dialog\n */\n\n@Component({\n  tag: 'road-dialog',\n  styleUrl: 'dialog.css',\n  shadow: true,\n})\nexport class Dialog {\n\n  /**\n   * Current reference of the dialog\n   */\n  @Element() el!: HTMLRoadDialogElement;\n\n  /**\n   * Set isOpen property to true to open the dialog\n   */\n  @Prop({ mutable: true }) isOpen: boolean = false;\n\n  /**\n   * Show / hide the close icon\n   */\n  @Prop() hasCloseIcon: boolean = true;\n\n  /**\n   * Set the color of information dialog. e.g. info, success, warning, danger\n   */\n  @Prop() color?: FeedbackColors;\n\n  /**\n   * override default icon\n   */\n   @Prop() icon?: string;\n\n  /**\n   * Text to the top\n   */\n  @Prop() label?: string;\n\n  /**\n   * Content description of the dialog\n   */\n  @Prop() description?: string;\n\n  /**\n   * Indicate when closing the dialog\n   */\n  @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n  /**\n   * Open the dialog\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the dialog\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\") && this.isOpen && this.hasCloseIcon) {\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\n  render() {\n    const modalIsOpenClass = this.isOpen ? 'dialog-open' : '';\n    const modalhasClose = this.hasCloseIcon ? 'dialog-has-close' : '';\n\n    let icon;\n\n    if(this.icon) {\n      icon = this.icon;\n    } else {\n      switch(this.color) {\n      case 'info':\n        icon = alertInfoOutline;\n        break;\n      case 'success':\n        icon = alertSuccessOutline;\n        break;\n      case 'warning':\n        icon = alertWarningOutline;\n        break;\n      case 'danger':\n        icon = alertDangerOutline;\n        break;\n      default:\n        icon = alertInfoOutline;\n        break;\n      }\n    }\n\n    return (\n      <Host class={`dialog ${modalIsOpenClass} ${modalhasClose}`} role=\"alertdialog\" aria-modal=\"true\" tabindex=\"-1\" aria-label=\"dialogLabel\">\n        <div class=\"dialog-overlay\" onClick={this.hasCloseIcon === true ? this.onClick : undefined} tabindex=\"-1\"></div>\n        <div class=\"dialog-modal\" role=\"document\" tabindex=\"0\">\n          <div class=\"dialog-content\">\n            <header class=\"dialog-header\">\n              {this.hasCloseIcon\n                ? <button type=\"button\" class=\"dialog-close\" onClick={this.onClick} aria-label=\"Close\"><road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon></button>\n                : ''}\n            </header>\n            <div class=\"dialog-body\">\n              {this.color !== undefined\n                ? <road-icon class=\"dialog-icon\" part=\"dialog-icon\" color={this.color} icon={icon} aria-hidden=\"true\"></road-icon>\n                : ''}\n              <h2 class=\"dialog-title\">{this.label}</h2>\n              <p class=\"dialog-description\" id=\"dialogDesc\">{this.description}</p>\n            </div>\n            <footer class=\"dialog-footer\">\n              <slot/>\n            </footer>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}"]}
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host } from '@stencil/core';\nimport { FeedbackColors } from '../../interface';\nimport { navigationClose, alertDangerOutline, alertInfoOutline, alertSuccessOutline, alertWarningOutline } from '../../../icons';\n\n/**\n * @slot  - Content of the footer dialog if it's an action dialog add action buttons here.\n *\n * @part dialog-icon - main icon of the dialog\n */\n\n@Component({\n  tag: 'road-dialog',\n  styleUrl: 'dialog.css',\n  shadow: true,\n})\nexport class Dialog {\n\n  /**\n   * Current reference of the dialog\n   */\n  @Element() el!: HTMLRoadDialogElement;\n\n  /**\n   * Set isOpen property to true to open the dialog\n   */\n  @Prop({ mutable: true }) isOpen: boolean = false;\n\n  /**\n   * Show / hide the close icon\n   */\n  @Prop() hasCloseIcon: boolean = true;\n\n  /**\n   * Set the color of information dialog. e.g. info, success, warning, danger\n   */\n  @Prop() color?: FeedbackColors = 'info';\n\n  /**\n   * override default icon\n   */\n   @Prop() icon?: string;\n\n  /**\n   * Text to the top\n   */\n  @Prop() label?: string;\n\n  /**\n   * Content description of the dialog\n   */\n  @Prop() description?: string;\n\n  /**\n   * Indicate when closing the dialog\n   */\n  @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n  /**\n   * Open the dialog\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the dialog\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\") && this.isOpen && this.hasCloseIcon) {\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\n  render() {\n    const modalIsOpenClass = this.isOpen ? 'dialog-open' : '';\n    const modalhasClose = this.hasCloseIcon ? 'dialog-has-close' : '';\n\n    let icon;\n\n    if(this.icon) {\n      icon = this.icon;\n    } else {\n      switch(this.color) {\n      case 'info':\n        icon = alertInfoOutline;\n        break;\n      case 'success':\n        icon = alertSuccessOutline;\n        break;\n      case 'warning':\n        icon = alertWarningOutline;\n        break;\n      case 'danger':\n        icon = alertDangerOutline;\n        break;\n      default:\n        icon = alertInfoOutline;\n        break;\n      }\n    }\n\n    return (\n      <Host class={`dialog ${modalIsOpenClass} ${modalhasClose}`} role=\"alertdialog\" aria-modal=\"true\" tabindex=\"-1\" aria-label=\"dialogLabel\">\n        <div class=\"dialog-overlay\" onClick={this.hasCloseIcon === true ? this.onClick : undefined} tabindex=\"-1\"></div>\n        <div class=\"dialog-modal\" role=\"document\" tabindex=\"0\">\n          <div class=\"dialog-content\">\n            <header class=\"dialog-header\">\n              {this.hasCloseIcon\n                ? <button type=\"button\" class=\"dialog-close\" onClick={this.onClick} aria-label=\"Close\"><road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon></button>\n                : ''}\n            </header>\n            <div class=\"dialog-body\">\n              {this.color !== undefined\n                ? <road-icon class=\"dialog-icon\" part=\"dialog-icon\" color={this.color} icon={icon} aria-hidden=\"true\"></road-icon>\n                : ''}\n              <h2 class=\"dialog-title\">{this.label}</h2>\n              <p class=\"dialog-description\" id=\"dialogDesc\">{this.description}</p>\n            </div>\n            <footer class=\"dialog-footer\">\n              <slot/>\n            </footer>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}"]}

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

@@ -28,6 +28,9 @@ export default {
       options: ['info', 'success', 'warning', 'danger'],
       control: { type: 'radio' },
       description: 'Sets the color theme of the dialog.',
+      table: {
+        defaultValue: { summary: 'info' },
+      },
     },
     icon: {
       options: list,

package/dist/collection/components/icon/svg/baby-seat-outline.svg

@@ -1 +1 @@
-<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="m46.14 19.425.061.21c.567 2.115-.229 4.398-2.048 5.633l-.185.12a644.195 644.195 0 0 0-6.065 3.785l1.817 5.69 5.655 2.952.139.077a3.143 3.143 0 0 1 1.404 1.775l4.645 14.61-1.163.393-.743.252-.008.003-.007.002c-3.108 1.006-6.431-.398-8.005-3.301l-.001-.003-2.565-4.757-.008-.015c-.229-.44-.596-.8-1.047-1.036h-.002l-6.912-3.617-.007-.004a5.123 5.123 0 0 1-2.46-2.94l-.001-.004-2.823-8.76-.034-.124a1.25 1.25 0 0 1 2.367-.764l.045.12 2.825 8.76c.216.658.667 1.19 1.248 1.5l6.91 3.617a4.952 4.952 0 0 1 2.1 2.08l2.562 4.756c.947 1.746 2.81 2.594 4.593 2.23l-3.89-12.24-.005-.012a.64.64 0 0 0-.311-.38h-.001l-6.569-3.43-2.714-8.498.804-.52c1.33-.857 4.591-2.894 6.914-4.325l.18-.123c.874-.651 1.271-1.84.919-2.965l-.001-.003-.174-.56-10.165 3.57a1.25 1.25 0 0 1-.828-2.359l12.613-4.43.94 3.035Z" /><path d="M34.75 16.5a5.25 5.25 0 1 0-10.5 0 5.25 5.25 0 0 0 10.5 0Zm2.5 0a7.75 7.75 0 1 1-15.5 0 7.75 7.75 0 0 1 15.5 0ZM14.695 15.788a1.25 1.25 0 0 1 1.48.784l.037.123 6.262 24.88.114.43c1.23 4.372 3.943 6.745 6.473 6.745H37a1.25 1.25 0 0 1 0 2.5h-7.939c-4.17 0-7.51-3.703-8.885-8.588l-.127-.477-6.26-24.88-.026-.125a1.25 1.25 0 0 1 .932-1.392Z" /></svg>
+<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="m46.14 19.425.061.21c.567 2.115-.229 4.398-2.048 5.633l-.185.12a644.195 644.195 0 0 0-6.065 3.785l1.817 5.69 5.655 2.952.139.077a3.143 3.143 0 0 1 1.404 1.775l4.645 14.61-1.163.393-.743.252-.008.003-.007.002c-3.108 1.006-6.431-.398-8.005-3.301l-.001-.003-2.565-4.757-.008-.015c-.229-.44-.596-.8-1.047-1.036h-.002l-6.912-3.617-.007-.004a5.123 5.123 0 0 1-2.46-2.94l-.001-.004-2.823-8.76-.034-.124a1.25 1.25 0 0 1 2.367-.764l.045.12 2.825 8.76c.216.658.667 1.19 1.248 1.5l6.91 3.617a4.952 4.952 0 0 1 2.1 2.08l2.562 4.756c.947 1.746 2.81 2.594 4.593 2.23l-3.89-12.24-.005-.012a.64.64 0 0 0-.311-.38h-.001l-6.569-3.43-2.714-8.498.804-.52c1.33-.857 4.591-2.894 6.914-4.325l.18-.123c.874-.651 1.271-1.84.919-2.965l-.001-.003-.174-.56-10.165 3.57a1.25 1.25 0 0 1-.828-2.359l12.613-4.43.94 3.035Z"/><path d="M34.75 16.5a5.25 5.25 0 1 0-10.5 0 5.25 5.25 0 0 0 10.5 0Zm2.5 0a7.75 7.75 0 1 1-15.5 0 7.75 7.75 0 0 1 15.5 0Zm-22.555-.712a1.25 1.25 0 0 1 1.48.784l.037.123 6.262 24.88.114.43c1.23 4.372 3.943 6.745 6.473 6.745H37a1.25 1.25 0 0 1 0 2.5h-7.939c-4.17 0-7.51-3.703-8.885-8.588l-.127-.477-6.26-24.88-.026-.125a1.25 1.25 0 0 1 .932-1.392Z"/></svg>

package/dist/collection/components/icon/svg/flag-morocco-color.svg

@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M24 4H0v16h24V4Z" fill="#DDDFE4"/><path d="M23 5.004H1v13.995h22V5.004Z" fill="#C1272D"/><path d="M12.944 11.056H16l-2.472 1.888.944 3.056L12 14.111 9.528 16l.944-3.056L8 11.055h3.056L12 8l.944 3.056Zm-2.656 3.843 1.371-1.047-.847-.648-.524 1.695Zm2.052-1.047 1.371 1.047-.524-1.695-.847.647Zm-1.398-1.069 1.058.809 1.058-.809-.404-1.307h-1.308l-.404 1.307Zm-.34-.26.324-1.047H9.23l1.37 1.047Zm2.796 0 1.371-1.047h-1.695l.324 1.047Zm-1.922-1.467h1.048L12 9.36l-.524 1.696Z" fill="#006233"/></svg>

package/dist/collection/components/icon/svg/vehicle-cover-outline.svg

@@ -1 +1 @@
-<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M60.11 34.48a4.764 4.764 0 0 0-3.238-4.505c-2.805-.938-5.539-1.599-8.212-1.967-2.215-.305-4.375-1.117-6.197-2.504l-5.808-4.408-.364-.264a10.793 10.793 0 0 0-6.313-1.922l-12.628.199h.001a7.756 7.756 0 0 0-6.303 3.418l-.001.002-2.881 4.27-.136.203-.203.136-1.43.958.001.001a4.766 4.766 0 0 0-2.09 3.672v.001l-.398 7.065v3.209l56.2-.288V34.48ZM11.957 44.502a3.732 3.732 0 0 0 4.056-.02l-4.056.02Zm33.932-.173a3.732 3.732 0 0 0 4.55-.023l-4.55.023Zm16.721-.085-8.949.046a6.248 6.248 0 0 1-5.51 3.3 6.247 6.247 0 0 1-5.481-3.245l-23.287.12a6.247 6.247 0 0 1-5.413 3.125 6.246 6.246 0 0 1-5.381-3.07l-7.179.036v-5.828h.002l.4-7.099v-.003l.037-.42a7.262 7.262 0 0 1 3.153-5.183l.002-.001 1.225-.824 2.745-4.067a10.256 10.256 0 0 1 8.334-4.521h.002l12.63-.2.557.004c2.588.069 5.095.891 7.219 2.364l.449.325v.001l5.81 4.41.001.001.274.2c1.383.976 3.021 1.578 4.75 1.817l1.07.16c2.498.41 5.03 1.054 7.597 1.913l.275.099a7.265 7.265 0 0 1 4.668 6.776v9.764Z" /></svg>
+<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M60.11 34.48a4.764 4.764 0 0 0-3.238-4.505c-2.805-.938-5.539-1.599-8.212-1.967-2.215-.305-4.375-1.117-6.197-2.504l-5.808-4.408-.364-.264a10.793 10.793 0 0 0-6.313-1.922l-12.628.199h.001a7.756 7.756 0 0 0-6.303 3.418l-.001.002-2.881 4.27-.136.203-.203.136-1.43.958.001.001a4.766 4.766 0 0 0-2.09 3.672v.001l-.398 7.065v3.209l56.2-.288V34.48ZM11.957 44.502a3.732 3.732 0 0 0 4.056-.02l-4.056.02Zm33.932-.173a3.732 3.732 0 0 0 4.55-.023l-4.55.023Zm16.721-.085-8.949.046a6.248 6.248 0 0 1-5.51 3.3 6.247 6.247 0 0 1-5.481-3.245l-23.287.12a6.247 6.247 0 0 1-5.413 3.125 6.246 6.246 0 0 1-5.381-3.07l-7.179.036v-5.828h.002l.4-7.099v-.003l.037-.42a7.262 7.262 0 0 1 3.153-5.183l.002-.001 1.225-.824 2.745-4.067a10.256 10.256 0 0 1 8.334-4.521h.002l12.63-.2.557.004c2.588.069 5.095.891 7.219 2.364l.449.325v.001l5.81 4.41.001.001.274.2c1.383.976 3.021 1.578 4.75 1.817l1.07.16c2.498.41 5.03 1.054 7.597 1.913l.275.099a7.265 7.265 0 0 1 4.668 6.776v9.764Z"/></svg>

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

@@ -17,31 +17,22 @@
   flex: 1;
   align-items: center;
   justify-content: center;
-  max-height: 2.5rem;
+  max-height: 2.75rem;
   font-size: var(--road-button-medium);
   font-weight: 700;
-  color: var(--road-primary);
+  color: var(--road-on-surface-weak);
   text-decoration: none;
   white-space: nowrap;
   vertical-align: middle;
   background-color: var(--road-surface);
-  border-top: 1px solid var(--road-primary);
-  border-bottom: 1px solid var(--road-primary);
-  border-left: 1px solid var(--road-primary);
-  border-radius: 0;
+  border-radius: 8px;
   transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-}
-
-
-:host(:first-child){
-  border: 1px solid var(--road-primary);
-  border-right: 0;
-  border-radius: 999em 0 0 999em;
+  margin-right: var(--road-spacing-02);
+  overflow: hidden;
 }
 
 :host(:last-child){
-  border: 1px solid var(--road-primary);
-  border-radius: 0 999em 999em 0;
+  margin-right: 0;
 }
 
 /**
@@ -49,21 +40,30 @@
  */
 
 :host(.btn-sm) {
-  height: 2rem;
-  font-size: var(--road-button-small);
+  height: 2.5rem;
+}
+
+/**
+ * medium
+ */
+
+ :host(.btn-md) {
+  height: 2.75rem;
 }
 
 /**
  * Active state
  */
 
-:host(.tab-selected) {
-  color: var(--road-primary-contrast);
-  background-color: var(--road-primary);
+ :host(.tab-selected) {
+  color: var(--road-button-primary);
+  fill: var(--road-button-primary);
+  background-color: var(--road-button-tertiary-variant);
 }
 
 :host(.tab-selected:hover) {
-  background-color: var(--road-button-primary-variant);
+  color: var(--road-button-primary);
+  background-color: var(--road-button-tertiary-variant);
 }
 
 
@@ -72,7 +72,8 @@
  */
 
 :host(:hover) {
-  background: var(--road-primary-90);
+  color: var(--road-on-surface);
+  background-color: var(--road-surface-inverse);
 }
 
 /**
@@ -81,14 +82,9 @@
 
 
 :host(.focus-visible) {
-  background: var(--road-primary-90);
   outline: auto;
 }
 
-:host(.tab-selected.focus-visible){
-  background-color: var(--road-button-primary-variant);
-}
-
 
 /* NATIVE
  -------------------- */
@@ -102,7 +98,6 @@
   justify-content: inherit;
   width: 100%;
   height: 100%;
-  max-height: 2.5rem;
   padding: 0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);
   margin: 0;
   overflow: hidden;
@@ -130,3 +125,16 @@
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
+:host ::slotted(road-icon) {
+  margin: -0.2rem var(--road-spacing-03) -0.2rem 0;
+  float: left;
+}
+
+
+.button-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+

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

@@ -55,7 +55,7 @@ export class SegmentedButton {
         return (h(Host, { key: '863bee27ee0f19d6db0382687b0e8e79bd013a98', onClick: this.onClick, onKeyup: this.onKeyUp, role: "tab", tabindex: tabIndex, "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 'tab-selected': selected,
                 [`${sizeClass}`]: true,
-            } }, h("span", { key: '9e16e5ad2ce62ecbf1d27c01ce0fe5fbdfae023e', tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, h("slot", { key: 'f40045cb7fc6663a0df01a26ffd54d050541673b' }))));
+            } }, h("span", { key: '9e16e5ad2ce62ecbf1d27c01ce0fe5fbdfae023e', tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, h("span", { key: '96f9bf0fac28111e1b400a3f721ad6df4d726253', class: "button-content" }, h("slot", { key: '474845bdcfbc64a70581c715efaa74e87631875a' })))));
     }
     static get is() { return "road-segmented-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"segmented-button.js","sourceRoot":"","sources":["../../../src/components/segmented-button/segmented-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/**\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-segmented-button',\n  styleUrl: 'segmented-button.css',\n  shadow: true,\n})\nexport class SegmentedButton {\n\n  @Element() el!: HTMLRoadSegmentedButtonElement;\n\n  /**\n    * The Segmented buttons size.\n    */\n   @Prop() size?: 'sm' | 'md' = 'md';\n\n  /**\n   * The selected tab component\n   */\n  @Prop({ mutable: true }) selected = false;\n\n  /**\n   * A tab id must be provided for each `road-tab`. It's used internally to reference\n   */\n  @Prop() tab?: string;\n\n  /**\n   * Emitted when the tab bar is clicked\n   * @internal\n   */\n  @Event() roadsegmentedbuttonclick!: EventEmitter;\n  /** @internal */\n  @Event() roadSegmentedButtonClick!: EventEmitter;\n\n  @Listen('roadSegmentedButtonBarChanged', { target: 'window' })\n  @Listen('roadSegmentedButtonbarchanged', { target: 'window' })\n  onButtonBarChanged(ev: CustomEvent) {\n    const dispatchedFrom = ev.target as HTMLElement;\n    const parent = this.el.parentElement as EventTarget;\n\n    if ((ev.composedPath && ev.composedPath().includes(parent)) || (dispatchedFrom && dispatchedFrom.contains(this.el))) {\n      this.selected = this.tab === ev.detail.tab;\n    }\n  }\n\n  private selectTab(ev: Event | KeyboardEvent) {\n    if (this.tab !== undefined) {\n      this.roadsegmentedbuttonclick.emit({\n        tab: this.tab,\n        selected: this.selected,\n      });\n      this.roadSegmentedButtonClick.emit({\n        tab: this.tab,\n        selected: this.selected,\n      });\n\n      ev.preventDefault();\n    }\n  }\n\n  private get tabIndex() {\n    const hasTabIndex = this.el.hasAttribute('tabindex');\n\n    if (hasTabIndex) {\n      return this.el.getAttribute('tabindex');\n    }\n\n    return 0;\n  }\n\n  private onKeyUp = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter' || ev.key === ' ') {\n      this.selectTab(ev);\n    }\n  };\n\n  private onClick = (ev: Event) => {\n    this.selectTab(ev);\n  };\n\n  render() {\n    const { tabIndex, selected, tab } = this;\n\n    const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';\n\n\n    return (\n      <Host\n        onClick={this.onClick}\n        onKeyup={this.onKeyUp}\n        role=\"tab\"\n        tabindex={tabIndex}\n        aria-selected={selected ? 'true' : null}\n        id={tab !== undefined ? `tab-button-${tab}` : null}\n        class={{\n          'tab-selected': selected,\n          [`${sizeClass}`]: true,\n        }}\n      >\n        <span tabIndex={-1} class=\"button-native\" part=\"native\" aria-hidden=\"true\">\n            <slot/>\n        </span>\n      </Host>\n    );\n  }\n}"]}
+{"version":3,"file":"segmented-button.js","sourceRoot":"","sources":["../../../src/components/segmented-button/segmented-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE/F;;;GAGG;AAOH,MAAM,OAAO,eAAe;IAL5B;QASE;;YAEI;QACK,SAAI,GAAiB,IAAI,CAAC;QAEnC;;WAEG;QACsB,aAAQ,GAAG,KAAK,CAAC;QAmDlC,YAAO,GAAG,CAAC,EAAiB,EAAE,EAAE;YACtC,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBACzC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;YACrB,CAAC;QACH,CAAC,CAAC;QAEM,YAAO,GAAG,CAAC,EAAS,EAAE,EAAE;YAC9B,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;QACrB,CAAC,CAAC;KA6BH;IAvEC,kBAAkB,CAAC,EAAe;QAChC,MAAM,cAAc,GAAG,EAAE,CAAC,MAAqB,CAAC;QAChD,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAA4B,CAAC;QAEpD,IAAI,CAAC,EAAE,CAAC,YAAY,IAAI,EAAE,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,cAAc,IAAI,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;YACpH,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;QAC7C,CAAC;IACH,CAAC;IAEO,SAAS,CAAC,EAAyB;QACzC,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;YAC3B,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;gBACjC,GAAG,EAAE,IAAI,CAAC,GAAG;gBACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAC;YACH,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;gBACjC,GAAG,EAAE,IAAI,CAAC,GAAG;gBACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAC;YAEH,EAAE,CAAC,cAAc,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAED,IAAY,QAAQ;QAClB,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QAErD,IAAI,WAAW,EAAE,CAAC;YAChB,OAAO,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QAC1C,CAAC;QAED,OAAO,CAAC,CAAC;IACX,CAAC;IAYD,MAAM;QACJ,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;QAEzC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAGpE,OAAO,CACL,EAAC,IAAI,qDACH,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,QAAQ,mBACH,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EACvC,EAAE,EAAE,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,cAAc,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,EAClD,KAAK,EAAE;gBACL,cAAc,EAAE,QAAQ;gBACxB,CAAC,GAAG,SAAS,EAAE,CAAC,EAAE,IAAI;aACvB;YAED,6DAAM,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,iBAAa,MAAM;gBACxE,6DAAM,KAAK,EAAC,gBAAgB;oBAC1B,8DAAO,CACF,CACF,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/**\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-segmented-button',\n  styleUrl: 'segmented-button.css',\n  shadow: true,\n})\nexport class SegmentedButton {\n\n  @Element() el!: HTMLRoadSegmentedButtonElement;\n\n  /**\n    * The Segmented buttons size.\n    */\n   @Prop() size?: 'sm' | 'md' = 'md';\n\n  /**\n   * The selected tab component\n   */\n  @Prop({ mutable: true }) selected = false;\n\n  /**\n   * A tab id must be provided for each `road-tab`. It's used internally to reference\n   */\n  @Prop() tab?: string;\n\n  /**\n   * Emitted when the tab bar is clicked\n   * @internal\n   */\n  @Event() roadsegmentedbuttonclick!: EventEmitter;\n  /** @internal */\n  @Event() roadSegmentedButtonClick!: EventEmitter;\n\n  @Listen('roadSegmentedButtonBarChanged', { target: 'window' })\n  @Listen('roadSegmentedButtonbarchanged', { target: 'window' })\n  onButtonBarChanged(ev: CustomEvent) {\n    const dispatchedFrom = ev.target as HTMLElement;\n    const parent = this.el.parentElement as EventTarget;\n\n    if ((ev.composedPath && ev.composedPath().includes(parent)) || (dispatchedFrom && dispatchedFrom.contains(this.el))) {\n      this.selected = this.tab === ev.detail.tab;\n    }\n  }\n\n  private selectTab(ev: Event | KeyboardEvent) {\n    if (this.tab !== undefined) {\n      this.roadsegmentedbuttonclick.emit({\n        tab: this.tab,\n        selected: this.selected,\n      });\n      this.roadSegmentedButtonClick.emit({\n        tab: this.tab,\n        selected: this.selected,\n      });\n\n      ev.preventDefault();\n    }\n  }\n\n  private get tabIndex() {\n    const hasTabIndex = this.el.hasAttribute('tabindex');\n\n    if (hasTabIndex) {\n      return this.el.getAttribute('tabindex');\n    }\n\n    return 0;\n  }\n\n  private onKeyUp = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter' || ev.key === ' ') {\n      this.selectTab(ev);\n    }\n  };\n\n  private onClick = (ev: Event) => {\n    this.selectTab(ev);\n  };\n\n  render() {\n    const { tabIndex, selected, tab } = this;\n\n    const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';\n\n\n    return (\n      <Host\n        onClick={this.onClick}\n        onKeyup={this.onKeyUp}\n        role=\"tab\"\n        tabindex={tabIndex}\n        aria-selected={selected ? 'true' : null}\n        id={tab !== undefined ? `tab-button-${tab}` : null}\n        class={{\n          'tab-selected': selected,\n          [`${sizeClass}`]: true,\n        }}\n      >\n        <span tabIndex={-1} class=\"button-native\" part=\"native\" aria-hidden=\"true\">\n          <span class=\"button-content\">\n            <slot/>\n          </span>\n        </span>\n      </Host>\n    );\n  }\n}"]}

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

@@ -4,6 +4,9 @@
  */
 
 :host {
+  background-color: var(--road-surface);
+  outline: 1px solid var(--road-outline-weak);
+  border-radius: 12px;
+  padding: var(--road-spacing-02);
   display: flex;
-  max-width: 500px;
-}
+} 

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

@@ -18,7 +18,7 @@ export class ButtonBar {
         this.selectedTabChanged();
     }
     render() {
-        return (h(Host, { key: 'd2cdf10978a8286781e00253187fb0e8cba77af6', role: "tablist" }, h("slot", { key: '730fe1bb12456e03e63b3899ca5f870e2ad9d085' })));
+        return (h(Host, { key: '20a78b478a8d346e40af1065cfc57e273498d389', role: "tablist" }, h("slot", { key: 'aadc0d0830d3110041dc4e0fa7f93f0a42fdefc5' })));
     }
     static get is() { return "road-segmented-button-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -86,7 +86,7 @@ export class Tabs {
         return Array.from(this.el.querySelectorAll('road-tab'));
     }
     render() {
-        return (h(Host, { key: 'b25e26abe6f955509d22ed93135480833fe6dd98', onRoadSegmentedButtonClick: this.onTabClicked }, h("slot", { key: 'f6e0e61909a9da627c37f8ddb2c0f19bdf8c9d96', name: "top" }), h("slot", { key: '6695aff9ab709576af682f92ddd6a496670ad69a' })));
+        return (h(Host, { key: '760ffd7c98659dc00187c97e3d01ce92409584a5', onRoadSegmentedButtonClick: this.onTabClicked }, h("slot", { key: 'dfd7acfd76741333868ff7dce2f88c27f2413808', name: "top" }), h("slot", { key: 'e7ed6139b95280e972025c5028e0694da0f26265' })));
     }
     static get is() { return "road-segmented-buttons"; }
     static get encapsulation() { return "shadow"; }

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

@@ -20,7 +20,7 @@ export default {
   },
   argTypes: {
     top: {
-      description: "Content is placed at the top of the screen.",
+      description: "Content is placed at the top of the screen. MAX 3",
       control: 'text',
     },
     ' ': {

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

@@ -92,7 +92,7 @@ export class Select {
         const labelId = this.selectId + '-label';
         const hasValueClass = this.value && this.value !== '' ? 'has-value' : '';
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-        return (h(Host, { key: 'fbf13d56f261b79cc03c7d0ece573c0e755fcc02', class: this.sizes && `select-${this.sizes}` }, h("select", { key: '3ebc5baf241e60215757a1e0d86c961b765b2149', class: `form-select ${hasValueClass} ${isInvalidClass}`, id: this.selectId, "aria-disabled": this.disabled ? 'true' : null, autoFocus: this.autofocus, disabled: this.disabled, name: this.name, required: this.required, size: this.size, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }, h("option", { key: '69723be0e85acb06f1d8b57b8d95e69abc7a6e01', selected: !this.value, disabled: true, hidden: true, style: { display: 'none' }, value: "" }), this.options && this.options.map(option => (h("option", { value: option.value, selected: this.value !== null && option.value == this.value }, option.label)))), h("label", { key: 'e115fadd832bc42b471627f473750f1ad37abe7e', class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && h("p", { key: '95cc607268bb4d6e932e9bfcbdedf13c42a684ec', class: "invalid-feedback" }, this.error)));
+        return (h(Host, { key: '531ff3e04c4447214779844ba29b2208ded29d12', class: this.sizes && `select-${this.sizes}` }, h("select", { key: 'e5336849c3992793152ffcc2b3670f96c0c1129b', class: `form-select ${hasValueClass} ${isInvalidClass}`, id: this.selectId, "aria-disabled": this.disabled ? 'true' : null, autoFocus: this.autofocus, disabled: this.disabled, name: this.name, required: this.required, size: this.size, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }, h("option", { key: 'f9f2f7857d3ce3cdb0205b5589388ad0417d6802', selected: !this.value, disabled: true, hidden: true, style: { display: 'none' }, value: "" }), this.options && this.options.map(option => (h("option", { value: option.value, selected: this.value !== null && option.value == this.value }, option.label)))), h("label", { key: '4c2d444e030ef6168b4871ae5381550295b91e5f', class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && h("p", { key: '40808526b05350e9d59dedd814ca620368fa6098', class: "invalid-feedback" }, this.error)));
     }
     static get is() { return "road-select"; }
     static get encapsulation() { return "scoped"; }

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

@@ -179,7 +179,7 @@ export class SelectFilter {
         const options = this.filteredOptions;
         const isActive = this.isActive ? 'true' : 'false';
         const notActive = this.isActive ? '' : 'not-active';
-        return (h(Host, { key: '2ab661fc7b1f8a11b392444f09da31ca75a73110', "is-active": isActive }, h("slot", { key: '4baa482b16bbe868c85510396f6c5d644afc2015' }), this.isOpen && (h("div", { key: '52bc08a2c217def565d28945d3227cdf9acb2611', class: `${notActive} select-filter-list`, role: "listbox", onMouseLeave: this.handleMouseLeave }, options.length === 0 ? (h("div", { class: "select-filter-empty" }, "Aucune option")) : (h("ul", { class: "pl-0" }, options.map((option, idx) => (h("li", { class: `select-filter-item ${this.activeIndex === idx ? 'active' : ''}`, role: "option", "aria-selected": this.activeIndex === idx ? 'true' : 'false', onClick: (e) => this.handleOptionClick(option.item.value, option.item.label.replace(/(<([^>]+)>)/gi, ''), e), onMouseOver: () => this.handleOptionMouseOver(idx), innerHTML: option.item.label, tabindex: this.activeIndex === idx ? 0 : -1 })))))))));
+        return (h(Host, { key: 'eb209aa9c9421eca958fe21a8598edc774d61406', "is-active": isActive }, h("slot", { key: '4c7bc828b789101338eafd5091cde5fe749db9a9' }), this.isOpen && (h("div", { key: '4f7f5ade504721515a8f5f5ffd6ec93178336b4d', class: `${notActive} select-filter-list`, role: "listbox", onMouseLeave: this.handleMouseLeave }, options.length === 0 ? (h("div", { class: "select-filter-empty" }, "Aucune option")) : (h("ul", { class: "pl-0" }, options.map((option, idx) => (h("li", { class: `select-filter-item ${this.activeIndex === idx ? 'active' : ''}`, role: "option", "aria-selected": this.activeIndex === idx ? 'true' : 'false', onClick: (e) => this.handleOptionClick(option.item.value, option.item.label.replace(/(<([^>]+)>)/gi, ''), e), onMouseOver: () => this.handleOptionMouseOver(idx), innerHTML: option.item.label, tabindex: this.activeIndex === idx ? 0 : -1 })))))))));
     }
     static get is() { return "road-select-filter"; }
     static get encapsulation() { return "scoped"; }

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

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

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

@@ -13,7 +13,7 @@ export class Spinner {
     render() {
         const sizeClass = this.size !== undefined ? `spinner spinner--${this.size}` : 'spinner';
         const colorClass = this.size !== undefined ? `spinner-circle spinner-circle--${this.color}` : 'spinner-circle';
-        return (h("svg", { key: 'e96458f9fed6421eff778decf17d2d4e3b2aa098', class: `${sizeClass}`, viewBox: "25 25 50 50" }, h("circle", { key: '39f3d8ba7d2e65b32103a5d82928ce80f0dc73e0', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
+        return (h("svg", { key: 'a13fe873d986f18ad6e24d03c8ed2cc08d111bfb', class: `${sizeClass}`, viewBox: "25 25 50 50" }, h("circle", { key: '2be205cfa0e2fb9898578db0205ecabc865cddf2', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
     }
     static get is() { return "road-spinner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -70,11 +70,11 @@ export class Switch {
     }
     render() {
         const labelId = this.switchId + '-label';
-        const textLabel = h("label", { key: '11041a87abb31a5847e93384ded7e4c36345af56', class: "form-switch-label", id: labelId, htmlFor: this.switchId }, this.label);
+        const textLabel = h("label", { key: '430104d38d5703aa56ce1976a977a126468ec741', class: "form-switch-label", id: labelId, htmlFor: this.switchId }, this.label);
         const colorClass = this.color !== undefined ? 'form-switch-' + this.color : '';
         const isSpacedClass = this.isSpaced && 'form-switch-spaced';
         const rightSwitchClass = this.hasLeftLabel ? 'form-switch-right' : '';
-        return (h(Host, { key: 'a64f78074573cd09e1667adde25625d98861c134' }, h("input", { key: 'de33cfaab0753581aa1dde0cfa241589529dab2d', class: "form-switch-input", type: "checkbox", id: this.switchId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), h("label", { key: 'f1dd1d5e580f5e696e08cc754b4a15c14610a236', class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, h("div", { key: '09a2ef4681d07e35734e5b8f3b1671a99daf59d2', class: `form-switch-lever ${rightSwitchClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
+        return (h(Host, { key: '2bfcb70289e7a90964e1211569ab02e1097cd12b' }, h("input", { key: '7c9e3273d965e895479da1fb4349bb35fa5efc3b', class: "form-switch-input", type: "checkbox", id: this.switchId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), h("label", { key: 'af4acb92308e858b7188c71bdd2cb1e5bb368e31', class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, h("div", { key: '0dcc70814eb2ae967bf5235bb6aac1ba7205d7b4', class: `form-switch-lever ${rightSwitchClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
     }
     static get is() { return "road-switch"; }
     static get encapsulation() { return "scoped"; }

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

@@ -21,9 +21,9 @@ export class Tab {
     }
     render() {
         const { tab, active } = this;
-        return (h(Host, { key: 'a80ee1589766800da756d8a9f78534025a264938', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: '10d79bb43319e005cf57d629ea4f678e3f3a5ae2', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'tab-hidden': !active,
-            } }, h("slot", { key: '9f528bd81cf3fafd4b36bd4eda1b3f579840ce87' })));
+            } }, h("slot", { key: 'd11c7858cddf2b5da0db945ee9f69f52d02d7c16' })));
     }
     static get is() { return "road-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,11 +36,11 @@ export class TabBar {
     }
     render() {
         const { expand, center, secondary } = this;
-        return (h(Host, { key: '746f908171e249e24f94b16b5dc86dc82e0afcf1', role: "tablist", class: {
+        return (h(Host, { key: '683e4f5c99d335ec1c744830237bd3cd23db8c75', role: "tablist", class: {
                 'tab-expand': expand,
                 'tab-center': center,
                 'tab-secondary': secondary,
-            } }, h("slot", { key: 'ae9a9a8f7d7fe8d108a54fda92db9b5618b8ab68' })));
+            } }, h("slot", { key: '0757eeb70b98263e316b408bc420fee186de03b0' })));
     }
     static get is() { return "road-tab-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -71,7 +71,7 @@ export class TabButton {
             rel,
             target,
         };
-        return (h(Host, { key: '67c07b501186d06a92c2f17ca9de8e0ff52f9f6c', onClick: (ev) => !disabled && this.onClick(ev), onKeyup: (ev) => !disabled && this.onKeyUp(ev), role: "tab", tabindex: disabled ? -1 : tabIndex, "aria-selected": selected ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: '6fdae83a0fe22652c51b92874265e2c32787063d', onClick: (ev) => !disabled && this.onClick(ev), onKeyup: (ev) => !disabled && this.onKeyUp(ev), role: "tab", tabindex: disabled ? -1 : tabIndex, "aria-selected": selected ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 'tab-selected': selected,
                 'tab-has-label': hasLabel,
                 'tab-has-icon': hasIcon,
@@ -79,7 +79,7 @@ export class TabButton {
                 'tab-has-icon-only': hasIcon && !hasLabel,
                 [`tab-layout-${layout}`]: true,
                 'tab-disabled': disabled, // Classe CSS pour les styles désactivés
-            } }, h("a", Object.assign({ key: '18a73655db637ae681c2c2ead0f0f3ffc3f5bab8' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { key: '58fada49e75fb729951f8cec81d659445fcd1663', class: "button-inner" }, h("slot", { key: '9ede5d2abe3dc94bcad317b98c71be832a409b6b' })))));
+            } }, h("a", Object.assign({ key: 'dc85019d7861a227495a165790d2e5b025f1f979' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { key: '59d9387c00bb48a34f425d9af782e3568f566263', class: "button-inner" }, h("slot", { key: '54290ac6eee4506846c8756f5141b493e6ebcc13' })))));
     }
     static get is() { return "road-tab-button"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -99,7 +99,7 @@ export class Tabs {
         return Array.from(this.el.querySelectorAll('road-tab'));
     }
     render() {
-        return (h(Host, { key: '9dcb1019a30f3b5c26680c200c82e37ddbc7c40e', onRoadTabButtonClick: this.onTabClicked }, h("slot", { key: '4042e2bc099bb06962b53a68c8cfa4f672a4e79e', name: "top" }), h("div", { key: '013c9c6772d12138d4295ef4af31e89519a15ab5', class: "tabs-inner" }, h("slot", { key: '2d13a2df6d1d96a0c494f5ee5b32b90dc46c9ed5' }))));
+        return (h(Host, { key: '5ac640c40ecdf802d7d56a662d5aa107ced242ef', onRoadTabButtonClick: this.onTabClicked }, h("slot", { key: '8f50a94ef5602b121eaf7406c6d83ed93c50a7aa', name: "top" }), h("div", { key: 'fb87539786bf6f7d1e3d7a9766b191bca35ce312', class: "tabs-inner" }, h("slot", { key: '32f22aabd7e38881d289fbd0af69669d62d918cc' }))));
     }
     static get is() { return "road-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,7 +16,7 @@ export class Tag {
     }
     render() {
         const contrastClass = this.contrast ? `tag-${this.color} tag-${this.color}-contrast` : `tag-${this.color}`;
-        return (h(Host, { key: 'dfc6fa6389d85aae088a356aa8e71fc6d1c874e2', class: `${contrastClass}` }, h("slot", { key: '7fa2acadbb57e88de5086decdf6ae71455c3e92b' })));
+        return (h(Host, { key: '81f24465ee40fd72b3095258f67f9d46b0f663e2', class: `${contrastClass}` }, h("slot", { key: 'baf9168e522f8f4cf682f03c40304d5052a030f2' })));
     }
     static get is() { return "road-tag"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,7 +11,7 @@ export class Text {
     }
     render() {
         const colorClass = this.color !== undefined ? `text-${this.color}` : '';
-        return (h(Host, { key: '6c096b7e313e279e5f6854917264e7bc745d6102', class: `${colorClass}` }, h("slot", { key: '508084988ed3ef1e3796bef202a56eb28d9a92e0' })));
+        return (h(Host, { key: '8c3872a70719feac2cbf76f50b7491b838fb393b', class: `${colorClass}` }, h("slot", { key: 'b746e561a4c05d829492a023120a7d1ade1c146f' })));
     }
     static get is() { return "road-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -82,7 +82,7 @@ export class Textarea {
         const hasValueClass = this.value !== '' ? 'has-value' : '';
         const noResizeClass = this.resize == false ? 'no-resize' : '';
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-        return (h(Host, { key: '6b79d4c91d9db40c13b46457e8a74f457ce51253', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, h("textarea", { key: '8d1ff720327c7fcfd9a685f7ef4c8df4883834b7', class: `form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`, id: this.textareaId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, value: value, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }), h("label", { key: '5eb4e0859d247b3601d4f3d34a33f23d05a4427a', class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && h("p", { key: 'e2bb049bb53e466f9f80b9092cfd79af7a94adb0', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: '1cbbe5f763eec7673f7b4d2210603aa898201afe', class: "helper" }, this.helper)));
+        return (h(Host, { key: 'f67a9451b99f450ee2828ea5eb5dc3728795c1dd', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, h("textarea", { key: '27f3c926911126812156ccc87172c3e71f634b7c', class: `form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`, id: this.textareaId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, value: value, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }), h("label", { key: '081afb27b83557ce88db5c78d6e90c138f69c0d4', class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && h("p", { key: '3509594cc1523c401e12a796216ed3c97813f419', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: 'ede03d506c01bf3eae5a633a534eeed696df819d', class: "helper" }, this.helper)));
     }
     static get is() { return "road-textarea"; }
     static get encapsulation() { return "scoped"; }

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

@@ -86,7 +86,7 @@ export class Toast {
         if (this.color == 'danger') {
             this.timeout = 0;
         }
-        return (h(Host, { key: '4866b4f002148da86e39d415bb41c92dde8de0a9', class: `${toastIsOpenClass}`, role: "alert" }, h("div", { key: '1032a5bb291249435a611bd4819f33ad85bed57e', class: `toast toast-${this.color}` }, h("road-icon", { key: 'f049bac2477c60c7079593b327deb6d50792d1cb', class: "toast-icon", icon: icon, "aria-hidden": "true" }), h("p", { key: '5b227214089c85660c0d331d43ea036688db6b00', class: "toast-label" }, this.label), h("button", { key: '42e67fe6e4c191a68ffdc316b5b4af5381744311', type: "button", class: "toast-close", "aria-label": "Close", onClick: this.onClick }, h("road-icon", { key: 'aaeba8c86fd8422f9c204fbd426a0b4f3dc4b128', icon: navigationClose, size: "md" })), h("slot", { key: '9c70fe00748c2dc9d954a751f44da248eccf9829', name: "progress" }))));
+        return (h(Host, { key: '6f7087bd4eb183f58cde02e0a890e6ab18b6c5b8', class: `${toastIsOpenClass}`, role: "alert" }, h("div", { key: 'a2494ef9b74ad9fac5d8b81c810bdcfe52936fef', class: `toast toast-${this.color}` }, h("road-icon", { key: '4be95019df5ab21b94508a62afd80f0d89d42150', class: "toast-icon", icon: icon, "aria-hidden": "true" }), h("p", { key: 'ca9901aed33cf158c16eadf8587b90ae235dd933', class: "toast-label" }, this.label), h("button", { key: 'abdb172097d82844c78e608264995aa8568fdf23', type: "button", class: "toast-close", "aria-label": "Close", onClick: this.onClick }, h("road-icon", { key: 'a6c17efe9a3255210498348ced0ab1e7b5dd8b8c', icon: navigationClose, size: "md" })), h("slot", { key: 'ee1c9f42ddb4efaf69466d51edd10c256b35bd22', name: "progress" }))));
     }
     static get is() { return "road-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -66,11 +66,11 @@ export class toggle {
     }
     render() {
         const labelId = this.toggleId + '-label';
-        const textLabel = h("label", { key: '7e60142bec884ea3061c207e406f0c546211b480', class: "form-toggle-label", id: labelId, htmlFor: this.toggleId }, this.label);
+        const textLabel = h("label", { key: '04e2ecdd74318b173c60411293ec8300c0e7d80c', class: "form-toggle-label", id: labelId, htmlFor: this.toggleId }, this.label);
         const isSpacedClass = this.isSpaced && 'form-toggle-spaced';
         const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';
         const disabledClass = this.disabled ? 'disabled' : '';
-        return (h(Host, { key: 'bcc061f438575d35e8739881b5032a7b3c742088' }, h("input", { key: '73f9982c4dcd61926b16cc1c49776ebd1d50399d', class: "form-toggle-input", type: "checkbox", id: this.toggleId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), h("label", { key: '8af6daaa163cd02675734044cb172951f8c86654', class: `form-toggle-label ${isSpacedClass} ${disabledClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, h("div", { key: 'a8e6e9e585e2f7d62756db5ffc8e105984336740', class: `form-toggle-lever ${righttoggleClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
+        return (h(Host, { key: '5afde6ab7825eb0473b34f8ae2656c9fec8002d7' }, h("input", { key: '7350937218c795dc74192e9b6cdd191ff6bf232c', class: "form-toggle-input", type: "checkbox", id: this.toggleId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), h("label", { key: '87a03339e8520b2c248f4d762d394411bd233423', class: `form-toggle-label ${isSpacedClass} ${disabledClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, h("div", { key: '3d5c0e81cda827653f545c0fd3b057f83dd793d0', class: `form-toggle-lever ${righttoggleClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
     }
     static get is() { return "road-toggle"; }
     static get encapsulation() { return "scoped"; }

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

@@ -10,7 +10,7 @@ import { Host, h } from "@stencil/core";
 export class Toolbar {
     render() {
         const colorClass = this.color !== undefined ? `toolbar-${this.color}` : '';
-        return (h(Host, { key: '14cb47d9161a172ce67f0db3cb545475e82912e3', class: colorClass }, h("div", { key: '0286c05dd7b9c4de37c3003e9e2d122113cb5e32', class: "toolbar-container" }, h("slot", { key: '430608b30d431f3515890ea7ed9086f45abfe663', name: "start" }), h("slot", { key: '6fe654f580eeb5395311ca52ae849f12dc4ca358', name: "primary" }), h("div", { key: '4075c8019dd3c8a2b7d1d1227ebf573a4e80307b', class: "toolbar-content" }, h("slot", { key: 'f1cf78705d21db90d756806a37d5abb5cb15b61e' })), h("slot", { key: '25ccf0e71d1d1412d39728c25cc47fa1f0500225', name: "secondary" }), h("slot", { key: 'bfcf553abc8b455bedad666d9fd218e47c5c0801', name: "end" }))));
+        return (h(Host, { key: 'dce34768cc5775e3819bd44b9a53a0164f0e1a2c', class: colorClass }, h("div", { key: '5c8ecc9b623feacce32288e71325b87b16abd687', class: "toolbar-container" }, h("slot", { key: '5975b6a723dc4f48ae2150c5e8a344759f548885', name: "start" }), h("slot", { key: '2ac9ee0ce36cf9b6d685a9ecf6a77036b0b57c75', name: "primary" }), h("div", { key: 'af93cd350b853d5769f795906442273a91137b1c', class: "toolbar-content" }, h("slot", { key: '4eaeff6528ac5082683478b4197f00b9c6c25331' })), h("slot", { key: '640e0d82dfb515af2c5db5dd24788467c264031e', name: "secondary" }), h("slot", { key: 'e8485cc43749e335f9d480528a2da0b4016ba0b4', name: "end" }))));
     }
     static get is() { return "road-toolbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class ToolbarTitle {
     render() {
-        return (h("div", { key: 'd76f68c65907e1551df90665d6908effa1d23685', class: "toolbar-title" }, h("slot", { key: 'eb19d844b7e2723b9be7f17e963200d72605359d' })));
+        return (h("div", { key: 'ed443e8a60fd8624ef3381200b15ba4ff31b8aa5', class: "toolbar-title" }, h("slot", { key: '1a6148e5e56141545821c5f7a70208db50238bbc' })));
     }
     static get is() { return "road-toolbar-title"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class ToolbarAppName {
     render() {
-        return (h("div", { key: 'bd0e95961b752f7f24bbfc1139f6ebac6c975f47', class: "toolbar-title-page" }, h("slot", { key: 'cb5526c2e85fae652dcefab4ed5a4fccc102e63e' })));
+        return (h("div", { key: '1c1ecd0a39d2929bca5c324fe67bdc18a18b5390', class: "toolbar-title-page" }, h("slot", { key: '0b52cf3cf5b7a6d5f41ec4c8f839731cb48315c9' })));
     }
     static get is() { return "road-toolbar-title-page"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,7 +9,7 @@ import { Host, h } from "@stencil/core";
  */
 export class ToolbarV2 {
     render() {
-        return (h(Host, { key: '03ed3e0c69e0d737c9e06fb34865bd9220bb2fb9', class: "toolbar" }, h("div", { key: 'dc18099969c401df4f3979add5244f503ddf0ca8', class: "toolbar-container" }, h("div", { key: 'eaf8665b9cf17418be695e35ecdb1616bddf8f01', class: "toolbar-container-content-left" }, h("slot", { key: '4de8e937d64c2f2f79b707924dc7b52fbe046629', name: "start" }), h("slot", { key: '5d0dcc7ad6dd88905c1b2f41a7bb9930db946889', name: "primary" })), h("div", { key: 'bc4a67b64b44c4c24e7be20f8e51a79d1ed0d51f', class: "toolbar-content" }, h("slot", { key: '42b3947702ac91b384ee862bc1b4c57ed3057397' })), h("div", { key: 'fa7a28c253a53f2fa51d2c5be1f2f824d4df79a7', class: "toolbar-container-content-right" }, h("slot", { key: '6899849e576aac962459e9fbc4e8a69838bc85ab', name: "secondary" }), h("slot", { key: 'f5e68177e1f28a269ff932af476051f92fb97468', name: "end" })))));
+        return (h(Host, { key: '382572569bcd4298cf5b3e0ce1996eff06d21146', class: "toolbar" }, h("div", { key: '3041348fa0bb67af14e7cf56e25e17f70aaac86c', class: "toolbar-container" }, h("div", { key: '6a0f67070976e7688b2a22a895ab3fa74d99458d', class: "toolbar-container-content-left" }, h("slot", { key: 'ef46f756ec5cb53f90c03079f18bfbc2380b92b0', name: "start" }), h("slot", { key: '6adfe95451a4f311dcc74d8f6a68f7037c24578f', name: "primary" })), h("div", { key: '00c321d7d6093073ec20d7eb50ad017fbe361127', class: "toolbar-content" }, h("slot", { key: '01894b4175c84a9fbd97802a8a2d5721e2e124b1' })), h("div", { key: '8e6e1298bbbfa5c6707af70512e2c3f696d70da5', class: "toolbar-container-content-right" }, h("slot", { key: 'b1ea849fdb52aca7bc056b6015dcb062f1226d6e', name: "secondary" }), h("slot", { key: '07d8efd5011fec01d58a399761d05a7eb2d9e59d', name: "end" })))));
     }
     static get is() { return "road-toolbar-v2"; }
     static get encapsulation() { return "shadow"; }