@roadtrip/components 3.29.0 → 3.31.0

package/hydrate/index.js

@@ -13749,7 +13749,7 @@ class Dialog {
   }; }
 }
 
-const drawerCss = "/*!@:host*/.sc-road-drawer-h{--background:var(--road-surface);--color:var(--road-on-surface);--header-icon:var(--road-on-surface);--header-color:var(--road-on-surface);--header-background:var(--road-surface);--header-delimiter:0;--back-chevron-color:var(--road-icon);--max-height:auto;--z-index:10;position:fixed;top:0;left:0;z-index:var(--z-index);display:flex;justify-content:flex-start;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--color);visibility:hidden !important;opacity:0;transition:opacity 0.15s linear, visibility 0.15s}/*!@.drawer-overlay*/.drawer-overlay.sc-road-drawer{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay)}/*!@.drawer-dialog*/.drawer-dialog.sc-road-drawer{position:relative;width:100%;pointer-events:none;transition:transform 0.3s ease-out;transform:translateX(-100%)}/*!@:host(.drawer-right)*/.drawer-right.sc-road-drawer-h{justify-content:flex-end}/*!@:host(.drawer-right) .drawer-dialog*/.drawer-right.sc-road-drawer-h .drawer-dialog.sc-road-drawer{transform:translateX(100%)}/*!@:host(.drawer-bottom)*/.drawer-bottom.sc-road-drawer-h{align-items:flex-end}/*!@:host(.drawer-bottom) .drawer-dialog*/.drawer-bottom.sc-road-drawer-h .drawer-dialog.sc-road-drawer{width:100%;max-height:var(--max-height);transform:translateY(100%)}/*!@:host(.drawer-bottom) .drawer-content*/.drawer-bottom.sc-road-drawer-h .drawer-content.sc-road-drawer{height:auto}/*!@.drawer-content*/.drawer-content.sc-road-drawer{position:relative;display:flex;flex-direction:column;width:100%;height:100vh;pointer-events:auto;background-color:var(--background);background-clip:padding-box;box-shadow:var(--road-elevation-hight)}/*!@.drawer-header*/.drawer-header.sc-road-drawer{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;height:3.5rem;color:var(--header-color);background:var(--header-background);border-color:var(--road-grey-300);border-style:solid;border-width:var(--header-delimiter)}/*!@.drawer-header road-icon*/.drawer-header.sc-road-drawer road-icon.sc-road-drawer{flex-shrink:0;color:var(--header-icon)}/*!@.drawer-footer*/.drawer-footer.sc-road-drawer{padding:var(--road-spacing-05)}/*!@.drawer-header-inverse*/.drawer-header-inverse.sc-road-drawer{--header-icon:var(--road-on-primary);--header-color:var(--road-on-primary);--header-background:var(--road-primary-variant);margin-bottom:2.5rem}/*!@.drawer-action,\n.drawer-close*/.drawer-action.sc-road-drawer,.drawer-close.sc-road-drawer{display:flex;align-items:center;justify-content:center;height:3.5rem;padding:0.5rem;font-family:inherit;font-size:0.875rem;color:inherit;cursor:pointer;background:transparent;border:0;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}/*!@.drawer-header:not(.drawer-header-inverse) .drawer-action road-icon*/.drawer-header.sc-road-drawer:not(.drawer-header-inverse) .drawer-action.sc-road-drawer road-icon.sc-road-drawer{color:var(--back-chevron-color)}/*!@.drawer-action ~ .drawer-title,\n.drawer-close ~ .drawer-title*/.drawer-action.sc-road-drawer~.drawer-title.sc-road-drawer,.drawer-close.sc-road-drawer~.drawer-title.sc-road-drawer{padding-left:0}/*!@.drawer-action-left,\n.drawer-close-left*/.drawer-action-left.sc-road-drawer,.drawer-close-left.sc-road-drawer{margin-right:auto}/*!@.drawer-title*/.drawer-title.sc-road-drawer{display:flex;flex-grow:1;align-items:center;justify-content:center;height:3.5rem;padding-left:3.5rem;margin:0;font-size:var(--road-body-medium)}/*!@.drawer-body*/.drawer-body.sc-road-drawer{overflow-y:auto}/*!@:host(.drawer-right) .drawer-body,\n:host(.drawer-left) .drawer-body*/.drawer-right.sc-road-drawer-h .drawer-body.sc-road-drawer,.drawer-left.sc-road-drawer-h .drawer-body.sc-road-drawer{height:calc(100vh - 3.5rem)}/*!@.drawer-inner*/.drawer-inner.sc-road-drawer{padding:0 1rem 2.5rem}@media (min-width: 768px){/*!@.drawer-inner*/.drawer-inner.sc-road-drawer{padding:0 2rem 2.5rem}/*!@.drawer-body*/.drawer-body.sc-road-drawer{padding:0 var(--road-spacing-08) var(--road-spacing-05)}/*!@.drawer-footer*/.drawer-footer.sc-road-drawer{padding:var(--road-spacing-05) var(--road-spacing-08)}}/*!@:host(.drawer-open)*/.drawer-open.sc-road-drawer-h{visibility:visible !important;opacity:1}/*!@:host(.drawer-open) .drawer-dialog*/.drawer-open.sc-road-drawer-h .drawer-dialog.sc-road-drawer{transform:none}";
+const drawerCss = "/*!@:host*/.sc-road-drawer-h{--background:var(--road-surface);--color:var(--road-on-surface);--header-icon:var(--road-on-surface);--header-color:var(--road-on-surface);--header-background:var(--road-surface);--header-delimiter:0;--back-chevron-color:var(--road-icon);--max-height:auto;--z-index:10;position:fixed;top:0;left:0;z-index:var(--z-index);display:flex;justify-content:flex-start;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--color);visibility:hidden !important;opacity:0;transition:opacity 0.15s linear, visibility 0.15s}/*!@.drawer-overlay*/.drawer-overlay.sc-road-drawer{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay)}/*!@.drawer-dialog*/.drawer-dialog.sc-road-drawer{position:relative;width:100%;pointer-events:none;transition:transform 0.3s ease-out;transform:translateX(-100%)}/*!@:host(.drawer-right)*/.drawer-right.sc-road-drawer-h{justify-content:flex-end}/*!@:host(.drawer-right) .drawer-dialog*/.drawer-right.sc-road-drawer-h .drawer-dialog.sc-road-drawer{transform:translateX(100%)}/*!@:host(.drawer-bottom)*/.drawer-bottom.sc-road-drawer-h{align-items:flex-end}/*!@:host(.drawer-bottom) .drawer-dialog*/.drawer-bottom.sc-road-drawer-h .drawer-dialog.sc-road-drawer{width:100%;max-height:var(--max-height);transform:translateY(100%)}/*!@:host(.drawer-bottom) .drawer-content*/.drawer-bottom.sc-road-drawer-h .drawer-content.sc-road-drawer{height:auto}/*!@.drawer-content*/.drawer-content.sc-road-drawer{position:relative;display:flex;flex-direction:column;width:100%;height:100vh;pointer-events:auto;background-color:var(--background);background-clip:padding-box;box-shadow:var(--road-elevation-hight)}/*!@.drawer-header*/.drawer-header.sc-road-drawer{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;height:3.5rem;color:var(--header-color);background:var(--header-background);border-color:var(--road-grey-300);border-style:solid;border-width:var(--header-delimiter)}/*!@.drawer-header road-icon*/.drawer-header.sc-road-drawer road-icon.sc-road-drawer{flex-shrink:0;color:var(--header-icon)}/*!@.drawer-footer*/.drawer-footer.sc-road-drawer{padding:var(--road-spacing-05);background-color:var(--road-surface)}/*!@.drawer-header-inverse*/.drawer-header-inverse.sc-road-drawer{--header-icon:var(--road-on-primary);--header-color:var(--road-on-primary);--header-background:var(--road-primary-variant);margin-bottom:2.5rem}/*!@.drawer-action,\n.drawer-close*/.drawer-action.sc-road-drawer,.drawer-close.sc-road-drawer{display:flex;align-items:center;justify-content:center;height:3.5rem;padding:0.5rem;font-family:inherit;font-size:0.875rem;color:inherit;cursor:pointer;background:transparent;border:0;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}/*!@.drawer-header:not(.drawer-header-inverse) .drawer-action road-icon*/.drawer-header.sc-road-drawer:not(.drawer-header-inverse) .drawer-action.sc-road-drawer road-icon.sc-road-drawer{color:var(--back-chevron-color)}/*!@.drawer-action ~ .drawer-title,\n.drawer-close ~ .drawer-title*/.drawer-action.sc-road-drawer~.drawer-title.sc-road-drawer,.drawer-close.sc-road-drawer~.drawer-title.sc-road-drawer{padding-left:0}/*!@.drawer-action-left,\n.drawer-close-left*/.drawer-action-left.sc-road-drawer,.drawer-close-left.sc-road-drawer{margin-right:auto}/*!@.drawer-title*/.drawer-title.sc-road-drawer{display:flex;flex-grow:1;align-items:center;justify-content:center;height:3.5rem;padding-left:3.5rem;margin:0;font-size:var(--road-body-medium)}/*!@.drawer-body*/.drawer-body.sc-road-drawer{overflow-y:auto}/*!@:host(.drawer-right) .drawer-body,\n:host(.drawer-left) .drawer-body*/.drawer-right.sc-road-drawer-h .drawer-body.sc-road-drawer,.drawer-left.sc-road-drawer-h .drawer-body.sc-road-drawer{height:calc(100vh - 3.5rem)}/*!@.drawer-inner*/.drawer-inner.sc-road-drawer{padding:0 1rem 2.5rem}@media (min-width: 768px){/*!@.drawer-inner*/.drawer-inner.sc-road-drawer{padding:0 2rem 2.5rem}/*!@.drawer-body*/.drawer-body.sc-road-drawer{padding:0 var(--road-spacing-08) var(--road-spacing-05)}/*!@.drawer-footer*/.drawer-footer.sc-road-drawer{padding:var(--road-spacing-05) var(--road-spacing-08)}}/*!@:host(.drawer-open)*/.drawer-open.sc-road-drawer-h{visibility:visible !important;opacity:1}/*!@:host(.drawer-open) .drawer-dialog*/.drawer-open.sc-road-drawer-h .drawer-dialog.sc-road-drawer{transform:none}";
 
 /**
  * @slot  - Content of the drawer.
@@ -14136,6 +14136,155 @@ class GlobalNavigation {
   }; }
 }
 
+const globalNavigationV2Css = "/*!@:host*/.sc-road-global-navigation-v2-h{position:fixed;top:0;z-index:2;width:100%}";
+
+/**
+ * @slot navbar - it should be road-navbar-item elements. Max 5 items on Mobile or add them to the drawer
+ */
+class GlobalNavigationV2 {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.roadnavbarchanged = createEvent(this, "roadnavbarchanged", 7);
+    this.roadNavbarChanged = createEvent(this, "roadNavbarChanged", 7);
+    this.selectedTab = undefined;
+  }
+  selectedTabChanged() {
+    if (this.selectedTab !== undefined) {
+      this.roadnavbarchanged.emit({
+        tab: this.selectedTab,
+      });
+      this.roadNavbarChanged.emit({
+        tab: this.selectedTab,
+      });
+    }
+  }
+  onNavbarChanged(ev) {
+    this.selectedTab = ev.detail.tab;
+  }
+  /** Toggles the compact attribute on <road-navbar-v2> */
+  toggleCompactMode() {
+    const navbar = this.host.querySelector('road-navbar-v2');
+    const toolbar = this.host.querySelector('road-toolbar-v2');
+    // Toggle "compact" attribute on <road-navbar-v2>
+    if (navbar) {
+      if (navbar.hasAttribute('compact')) {
+        navbar.removeAttribute('compact');
+      }
+      else {
+        navbar.setAttribute('compact', 'true');
+      }
+    }
+    else {
+      console.warn('<road-navbar-v2> not found inside <road-global-navigation-v2>');
+    }
+    // Replace class "toolbar" with "toolbar-compact" on <road-toolbar-v2>
+    if (toolbar) {
+      if (toolbar.classList.contains('toolbar-compact')) {
+        toolbar.classList.remove('toolbar-compact');
+        toolbar.classList.add('toolbar');
+      }
+      else {
+        toolbar.classList.remove('toolbar');
+        toolbar.classList.add('toolbar-compact');
+      }
+    }
+    else {
+      console.warn('<road-toolbar-v2> not found inside <road-global-navigation-v2>');
+    }
+  }
+  /** Toggles the "justify-content-center" class on the element with "compact-logo" */
+  toggleCompactLogoClass() {
+    const logoElement = this.host.querySelector('.compact-logo');
+    if (logoElement) {
+      if (logoElement.classList.contains('justify-content-center')) {
+        logoElement.classList.remove('justify-content-center');
+      }
+      else {
+        logoElement.classList.add('justify-content-center');
+      }
+    }
+    else {
+      console.warn('Element with class "compact-logo" not found inside <road-global-navigation-v2>');
+    }
+  }
+  /** Toggles the "rotate" attribute on the <road-icon> inside the <road-button> */
+  toggleIconRotation(button) {
+    const icon = button.querySelector('road-icon');
+    if (icon) {
+      if (icon.getAttribute('rotate') === '180') {
+        icon.removeAttribute('rotate');
+      }
+      else {
+        icon.setAttribute('rotate', '180');
+      }
+    }
+    else {
+      console.warn('<road-icon> not found inside <road-button>');
+    }
+  }
+  /** Toggles the "trigger" attribute on <road-tooltip> elements based on the presence of the "compact" attribute on <road-navbar-v2> */
+  toggleTooltips() {
+    const navbar = this.host.querySelector('road-navbar-v2');
+    if (navbar) {
+      const hasCompactAttribute = navbar.hasAttribute('compact');
+      const tooltips = navbar.querySelectorAll('road-tooltip');
+      if (tooltips.length > 0) {
+        // Mettre à jour l'attribut "trigger" en fonction de l'attribut "compact"
+        tooltips.forEach((tooltip) => {
+          if (hasCompactAttribute) {
+            tooltip.setAttribute('trigger', 'hover'); // Définir sur "hover" si "compact" est présent
+          }
+          else {
+            tooltip.setAttribute('trigger', 'focus'); // Définir sur "focus" si "compact" est absent
+          }
+        });
+      }
+      else {
+        console.warn('<road-tooltip> elements not found inside <road-navbar-v2>.');
+      }
+    }
+    else {
+      console.warn('<road-navbar-v2> not found inside <road-global-navigation-v2>.');
+    }
+  }
+  /** Toggles the compact mode and performs all related updates */
+  /** Handles click events on road-button or its children */
+  onButtonClick(event) {
+    let target = event.target;
+    // Traverse up the DOM tree to find the parent road-button
+    while (target && target.tagName !== 'ROAD-BUTTON' && target !== document.body) {
+      target = target.parentElement;
+    }
+    if ((target === null || target === void 0 ? void 0 : target.tagName) === 'ROAD-BUTTON' && target.classList.contains('compact-button')) {
+      this.toggleCompactMode();
+      this.toggleIconRotation(target);
+      this.toggleCompactLogoClass();
+      this.toggleTooltips();
+    }
+  }
+  componentWillLoad() {
+    this.selectedTabChanged();
+  }
+  render() {
+    return (hAsync(Host, { role: "application" }, hAsync("slot", null)));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "selectedTab": ["selectedTabChanged"]
+  }; }
+  static get style() { return globalNavigationV2Css; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "road-global-navigation-v2",
+    "$members$": {
+      "selectedTab": [1, "selected-tab"]
+    },
+    "$listeners$": [[0, "roadNavbarItemClick", "onNavbarChanged"], [0, "roadnavbaritemclick", "onNavbarChanged"], [8, "click", "onButtonClick"]],
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": []
+  }; }
+}
+
 const gridCss = "/*!@:host*/.sc-road-grid-h{box-sizing:border-box;display:block;width:100%;padding-right:8px;padding-left:8px;margin-right:auto;margin-left:auto}@media (min-width: 768px){/*!@:host*/.sc-road-grid-h{padding-right:24px;padding-left:24px}}";
 
 /**
@@ -14180,7 +14329,7 @@ const isSrc$1 = (str) => str.length > 0 && /(\/|\.)/.test(str);
 const isStr$1 = (val) => typeof val === 'string';
 const toLower$1 = (val) => val.toLowerCase();
 
-const iconCss = "/*!@:host*/.sc-road-icon-h{box-sizing:content-box;display:inline-block;color:var(--road-icon);transition:fill 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;fill:currentColor;contain:strict}/*!@:host svg*/.sc-road-icon-h svg.sc-road-icon{display:block;width:100%;height:100%}/*!@:host(.icon-sm)*/.icon-sm.sc-road-icon-h{width:1.25rem;height:1.25rem}/*!@:host(.icon-md)*/.icon-md.sc-road-icon-h{width:1.5rem;height:1.5rem}/*!@:host(.icon-lg)*/.icon-lg.sc-road-icon-h{width:2rem;height:2rem}/*!@:host(.icon-3x)*/.icon-3x.sc-road-icon-h{width:3rem;height:3rem}/*!@:host(.icon-4x)*/.icon-4x.sc-road-icon-h{width:4rem;height:4rem}/*!@:host(.icon-primary)*/.icon-primary.sc-road-icon-h{color:var(--road-primary-50);fill:currentColor}/*!@:host(.icon-secondary)*/.icon-secondary.sc-road-icon-h{color:var(--road-secondary-50);fill:currentColor}/*!@:host(.icon-accent)*/.icon-accent.sc-road-icon-h{color:var(--road-secondary-50);fill:currentColor}/*!@:host(.icon-info)*/.icon-info.sc-road-icon-h{color:var(--road-info-icon);fill:currentColor}/*!@:host(.icon-success)*/.icon-success.sc-road-icon-h{color:var(--road-success-icon);fill:currentColor}/*!@:host(.icon-warning)*/.icon-warning.sc-road-icon-h{color:var(--road-warning-icon);fill:currentColor}/*!@:host(.icon-danger)*/.icon-danger.sc-road-icon-h{color:var(--road-danger-icon);fill:currentColor}/*!@:host(.icon-default)*/.icon-default.sc-road-icon-h{color:var(--road-icon);fill:currentColor}/*!@:host(.icon-white)*/.icon-white.sc-road-icon-h{color:var(--road-icon-inverse);fill:currentColor}/*!@:host(.icon-rotate-90)*/.icon-rotate-90.sc-road-icon-h{transform:rotate(90deg)}/*!@:host(.icon-rotate-180)*/.icon-rotate-180.sc-road-icon-h{transform:rotate(180deg);transform:scaleX(-1)}/*!@:host(.icon-rotate-270)*/.icon-rotate-270.sc-road-icon-h{transform:rotate(270deg)}";
+const iconCss = "/*!@:host*/.sc-road-icon-h{box-sizing:content-box;display:inline-block;color:currentColor;transition:fill 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;fill:currentColor;contain:strict}/*!@:host svg*/.sc-road-icon-h svg.sc-road-icon{display:block;width:100%;height:100%}/*!@:host(.icon-sm)*/.icon-sm.sc-road-icon-h{width:1.25rem;height:1.25rem}/*!@:host(.icon-md)*/.icon-md.sc-road-icon-h{width:1.5rem;height:1.5rem}/*!@:host(.icon-lg)*/.icon-lg.sc-road-icon-h{width:2rem;height:2rem}/*!@:host(.icon-3x)*/.icon-3x.sc-road-icon-h{width:3rem;height:3rem}/*!@:host(.icon-4x)*/.icon-4x.sc-road-icon-h{width:4rem;height:4rem}/*!@:host(.icon-primary)*/.icon-primary.sc-road-icon-h{color:var(--road-primary-50);fill:currentColor}/*!@:host(.icon-secondary)*/.icon-secondary.sc-road-icon-h{color:var(--road-secondary-50);fill:currentColor}/*!@:host(.icon-accent)*/.icon-accent.sc-road-icon-h{color:var(--road-secondary-50);fill:currentColor}/*!@:host(.icon-info)*/.icon-info.sc-road-icon-h{color:var(--road-info-icon);fill:currentColor}/*!@:host(.icon-success)*/.icon-success.sc-road-icon-h{color:var(--road-success-icon);fill:currentColor}/*!@:host(.icon-warning)*/.icon-warning.sc-road-icon-h{color:var(--road-warning-icon);fill:currentColor}/*!@:host(.icon-danger)*/.icon-danger.sc-road-icon-h{color:var(--road-danger-icon);fill:currentColor}/*!@:host(.icon-default)*/.icon-default.sc-road-icon-h{color:var(--road-icon);fill:currentColor}/*!@:host(.icon-white)*/.icon-white.sc-road-icon-h{color:var(--road-icon-inverse);fill:currentColor}/*!@:host(.icon-rotate-90)*/.icon-rotate-90.sc-road-icon-h{transform:rotate(90deg)}/*!@:host(.icon-rotate-180)*/.icon-rotate-180.sc-road-icon-h{transform:rotate(180deg);transform:scaleX(-1)}/*!@:host(.icon-rotate-270)*/.icon-rotate-270.sc-road-icon-h{transform:rotate(270deg)}";
 
 class Icon {
   constructor(hostRef) {
@@ -32188,7 +32337,7 @@ const navbarItemCss = "/*!@:host*/.sc-road-navbar-item-h{position:relative;box-s
  *
  * @part native - The native HTML anchor element that wraps all child elements.
  */
-class NavbarItem {
+class NavbarItem$1 {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.roadnavbaritemclick = createEvent(this, "roadnavbaritemclick", 7);
@@ -32276,6 +32425,151 @@ class NavbarItem {
   }; }
 }
 
+const navbarItemV2Css = "/*!@:host*/.sc-road-navbar-item-v2-h{position:relative;box-sizing:border-box;display:flex;flex:1;flex-basis:0;flex-direction:column;flex-grow:1;align-items:center;justify-content:center;text-align:center;white-space:nowrap}@media (min-width: 1200px){/*!@:host*/.sc-road-navbar-item-v2-h{flex-grow:inherit;width:-moz-fit-content;width:fit-content;padding:var(--road-spacing-04) 0 var(--road-spacing-04) var(--road-spacing-04);text-align:left}}/*!@:host(.tab-disabled),\n:host(.tab-disabled) road-tooltip,\n:host(.tab-disabled) road-tooltip road-icon,\n:host(.tab-disabled) ::slotted(road-icon)*/.tab-disabled.sc-road-navbar-item-v2-h,.tab-disabled.sc-road-navbar-item-v2-h road-tooltip.sc-road-navbar-item-v2,.tab-disabled.sc-road-navbar-item-v2-h road-tooltip.sc-road-navbar-item-v2 road-icon.sc-road-navbar-item-v2,.sc-road-navbar-item-v2-h.tab-disabled.sc-road-navbar-item-v2-s>road-icon,.sc-road-navbar-item-v2-h.tab-disabled .sc-road-navbar-item-v2-s>road-icon{color:var(--road-on-surface-disabled);cursor:not-allowed;fill:var(--road-on-surface-disabled)}/*!@:host(.tab-selected),\n:host(.tab-selected) road-tooltip road-icon,\n:host(.tab-selected) ::slotted(road-icon)*/.tab-selected.sc-road-navbar-item-v2-h,.tab-selected.sc-road-navbar-item-v2-h road-tooltip.sc-road-navbar-item-v2 road-icon.sc-road-navbar-item-v2,.sc-road-navbar-item-v2-h.tab-selected.sc-road-navbar-item-v2-s>road-icon,.sc-road-navbar-item-v2-h.tab-selected .sc-road-navbar-item-v2-s>road-icon{color:var(--road-on-button-tertiary);fill:var(--road-on-button-tertiary)}/*!@:host(.tab-selected)::after*/.tab-selected.sc-road-navbar-item-v2-h::after{position:absolute;bottom:-12px;left:0;display:block;width:100%;height:4px;color:var(--road-on-button-tertiary);content:\"\";background-color:var(--road-on-button-tertiary)}@media (min-width: 1200px){/*!@:host(.tab-selected)::after*/.tab-selected.sc-road-navbar-item-v2-h::after{display:none}}/*!@:host(.focus-visible) ::slotted(road-icon),\n:host(.focus-visible) ::slotted(road-icon)::after,\n:host(.focus-visible) ::slotted(road-label),\n:host(.focus-visible) ::slotted(road-label)::after,\n:host(:hover) ::slotted(road-icon),\n:host(:hover) ::slotted(road-icon)::after,\n:host(:hover) ::slotted(road-label),\n:host(:hover) ::slotted(road-label)::after*/.sc-road-navbar-item-v2-h.focus-visible .sc-road-navbar-item-v2-s>road-icon,.sc-road-navbar-item-v2-h.focus-visible.sc-road-navbar-item-v2-s>road-icon::after,.sc-road-navbar-item-v2-h.focus-visible .sc-road-navbar-item-v2-s>road-icon::after,.sc-road-navbar-item-v2-h.focus-visible.sc-road-navbar-item-v2-s>road-label,.sc-road-navbar-item-v2-h.focus-visible .sc-road-navbar-item-v2-s>road-label,.sc-road-navbar-item-v2-h.focus-visible.sc-road-navbar-item-v2-s>road-label::after,.sc-road-navbar-item-v2-h.focus-visible .sc-road-navbar-item-v2-s>road-label::after,.sc-road-navbar-item-v2-h:hover.sc-road-navbar-item-v2-s>road-icon,.sc-road-navbar-item-v2-h:hover .sc-road-navbar-item-v2-s>road-icon,.sc-road-navbar-item-v2-h:hover.sc-road-navbar-item-v2-s>road-icon::after,.sc-road-navbar-item-v2-h:hover .sc-road-navbar-item-v2-s>road-icon::after,.sc-road-navbar-item-v2-h:hover.sc-road-navbar-item-v2-s>road-label,.sc-road-navbar-item-v2-h:hover .sc-road-navbar-item-v2-s>road-label,.sc-road-navbar-item-v2-h:hover.sc-road-navbar-item-v2-s>road-label::after,.sc-road-navbar-item-v2-h:hover .sc-road-navbar-item-v2-s>road-label::after{color:var(--road-on-button-tertiary)}/*!@:host(.tab-disabled.focus-visible) ::slotted(road-icon),\n:host(.tab-disabled.focus-visible) ::slotted(road-label),\n:host(.tab-disabled:hover) ::slotted(road-icon),\n:host(.tab-disabled:hover) ::slotted(road-label)*/.sc-road-navbar-item-v2-h.tab-disabled.focus-visible .sc-road-navbar-item-v2-s>road-icon,.sc-road-navbar-item-v2-h.tab-disabled.focus-visible.sc-road-navbar-item-v2-s>road-label,.sc-road-navbar-item-v2-h.tab-disabled.focus-visible .sc-road-navbar-item-v2-s>road-label,.sc-road-navbar-item-v2-h.tab-disabled:hover.sc-road-navbar-item-v2-s>road-icon,.sc-road-navbar-item-v2-h.tab-disabled:hover .sc-road-navbar-item-v2-s>road-icon,.sc-road-navbar-item-v2-h.tab-disabled:hover.sc-road-navbar-item-v2-s>road-label,.sc-road-navbar-item-v2-h.tab-disabled:hover .sc-road-navbar-item-v2-s>road-label{color:var(--road-on-surface-disabled);cursor:not-allowed;fill:var(--road-on-surface-disabled)}/*!@.button-native*/.button-native.sc-road-navbar-item-v2{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;margin:0;overflow:visible;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}/*!@:host(.tab-disabled) .button-native*/.tab-disabled.sc-road-navbar-item-v2-h .button-native.sc-road-navbar-item-v2{cursor:not-allowed}/*!@.button-inner*/.button-inner.sc-road-navbar-item-v2{position:relative;z-index:1;display:flex;flex-flow:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%}/*!@::slotted(road-icon)*/.sc-road-navbar-item-v2-s>road-icon{display:block;width:2rem;height:2rem;margin-right:auto;margin-bottom:0.25rem;margin-left:auto;fill:currentColor}@media (min-width: 1200px){/*!@:host ::slotted(road-tooltip)*/.sc-road-navbar-item-v2-h .sc-road-navbar-item-v2-s>road-tooltip{width:100%}}/*!@::slotted(road-label)*/.sc-road-navbar-item-v2-s>road-label{position:relative;box-sizing:border-box;display:flex;flex:1;flex-direction:column;font-size:var(--road-label-small);font-weight:700;text-align:center;white-space:nowrap}@media (min-width: 1200px){/*!@::slotted(road-label)*/.sc-road-navbar-item-v2-s>road-label{display:block}}/*!@::slotted(road-badge)*/.sc-road-navbar-item-v2-s>road-badge{position:absolute;top:4px;left:calc(50% + 0.375rem);z-index:1;box-sizing:border-box;height:auto;font-size:var(--road-font-size-10);font-weight:400}";
+
+/**
+ * @slot  - Content of the item, it should be road-icon and road-label elements.
+ *
+ * @part native - The native HTML anchor element that wraps all child elements.
+ */
+class NavbarItem {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.roadnavbaritemclick = createEvent(this, "roadnavbaritemclick", 7);
+    this.roadNavbarItemClick = createEvent(this, "roadNavbarItemClick", 7);
+    this.onKeyUp = (ev) => {
+      if (ev.key === 'Enter' || ev.key === ' ') {
+        this.selectTab(ev);
+      }
+    };
+    this.onClick = (ev) => {
+      this.selectTab(ev);
+    };
+    this.disabled = false;
+    this.download = undefined;
+    this.href = undefined;
+    this.rel = undefined;
+    this.selected = false;
+    this.tab = undefined;
+    this.target = undefined;
+  }
+  onNavbarChanged(ev) {
+    this.selected = this.tab === ev.detail.tab;
+  }
+  /**
+   * Watch for changes to `selected` and move focus to this element if `selected` is true.
+   */
+  handleSelectedChange(newValue) {
+    if (newValue) {
+      this.el.focus();
+    }
+  }
+  selectTab(ev) {
+    if (this.tab !== undefined) {
+      if (!this.disabled) {
+        this.roadnavbaritemclick.emit({
+          tab: this.tab,
+          href: this.href,
+          selected: this.selected,
+        });
+        this.roadNavbarItemClick.emit({
+          tab: this.tab,
+          href: this.href,
+          selected: this.selected,
+        });
+      }
+      if (this.href === undefined) {
+        ev.preventDefault();
+      }
+    }
+  }
+  render() {
+    const { href, rel, target, selected, tab, disabled } = this;
+    const attrs = {
+      download: this.download,
+      href,
+      rel,
+      target,
+    };
+    return (hAsync(Host, { 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,
+      } }, hAsync("a", Object.assign({}, attrs, { tabIndex: -1, class: "button-native", part: "native" }), hAsync("span", { class: "button-inner" }, hAsync("slot", null)))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "selected": ["handleSelectedChange"]
+  }; }
+  static get style() { return navbarItemV2Css; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "road-navbar-item-v2",
+    "$members$": {
+      "disabled": [4],
+      "download": [1],
+      "href": [1],
+      "rel": [1],
+      "selected": [1028],
+      "tab": [1],
+      "target": [1]
+    },
+    "$listeners$": [[8, "roadNavbarChanged", "onNavbarChanged"], [8, "roadnavbarchanged", "onNavbarChanged"]],
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": []
+  }; }
+}
+
+const navbarV2Css = "/*!@:host*/.sc-road-navbar-v2-h{--z-index:3;position:fixed;bottom:0;left:0;z-index:var(--z-index);box-sizing:border-box;display:flex;align-items:center;width:100%;height:5.125rem;padding-left:0;margin:0;text-align:center;-webkit-user-select:none;user-select:none;background-color:var(--road-surface);border-top:1px solid var(--road-outline-weak)}@media (max-width: 576px){/*!@:host*/.sc-road-navbar-v2-h{overflow-x:auto}}@media (min-width: 1200px){/*!@:host*/.sc-road-navbar-v2-h{flex-direction:column;align-items:flex-start;width:260px;height:100%;padding:var(--road-spacing-05);text-align:left;border-top:0;border-right:1px solid var(--road-outline-weak);justify-content:space-between;height:100%}}/*!@::slotted(.drawer-button-save)*/.sc-road-navbar-v2-s>.drawer-button-save{position:absolute;bottom:0;width:100%}/*!@.button-native*/.button-native.sc-road-navbar-v2{position:relative;display:flex;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;padding:var(--padding-end) var(--padding-end) var(--padding-start) 0;margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;border:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}@media (min-width: 1200px){/*!@:host(.compact)*/.compact.sc-road-navbar-v2-h{max-width:5.5rem}/*!@.compact ::slotted(.compact-container)*/.compact .sc-road-navbar-v2-s>.compact-container{max-width:3.5rem}/*!@.compact ::slotted(.compact-container) .compact-logo*/.compact .sc-road-navbar-v2-s>.compact-container .compact-logo{justify-content:center}}";
+
+/**
+ * @slot  - Content of the navbar, it should be road-navbar-item elements. Max 5 items on Mobile
+ */
+class NavbarV2 {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.roadnavbarchanged = createEvent(this, "roadnavbarchanged", 7);
+    this.roadNavbarChanged = createEvent(this, "roadNavbarChanged", 7);
+    this.compact = false;
+    this.selectedTab = undefined;
+  }
+  selectedTabChanged() {
+    if (this.selectedTab !== undefined) {
+      this.roadnavbarchanged.emit({
+        tab: this.selectedTab,
+      });
+      this.roadNavbarChanged.emit({
+        tab: this.selectedTab,
+      });
+    }
+  }
+  onNavbarChanged(ev) {
+    this.selectedTab = ev.detail.tab;
+  }
+  componentWillLoad() {
+    this.selectedTabChanged();
+  }
+  render() {
+    const compactClass = this.compact ? 'compact' : '';
+    return (hAsync(Host, { role: "menubar", class: `${compactClass}` }, hAsync("slot", null)));
+  }
+  static get watchers() { return {
+    "selectedTab": ["selectedTabChanged"]
+  }; }
+  static get style() { return navbarV2Css; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "road-navbar-v2",
+    "$members$": {
+      "compact": [516],
+      "selectedTab": [1, "selected-tab"]
+    },
+    "$listeners$": [[0, "roadNavbarItemClick", "onNavbarChanged"], [0, "roadnavbaritemclick", "onNavbarChanged"]],
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": [["compact", "compact"]]
+  }; }
+}
+
 const plateNumberCss = ".sc-road-plate-number-h{display:block}.plate-number.sc-road-plate-number{--margin-bottom:0}.plate-number-start.sc-road-plate-number,.plate-number-end.sc-road-plate-number{width:1.75rem;height:calc(3rem - 0.25rem);background:var(--road-info-50)}.input-group-prepend.sc-road-plate-number{margin-right:-1px}.input-group-prepend.sc-road-plate-number,.input-group-append.sc-road-plate-number{padding:0}.plate-number-start.sc-road-plate-number{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;margin-right:0;margin-left:1px;color:var(--road-icon-inverse);border-radius:0.125rem 0 0 0.125rem}.plate-number-icon.sc-road-plate-number{width:1.25rem;height:1.25rem;color:#f3db53}.plate-number-location.sc-road-plate-number{font-size:var(--road-button-medium);font-weight:700}.plate-number-end.sc-road-plate-number{margin-right:1px;border-radius:0 0.125rem 0.125rem 0}.plate-number-be.sc-road-plate-number .plate-number-input.sc-road-plate-number{color:var(--road-on-danger-surface)}.plate-number-be.sc-road-plate-number .plate-number-input.sc-road-plate-number,.plate-number-be.sc-road-plate-number .input-group-append.sc-road-plate-number,.plate-number-be.sc-road-plate-number .input-group-prepend.sc-road-plate-number{border-color:var(--road-danger-outline)}.plate-number-input.sc-road-plate-number{position:relative;display:block;height:3rem;margin:0;font-family:var(--road-font, sans-serif);font-size:var(--road-heading-04);font-weight:700;color:var(--road-on-surface);text-align:center;background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0;box-shadow:none;appearance:none}.plate-number-input.sc-road-plate-number::placeholder{color:var(--road-on-surface-weak);opacity:1}.plate-number-input.sc-road-plate-number:disabled{color:var(--road-on-surface-disabled);cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.plate-number-input.sc-road-plate-number:disabled~.input-group-prepend.sc-road-plate-number,.plate-number-input.sc-road-plate-number:disabled~.input-group-append.sc-road-plate-number{cursor:not-allowed;background:var(--road-surface-disabled)}@media (hover: hover){.plate-number-input.sc-road-plate-number:not(:disabled):not([readonly]):hover{border-color:var(--road-input-outline-variant)}}.plate-number-input.sc-road-plate-number:not([readonly]):focus{outline:auto}.motorbike-plate.sc-road-plate-number .plate-number-input.sc-road-plate-number{height:6rem;padding:0.75rem 1rem 0;resize:none;border-left:0}.motorbike-plate.sc-road-plate-number .input-group-prepend.sc-road-plate-number,.motorbike-plate.sc-road-plate-number .input-group-append.sc-road-plate-number{align-items:flex-start;height:6rem;padding:0}.motorbike-plate.sc-road-plate-number .plate-number-start.sc-road-plate-number{margin-top:1px;border-radius:0.125rem 0 0}.motorbike-plate.sc-road-plate-number .plate-number-end.sc-road-plate-number{margin-top:1px;border-radius:0 0.125rem 0 0}";
 
 class PlateNumber {
@@ -37511,7 +37805,35 @@ class ToolbarTitle {
   }; }
 }
 
