@roadtrip/components 3.45.0 → 3.45.1

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host, Watch, State } from '@stencil/core';\nimport { navigationClose, navigationChevron } from '../../../icons';\nimport { createFocusTrap, FocusTrap } from 'focus-trap';\n\n/**\n * @slot  - Content of the drawer.\n * @slot title - replace the title with a custom title section when `'drawerTitle'` is not set\n * @slot footer - footer of the drawer\n * `<div slot=\"footer\">`\n   `<road-button color=\"primary\" outline=\"true\" expand=\"true\">Annuler</road-button>`\n   `<road-button color=\"primary\" expand=\"true\" class=\"mb-0\">Valider</road-button>`\n   ` </div>`\n */\n\n\n@Component({\n  tag: 'road-drawer',\n  styleUrl: 'drawer.css',\n  shadow: true,\n})\nexport class Drawer {\n\n  /**\n   * Current reference of the drawer\n   */\n  @Element() el!: HTMLRoadDrawerElement;\n\n  /**\n   * Set isOpen property to true to open the drawer\n   */\n  @Prop({ mutable: true }) isOpen: boolean = false;\n\n  /**\n   * Set removePadding property to true to remove padding for drawer body\n   */\n  @Prop({ mutable: true }) removePadding: boolean = false;\n\n  /**\n   * position of the drawer. e.g. left, right, bottom\n   */\n  @Prop() position: string = 'left';\n\n  /**\n   * Width of the drawer\n   */\n  @Prop() drawerWidth: number = 480;\n\n  /**\n   * Inverse header colors\n   */\n  @Prop() hasInverseHeader: boolean = false;\n\n  /**\n   * Show / hide back icon\n   */\n  @Prop() hasBackIcon: boolean = false;\n\n  /**\n   * Show / hide back icon\n   */\n  @Prop() backText?: string;\n\n  /**\n   * Title of the drawer in the header bar\n   */\n  @Prop() drawerTitle?: string;\n\n   /**\n   * Aria label of the drawer\n   */\n   @Prop() ariaLabel?: string;\n\n  /**\n   * Aria label of the drawer\n   */\n    @Prop() ariaLabelBack?: string;\n\n  /**\n   * Aria label of the drawer\n   */\n   @Prop() ariaLabelClose?: string;\n\n  /**\n   * Show / hide close icon\n   */\n  @Prop() hasCloseIcon: boolean = true;\n\n  /**\n   * Indicate when opening the drawer\n   */\n  @Event({ eventName: 'open' }) onOpen!: EventEmitter<void>;\n\n  /**\n   * Indicate when closing the drawer\n   */\n  @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n  /**\n   * Indicate when return to previous state of the drawer content\n   */\n  @Event({ eventName: 'back' }) onBack!: EventEmitter<void>;\n\n  /**\n   * Focus trap state\n   */\n  @State() focusTrap?: FocusTrap;\n  \n  /**\n   * Footer Content state\n   */\n  @State() hasFooterContent = false;\n\n  /**\n   * Open the drawer\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the drawer\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n  }\n\n  /**\n   * Return to previous state of the drawer content\n   */\n  @Method()\n  async back() {\n    this.onBack.emit();\n  }\n\n  // @Watch('isOpen')\n  // handleOpen(openValue: boolean) {\n  //   if(openValue === true) {\n  //     this.onOpen.emit();\n  //   } else {\n  //     this.el.addEventListener('transitionend', () => {\n  //       this.onClose.emit();\n  //       this.el.shadowRoot && ((this.el.shadowRoot.querySelector('.drawer-body') as HTMLElement).scrollTop = 0);\n  //     }, { once: true});\n  //   }\n  // }\n\n\n  @Watch('isOpen')\n  handleOpen(openValue: boolean) {\n    if(openValue === true) {\n      this.onOpen.emit();\n      // Focus the first button element after the drawer is opened then focus trap\n      setTimeout(() => {\n        this.focusFirstElement();\n        this.focusTrap?.activate();\n      }, 50); // Add a slight delay to ensure the element is rendered\n    } else {\n      this.el.addEventListener('transitionend', () => {\n        this.focusTrap?.deactivate();\n        this.onClose.emit();\n        this.el.shadowRoot && ((this.el.shadowRoot.querySelector('.drawer-body') as HTMLElement).scrollTop = 0);\n      }, { once: true });\n    }\n  }\n\n  private onFooterSlotChange = (event: Event) => {\n  const slot = event.target as HTMLSlotElement;\n  this.hasFooterContent = slot.assignedElements().length > 0;\n};\n\n  \n  /**\n   * Find and focus the first element in the drawer\n   */\n  private focusFirstElement() {\n    const firstElement = this.el.shadowRoot?.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], [tabindex]:not([tabindex=\"-1\"])')[0] as HTMLElement;\n  \n    if (firstElement) {\n      firstElement.focus();\n    }\n  }\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 clicking on the cross or layer\n   */\n  private onClickBack = (event: MouseEvent) => {\n    event.stopPropagation();\n    event.preventDefault();\n\n    this.back();\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    const drawerContent = this.el.shadowRoot?.querySelector(\".drawer-dialog\");\n    this.focusTrap = createFocusTrap(drawerContent as HTMLElement, {\n      onActivate: () => drawerContent?.classList.add(\"focus-trapped\"),\n      onDeactivate: () => drawerContent?.classList.remove(\"focus-trapped\"),\n      tabbableOptions: {\n        getShadowRoot: true,\n      },\n    });\n  }\n\n  render() {\n    const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';\n    const removePaddingClass = this.removePadding ? 'remove-padding' : '';\n    const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';\n    const ariaLabel = this.ariaLabel ?? 'drawer';\n    const ariaLabelBack = this.ariaLabelBack ?? 'Back';\n    const ariaLabelClose = this.ariaLabelClose ?? 'Close';\n    const drawerDelimiterClass = this.drawerTitle && !this.hasInverseHeader ? 'drawer-delimiter' : '';\n    const backIconElement = this.hasBackIcon ? (\n      <button type=\"button\" class=\"drawer-action\" aria-label={ariaLabelBack} onClick={this.onClickBack}>\n        <road-icon icon={navigationChevron} rotate=\"180\"></road-icon>\n        {this.backText}\n      </button>\n    ) : null;\n    const closeIconElement = this.hasCloseIcon ? (\n      <button type=\"button\" class=\"drawer-close\" onClick={this.onClick} aria-label={ariaLabelClose}>\n        <road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon>\n      </button>\n    ) : null;\n    const drawerWidthValue = this.position === 'bottom' ? '100%' : `${this.drawerWidth}px`;\n      \n    return (\n      <Host class={`${drawerIsOpenClass}  drawer-${this.position}`} tabindex=\"0\" role=\"dialog\" aria-label={ariaLabel}>\n        <div class=\"drawer-overlay\" onClick={this.onClick} tabindex=\"-1\"></div>\n        <div class=\"drawer-dialog\" style={{ maxWidth: drawerWidthValue }} role=\"document\" tabindex=\"0\">\n          <div class=\"drawer-content\">\n            <header class={`drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}`}>\n              {backIconElement}\n              {this.drawerTitle ? (\n                <h2 class=\"drawer-title\">{this.drawerTitle}</h2>\n              ) : (\n                <div class=\"drawer-title\">\n                  <slot name=\"title\" />\n                </div>\n              )}\n              {closeIconElement}\n            </header>\n            <div class={`drawer-body ${removePaddingClass}`}>\n              <slot />\n            </div>\n            <footer\n            class={`drawer-footer ${removePaddingClass}`}\n            hidden={!this.hasFooterContent}\n          >\n            <slot name=\"footer\" onSlotchange={this.onFooterSlotChange} />\n          </footer>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n  \n}"]}
+{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host, Watch, State } from '@stencil/core';\nimport { navigationClose, navigationChevron } from '../../../icons';\nimport { createFocusTrap, FocusTrap } from 'focus-trap';\n\n/**\n * @slot  - Content of the drawer.\n * @slot title - replace the title with a custom title section when `'drawerTitle'` is not set\n * @slot footer - footer of the drawer\n * `<div slot=\"footer\">`\n   `<road-button color=\"primary\" outline=\"true\" expand=\"true\">Annuler</road-button>`\n   `<road-button color=\"primary\" expand=\"true\" class=\"mb-0\">Valider</road-button>`\n   ` </div>`\n */\n\n\n@Component({\n  tag: 'road-drawer',\n  styleUrl: 'drawer.css',\n  shadow: true,\n})\nexport class Drawer {\n\n  /**\n   * Current reference of the drawer\n   */\n  @Element() el!: HTMLRoadDrawerElement;\n\n  /**\n   * Set isOpen property to true to open the drawer\n   */\n  @Prop({ mutable: true }) isOpen: boolean = false;\n\n  /**\n   * Set removePadding property to true to remove padding for drawer body\n   */\n  @Prop({ mutable: true }) removePadding: boolean = false;\n\n  /**\n   * position of the drawer. e.g. left, right, bottom\n   */\n  @Prop() position: string = 'left';\n\n  /**\n   * Width of the drawer\n   */\n  @Prop() drawerWidth: number = 480;\n\n  /**\n   * Inverse header colors\n   */\n  @Prop() hasInverseHeader: boolean = false;\n\n  /**\n   * Show / hide back icon\n   */\n  @Prop() hasBackIcon: boolean = false;\n\n  /**\n   * Show / hide back icon\n   */\n  @Prop() backText?: string;\n\n  /**\n   * Title of the drawer in the header bar\n   */\n  @Prop() drawerTitle?: string;\n\n   /**\n   * Aria label of the drawer\n   */\n   @Prop() ariaLabel?: string;\n\n  /**\n   * Aria label of the drawer\n   */\n    @Prop() ariaLabelBack?: string;\n\n  /**\n   * Aria label of the drawer\n   */\n   @Prop() ariaLabelClose?: string;\n\n  /**\n   * Show / hide close icon\n   */\n  @Prop() hasCloseIcon: boolean = true;\n\n  /**\n   * Override focus trap\n   */\n  @Prop() enabledFocusTrap: boolean = true;\n\n  /**\n   * Indicate when opening the drawer\n   */\n  @Event({ eventName: 'open' }) onOpen!: EventEmitter<void>;\n\n  /**\n   * Indicate when closing the drawer\n   */\n  @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n  /**\n   * Indicate when return to previous state of the drawer content\n   */\n  @Event({ eventName: 'back' }) onBack!: EventEmitter<void>;\n\n  /**\n   * Focus trap state\n   */\n  @State() focusTrap?: FocusTrap;\n\n  /**\n   * Footer Content state\n   */\n  @State() hasFooterContent = false;\n\n  /**\n   * Open the drawer\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the drawer\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n  }\n\n  /**\n   * Return to previous state of the drawer content\n   */\n  @Method()\n  async back() {\n    this.onBack.emit();\n  }\n\n  /**\n   * Enable/disable focus trap so it can be overrided by the client in case of something appearing over the drawer like a modal for example\n   */\n  @Watch('enabledFocusTrap')\n  handleFocusTrapProp(value: boolean) {\n    if (value) {\n      this.focusTrap?.activate();\n    } else {\n      this.focusTrap?.deactivate();\n    }\n  }\n\n  // @Watch('isOpen')\n  // handleOpen(openValue: boolean) {\n  //   if(openValue === true) {\n  //     this.onOpen.emit();\n  //   } else {\n  //     this.el.addEventListener('transitionend', () => {\n  //       this.onClose.emit();\n  //       this.el.shadowRoot && ((this.el.shadowRoot.querySelector('.drawer-body') as HTMLElement).scrollTop = 0);\n  //     }, { once: true});\n  //   }\n  // }\n\n\n  @Watch('isOpen')\n  handleOpen(openValue: boolean) {\n    if(openValue === true) {\n      this.onOpen.emit();\n      // Focus the first button element after the drawer is opened then focus trap\n      setTimeout(() => {\n        this.focusFirstElement();\n        this.focusTrap?.activate();\n      }, 50); // Add a slight delay to ensure the element is rendered\n    } else {\n      this.el.addEventListener('transitionend', () => {\n        this.focusTrap?.deactivate();\n        this.onClose.emit();\n        this.el.shadowRoot && ((this.el.shadowRoot.querySelector('.drawer-body') as HTMLElement).scrollTop = 0);\n      }, { once: true });\n    }\n  }\n\n  /**\n   * Find and focus the first element in the drawer\n   */\n  private focusFirstElement() {\n    const firstElement = this.el.shadowRoot?.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], [tabindex]:not([tabindex=\"-1\"])')[0] as HTMLElement;\n\n    if (firstElement) {\n      firstElement.focus();\n    }\n  }\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 clicking on the cross or layer\n   */\n  private onClickBack = (event: MouseEvent) => {\n    event.stopPropagation();\n    event.preventDefault();\n\n    this.back();\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    const drawerContent = this.el.shadowRoot?.querySelector(\".road-drawer-wrapper\");\n    this.focusTrap = createFocusTrap(drawerContent as HTMLElement, {\n      onActivate: () => drawerContent?.classList.add(\"focus-trapped\"),\n      onDeactivate: () => drawerContent?.classList.remove(\"focus-trapped\"),\n      tabbableOptions: {\n        getShadowRoot: true,\n      },\n    });\n  }\n\n  render() {\n    const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';\n    const removePaddingClass = this.removePadding ? 'remove-padding' : '';\n    const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';\n    const ariaLabel = this.ariaLabel ?? 'drawer';\n    const ariaLabelBack = this.ariaLabelBack ?? 'Back';\n    const ariaLabelClose = this.ariaLabelClose ?? 'Close';\n    const drawerDelimiterClass = this.drawerTitle && !this.hasInverseHeader ? 'drawer-delimiter' : '';\n    const backIconElement = this.hasBackIcon ? (\n      <button type=\"button\" class=\"drawer-action\" aria-label={ariaLabelBack} onClick={this.onClickBack}>\n        <road-icon icon={navigationChevron} rotate=\"180\"></road-icon>\n        {this.backText}\n      </button>\n    ) : null;\n    const closeIconElement = this.hasCloseIcon ? (\n      <button type=\"button\" class=\"drawer-close\" onClick={this.onClick} aria-label={ariaLabelClose}>\n        <road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon>\n      </button>\n    ) : null;\n    const drawerWidthValue = this.position === 'bottom' ? '100%' : `${this.drawerWidth}px`;\n\n    const footerSlotElement = this.el.shadowRoot?.querySelector('slot[name=\"footer\"]');\n    const hasFooterContent = footerSlotElement instanceof HTMLSlotElement && footerSlotElement.assignedNodes().length > 0;\n\n    return (\n      <Host class={`${drawerIsOpenClass}  drawer-${this.position}`} tabindex=\"0\" role=\"dialog\" aria-label={ariaLabel}>\n        <div class=\"road-drawer-wrapper\">\n          <div class=\"drawer-overlay\" onClick={this.onClick} tabindex=\"-1\"></div>\n          <div class=\"drawer-dialog\" style={{ maxWidth: drawerWidthValue }} role=\"document\">\n            <div class=\"drawer-content\">\n              <header class={`drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}`}>\n                {backIconElement}\n                {this.drawerTitle ? (\n                  <h2 class=\"drawer-title\">{this.drawerTitle}</h2>\n                ) : (\n                  <div class=\"drawer-title\">\n                    <slot name=\"title\" />\n                  </div>\n                )}\n                {closeIconElement}\n              </header>\n              <div class={`drawer-body ${removePaddingClass}`}>\n                <slot />\n              </div>\n              <footer class={`drawer-footer ${removePaddingClass}`} style={{ display: hasFooterContent ? 'block' : 'none' }}>\n                <slot name=\"footer\" />\n              </footer>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}

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: '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" }))));
+        return (h("details", { key: '369ce1cfb90f00ccdf3a513b074871f74587ea60', class: "dropdown", open: this.isOpen }, h("summary", { key: '7892d1f9a8dd3167d3894b3c8cd2f2ee3feda8f4', "aria-expanded": this.isOpen.toString(), tabindex: "0", role: "button", onClick: this.onClick, "tab-index": "0" }, h("div", { key: 'a24ca536cf7f3e6cf44c46f6dae355d527224570', class: `d-flex ${positionClass}` }, h("div", { key: '1e7ba5b51a68a4b0c79cd7bf256853dfa4b8ab3a', class: `${isLightButtonDropDown} ${isMediumButtonDropDown}` }, h("road-icon", { key: '64256d8c446025fa7199fbb7cda0777cf02c46c9', name: "navigation-more", class: "dropdown-button-icon", "aria-hidden": "true" })))), h("div", { key: 'b2020719de2304d5c4f606ed3f306aaf4f8a382a', class: `dropdown-menu ${directionClass} ${dropdownClass}` }, h("slot", { key: 'ee017bc6678acc0f8770a5c52921d8f886f35aa6', name: "list" }))));
     }
     static get is() { return "road-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/duration/duration.js

@@ -42,7 +42,7 @@ export class Duration {
         this.isOpen = false;
     }
     render() {
-        return (h("road-drawer", { key: '2485f665f08be8b983893075cb687c0db04c8add', "is-open": this.isOpen, position: "bottom", "drawer-title": this.header }, h("road-grid", { key: 'a3cfb812b1127a32eb31e1344944a8d52dd59f70' }, h("road-row", { key: '1742b311e96f8140ffbe88f45a4f42ede7940cc9', class: "duration-values" }, Array(Math.floor((this.max - this.min) / this.step) + 1).fill(this.min).map(((item, index) => (item + index * this.step))).map(item => h("road-col", { class: "col-3 col-md-2" }, h("road-card", { button: true, value: item }, h("road-label", null, Math.floor(item / 60).toLocaleString("en-GB", { minimumIntegerDigits: 2, useGrouping: false }), ":", (item % 60).toLocaleString("en-GB", { minimumIntegerDigits: 2, useGrouping: false })))))))));
+        return (h("road-drawer", { key: '17db42f462da76b54a24eb6dd52a0ce637be4c86', "is-open": this.isOpen, position: "bottom", "drawer-title": this.header }, h("road-grid", { key: '51fb1715dc70ffe94e82e171db3759c308c562e4' }, h("road-row", { key: 'a4b5d1e6489f39bb6bc698c7beadf5135d46e3e9', class: "duration-values" }, Array(Math.floor((this.max - this.min) / this.step) + 1).fill(this.min).map(((item, index) => (item + index * this.step))).map(item => h("road-col", { class: "col-3 col-md-2" }, h("road-card", { button: true, value: item }, h("road-label", null, Math.floor(item / 60).toLocaleString("en-GB", { minimumIntegerDigits: 2, useGrouping: false }), ":", (item % 60).toLocaleString("en-GB", { minimumIntegerDigits: 2, useGrouping: false })))))))));
     }
     static get is() { return "road-duration"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/flap/flap.js

@@ -19,7 +19,7 @@ export class Flap {
     }
     render() {
         const colorClass = this.filled ? `flap-${this.color}-filled` : `flap-${this.color}`;
-        return (h(Host, { key: 'acecc88123e94f737aef8b2d1026e8a9ce196a7d', class: `${colorClass} flap-${this.size}` }, h("slot", { key: '6ce8eccf19a94ca9e7c8b75f9da8b7a8df00376b' })));
+        return (h(Host, { key: '17654f70a4f17fb19164ebb3f29ca576768cda54', class: `${colorClass} flap-${this.size}` }, h("slot", { key: '06d531af72c1d328976fcc23f9877da54e39b667' })));
     }
     static get is() { return "road-flap"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/global-navigation/global-navigation.js

@@ -21,7 +21,7 @@ export class GlobalNavigation {
         this.selectedTabChanged();
     }
     render() {
-        return (h(Host, { key: 'bae96f32bd732721cbf401db21708a3bb601016b', role: "application" }, h("slot", { key: '65e4a67511fd702e3daaa1ba206fbb8ff67df6da' })));
+        return (h(Host, { key: '3153f9036b6fcbf625b4b6c2fb22dc270b20ac58', role: "application" }, h("slot", { key: '5bc133bc9abe1abcae66c1247215c1884ead0a3c' })));
     }
     static get is() { return "road-global-navigation"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/global-navigation-v2/global-navigation-v2.js

@@ -122,7 +122,7 @@ export class GlobalNavigationV2 {
         this.selectedTabChanged();
     }
     render() {
-        return (h(Host, { key: '1a523fcd448db62eb7a676184a22c7ae96e2d39e', role: "application" }, h("slot", { key: '7c46cc17b02a4425161d99b54ef1bca9711f179a' })));
+        return (h(Host, { key: '71284cfbbb2297134bfed397d45af88fc035d95f', role: "application" }, h("slot", { key: '04c47f8f5c69d72ef7c74e405037deeba4aa6019' })));
     }
     static get is() { return "road-global-navigation-v2"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/grid/grid.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class Grid {
     render() {
-        return (h("slot", { key: '8f4662a444e12323e10cda6ecc7a2fe9b2199ff3' }));
+        return (h("slot", { key: 'c40d139aa872024144528faafb114db1d2d8af13' }));
     }
     static get is() { return "road-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/img/img.js

@@ -58,7 +58,7 @@ export class Img {
     }
     render() {
         const placeholder = this.loadSrc !== undefined ? '' : 'placeholder';
-        return (h(Host, { key: '6fd414b74c5d8cfef4b87847bef754c117a41803', class: placeholder }, h("img", { key: '5f3bcae6d677124b042535c8a52d2870262db16c', class: "native-img", decoding: "async", src: this.loadSrc, alt: this.alt, onLoad: this.onLoad, onError: this.loadError, part: "image" })));
+        return (h(Host, { key: 'f059a8a30c536d517219ac57c2fb085a669cfcef', class: placeholder }, h("img", { key: 'c624708aaa39e50e26bfe1725225b6038949ad5b', class: "native-img", decoding: "async", src: this.loadSrc, alt: this.alt, onLoad: this.onLoad, onError: this.loadError, part: "image" })));
     }
     static get is() { return "road-img"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input/input.js

@@ -213,11 +213,11 @@ export class Input {
         const lessLabelClass = this.label !== '' ? '' : 'less-label';
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
         const isValidClass = this.success == true ? 'is-valid' : '';
-        return (h(Host, { key: '1c2b16f760683ce47bd7ec2d2fe09519468e8dd6', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}`, value: value, blockdecimal: this.blockdecimal }, h("input", { key: '8293d0b76bcdc9e71d10245e4beeefe6b643351a', class: `form-control ${hasValueClass} ${isInvalidClass} ${isValidClass} ${lessLabelClass}`, id: this.inputId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, enterKeyHint: this.enterkeyhint, autoFocus: this.autofocus, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, list: this.list, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.type === 'number' ? (event) => this.handleKeyDown(event) : undefined, "data-cy": 'road-input', ref: el => (this.inputEl = el) }), h("label", { key: 'e83de93fce5a18eaff5e7431abe53c56e3dc1860', class: "form-label", id: labelId, htmlFor: this.inputId }, this.label), this.error && this.error !== '' && (Array.isArray(this.error)
+        return (h(Host, { key: 'bd525f68b22069ef4874cef77a96a1f724b0129c', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}`, value: value, blockdecimal: this.blockdecimal }, h("input", { key: '9bae71920e835479725c6e37f0af8bc1ab93b7f5', class: `form-control ${hasValueClass} ${isInvalidClass} ${isValidClass} ${lessLabelClass}`, id: this.inputId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, enterKeyHint: this.enterkeyhint, autoFocus: this.autofocus, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, list: this.list, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.type === 'number' ? (event) => this.handleKeyDown(event) : undefined, "data-cy": 'road-input', ref: el => (this.inputEl = el) }), h("label", { key: '6637aff56cf6623099279d43dbd780fa1004da2f', class: "form-label", id: labelId, htmlFor: this.inputId }, this.label), this.error && this.error !== '' && (Array.isArray(this.error)
             ? // Si error est un tableau, on itère et génère un <p> pour chaque élément
                 this.error.map((err, index) => (h("p", { key: index, class: "invalid-feedback" }, h("road-icon", { slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), err.trim(), " ")))
             : // Si error est une chaîne, on la divise avec split et génère un <p> pour chaque élément
-                this.error.split(',').map((err, index) => (h("p", { key: index, class: "invalid-feedback" }, h("road-icon", { slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), err.trim(), " ")))), this.helper && this.helper !== '' && h("p", { key: '1d2f2cccf78bacd0aabdb4049a0852b0a8ef56d2', class: "helper" }, this.helper), this.type && this.type == 'password' && h("slot", { key: '2b9de94c0d1011f97e037ba8657257509c883986', name: "checklistPassword" })));
+                this.error.split(',').map((err, index) => (h("p", { key: index, class: "invalid-feedback" }, h("road-icon", { slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), err.trim(), " ")))), this.helper && this.helper !== '' && h("p", { key: '4add98d493556fddf6502dfc16516a5aa4df9a4b', class: "helper" }, this.helper), this.type && this.type == 'password' && h("slot", { key: 'd519756096faac3491e26829408089e7ba94cca8', name: "checklistPassword" })));
     }
     static get is() { return "road-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input-group/input-group.js

@@ -58,7 +58,7 @@ export class InputGroup {
             ? `size-${this.el.querySelector('road-input').sizes}`
             : '';
         const disabledClass = this.disabled ? 'is-disabled' : '';
-        return (h("div", { key: 'c789f52752140cc0f396a8e2e2fcf9725ca974d2', class: `input-group ${errorClass} ${disabledClass} ${sizeClass}` }, h("div", { key: '41870e22ddc72cd42c6b737962c11e075af78f91', class: "input-group-prepend" }, h("slot", { key: '80322c2acb0bfe220cef11df0a7fd03aad98186a', name: "prepend" })), h("slot", { key: '3b3c02a69bba482658a95f26fa46cb365ab373a5' }), h("div", { key: '2551b5848533d7564872892e04380a68216a4979', class: "input-group-append" }, h("slot", { key: 'c030afa5616bf26d7bcf99f09adc644fc2eeb2ca', name: "append" }))));
+        return (h("div", { key: '8c08ce8ab1662c2b1c34c8f0ea4f30a982437cde', class: `input-group ${errorClass} ${disabledClass} ${sizeClass}` }, h("div", { key: 'c4bc179b6176005b3c16cb591c02f5102f212297', class: "input-group-prepend" }, h("slot", { key: '6378c664460898aa4f0370a6fb3168090728b305', name: "prepend" })), h("slot", { key: '7807f07b194b432cd4c6a0f2c736aff0be71c039' }), h("div", { key: '7af00c747970fb2a57f2f02e4257f5ce68274699', class: "input-group-append" }, h("slot", { key: 'b8b8119295c1b1abe002f4a8bfbcbe76f92df78d', name: "append" }))));
     }
     static get is() { return "road-input-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -57,13 +57,13 @@ export class Item {
                 target,
             };
         const showDetail = detail !== undefined && detail;
-        return (h(Host, { key: '0aea3486ca34a04bfa7e0690181466e0f563ecdd', "aria-disabled": disabled ? 'true' : null, class: {
+        return (h(Host, { key: '62e8ef9193a70f92b46e435d577e53a8f9a1611a', "aria-disabled": disabled ? 'true' : null, class: {
                 [`item-lines-${lines}`]: lines !== undefined,
-            } }, h(TagType, Object.assign({ key: 'a2b491a400eb88b4af1ac7a26a5a00e32fde08cb' }, attrs, { class: {
+            } }, h(TagType, Object.assign({ key: 'e632935ddf13d5ac58008c81056624a8c0908311' }, attrs, { class: {
                 'item-native': true,
                 'item-active': this.active,
                 [`layout-${layout}`]: layout !== undefined,
-            }, part: "native", disabled: disabled }), h("slot", { key: 'b78e532a469747c50da1368932d4f582eb87f28b', name: "start" }), h("div", { key: 'de095dfd6b972de3daebc9217842f3b5b2f593c8', class: "item-inner" }, h("div", { key: '9f43e5afd0c887e8f5df8fee8b6a4e95b205fbd0', class: "input-wrapper" }, h("slot", { key: '29497de23731ee53ee5e7665a03959e7fdc5df9b' }), h("div", { key: '16a247a409fa1803a0026c6923fc2b99b64b351b', class: "input-wrapper-info" }, h("road-label", { key: 'aefe0b6c06109bd0c17d405968344c24549332e7', class: "input-wrapper-info-title" }, this.titleItem), h("p", { key: '9296d6542fee43a933193b284bc7cc8a1e1c5048', class: "input-wrapper-info-text" }, this.text))), h("slot", { key: 'f66a05fb104f8ddf9553a99e8a75a59b0f24d9d7', name: "end" }), showDetail && h("road-icon", { key: '5eab0e8ca80203ec5d276a8403aba93746953b7e', icon: detailIcon, lazy: false, class: "item-detail-icon" })))));
+            }, part: "native", disabled: disabled }), h("slot", { key: 'c51366e9955782f7e380557254aae4667ab2fe37', name: "start" }), h("div", { key: 'c1d40f35a45340ac616512131598989692cc903b', class: "item-inner" }, h("div", { key: '129ed3383339bb49e14f88379f3dc98875727179', class: "input-wrapper" }, h("slot", { key: '45112348bd0b31189aa597924eb0751ff24394b0' }), h("div", { key: '17962d33cebdf99f65a6dffe6e86ceed849d708f', class: "input-wrapper-info" }, h("road-label", { key: '767953cd36a88ea0a3fba4aa250440a75533cc03', class: "input-wrapper-info-title" }, this.titleItem), h("p", { key: '86f97fab976f4726eb8862be80dcd5296b5b7215', class: "input-wrapper-info-text" }, this.text))), h("slot", { key: '9dfeaa47eea39eaaed91df7e277bc6d0809eed3b', name: "end" }), showDetail && h("road-icon", { key: '553c6f5e5b5d58d47b3aad7854deb35e6b7116a7', icon: detailIcon, lazy: false, class: "item-detail-icon" })))));
     }
     static get is() { return "road-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/label/label.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class Label {
     render() {
-        return (h("slot", { key: 'f59ac081c472add0201c72c48c5146a231bf05fd' }));
+        return (h("slot", { key: '407fbaed0a1d77ab406963598b44eecdd55fa531' }));
     }
     static get is() { return "road-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/list/list.js

@@ -5,9 +5,9 @@ import { Host, h } from "@stencil/core";
 export class List {
     render() {
         const { lines } = this;
-        return (h(Host, { key: '2c2537547489eb97f46ccb6306d3d697773ab719', class: {
+        return (h(Host, { key: 'b43b3c57de0d170edd667e68ebde84c88e40e3bd', class: {
                 [`list-lines-${lines}`]: lines !== undefined,
-            } }, h("slot", { key: 'f4449d3df668e2d77f83103bb2e87915ef101efc' })));
+            } }, h("slot", { key: '5a71c328d62f78e83bd00d35fd3b2107d3050cec' })));
     }
     static get is() { return "road-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/modal.js

@@ -65,7 +65,7 @@ export class Modal {
         const modalIsOpenClass = this.isOpen ? 'modal-open' : '';
         const inverseHeaderClass = this.hasInverseHeader ? 'modal-header-inverse' : '';
         const closeIconElement = this.hasCloseIcon ? h("button", { type: "button", class: "modal-close", onClick: this.onClick, "aria-label": "Close" }, h("road-icon", { icon: navigationClose, "aria-hidden": "true" })) : '';
-        return (h(Host, { key: 'fadc5b7f130b78ce930508f169a77c36c592a8b7', class: `modal ${modalIsOpenClass}`, tabindex: "-1", role: "dialog", "aria-label": "modal" }, h("div", { key: 'b06a7795a91860febafb941215dfffd796fda4c8', class: "modal-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { key: 'ddd6999c2e6069518d634b60502eb9cc0b311aba', class: "modal-dialog", style: { maxWidth: `${this.maxWidth}px` }, role: "document", tabindex: "0" }, h("div", { key: '17bb4a3d1281d71b0b4d3f3e1765491f768aa460', class: "modal-content" }, h("header", { key: '5d1cb9be50df022c0e0ce59e82f3df6f2ec45369', class: `modal-header ${inverseHeaderClass}` }, h("h2", { key: '51fd0108264ba6a54c93047dbccf9e69ae7b3032', class: "modal-title" }, this.modalTitle), closeIconElement), h("div", { key: 'f966e33d28c4e59dee755dc4ac2c225c778cf782', class: "modal-body" }, h("slot", { key: '50b4fe9fb58ee3eace39f5ce8f07a83fb05df81b' }))))));
+        return (h(Host, { key: '230e6f6eaae339d5314c46db9fd0d67fc2d846fc', class: `modal ${modalIsOpenClass}`, tabindex: "-1", role: "dialog", "aria-label": "modal" }, h("div", { key: '2080e60ffe8a97a331f68f314d2aee59c7a86bf5', class: "modal-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { key: '47044cf9e0b9dd04550db1ec3a82c263b4c547ee', class: "modal-dialog", style: { maxWidth: `${this.maxWidth}px` }, role: "document", tabindex: "0" }, h("div", { key: 'e6abe2cb25564e1aff45d1c4a29a8504224b4456', class: "modal-content" }, h("header", { key: '6459cf83929bbf51b797bb636fd88369fabda3d3', class: `modal-header ${inverseHeaderClass}` }, h("h2", { key: '050a8988f516aa9573f2d29b952dad3f52ead85e', class: "modal-title" }, this.modalTitle), closeIconElement), h("div", { key: 'eed07ba054f757aeba4f676727c101dd12c94a7d', class: "modal-body" }, h("slot", { key: '221f6df6bf95583b4edd0d1dfe3a2eaec3fe7dae' }))))));
     }
     static get is() { return "road-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/navbar/navbar.js

@@ -21,7 +21,7 @@ export class Navbar {
         this.selectedTabChanged();
     }
     render() {
-        return (h(Host, { key: '61786009c0bb1357257674a72b0f3dbf3f5c38a8', role: "menubar" }, h("slot", { key: '2f3cdbc13d1bf0d3535035bd2098ed20d048dee0' })));
+        return (h(Host, { key: 'c121e166433a74cb9bfe086872e29d0aceff6a4f', role: "menubar" }, h("slot", { key: '4152762dbcbf5467698a3cde344c7898b579d505' })));
     }
     static get is() { return "road-navbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -61,11 +61,11 @@ export class NavbarItem {
             rel,
             target,
         };
-        return (h(Host, { key: 'c392c7788ef068bff267fbc3508d3a9b9fe753d0', onClick: this.onClick, onKeyup: this.onKeyUp, role: "menuitem", tabindex: "0", "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `navbar-item-${tab}` : null, disabled: disabled, class: {
+        return (h(Host, { key: '7ff4e21f2f090d7b2bee47c1395468c89d619c63', onClick: this.onClick, onKeyup: this.onKeyUp, role: "menuitem", tabindex: "0", "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `navbar-item-${tab}` : null, disabled: disabled, class: {
                 'navbar-item': true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
-            } }, h("a", Object.assign({ key: '96d3d1d8ce173906c6427a4b53dff251f2ad2d28' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { key: '2a9dd73feff76d436c37f27fc1b9a1c2678c2b6e', class: "button-inner" }, h("slot", { key: '603703ddc7865278113ec4d953ab1fc71bbc08d7' })))));
+            } }, h("a", Object.assign({ key: 'cb857860824f7b5244d014868b37c5242664f2d2' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { key: '6d03a2caf31f24f12f0cd0d833a0c546ca01155f', class: "button-inner" }, h("slot", { key: '6c64a44e43ef3d0f42ab1630b88b3e5a7529968a' })))));
     }
     static get is() { return "road-navbar-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/navbar-item-v2/navbar-item-v2.js

@@ -61,11 +61,11 @@ export class NavbarItem {
             rel,
             target,
         };
-        return (h(Host, { key: '50cadf50d920c724b646d0ef5dfb1bf994b42891', onClick: this.onClick, onKeyup: this.onKeyUp, role: "menuitem", tabindex: "0", "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `navbar-item-${tab}` : null, disabled: disabled, class: {
+        return (h(Host, { key: 'b5d5414801e5eb897dd1f346834fda3f6408ef4d', onClick: this.onClick, onKeyup: this.onKeyUp, role: "menuitem", tabindex: "0", "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `navbar-item-${tab}` : null, disabled: disabled, class: {
                 'navbar-item': true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
-            } }, h("a", Object.assign({ key: 'b8915357668428324fddc6dc6cf038dc8f55cfeb' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { key: '103bfedba55dab13e169d5806fa5ae3873ed860b', class: "button-inner" }, h("slot", { key: 'd1e8a5fd74c0b42550b050e4212a99e5df04902b' })))));
+            } }, h("a", Object.assign({ key: '88b26c7312ff31508d4d231ec04036185f877fc6' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { key: '97a6306b28115a3d1aa8961895aaa84f5a0fbe10', class: "button-inner" }, h("slot", { key: 'd5dfe7aae57d389c6cd71fbe0b01e6cd5ec4ed5e' })))));
     }
     static get is() { return "road-navbar-item-v2"; }
     static get encapsulation() { return "shadow"; }

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

@@ -28,7 +28,7 @@ export class NavbarV2 {
     }
     render() {
         const compactClass = this.compact ? 'compact' : '';
-        return (h(Host, { key: '43aff9eafd66ec2fb7c45a4707c758b3b182f64b', role: "menubar", class: `${compactClass}` }, h("slot", { key: '66b8748a5d4395bd03edff1b9490bdc0fe63f01a' })));
+        return (h(Host, { key: 'a7dbd950685bc968dde55225595dfda20e2ede07', role: "menubar", class: `${compactClass}` }, h("slot", { key: '0181dc8feee84135b55ee42d2b1aaaf1d8e24a78' })));
     }
     static get is() { return "road-navbar-v2"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/phone-number-input/phone-number-input.js

@@ -154,9 +154,9 @@ export class RoadPhoneNumberInput {
         const isErrorClass = this.errorMessage.length ? 'is-error' : '';
         const hasValueClass = this.hasValue() ? 'has-value' : '';
         const sizes = 'xl';
-        return (h(Host, { key: 'b35e9d16e6e4f29defef7bdcd5cf8c2a2bd2c861' }, h("div", { key: '4c2a4f6b4d6d28bfc90b2cc85d9ab3a2c5989a2b', class: 'phone-number-inputs-container' }, h("div", { key: '5c94cfdfb637deabaaee01375f80276bb37f2ac3', class: `road-phone-input-select ${isErrorClass} ${isInvalidClass}`, slot: "prepend" }, h("select", { key: '8b226ae681f17788d5c476d531614b6063eff700', id: selectId, class: `form-select-area has-value`, "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled, onChange: (event) => this.handleSelect(event), "aria-label": this.codeLabel, tabIndex: this.disabled ? -1 : 0 }, this.countryOptions && this.countryOptions.map(option => (h("option", { value: option.value, disabled: option.disabled, selected: option.selected }, option.label)))), h("label", { key: 'b12b6fcbf96de164bca500332d9f9b363e6af4bc', class: "form-select-area-label", id: labelId, htmlFor: selectId }, this.codeLabel), h("label", { key: '04843eb39336e241d60d5983c1e92a6af3edead4', class: "form-select-area-value", id: valueId, htmlFor: selectId }, "+", this.selectedCountryCode)), h("input", { key: 'fb9a9b002c1638df2eb593c6f95181cca6b91c14', type: 'tel', id: inputId, class: `input-${sizes} phone-number-input-field ${hasValueClass} ${isErrorClass}`, value: this.phoneValue, required: this.required, tabIndex: 0, onInput: (event) => this.handleInput(event) }), h("label", { key: '83bafd94dea321d0a8ab7cd50cc6d29f71d83d34', class: "phone-number-input-label", id: labelId, htmlFor: inputId }, this.phoneLabel)), this.errorMessage
+        return (h(Host, { key: '24cd537172b031b54a8d4b551316c6d35ebfb457' }, h("div", { key: 'fb2728e530fca3d44e2bd54ad5c326bffdec704e', class: 'phone-number-inputs-container' }, h("div", { key: 'f8143383f1a4d27a6e1d0f5d31396b08fee31ad7', class: `road-phone-input-select ${isErrorClass} ${isInvalidClass}`, slot: "prepend" }, h("select", { key: 'bc5cd7865dced3c1a7a8c412ce487a1e95c74bd9', id: selectId, class: `form-select-area has-value`, "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled, onChange: (event) => this.handleSelect(event), "aria-label": this.codeLabel, tabIndex: this.disabled ? -1 : 0 }, this.countryOptions && this.countryOptions.map(option => (h("option", { value: option.value, disabled: option.disabled, selected: option.selected }, option.label)))), h("label", { key: '2a460863f32b098caa5bc47aade77089038d1cb1', class: "form-select-area-label", id: labelId, htmlFor: selectId }, this.codeLabel), h("label", { key: '747540f6cf9f2402e12f370970631c44177fda73', class: "form-select-area-value", id: valueId, htmlFor: selectId }, "+", this.selectedCountryCode)), h("input", { key: '02b9cb47645876729fb4206c8c930f4a214f53a3', type: 'tel', id: inputId, class: `input-${sizes} phone-number-input-field ${hasValueClass} ${isErrorClass}`, value: this.phoneValue, required: this.required, tabIndex: 0, onInput: (event) => this.handleInput(event) }), h("label", { key: 'c3de74c259cc32edd1cd107bab4bb8c00be91fb5', class: "phone-number-input-label", id: labelId, htmlFor: inputId }, this.phoneLabel)), this.errorMessage
             && this.errorMessage !== ''
-            && h("p", { key: '01aafef72de6d89f0f8bbd912759ea98b3992e87', class: "invalid-feedback" }, h("road-icon", { key: '02a98a05942b1c096a70a4112c0f074faa5843d7', slot: "start", color: 'danger', name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), this.errorMessage)));
+            && h("p", { key: '334407a43c985abd508a0dd38a88af4e2587a525', class: "invalid-feedback" }, h("road-icon", { key: 'c9bfb7b1a24f0ea3f2cc8a335e28c99c38a5c004', slot: "start", color: 'danger', name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), this.errorMessage)));
     }
     static get is() { return "road-phone-number-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/plate-number/plate-number.js

@@ -92,10 +92,10 @@ export class PlateNumber {
     render() {
         const value = this.getValue();
         const motorbikeClass = this.motorbike ? 'motorbike-plate' : '';
-        return (h("road-input-group", { key: 'ff8a8904113c2ba38d351de6d7e8a5ca6552344e', class: `plate-number plate-number-${this.country.toLowerCase()} ${motorbikeClass}` }, h("label", { key: '00a82c0c874d044dffae46bcd3c125cabf93871e', slot: "prepend", class: "input-group-prepend" }, h("div", { key: 'f19852dda75eead5634c48bdd95db8e69b3fcf2d', class: "plate-number-start" }, h("road-icon", { key: '9e8ec737ee80c35402b26ac104a31f9df199fe86', class: "plate-number-icon", icon: licensePlateStarEu }), h("div", { key: '2f3483237c65a1cb542ebd3abd7caa43c8d0fb60', class: "plate-number-location", "aria-label": this.country, role: "img" }, this.countries
+        return (h("road-input-group", { key: '078fe518c39b731041ebff1825b9119d0f0ceb94', class: `plate-number plate-number-${this.country.toLowerCase()} ${motorbikeClass}` }, h("label", { key: '7eb5ad6dc9eaff3f22398d37fc0f352779aa70c7', slot: "prepend", class: "input-group-prepend" }, h("div", { key: '1b40d4b4f5cafedbc76cf31441012a1c006d6afb', class: "plate-number-start" }, h("road-icon", { key: 'aacc90e679c24a386964d6d12088a1a4e499ac80', class: "plate-number-icon", icon: licensePlateStarEu }), h("div", { key: 'bfc3dee0ba4400aed94e31f3bbb6ce0c716f15b4', class: "plate-number-location", "aria-label": this.country, role: "img" }, this.countries
             .filter(item => item.country === this.country)[0].letter))), this.motorbike
             ? (h("textarea", { class: "form-control plate-number-input mb-0", disabled: this.disabled, placeholder: this.placeholder != null ? this.placeholder : this.countries.filter(item => item.country === this.country)[0].placeholder, readOnly: this.readonly, maxlength: "9", rows: 2, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }))
-            : (h("input", { class: "plate-number-input mb-0", disabled: this.disabled, placeholder: this.placeholder != null ? this.placeholder : this.countries.filter(item => item.country === this.country)[0].placeholder, readOnly: this.readonly, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus })), h("label", { key: '0378a2bbcaa0fd90f7a3f195f1a4e31806e2ff13', slot: "append", class: "input-group-append" }, h("div", { key: 'fddb65007529730731c4410cf407bdcbcfcbbf93', class: "plate-number-end" }))));
+            : (h("input", { class: "plate-number-input mb-0", disabled: this.disabled, placeholder: this.placeholder != null ? this.placeholder : this.countries.filter(item => item.country === this.country)[0].placeholder, readOnly: this.readonly, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus })), h("label", { key: 'bbdbde5a98aec4e5d91b3c39af8f5e8d7141730d', slot: "append", class: "input-group-append" }, h("div", { key: '506043ccefb71abc11caf7f0f865ca13d1cd2bdc', class: "plate-number-end" }))));
     }
     static get is() { return "road-plate-number"; }
     static get encapsulation() { return "scoped"; }

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

@@ -31,7 +31,7 @@ export class Dropdown {
         this.isOpen = false;
     }
     render() {
-        return (h("details", { key: 'b87c57717a2b24c36a021566c0caf902be2dc730', class: "dropdown", open: this.isOpen }, h("summary", { key: '5b8a7a636d992b9f7cf087de5792f77570b031a7', "aria-expanded": `${this.isOpen}`, tabindex: "0", role: "button", onClick: this.onClick }, h("div", { key: '8fa86bcbcb09361bbddbdaf02e239c1a6ee439b2', class: `d-flex` }, h("div", { key: '8f72235d6d44e20671022d84718aecf76cb0f2a2' }, h("road-avatar", { key: '5a3075b025e47fd0c5e092863fae3a111ca5b737' }, h("slot", { key: 'e736fe17013d86ca78a4bca99af10e6a595c151c', name: "avatar" }))))), h("div", { key: 'c12f79bff86f7674764ff9f498394a172044997a', class: `dropdown-menu` }, h("div", { key: '9ea9939892d5b0b21a45d99120981887ee7816ed', class: "profil-item" }, h("road-avatar", { key: '3c24e96cf92bc6979c0d5212cb58285b35598de9', size: "sm" }, h("slot", { key: 'c8ce0ac4929af5c830628c477cec9dbfc584fd7e', name: "avatarItem" })), h("div", { key: '981466eec9a42648620fa4d77d0294bdde264316', class: "profil-item-info" }, h("span", { key: 'aca08ad4ffb9439e649a5f83d3b34a4813465372', class: "profil-item-info-name" }, h("slot", { key: 'c7fa79f90c906e705cb89b1b1eea664f7852aa60', name: "name" })), h("road-label", { key: '77410fe9d9f4af29ecc59f787840a39490ebbf26' }, h("slot", { key: '5055c32f3bfefc68084e42417ab54959e2d1fae7', name: "email" })))), h("slot", { key: '656ad0ffc1bb8ebb1725ddf823ffc29384448a0a', name: "list" }))));
+        return (h("details", { key: '6b4e442ce01f574182606e7c09e63e6d8e0d96b9', class: "dropdown", open: this.isOpen }, h("summary", { key: '96a1c367ac0b6602e6e8151579b108783ba53c8e', "aria-expanded": `${this.isOpen}`, tabindex: "0", role: "button", onClick: this.onClick }, h("div", { key: 'f01c4d03a12d00874238e2aa3abb7be483e45476', class: `d-flex` }, h("div", { key: 'ec9d487f6cffc7e6e754f560302ecf209b48805a' }, h("road-avatar", { key: '3f6b7e0ad05414771176f7b7e28cfc79b9590e34' }, h("slot", { key: 'd38ff4e91a859e64da6788f10cf341ade9efdfd5', name: "avatar" }))))), h("div", { key: '49c70f04f60cd49f8f7dea3f3edf538886245a6e', class: `dropdown-menu` }, h("div", { key: '251bc17b6dd66d76d780f8736df547b07b8ea028', class: "profil-item" }, h("road-avatar", { key: '0facee183c2290c5dbfaf78a38bbd040693124c0', size: "sm" }, h("slot", { key: '578b32315727e7193fc88e3a2c3f8dde364970da', name: "avatarItem" })), h("div", { key: '7faa802856269a4440b8602772acc2cfde110341', class: "profil-item-info" }, h("span", { key: 'efbeb25518e9a70da4fa52d6633abcc304efd9ae', class: "profil-item-info-name" }, h("slot", { key: 'bbfe23bb0e4832bb62a9f4232fd0291981fdbaa4', name: "name" })), h("road-label", { key: '2abf8f36c90e55491484a9c8f040a68bd2255be6' }, h("slot", { key: '4fb41b62b83d688e1ba940c784d1947a64e7a17a', name: "email" })))), h("slot", { key: '0fa5e3352f774d950d5d2cd4ad3e44b0eb106140', name: "list" }))));
     }
     static get is() { return "road-profil-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress/progress.js

@@ -54,7 +54,7 @@ export class ProgressBar {
         let step = Math.ceil((this.value / 100) * this.numbersteps);
         step = Math.min(step, this.numbersteps);
         step = Math.max(step, 0);
-        return (h(Host, { key: 'b95f31407c58d8d7d6a25044b76c8f2f233d74d1', class: "progress-element" }, h("div", { key: 'dfa03b1cbb5e4c417eed00d25b394fd7208e0f14', class: `${light} progress-${this.color} ${animation}` }, h("div", { key: '7f0ca4d17c77c88d24457ac9b5a5112ff11ddbf2', class: "progress-bar", role: "progressbar", style: { width: `${progressBarFilledPercentage}%` }, "aria-valuenow": progressBarFilledPercentage, "aria-valuemin": "0", "aria-valuemax": "100", "aria-labelledby": "loadinglabel", "aria-label": "progress bar" })), h("div", { key: '45cc2ee26a70152ada39408101f675ffb3470fc2', class: `${fullwidth}` }, h("span", { key: '545f2ab462c04d2f3b38b0c2de1b067f639e864a', id: "loadinglabel", class: "progress-element-label" }, this.label), this.showstep && (h("span", { key: '2d79c6432b78f9f4cbb2ae4c4afcf2a4de9c0a3a', class: "progress-element-step" }, step, "/", this.numbersteps)))));
+        return (h(Host, { key: '09665cbad7d552d5fdedb655e474a917bbc7108c', class: "progress-element" }, h("div", { key: '3fd59f777ad3b7a0de6079b24e2ff5369574a1be', class: `${light} progress-${this.color} ${animation}` }, h("div", { key: 'ffc8433bdb99c8ad33e025b39ff032be6f7b5c0d', class: "progress-bar", role: "progressbar", style: { width: `${progressBarFilledPercentage}%` }, "aria-valuenow": progressBarFilledPercentage, "aria-valuemin": "0", "aria-valuemax": "100", "aria-labelledby": "loadinglabel", "aria-label": "progress bar" })), h("div", { key: '9974af0eb6c68404b5ed3b11aa8f3f9e814181a0', class: `${fullwidth}` }, h("span", { key: '2f9724da220d0c3148d62b251a8a249efb974bd2', id: "loadinglabel", class: "progress-element-label" }, this.label), this.showstep && (h("span", { key: '695c562d666a72a9d4e29dc0d8a060bbd9745895', class: "progress-element-step" }, step, "/", this.numbersteps)))));
     }
     static get is() { return "road-progress"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-indicator-horizontal/progress-indicator-horizontal.js

@@ -29,7 +29,7 @@ export class Stepper {
         const urlStep1 = this.urlStep1 !== undefined ? `${this.urlStep1}` : '#';
         const urlStep2 = this.urlStep2 !== undefined ? `${this.urlStep2}` : '#';
         const urlStep3 = this.urlStep3 !== undefined ? `${this.urlStep3}` : '#';
-        return (h(Host, { key: '2f7ef35d5517a148676c46d55561a47092ed0ff3' }, h("nav", { key: 'efe3d51a472a7472a9f2f0da1403e223bca22513' }, h("ul", { key: 'f4046d581b8ed717bda8be93efa0870bfa7e4369', class: `${colorClass}` }, h("li", { key: 'fb431196011a0cd284847f13b1d5999e69487b5b', class: `${stateClass}` }, h("a", { key: '28b3e5b0c12593b2c26832777766524f5342c253', class: "progress-indicator-horizontal-link", href: `${urlStep1}` }, h("span", { key: '535d3f5fc73aa22f87a9284ee4498dd975c3e977', class: "progress-indicator-horizontal-icon" }, h("slot", { key: '492dbf0cfff34689a1513714c475a9f2b4cc6727', name: "progress-indicator-horizontal-icon" })), h("span", { key: 'ecaf988f2dec663478169103b34820cdf7da4702', class: "progress-indicator-horizontal-title" }, h("slot", { key: '4443bf77b78b0fcbb44046b95a9121abe0e22226', name: "progress-indicator-horizontal-title" })))), h("li", { key: '15328f9d9a15ada2ff751b651084bfa0e83f7d5a', class: `${stateSecondStepClass}` }, h("a", { key: '441f9a53903b3a14d0fab8296213ce10f16dc5b6', class: "progress-indicator-horizontal-link", href: `${urlStep2}` }, h("span", { key: '31b6487818279d37e486acb20363b527762481da', class: "progress-indicator-horizontal-icon" }, h("slot", { key: 'b03d967c5a09640253b5edb8425f855d8eb790bc', name: "progress-indicator-horizontal-icon2" })), h("span", { key: 'bfcd4994aa5fb7eee27419033b87f0e248ddeb81', class: "progress-indicator-horizontal-title" }, h("slot", { key: 'f5a493c800b9f7466ffb85d37d460844cbb05573', name: "progress-indicator-horizontal-title2" })))), this.numberStep == 3 && h("li", { key: 'bca52096f27dc5e9ae3e12419882b4dd7a8bc1d9', class: `${stateThirdStepClass}` }, h("a", { key: '74f8d7e8fef0f43a07d1cca3f5233d364e77eca5', class: "progress-indicator-horizontal-link", href: `${urlStep3}` }, h("span", { key: 'f37905f33aa30a1fe5d64bea3ed352bd22faf729', class: "progress-indicator-horizontal-icon" }, h("slot", { key: '27666dc115efe677af2bf91d73dd5a1f35c28518', name: "progress-indicator-horizontal-icon3" })), h("span", { key: 'cd081a852ac065372324b17e8a3992429b87b16e', class: "progress-indicator-horizontal-title" }, h("slot", { key: 'fd71af01b710df38a3a06ed75757d2df1d8193ea', name: "progress-indicator-horizontal-title3" }))))))));
+        return (h(Host, { key: 'f111144edc55e730674a4bd5e1633e5a91b97015' }, h("nav", { key: '7591c2c39a2827b36d351a3b28a85c6156b64b2d' }, h("ul", { key: '78fa0a7bd33e11c970ce71df3e86ad82adf092f4', class: `${colorClass}` }, h("li", { key: '3e395290532c35a096b9c6f24936ed37041f6205', class: `${stateClass}` }, h("a", { key: 'c5eea4f543e4d74d1a0616b2352961edfd5516b5', class: "progress-indicator-horizontal-link", href: `${urlStep1}` }, h("span", { key: 'de796e773f0e4529d0b7fdbe61e6c11d8e6279ca', class: "progress-indicator-horizontal-icon" }, h("slot", { key: 'fb65dc7ad9d3f422bacc3ccba87e2be2171d7f9e', name: "progress-indicator-horizontal-icon" })), h("span", { key: 'd7cf1de8faa1821bba9280c171735e10448b9453', class: "progress-indicator-horizontal-title" }, h("slot", { key: 'f0d15278bee067c765fa466e1e4a368b23c06703', name: "progress-indicator-horizontal-title" })))), h("li", { key: '25fb14e2d761124258ac90fcd3c7df82a3d77e16', class: `${stateSecondStepClass}` }, h("a", { key: 'f253c9d89b3fa7f430be3bdcdfe8cacd828fdbe0', class: "progress-indicator-horizontal-link", href: `${urlStep2}` }, h("span", { key: 'd85c7358d428abb5ee621355cab2c8c1f87c802a', class: "progress-indicator-horizontal-icon" }, h("slot", { key: '1c7b3678964d7cb76420b427654488f745f58491', name: "progress-indicator-horizontal-icon2" })), h("span", { key: 'f9df661db7d252d4660652a3c1a4cfbbc000a7d0', class: "progress-indicator-horizontal-title" }, h("slot", { key: 'b58b9a83c49dbf5883f12380d659f65a68167181', name: "progress-indicator-horizontal-title2" })))), this.numberStep == 3 && h("li", { key: '93e3ff18e0f07844d00fed42acb091b9482798d5', class: `${stateThirdStepClass}` }, h("a", { key: '10ea0a5904d2308eeefc1707a3fdb596c4cdb4e3', class: "progress-indicator-horizontal-link", href: `${urlStep3}` }, h("span", { key: '7da570caa2a771389acc1b44870f2712afb17b96', class: "progress-indicator-horizontal-icon" }, h("slot", { key: '5235530ca67e9c2730eb1130e7f98454bb3c58d1', name: "progress-indicator-horizontal-icon3" })), h("span", { key: '22d8d0d86ad2b8035b91a63783381c8f7c40e2dd', class: "progress-indicator-horizontal-title" }, h("slot", { key: '06193f06fa83c0d64ed13ad40e6a37f73da7592e', name: "progress-indicator-horizontal-title3" }))))))));
     }
     static get is() { return "road-progress-indicator-horizontal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-indicator-vertical/progress-indicator-vertical.js

@@ -12,7 +12,7 @@ import { Host, h } from "@stencil/core";
  */
 export class ProgressIndicatorVertical {
     render() {
-        return (h(Host, { key: '8df70b09eb63e027b39c4843ae497cef5e39c2ed' }, h("nav", { key: '0d6025a44bd845363096fc6e002a334263dac3c9' }, h("ul", { key: '4d81713de26f798637118ee3af681eb6f668513f' }, h("li", { key: 'bb4bf5dd01f940e3811ab5adf4a90d05ef4fab8c' }, h("slot", { key: '18e8f5f3cddb2a2c6816127596d469a93ca2430c' }))))));
+        return (h(Host, { key: '7cb6fe2a4a78937fc84bd9b0daf0c9445a051fc5' }, h("nav", { key: 'da179588065c7d0e9469a067eee27aeb7d497ab5' }, h("ul", { key: '232392a6dc63b3923550dd58db7ba2eae621a79b' }, h("li", { key: '7e545e5818a67bc4fce6b97b4d26191da6f58c4c' }, h("slot", { key: 'c815524158b6e599dfbbaaae21cee71abc33583a' }))))));
     }
     static get is() { return "road-progress-indicator-vertical"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-indicator-vertical-item/progress-indicator-vertical-item.js

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class ProgressIndicatorVerticalItem {
     render() {
-        return (h(Host, { key: '17ae276834ff832dcf77111aeeda48b8ca9dc72e' }, h("slot", { key: '624e68ac134752cb835e1cfdba7aa1db8d1f5152' })));
+        return (h(Host, { key: '0c9d2ff669b0e8c23d2e319e02811af7b572c7d9' }, h("slot", { key: 'd8c61ee8af278f07e4431fe67551b9627b1e8fe1' })));
     }
     static get is() { return "road-progress-indicator-vertical-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/progress-tracker/progress-tracker.js

@@ -9,7 +9,7 @@ import { Host, h } from "@stencil/core";
  */
 export class ProgressTracker {
     render() {
-        return (h(Host, { key: '558bbc6dc32d8f5e29cd9dd0e33ff210bc8e231f' }, h("nav", { key: '386429b7b2670bd9e1cfde6eb895fcdb9fc26a66' }, h("ul", { key: '67357a2d0f7777b39b390a6fc1f2609f7e504f0d' }, h("li", { key: '6bd942a3d6c358f1988b58b16c65bc1f635c690f' }, h("slot", { key: '47ab21f544caa20f3623d7a6b299a84cb17b2927' }))))));
+        return (h(Host, { key: '32c91397fb443308453f8756ffbbb4b3aef1ac80' }, h("nav", { key: '9eada9c4e79a0deddce2f431834e454bd184dc1e' }, h("ul", { key: '9c51d05a05e3395ec75ee2ec99c466c545075719' }, h("li", { key: '551f69d0d79aa99104e38d52b1b17686fc0bd82c' }, h("slot", { key: '64c3a9c01936473628282b0caa49746bb97f1b78' }))))));
     }
     static get is() { return "road-progress-tracker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-tracker-item/progress-tracker-item.js

@@ -12,7 +12,7 @@ import { Host, h } from "@stencil/core";
  */
 export class ProgressTrackerItem {
     render() {
-        return (h(Host, { key: 'f0323f8e11d15162868f6679d958a7eb3c732c94' }, h("slot", { key: 'f723c3ff78b34c68bbe3f675d93ff61a6eb24a27' })));
+        return (h(Host, { key: 'f080eb45be07dd54b9f028b96febd5b7090527cf' }, h("slot", { key: '9ac63fa7a9a0d4e533dbc1a0a96fe93ea9a8034e' })));
     }
     static get is() { return "road-progress-tracker-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/radio/radio.js

@@ -72,7 +72,7 @@ export class Radio {
         const inverseClass = this.inverse && 'form-radio-inverse';
         const isInvalidClass = this.error ? 'is-invalid' : '';
         const inlineClass = this.inline ? 'form-radio-inline' : '';
-        return (h(Host, { key: '586f04a19cf450f18483a2b9efa5b28d44e1677c', class: `form-radio ${inlineClass}` }, h("input", { key: 'd66ab388470a1c6e2f4ae3ceb5ae8aa8c85eecf5', class: `form-radio-input ${isInvalidClass}`, type: "radio", id: this.radioId, name: this.name, required: this.required, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, checked: this.checked, "aria-checked": `${this.checked}`, "aria-labelledby": labelId, value: this.value, onFocus: this.onFocus, onBlur: this.onBlur }), h("label", { key: '709969471cc1db265d7eb44e608ed0ef496cc72d', class: `form-radio-label ${inverseClass}`, id: labelId, htmlFor: this.radioId }, this.label, " ", h("span", { key: 'd551c29f4895ca78cb7bb331861d783281416749', class: "form-radio-label-span" }, this.secondaryLabel))));
+        return (h(Host, { key: '8527b5ca6ed9c45a9fe7fc8dca12b6dafb159175', class: `form-radio ${inlineClass}` }, h("input", { key: '82f44c9ebb76379f1c2ae8e7978b82167929729d', class: `form-radio-input ${isInvalidClass}`, type: "radio", id: this.radioId, name: this.name, required: this.required, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, checked: this.checked, "aria-checked": `${this.checked}`, "aria-labelledby": labelId, value: this.value, onFocus: this.onFocus, onBlur: this.onBlur }), h("label", { key: '5e12d52490a2ae6cacf0eef9abb225626ec75a2c', class: `form-radio-label ${inverseClass}`, id: labelId, htmlFor: this.radioId }, this.label, " ", h("span", { key: '8c1c4c69075836741bbc89a0460fc47f8d4486e1', class: "form-radio-label-span" }, this.secondaryLabel))));
     }
     static get is() { return "road-radio"; }
     static get encapsulation() { return "scoped"; }

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

@@ -49,7 +49,7 @@ export class RadioCard {
         const inlineClass = this.inline ? 'form-radio-inline' : '';
         const selectedClass = this.isSelected || this.selected ? 'radio-card-selected' : '';
         const disabledClass = this.disabled ? 'radio-card-disabled' : '';
-        return (h(Host, { key: 'c0910c6654a5a43b06b48b784177d52fcad7d0e9', class: `form-radio ${inlineClass}` }, h("div", { key: '52b04eb5baf4321d07da8dc13cb213491c7f8376', class: `radio-card ${selectedClass}  ${disabledClass}`, onClick: this.onClick }, h("input", { key: 'e196a6962b45f72b80f3f5837e168fb3a29618f0', ref: el => this.inputEl = el, class: "form-radio-input", type: "radio", id: this.radioId, name: this.name, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, checked: this.isSelected || this.selected, "aria-labelledby": labelId, value: this.value, onFocus: this.onFocus, onBlur: this.onBlur, onChange: () => { } }), h("label", { key: '2bfe44595464f2977c3ce6603a1e6b74e5b36a25', class: "form-radio-label", htmlFor: this.radioId, id: labelId }, h("div", { key: 'b7e50b7fc4ace0011ba413bffa7d99d048083710', class: "slot-wrapper" }, h("slot", { key: '2026d471ed70c8bd6a773ec108583eeb2d721b93' }))))));
+        return (h(Host, { key: '855a082bcd5ab1d2a76e276c9e026efda529b785', class: `form-radio ${inlineClass}` }, h("div", { key: '1b76deba72dbfb07eb160c7791a9b02b4b5bcc5b', class: `radio-card ${selectedClass}  ${disabledClass}`, onClick: this.onClick }, h("input", { key: '34d7a61463f55efcb9a13b4651f297d89e0a922b', ref: el => this.inputEl = el, class: "form-radio-input", type: "radio", id: this.radioId, name: this.name, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, checked: this.isSelected || this.selected, "aria-labelledby": labelId, value: this.value, onFocus: this.onFocus, onBlur: this.onBlur, onChange: () => { } }), h("label", { key: '1f0d49a8d711e9c6f232f82bce3f9a942544b124', class: "form-radio-label", htmlFor: this.radioId, id: labelId }, h("div", { key: '7349a2e57c95bcc4c43314cdfe270b7c51f33146', class: "slot-wrapper" }, h("slot", { key: '433d85a6e2807076f215d2c52f1d077030e9f2da' }))))));
     }
     static get is() { return "road-radio-card"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/radio-group/radio-group.js

@@ -66,7 +66,7 @@ export class RadioGroup {
     render() {
         const labelId = `${this.radioGroupId}-label`;
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-        return (h(Host, { key: '92a0a50c9deb1ec6e7e14a18c953019deac3aa5a', role: "radiogroup", class: `form-group ${isInvalidClass}`, "aria-label": this.ariaLabel, onClick: this.onClick }, this.label && h("p", { key: '5b6cc3d7aed55eb469fc0abf5b85c93402df832f', class: "text-content", id: labelId }, this.label, " ", this.asterisk && h("span", { key: '8d38bdc1820b184757bed13a389cd81179a4eab6', class: "asterisk" }, "*")), h("slot", { key: '6e45e1330d3f2a078ec3e3e6562a14025d377f6b' }), this.error && this.error !== '' && h("p", { key: '8271bf6be84430530d6f13ff30b4589ea018a322', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: 'ffe6ae4713d74c66f995f0b6ed7e459a5096d5f1', class: "helper" }, this.helper)));
+        return (h(Host, { key: 'a92111d5ffff6b6eda6efa01fe8c92a390c1df04', role: "radiogroup", class: `form-group ${isInvalidClass}`, "aria-label": this.ariaLabel, onClick: this.onClick }, this.label && h("p", { key: 'fdb15769c6127b65fb2751aceef0dcb92f7c058d', class: "text-content", id: labelId }, this.label, " ", this.asterisk && h("span", { key: '8a32ab70a954b770ce0c71c1d1c3b17154184d5e', class: "asterisk" }, "*")), h("slot", { key: '69e54cd769b20ef75f5c0fe5ad4410ff9939ccc2' }), this.error && this.error !== '' && h("p", { key: '92f290c57411ea5600c45548f5b02d9a66db43a8', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { key: '90fd15fe58413798a2de75b7636d8a3df749df5b', class: "helper" }, this.helper)));
     }
     static get is() { return "road-radio-group"; }
     static get encapsulation() { return "scoped"; }

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

@@ -95,14 +95,14 @@ export class Range {
     render() {
         const value = this.getValue();
         const datalist = this.showLabels !== undefined ? `tickmarks` : "";
-        return (h(Host, { key: '70682c392f1e20883fb831efc8de0f9a067b3009', tabindex: "0", class: { disabled: this.disabled } }, h("div", { key: '981f26d40294cd905075d0745e4728543bdc618e', class: "form-group d-flex align-items-end" }, this.showTick && (h("road-icon", { key: '43f2969c43d2573de4db51261263ff22d834cc89', icon: navigationAddLessSolid, class: "mr-8", size: "sm" })), h("div", { key: '2009bfe7013711fcac093f8c67f54daf8f293d05', class: "form-range", style: {
+        return (h(Host, { key: '4a3eac8fe972c4da37712c2bfb9f9368a2c5e0e4', tabindex: "0", class: { disabled: this.disabled } }, h("div", { key: '7ede74bdbb7f85124b250a02f312e0fa8672b445', class: "form-group d-flex align-items-end" }, this.showTick && (h("road-icon", { key: 'bbfe778ba2082b82dac80d2c9b11b032ae4d3dc5', icon: navigationAddLessSolid, class: "mr-8", size: "sm" })), h("div", { key: 'a5617bb934ee0e8f481d4cbbe334ecdcccb80f4a', class: "form-range", style: {
                 "--min": this.min,
                 "--max": this.max,
                 "--value": value,
                 "--background-color": this.disabled
                     ? "var(--road-surface-disabled)"
                     : "initial",
-            } }, this.showValue && h("output", { key: 'b918d44808d44f446f88781b56a18da28768d184' }), this.showLabels && h("slot", { key: '341f43e617bca8decaa791170065658cf5c57923', name: "datalist" }), h("input", { key: '20d9d42bcfd89eb76a9459571cec4e790d8904f4', type: "range", class: "form-range-input", id: this.rangeId, min: this.min, max: this.max, value: value, onInput: this.onInput, list: datalist, "aria-label": "Valeur", tabindex: "0", disabled: this.disabled }), h("label", { key: '6ff1fbdc6111509511a1e50e0e65f43ec692f74f', class: "form-range-label" }, "Valeur"), h("div", { key: 'fadff2d5d9fda1b85290a4c39697968b13470412', class: "form-range-progress" })), this.showTick && (h("road-icon", { key: '79f4b51b9e695692777ab37b36511dfc8209812c', icon: navigationAddMoreSolid, class: "ml-8", size: "sm" })))));
+            } }, this.showValue && h("output", { key: 'f8fb6174412f03e9e0ada70b79715b8892c394e7' }), this.showLabels && h("slot", { key: '77278e535a1cf754b21ef12ebd1650aa03942ad0', name: "datalist" }), h("input", { key: 'c40fc31c0744955b440b162e5cddaa7c7b2119a3', type: "range", class: "form-range-input", id: this.rangeId, min: this.min, max: this.max, value: value, onInput: this.onInput, list: datalist, "aria-label": "Valeur", tabindex: "0", disabled: this.disabled }), h("label", { key: 'ec72158b6b0f7128aee76222506a6ecf80bbf43c', class: "form-range-label" }, "Valeur"), h("div", { key: 'ec3ba04cbb45a2af707f81e0fd05fbbb868c8187', class: "form-range-progress" })), this.showTick && (h("road-icon", { key: '293312e73482a2dafe8ef694ae2e56e3f37955bb', icon: navigationAddMoreSolid, class: "ml-8", size: "sm" })))));
     }
     static get is() { return "road-range"; }
     static get encapsulation() { return "scoped"; }

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

@@ -37,7 +37,7 @@ export class Rating {
         const sizeRatingStarsClass = this.size !== undefined ? `rating-stars rating-stars--${this.size}` : 'rating-stars';
         const sizeRatingNumberClass = this.size !== undefined ? `rating-number rating-number--${this.size}` : 'rating-number';
         const readOnly = this.readonly == true ? `readonly` : '';
-        return (h(Host, { key: 'de9146b27a97204cf394332ed3cd39872b2021be' }, h("div", { key: '10e5404e7b77281cbc6db3c7b5443158cff0d5d2', class: `${sizeRatingStarsClass}` }, [...Array(rate)].map(() => h("road-icon", { icon: star, size: "sm", color: "warning" })), [...Array(rateDecimale)].map(() => h("road-icon", { icon: starHalfColor, size: "sm", class: "rating-star" })), [...Array(5 - rate - rateDecimale)].map(() => h("road-icon", { icon: star, size: "sm", class: "rating-star" }))), this.readonly == false && this.showreviews && h("a", { key: 'ba4c82ef9eff58a95cb6049839c26c2a2e74dd2d', class: `${sizeRatingNumberClass}`, href: this.url }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")"), this.readonly == true && this.showreviews && h("road-label", { key: 'd7066a54aecd03e699e63ef2c4546a350252712a', class: `${sizeRatingNumberClass} ${readOnly}` }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")")));
+        return (h(Host, { key: 'f3317daf4cdd2e6a539936c9dbe095c791ce883d' }, h("div", { key: 'fe4e3b262592ca714e26f7cc03ac9ba4435d0b51', class: `${sizeRatingStarsClass}` }, [...Array(rate)].map(() => h("road-icon", { icon: star, size: "sm", color: "warning" })), [...Array(rateDecimale)].map(() => h("road-icon", { icon: starHalfColor, size: "sm", class: "rating-star" })), [...Array(5 - rate - rateDecimale)].map(() => h("road-icon", { icon: star, size: "sm", class: "rating-star" }))), this.readonly == false && this.showreviews && h("a", { key: '17bd3fb3ecbbd6e040c3c9c70fb92b9af90ee6b1', class: `${sizeRatingNumberClass}`, href: this.url }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")"), this.readonly == true && this.showreviews && h("road-label", { key: '5dba1d64ca367649797df7b872789e7cdc130e8c', class: `${sizeRatingNumberClass} ${readOnly}` }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")")));
     }
     static get is() { return "road-rating"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class Row {
     render() {
-        return (h(Host, { key: 'c38bbf8641a80fc8ebb76c25f5cec3070127c569' }, h("slot", { key: 'b8459fd13efb02e5b04fb4558533f89f37cbe858' })));
+        return (h(Host, { key: 'b9735c29e64bf4dbd798811326b36efab2fe84b0' }, h("slot", { key: '33cd185fdb68387287d1099576d03340d45dc579' })));
     }
     static get is() { return "road-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -52,10 +52,10 @@ export class SegmentedButton {
     render() {
         const { tabIndex, selected, tab } = this;
         const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';
-        return (h(Host, { key: 'f97ac52e941a6d41c3cc1ebde88396c7a88bcc5b', onClick: this.onClick, onKeyup: this.onKeyUp, role: "tab", tabindex: tabIndex, "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: '8b14a7cc7b693e9738cc01498921b86f01a5e2a5', 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: 'd608b3b0da3af5184b3a4faeda5bfc6d643cb14f', tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, h("span", { key: '6aab4780198238402d5911e60b905d8187624266', class: "button-content" }, h("slot", { key: '12d3b5ebb3de039dffd9d99bd658de975a2ed6df' })))));
+            } }, h("span", { key: '2e4d84a1561a9c09b441fd858c3625f784c6794c', tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, h("span", { key: '2acfa633cb9a32c3554ac7067fd62737bc45b172', class: "button-content" }, h("slot", { key: '1b133f39ff11f8bdd8be0b3d7f780262f0af2e18' })))));
     }
     static get is() { return "road-segmented-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -18,7 +18,7 @@ export class ButtonBar {
         this.selectedTabChanged();
     }
     render() {
-        return (h(Host, { key: 'a5bf3fc09d2e077e087ae5246ee562aed29472a5', role: "tablist" }, h("slot", { key: '48a1e2e24b79f769bc35e4d048218210be1b0d56' })));
+        return (h(Host, { key: 'd4cf00bc997e0ed05484681fb5fc5f554b3d6fbd', role: "tablist" }, h("slot", { key: 'cadf449cf80d55a0fe297fff440f65f6c096c371' })));
     }
     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: 'd1d9e0ab7ed50aa338646a473b2c3e22d4a30f6b', onRoadSegmentedButtonClick: this.onTabClicked }, h("slot", { key: '681bb4fdcf7bc99dd558723c85ea65b6182a7556', name: "top" }), h("slot", { key: '395d680d41e4c831d7e12e2d4b5e83e74d1128cf' })));
+        return (h(Host, { key: '51b943aa1730a5869b8d4616e5b9d0a883c3e17c', onRoadSegmentedButtonClick: this.onTabClicked }, h("slot", { key: '14c0de7b24f8a960a331c258ac91dd2ec4e1dda2', name: "top" }), h("slot", { key: 'b8d71615b2b6bbee3ce95754f0b2f0a7c5ef3385' })));
     }
     static get is() { return "road-segmented-buttons"; }
     static get encapsulation() { return "shadow"; }