-const tooltipCss = "/*!@:host*/.sc-road-tooltip-h{--max-width:85vw;--z-index:1;--width:max-content;position:relative;display:inline-block}/*!@:host(:hover)*/.sc-road-tooltip-h:hover{cursor:pointer}/*!@:host([trigger=\"hover\"]) .tooltip*/[trigger=\"hover\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{display:none}@media (min-width: 1200px){/*!@:host([trigger=\"hover\"]) .tooltip*/[trigger=\"hover\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{display:block}}/*!@.tooltip*/.tooltip.sc-road-tooltip{position:absolute;top:-0.5rem;left:50%;z-index:1;width:var(--width);min-width:100%;max-width:var(--max-width);padding:0.5rem;font-family:var(--road-font);font-size:var(--road-body-small);color:var(--road-on-surface);text-align:center;pointer-events:none;background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);opacity:0;transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;transform:translateX(-50%) translateY(-100%)}/*!@:host([contentalign=\"left\"]) .tooltip*/[contentalign=\"left\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{text-align:left}/*!@.tooltip.tooltip-text-left::after*/.tooltip.tooltip-text-left.sc-road-tooltip::after{text-align:left}/*!@.tooltip-open*/.tooltip-open.sc-road-tooltip{opacity:1}/*!@:host([data-tooltip-position=\"top\"]) .tooltip*/[data-tooltip-position=\"top\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{left:50%;transform:translateX(-50%) translateY(-70%)}/*!@:host([data-tooltip-position=\"top\"]) .tooltip-open*/[data-tooltip-position=\"top\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{left:50%;transform:translateX(-50%) translateY(-100%)}/*!@:host([data-tooltip-position=\"top-left\"]) .tooltip*/[data-tooltip-position=\"top-left\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{left:0%;transform:translateY(-70%)}/*!@:host([data-tooltip-position=\"top-left\"]) .tooltip-open*/[data-tooltip-position=\"top-left\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{transform:translateY(-100%)}/*!@:host([data-tooltip-position=\"top-right\"]) .tooltip*/[data-tooltip-position=\"top-right\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{left:50%;transform:translateY(-70%)}/*!@:host([data-tooltip-position=\"top-right\"]) .tooltip-open*/[data-tooltip-position=\"top-right\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{left:100%;transform:translateY(-100%)}/*!@:host([data-tooltip-position=\"left\"]) .tooltip*/[data-tooltip-position=\"left\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{top:50%;left:0%;margin-right:0.5rem;transform:translateX(-94%) translateY(-55%)}/*!@:host([data-tooltip-position=\"left\"]) .tooltip-open*/[data-tooltip-position=\"left\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{transform:translateX(-103%) translateY(-55%)}/*!@:host([data-tooltip-position=\"bottom\"]) .tooltip*/[data-tooltip-position=\"bottom\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{top:100%;left:50%;margin-top:0.5rem;transform:translateX(-50%) translateY(-40%)}/*!@:host([data-tooltip-position=\"bottom\"]) .tooltip-open*/[data-tooltip-position=\"bottom\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{transform:translateX(-50%) translateY(-6%)}/*!@:host([data-tooltip-position=\"bottom-left\"]) .tooltip*/[data-tooltip-position=\"bottom-left\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{top:100%;left:0;margin-top:0.5rem;transform:translateY(-40%)}/*!@:host([data-tooltip-position=\"bottom-left\"]) .tooltip-open*/[data-tooltip-position=\"bottom-left\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{transform:translateY(-6%)}/*!@:host([data-tooltip-position=\"bottom-right\"]) .tooltip*/[data-tooltip-position=\"bottom-right\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{top:100%;left:100%;margin-top:0.5rem;transform:translateY(-40%)}/*!@:host([data-tooltip-position=\"bottom-right\"]) .tooltip-open*/[data-tooltip-position=\"bottom-right\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{transform:translateY(-6%)}/*!@:host([data-tooltip-position=\"right\"]) .tooltip*/[data-tooltip-position=\"right\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{top:50%;left:100%;margin-left:0.5rem;transform:translateX(-14%) translateY(-55%)}/*!@:host([data-tooltip-position=\"right\"]) .tooltip-open*/[data-tooltip-position=\"right\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{transform:translateX(-4%) translateY(-55%)}";
+const toolbarV2Css = "/*!@:host*/.sc-road-toolbar-v2-h{position:relative;box-sizing:border-box;display:flex;align-items:center;width:100%;height:72px;contain:content;padding:var(--road-spacing-04);color:var(--road-on-surface);background:var(--road-surface);border-bottom:1px solid var(--road-outline-weak)}/*!@.toolbar-container*/.toolbar-container.sc-road-toolbar-v2{position:relative;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;min-height:3.73rem;contain:content;overflow:hidden}/*!@.toolbar-container-content-left*/.toolbar-container-content-left.sc-road-toolbar-v2{display:flex;flex:1}/*!@.toolbar-container-content-right*/.toolbar-container-content-right.sc-road-toolbar-v2{display:none}@media (min-width: 1200px){/*!@.toolbar-container-content-right*/.toolbar-container-content-right.sc-road-toolbar-v2{display:flex;flex:auto}}/*!@.toolbar-title-container*/.toolbar-title-container.sc-road-toolbar-v2{position:relative;top:0;left:0;display:flex;flex:1;align-items:center;width:100%;height:100%;text-align:center}/*!@.toolbar-title*/.toolbar-title.sc-road-toolbar-v2{display:block;width:100%;font-size:var(--road-font-size-18);font-weight:700;text-align:left;text-overflow:ellipsis;white-space:nowrap;pointer-events:auto}@media (min-width: 1200px){/*!@:host(.toolbar)*/.toolbar.sc-road-toolbar-v2-h{display:flex;align-items:center;width:calc(100% - 260px);justify-self:flex-end;height:80px;padding:var(--road-spacing-05)}/*!@:host(.toolbar-compact)*/.toolbar-compact.sc-road-toolbar-v2-h{display:flex;width:calc(100% - 5.5rem);justify-self:flex-end;height:80px;padding:var(--road-spacing-05)}/*!@.toolbar-title*/.toolbar-title.sc-road-toolbar-v2{font-size:var(--road-font-size-21);text-align:center}}/*!@.toolbar-content*/.toolbar-content.sc-road-toolbar-v2{display:none}@media (min-width: 1200px){/*!@.toolbar-content*/.toolbar-content.sc-road-toolbar-v2{display:flex;flex:2;min-width:0;max-width:100%}}/*!@.toolbar .logo*/.toolbar.sc-road-toolbar-v2 .logo.sc-road-toolbar-v2{position:relative;z-index:1;padding-left:1rem;margin-bottom:0;font-size:var(--road-font-size-14);font-weight:400}/*!@.toolbar .app-name*/.toolbar.sc-road-toolbar-v2 .app-name.sc-road-toolbar-v2{margin-left:1rem;font-size:var(--road-font-size-20);font-weight:700}/*!@::slotted([slot=\"start\"])*/.sc-road-toolbar-v2-s>[slot=\"start\"]{--margin-bottom:0;--padding-start:0.5rem;--padding-end:0.5rem;align-self:auto;margin-right:var(--road-spacing-05);font-size:var(--road-font-size-14);font-weight:400;border-right:1px solid var(--road-outline-weak);border-radius:0}/*!@::slotted([slot=\"primary\"])*/.sc-road-toolbar-v2-s>[slot=\"primary\"]{--margin-bottom:0;--padding-start:0.5rem;--padding-end:0.5rem;flex:1;align-self:auto}/*!@::slotted([slot=\"end\"])*/.sc-road-toolbar-v2-s>[slot=\"end\"]{--margin-bottom:0;--padding-start:0.5rem;--padding-end:0.5rem;flex:1;padding-left:var(--road-spacing-03);margin-left:var(--road-spacing-03);font-size:var(--road-font-size-14);font-weight:400;border-left:1px solid var(--road-outline-weak);border-radius:0}/*!@::slotted([slot=\"secondary\"])*/.sc-road-toolbar-v2-s>[slot=\"secondary\"]{--margin-bottom:0;--padding-start:0.5rem;--padding-end:0.5rem;flex:1;padding-left:var(--road-spacing-03);margin-left:var(--road-spacing-03);font-size:var(--road-font-size-14);font-weight:400;border-radius:0}/*!@:host(.toolbar-primary)*/.toolbar-primary.sc-road-toolbar-v2-h{color:var(--road-on-header-surface);background:var(--road-header-surface)}/*!@:host(.toolbar-secondary)*/.toolbar-secondary.sc-road-toolbar-v2-h{color:var(--road-on-secondary);background:var(--road-secondary)}";
+
+/**
+ *
+ * @slot - Content is placed between the named slots if provided without a slot.
+ * @slot start - Content is placed to the left of the toolbar text and left to primery slot if provided.
+ * @slot primary - Content is placed to the left of the toolbar text.
+ * @slot secondary - Content is placed to the right of the toolbar text.
+ * @slot end - Content is placed to the right of the toolbar text and right to secondary slot if provided.
+ */
+class ToolbarV2 {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (hAsync(Host, { class: "toolbar" }, hAsync("div", { class: "toolbar-container" }, hAsync("div", { class: "toolbar-container-content-left" }, hAsync("slot", { name: "start" }), hAsync("slot", { name: "primary" })), hAsync("div", { class: "toolbar-content" }, hAsync("slot", null)), hAsync("div", { class: "toolbar-container-content-right" }, hAsync("slot", { name: "secondary" }), hAsync("slot", { name: "end" })))));
+  }
+  static get style() { return toolbarV2Css; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "road-toolbar-v2",
+    "$members$": undefined,
+    "$listeners$": undefined,
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": []
+  }; }
+}
+
+const tooltipCss = "/*!@:host*/.sc-road-tooltip-h{--max-width:85vw;--z-index:1;--width:max-content;position:relative;display:inline-block}/*!@:host(:hover)*/.sc-road-tooltip-h:hover{cursor:pointer}/*!@:host([trigger=\"hover\"]) .tooltip*/[trigger=\"hover\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{display:none}@media (min-width: 1200px){/*!@:host([trigger=\"hover\"]) .tooltip*/[trigger=\"hover\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{display:block}}/*!@.tooltip*/.tooltip.sc-road-tooltip{position:absolute;top:-0.5rem;left:50%;z-index:1;width:var(--width);min-width:100%;max-width:var(--max-width);padding:0.5rem;font-family:var(--road-font);font-size:var(--road-body-small);color:var(--road-on-surface);text-align:center;pointer-events:none;background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);opacity:0;transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;transform:translateX(-50%) translateY(-100%)}/*!@:host([contentalign=\"left\"]) .tooltip*/[contentalign=\"left\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{text-align:left}/*!@.tooltip.tooltip-text-left::after*/.tooltip.tooltip-text-left.sc-road-tooltip::after{text-align:left}/*!@.tooltip-open*/.tooltip-open.sc-road-tooltip{visibility:visible;opacity:1}/*!@:host([data-tooltip-position=\"top\"]) .tooltip*/[data-tooltip-position=\"top\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{left:50%;transform:translateX(-50%) translateY(-70%)}/*!@:host([data-tooltip-position=\"top\"]) .tooltip-open*/[data-tooltip-position=\"top\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{left:50%;transform:translateX(-50%) translateY(-100%)}/*!@:host([data-tooltip-position=\"top-left\"]) .tooltip*/[data-tooltip-position=\"top-left\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{left:0%;transform:translateY(-70%)}/*!@:host([data-tooltip-position=\"top-left\"]) .tooltip-open*/[data-tooltip-position=\"top-left\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{transform:translateY(-100%)}/*!@:host([data-tooltip-position=\"top-right\"]) .tooltip*/[data-tooltip-position=\"top-right\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{left:50%;transform:translateY(-70%)}/*!@:host([data-tooltip-position=\"top-right\"]) .tooltip-open*/[data-tooltip-position=\"top-right\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{left:100%;transform:translateY(-100%)}/*!@:host([data-tooltip-position=\"left\"]) .tooltip*/[data-tooltip-position=\"left\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{top:50%;left:0%;margin-right:0.5rem;transform:translateX(-94%) translateY(-55%)}/*!@:host([data-tooltip-position=\"left\"]) .tooltip-open*/[data-tooltip-position=\"left\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{transform:translateX(-103%) translateY(-55%)}/*!@:host([data-tooltip-position=\"bottom\"]) .tooltip*/[data-tooltip-position=\"bottom\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{top:100%;left:50%;margin-top:0.5rem;transform:translateX(-50%) translateY(-40%)}/*!@:host([data-tooltip-position=\"bottom\"]) .tooltip-open*/[data-tooltip-position=\"bottom\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{transform:translateX(-50%) translateY(-6%)}/*!@:host([data-tooltip-position=\"bottom-left\"]) .tooltip*/[data-tooltip-position=\"bottom-left\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{top:100%;left:0;margin-top:0.5rem;transform:translateY(-40%)}/*!@:host([data-tooltip-position=\"bottom-left\"]) .tooltip-open*/[data-tooltip-position=\"bottom-left\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{transform:translateY(-6%)}/*!@:host([data-tooltip-position=\"bottom-right\"]) .tooltip*/[data-tooltip-position=\"bottom-right\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{top:100%;left:100%;margin-top:0.5rem;transform:translateY(-40%)}/*!@:host([data-tooltip-position=\"bottom-right\"]) .tooltip-open*/[data-tooltip-position=\"bottom-right\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{transform:translateY(-6%)}/*!@:host([data-tooltip-position=\"right\"]) .tooltip*/[data-tooltip-position=\"right\"].sc-road-tooltip-h .tooltip.sc-road-tooltip{top:50%;left:100%;margin-left:0.5rem;transform:translateX(-14%) translateY(-55%)}/*!@:host([data-tooltip-position=\"right\"]) .tooltip-open*/[data-tooltip-position=\"right\"].sc-road-tooltip-h .tooltip-open.sc-road-tooltip{transform:translateX(-4%) translateY(-55%)}";
 
 /**
  * @slot tooltip-content - content of the tooltip, if you need to add html content, use this slot, otherwise use directly the content prop.
@@ -37536,13 +37858,20 @@ class Tooltip {
         this.close();
       }
     };
+    this.isKeyboardNavigation = false;
+    this.handleKeyDown = () => {
+      this.isKeyboardNavigation = true;
+    };
+    this.handleMouseDown = () => {
+      this.isKeyboardNavigation = false;
+    };
     this.onFocus = () => {
-      if (this.hasTrigger('focus') || this.hasTrigger('hover')) {
+      if (this.isKeyboardNavigation && this.hasTrigger('hover')) {
         this.open();
       }
     };
     this.onBlur = () => {
-      if (this.hasTrigger('focus') || this.hasTrigger('hover')) {
+      if (this.isKeyboardNavigation && this.hasTrigger('hover')) {
         this.close();
       }
     };
@@ -37565,6 +37894,19 @@ class Tooltip {
   async close() {
     this.isOpen = false;
   }
+  // Écoute les événements pour détecter le mode d'interaction
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleKeyDown);
+    document.addEventListener('mousedown', this.handleMouseDown);
+  }
+  componentDidLoad() {
+    document.addEventListener('keydown', this.handleKeyDown);
+    document.addEventListener('mousedown', this.handleMouseDown);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeyDown);
+    document.removeEventListener('mousedown', this.handleMouseDown);
+  }
   hasTrigger(triggerType) {
     const triggers = this.trigger.split(' ');
     return triggers.includes(triggerType);
@@ -37703,6 +38045,7 @@ registerComponents([
   Duration,
   Flap,
   GlobalNavigation,
+  GlobalNavigationV2,
   Grid,
   Icon,
   Illustration,
@@ -37714,7 +38057,9 @@ registerComponents([
   List,
   Modal,
   Navbar,
+  NavbarItem$1,
   NavbarItem,
+  NavbarV2,
   PlateNumber,
   ProgressBar,
   ProgressIndicatorVertical,
@@ -37748,6 +38093,7 @@ registerComponents([
   Toolbar,
   ToolbarAppName,
   ToolbarTitle,
+  ToolbarV2,
   Tooltip,
   toggle,
 ]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roadtrip/components",
-  "version": "3.29.0",
+  "version": "3.31.0",
   "description": "Web Component library for Roadtrip Design System",
   "license": "Apache-2.0",
   "homepage": "https://gitlab.com/mobivia-design/roadtrip/components",