@ouestfrance/sipa-bms-ui 8.7.0 → 8.8.0

package/dist/mockServiceWorker.js

@@ -7,8 +7,8 @@
  * - Please do NOT modify this file.
  */
 
-const PACKAGE_VERSION = '2.11.1'
-const INTEGRITY_CHECKSUM = 'f5825c521429caf22a4dd13b66e243af'
+const PACKAGE_VERSION = '2.11.3'
+const INTEGRITY_CHECKSUM = '4db4a41e972cec1b64cc569c66952d82'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -71,11 +71,6 @@ addEventListener('message', async function (event) {
       break
     }
 
-    case 'MOCK_DEACTIVATE': {
-      activeClientIds.delete(clientId)
-      break
-    }
-
     case 'CLIENT_CLOSED': {
       activeClientIds.delete(clientId)
 
@@ -94,6 +89,8 @@ addEventListener('message', async function (event) {
 })
 
 addEventListener('fetch', function (event) {
+  const requestInterceptedAt = Date.now()
+
   // Bypass navigation requests.
   if (event.request.mode === 'navigate') {
     return
@@ -110,23 +107,29 @@ addEventListener('fetch', function (event) {
 
   // Bypass all requests when there are no active clients.
   // Prevents the self-unregistered worked from handling requests
-  // after it's been deleted (still remains active until the next reload).
+  // after it's been terminated (still remains active until the next reload).
   if (activeClientIds.size === 0) {
     return
   }
 
   const requestId = crypto.randomUUID()
-  event.respondWith(handleRequest(event, requestId))
+  event.respondWith(handleRequest(event, requestId, requestInterceptedAt))
 })
 
 /**
  * @param {FetchEvent} event
  * @param {string} requestId
+ * @param {number} requestInterceptedAt
  */
-async function handleRequest(event, requestId) {
+async function handleRequest(event, requestId, requestInterceptedAt) {
   const client = await resolveMainClient(event)
   const requestCloneForEvents = event.request.clone()
-  const response = await getResponse(event, client, requestId)
+  const response = await getResponse(
+    event,
+    client,
+    requestId,
+    requestInterceptedAt,
+  )
 
   // Send back the response clone for the "response:*" life-cycle events.
   // Ensure MSW is active and ready to handle the message, otherwise
@@ -204,7 +207,7 @@ async function resolveMainClient(event) {
  * @param {string} requestId
  * @returns {Promise<Response>}
  */
-async function getResponse(event, client, requestId) {
+async function getResponse(event, client, requestId, requestInterceptedAt) {
   // Clone the request because it might've been already used
   // (i.e. its body has been read and sent to the client).
   const requestClone = event.request.clone()
@@ -255,6 +258,7 @@ async function getResponse(event, client, requestId) {
       type: 'REQUEST',
       payload: {
         id: requestId,
+        interceptedAt: requestInterceptedAt,
         ...serializedRequest,
       },
     },

package/dist/sipa-bms-ui.css

@@ -402,7 +402,7 @@
   width: 1em;
   height: 1em;
   display: block;
-}.bms-tooltip__text[data-v-e8f6f5f1] {
+}.bms-tooltip__text[data-v-44def116] {
   --bms-tooltip-background-color: white;
   --bms-tooltip-color: inherit;
   --bms-tooltip-margin: 4px;
@@ -415,12 +415,12 @@
   max-height: 30rem;
   position: absolute;
   overflow: hidden;
-  z-index: 20;
+  z-index: var(--bms-z-index-tooltip);
   filter: drop-shadow(0 0 0.8rem var(--bms-shadow-color));
   color: var(--bms-font-color);
   transform: var(--bms-tooltip-transform);
 }
-.bms-tooltip__text[data-v-e8f6f5f1]::before {
+.bms-tooltip__text[data-v-44def116]::before {
   content: "";
   position: absolute;
   right: var(--bms-tooltip-indicator-position-right);
@@ -432,54 +432,54 @@
   border-style: solid;
   border-color: var(--bms-tooltip-indicator-border);
 }
-.bms-tooltip__text--top[data-v-e8f6f5f1], .bms-tooltip__text--bottom[data-v-e8f6f5f1] {
+.bms-tooltip__text--top[data-v-44def116], .bms-tooltip__text--bottom[data-v-44def116] {
   --bms-tooltip-indicator-position-left: 50%;
   --bms-tooltip-indicator-position-right: initial;
 }
-.bms-tooltip__text--bottom[data-v-e8f6f5f1] {
+.bms-tooltip__text--bottom[data-v-44def116] {
   --bms-tooltip-indicator-position-top: initial;
   --bms-tooltip-indicator-position-bottom: 100%;
   --bms-tooltip-indicator-border: transparent transparent
     var(--bms-tooltip-background-color) transparent;
 }
-.bms-tooltip__text--top[data-v-e8f6f5f1] {
+.bms-tooltip__text--top[data-v-44def116] {
   --bms-tooltip-indicator-position-top: 100%;
   --bms-tooltip-indicator-position-bottom: initial;
   --bms-tooltip-indicator-border: var(--bms-tooltip-background-color)
     transparent transparent transparent;
 }
-.bms-tooltip__text--left[data-v-e8f6f5f1], .bms-tooltip__text--right[data-v-e8f6f5f1] {
+.bms-tooltip__text--left[data-v-44def116], .bms-tooltip__text--right[data-v-44def116] {
   --bms-tooltip-indicator-position-top: 50%;
   --bms-tooltip-indicator-position-bottom: initial;
 }
-.bms-tooltip__text--left[data-v-e8f6f5f1] {
+.bms-tooltip__text--left[data-v-44def116] {
   --bms-tooltip-indicator-position-right: initial;
   --bms-tooltip-indicator-position-left: 100%;
   --bms-tooltip-indicator-border: transparent transparent transparent
     var(--bms-tooltip-background-color);
 }
-.bms-tooltip__text--right[data-v-e8f6f5f1] {
+.bms-tooltip__text--right[data-v-44def116] {
   --bms-tooltip-indicator-position-right: 100%;
   --bms-tooltip-indicator-position-left: initial;
   --bms-tooltip-indicator-border: transparent
     var(--bms-tooltip-background-color) transparent transparent;
 }
-.tooltip-fade-enter-active[data-v-e8f6f5f1] {
+.tooltip-fade-enter-active[data-v-44def116] {
   transition: opacity 0.2s ease;
 }
-.tooltip-fade-enter-from[data-v-e8f6f5f1] {
+.tooltip-fade-enter-from[data-v-44def116] {
   opacity: 0;
 }
-.tooltip-fade-enter-to[data-v-e8f6f5f1] {
+.tooltip-fade-enter-to[data-v-44def116] {
   opacity: 1;
 }
-.tooltip-fade-leave-active[data-v-e8f6f5f1] {
+.tooltip-fade-leave-active[data-v-44def116] {
   transition: opacity 0.3s ease;
 }
-.tooltip-fade-leave-from[data-v-e8f6f5f1] {
+.tooltip-fade-leave-from[data-v-44def116] {
   opacity: 1;
 }
-.tooltip-fade-leave-to[data-v-e8f6f5f1] {
+.tooltip-fade-leave-to[data-v-44def116] {
   opacity: 0;
 }.bms-tooltip-anchor-wrapper[data-v-b033f8af] {
   position: relative;
@@ -1483,17 +1483,17 @@ input[type=radio][data-v-c0c9efa3]:checked::before {
 .bms-header__subtitle[data-v-1368f77d] {
   margin-top: 0.5em;
   display: inline-block;
-}.overlay[data-v-5004909e] {
+}.overlay[data-v-383b958c] {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
-  z-index: 10;
+  z-index: var(--bms-z-index-modal);
   background: rgba(82, 100, 118, 0.3);
 }
-.priority[data-v-5004909e] {
-  z-index: 20;
+.priority[data-v-383b958c] {
+  z-index: calc(var(--bms-z-index-modal) + 10);
 }.ui-modal[data-v-96b6d748] {
   --modal-header-border-size: 1px;
   --modal-header-color: var(--bms-grey-10);
@@ -1883,7 +1883,7 @@ nav .additional[data-v-731a6d8c] {
   align-items: center;
   min-height: 80px;
   overflow-x: hidden;
-}.menu__container[data-v-79a67d3d] {
+}.menu__container[data-v-02719cac] {
   --menu-margin: 1.5rem;
   position: fixed;
   display: flex;
@@ -1896,44 +1896,44 @@ nav .additional[data-v-731a6d8c] {
   margin: 1.5rem;
   padding: 0;
   border-radius: 0.5rem;
-  z-index: 10;
+  z-index: var(--bms-z-index-fixed);
 }
-.menu__copyright[data-v-79a67d3d] {
+.menu__copyright[data-v-02719cac] {
   position: sticky;
   padding: 1rem;
   text-align: center;
 }
-.menu__copyright-madein[data-v-79a67d3d] {
+.menu__copyright-madein[data-v-02719cac] {
   font-size: 0.75em;
   margin: 0;
   opacity: 0.64;
 }
-.menu__logo[data-v-79a67d3d] {
+.menu__logo[data-v-02719cac] {
   width: 100%;
   object-fit: contain;
   height: 4rem;
   display: block;
 }
-[data-v-79a67d3d] .menu__close {
+[data-v-02719cac] .menu__close {
   position: absolute;
   top: 0;
   margin: 0.5rem;
   right: 0;
 }
-.menu-slide-left-fade-enter-active[data-v-79a67d3d],
-.menu-slide-left-fade-leave-active[data-v-79a67d3d] {
+.menu-slide-left-fade-enter-active[data-v-02719cac],
+.menu-slide-left-fade-leave-active[data-v-02719cac] {
   transition: opacity 0.2s linear;
 }
-.menu-slide-left-fade-enter-from[data-v-79a67d3d],
-.menu-slide-left-fade-leave-to[data-v-79a67d3d] {
+.menu-slide-left-fade-enter-from[data-v-02719cac],
+.menu-slide-left-fade-leave-to[data-v-02719cac] {
   opacity: 0;
 }
-.menu-slide-left-fade-enter-active .menu__container[data-v-79a67d3d],
-.menu-slide-left-fade-leave-active .menu__container[data-v-79a67d3d] {
+.menu-slide-left-fade-enter-active .menu__container[data-v-02719cac],
+.menu-slide-left-fade-leave-active .menu__container[data-v-02719cac] {
   transition: transform 0.2s ease-in-out;
 }
-.menu-slide-left-fade-enter-from .menu__container[data-v-79a67d3d],
-.menu-slide-left-fade-leave-to .menu__container[data-v-79a67d3d] {
+.menu-slide-left-fade-enter-from .menu__container[data-v-02719cac],
+.menu-slide-left-fade-leave-to .menu__container[data-v-02719cac] {
   transform: translate3d(-10%, 0, 0);
 }.tab[data-v-d2f6b84b] {
   --tab-border-color: transparent;
@@ -1973,36 +1973,36 @@ nav .additional[data-v-731a6d8c] {
 .tabs-header a[data-v-f862fbda] {
   position: relative;
   top: 1px;
-}.ui-menu[data-v-9504df98] {
+}.ui-menu[data-v-a5b2b7f5] {
   --ui-menu-width: auto;
   min-width: 100px;
   max-height: 400px;
   width: var(--ui-menu-width, auto);
   width: 400px;
   position: fixed;
-  z-index: 10;
+  z-index: var(--bms-z-index-fixed);
   display: block;
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.1s linear;
 }
-.ui-menu.is-matchwidth[data-v-9504df98] {
+.ui-menu.is-matchwidth[data-v-a5b2b7f5] {
   max-width: 100%;
 }
-.ui-menu.is-visible[data-v-9504df98] {
+.ui-menu.is-visible[data-v-a5b2b7f5] {
   pointer-events: all;
   opacity: 1;
 }
-.ui-menu.left[data-v-9504df98] {
+.ui-menu.left[data-v-a5b2b7f5] {
   left: var(--ui-menu-x-position, 0);
 }
-.ui-menu.bottom[data-v-9504df98] {
+.ui-menu.bottom[data-v-a5b2b7f5] {
   top: var(--ui-menu-y-position, 0);
 }
-.ui-menu.top[data-v-9504df98] {
+.ui-menu.top[data-v-a5b2b7f5] {
   bottom: var(--ui-menu-y-position, 0);
 }
-.ui-menu.right[data-v-9504df98] {
+.ui-menu.right[data-v-a5b2b7f5] {
   right: calc(100% - var(--ui-menu-x-position, 0));
 }
 .site-logo {
@@ -2529,7 +2529,7 @@ nav .additional[data-v-731a6d8c] {
 }
 .bms-notification[data-v-2a9037b5] .bms-notification__close-button:hover {
   color: var(--notification-background-color);
-}.bms-notifications[data-v-bbd8ca27] {
+}.bms-notifications[data-v-b20e6fa0] {
   --bms-notifications-width: 360px;
   --bms-notifications-margin: 1em 0 0;
   --bms-notifications-left: initial;
@@ -2546,24 +2546,24 @@ nav .additional[data-v-731a6d8c] {
   top: var(--bms-notifications-top);
   width: 100%;
   max-width: var(--bms-notifications-width);
-  z-index: 20;
+  z-index: var(--bms-z-index-fixed);
 }
-.bms-notifications__item[data-v-bbd8ca27]:not(:first-child) {
+.bms-notifications__item[data-v-b20e6fa0]:not(:first-child) {
   margin: var(--bms-notifications-margin);
 }
-.bms-notifactions-transition-move[data-v-bbd8ca27],
-.bms-notifactions-transition-enter-active[data-v-bbd8ca27],
-.bms-notifactions-transition-leave-active[data-v-bbd8ca27] {
+.bms-notifactions-transition-move[data-v-b20e6fa0],
+.bms-notifactions-transition-enter-active[data-v-b20e6fa0],
+.bms-notifactions-transition-leave-active[data-v-b20e6fa0] {
   transition: all var(--bms-notifications-transition-duration) var(--bms-notifications-transition-timing-function);
 }
-.bms-notifactions-transition-enter-from[data-v-bbd8ca27],
-.bms-notifactions-transition-leave-to[data-v-bbd8ca27] {
+.bms-notifactions-transition-enter-from[data-v-b20e6fa0],
+.bms-notifactions-transition-leave-to[data-v-b20e6fa0] {
   opacity: 0;
 }
-.bms-notifactions-transition-enter-from[data-v-bbd8ca27] {
+.bms-notifactions-transition-enter-from[data-v-b20e6fa0] {
   transform: translateX(var(--bms-notifications-enter-translate));
 }
-.bms-notifactions-transition-leave-active[data-v-bbd8ca27] {
+.bms-notifactions-transition-leave-active[data-v-b20e6fa0] {
   position: absolute;
 }.ui-problem[data-v-411b2e2a] {
   position: relative;
@@ -3089,6 +3089,11 @@ section {
   --bms-information-color: var(--bms-grey-100);
   --bms-disabled-color: var(--bms-grey-50);
   --bms-font-color: var(--bms-grey-100);
+  --bms-z-index-below: -10;
+  --bms-z-index-base: 0;
+  --bms-z-index-fixed: 10;
+  --bms-z-index-tooltip: 20;
+  --bms-z-index-modal: 30;
 }.content[data-v-12e40422] {
   display: flex;
   flex-direction: column;
@@ -3177,7 +3182,7 @@ section {
   margin: 0;
   background: var(--bms-white);
   width: 100%;
-  z-index: 100;
+  z-index: var(--bms-z-index-tooltip);
   max-height: 300px;
   overflow-y: auto;
 }

package/dist/sipa-bms-ui.es.js

@@ -37845,7 +37845,7 @@ const _sfc_main$1c = /* @__PURE__ */ defineComponent({
   }
 });
 
-const UiTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["__scopeId", "data-v-e8f6f5f1"]]);
+const UiTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["__scopeId", "data-v-44def116"]]);
 
 const _sfc_main$1b = /* @__PURE__ */ defineComponent({
   __name: "BmsTooltip",
@@ -89204,7 +89204,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BmsOverlay = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-5004909e"]]);
+const BmsOverlay = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-383b958c"]]);
 
 const _hoisted_1$v = ["data-testid"];
 const _hoisted_2$k = { class: "ui-modal__header" };
@@ -90042,7 +90042,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BmsMenu = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-79a67d3d"]]);
+const BmsMenu = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-02719cac"]]);
 
 const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "UiTab",
@@ -90195,7 +90195,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   }
 });
 
-const UiPopoverMenu = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-9504df98"]]);
+const UiPopoverMenu = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-a5b2b7f5"]]);
 
 const getInitials = (name) => {
   if (name.length === 0) return "";
@@ -101912,7 +101912,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const NotificationWidget = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-bbd8ca27"]]);
+const NotificationWidget = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-b20e6fa0"]]);
 
 const BmsNotificationsInstance = Symbol();
 const notifications = {

package/dist/sipa-bms-ui.umd.js

@@ -37848,7 +37848,7 @@
     }
   });
 
-  const UiTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["__scopeId", "data-v-e8f6f5f1"]]);
+  const UiTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["__scopeId", "data-v-44def116"]]);
 
   const _sfc_main$1b = /* @__PURE__ */ vue.defineComponent({
     __name: "BmsTooltip",
@@ -89207,7 +89207,7 @@
     }
   });
 
-  const BmsOverlay = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-5004909e"]]);
+  const BmsOverlay = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-383b958c"]]);
 
   const _hoisted_1$v = ["data-testid"];
   const _hoisted_2$k = { class: "ui-modal__header" };
@@ -90045,7 +90045,7 @@
     }
   });
 
-  const BmsMenu = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-79a67d3d"]]);
+  const BmsMenu = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-02719cac"]]);
 
   const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     __name: "UiTab",
@@ -90198,7 +90198,7 @@
     }
   });
 
-  const UiPopoverMenu = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-9504df98"]]);
+  const UiPopoverMenu = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-a5b2b7f5"]]);
 
   const getInitials = (name) => {
     if (name.length === 0) return "";
@@ -101915,7 +101915,7 @@
     }
   });
 
-  const NotificationWidget = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-bbd8ca27"]]);
+  const NotificationWidget = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-b20e6fa0"]]);
 
   const BmsNotificationsInstance = Symbol();
   const notifications = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.7.0",
+  "version": "8.8.0",
   "author": "Ouest-France BMS",
   "license": "ISC",
   "scripts": {
@@ -36,9 +36,9 @@
     "@commitlint/config-conventional": "19.8.1",
     "@formkit/vue": "1.6.9",
     "@mdx-js/react": "3.1.1",
-    "@storybook/addon-docs": "9.1.5",
-    "@storybook/addon-links": "9.1.5",
-    "@storybook/vue3-vite": "9.1.5",
+    "@storybook/addon-docs": "9.1.7",
+    "@storybook/addon-links": "9.1.7",
+    "@storybook/vue3-vite": "9.1.7",
     "@types/lodash": "4.17.20",
     "@types/uuid": "11.0.0",
     "@vitejs/plugin-vue": "6.0.1",
@@ -47,7 +47,7 @@
     "@vueuse/motion": "^3.0.0",
     "axios": "1.12.2",
     "blob-util": "^2.0.2",
-    "chromatic": "13.1.4",
+    "chromatic": "13.2.0",
     "codemirror": "6.0.2",
     "cors": "^2.8.5",
     "cross-env": "^10.0.0",
@@ -64,15 +64,15 @@
     "normalize.css": "8.0.1",
     "path": "0.12.7",
     "prettier": "3.6.2",
-    "sass": "1.92.1",
-    "semantic-release": "24.2.8",
-    "start-server-and-test": "2.1.0",
-    "storybook": "9.1.5",
-    "storybook-addon-pseudo-states": "9.1.5",
+    "sass": "1.93.0",
+    "semantic-release": "24.2.9",
+    "start-server-and-test": "2.1.2",
+    "storybook": "9.1.7",
+    "storybook-addon-pseudo-states": "9.1.7",
     "storybook-vue3-router": "^6.0.2",
     "typescript": "5.2.2",
     "uuid": "13.0.0",
-    "vite": "7.1.5",
+    "vite": "7.1.6",
     "vite-plugin-dts": "^4.1.0",
     "vite-plugin-mkcert": "1.17.8",
     "vite-plugin-pages": "0.33.1",

package/src/assets/scss/global-variables.scss

@@ -52,5 +52,11 @@
 
     --bms-disabled-color: var(--bms-grey-50);
     --bms-font-color: var(--bms-grey-100);
+
+    --bms-z-index-below: -10;
+    --bms-z-index-base: 0;
+    --bms-z-index-fixed: 10;
+    --bms-z-index-tooltip: 20;
+    --bms-z-index-modal: 30;
   }
 }

package/src/components/feedback/UiTooltip.vue

@@ -130,7 +130,7 @@ const style = computed(() => {
   max-height: 30rem;
   position: absolute;
   overflow: hidden;
-  z-index: 20;
+  z-index: var(--bms-z-index-tooltip);
   filter: drop-shadow(0 0 0.8rem var(--bms-shadow-color));
   color: var(--bms-font-color);
   transform: var(--bms-tooltip-transform);

package/src/components/layout/BmsOverlay.vue

@@ -18,11 +18,11 @@ defineProps<{
   left: 0;
   width: 100vw;
   height: 100vh;
-  z-index: 10;
+  z-index: var(--bms-z-index-modal);
   background: rgba(82, 100, 118, 0.3);
 }
 
 .priority {
-  z-index: 20;
+  z-index: calc(var(--bms-z-index-modal) + 10);
 }
 </style>

package/src/components/layout/UiPopoverMenu.vue

@@ -133,7 +133,7 @@ const listener = () => {
   width: var(--ui-menu-width, auto);
   width: 400px;
   position: fixed;
-  z-index: 10;
+  z-index: var(--bms-z-index-fixed);
   display: block;
   pointer-events: none;
   opacity: 0;

package/src/components/navigation/BmsMenu.vue

@@ -96,7 +96,7 @@ const toggleMenu = (newMenuState: boolean = true) =>
     margin: 1.5rem;
     padding: 0;
     border-radius: 0.5rem;
-    z-index: 10;
+    z-index: var(--bms-z-index-fixed);
   }
 
   &__copyright {

package/src/plugins/field/FieldComponent.vue

@@ -206,7 +206,7 @@ const getCaptionIdentifier = (caption: string | Caption): string => {
     margin: 0;
     background: var(--bms-white);
     width: 100%;
-    z-index: 100;
+    z-index: var(--bms-z-index-tooltip);
     max-height: 300px;
     overflow-y: auto;
 

package/src/plugins/notifications/NotificationWidget.vue

@@ -100,7 +100,7 @@ const closeDetails = () => {
   top: var(--bms-notifications-top);
   width: 100%;
   max-width: var(--bms-notifications-width);
-  z-index: 20;
+  z-index: var(--bms-z-index-fixed);
 
   &__item {
     &:not(:first-child) {

package/src/showroom/pages/zindex.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import BmsButton from '@/components/button/BmsButton.vue';
+import BmsTooltip from '@/components/feedback/BmsTooltip.vue';
+import BmsHeader from '@/components/layout/BmsHeader.vue';
+import BmsModal from '@/components/layout/BmsModal.vue';
+import UiPopoverMenu from '@/components/layout/UiPopoverMenu.vue';
+import BmsTenantSwitcher from '@/components/navigation/BmsTenantSwitcher.vue';
+import { Tenant } from '@/models';
+import { useNotifications } from '@/plugins/notifications';
+import { ref } from 'vue';
+
+const isModalOpen = ref(false);
+const { success, error } = useNotifications();
+
+const onClick = () => {
+  isModalOpen.value = true;
+  success('toto');
+};
+
+const tenants: Tenant[] = [{ id: '1', information: '1', label: 'Tenant 1' }];
+</script>
+
+<template>
+  <BmsTooltip
+    :tooltip-text="'hello hello hello hello hello hello hello hello hello hello hello hello hello hello'"
+  >
+    <BmsButton @click="onClick">Hello</BmsButton>
+  </BmsTooltip>
+  <BmsTenantSwitcher
+    :tenants="tenants"
+    :current-tenant="null"
+    select-tenant-label="Coucou"
+    select-tenant-placeholder="toto"
+  />
+
+  <BmsHeader> fixed header</BmsHeader>
+
+  <BmsModal v-model="isModalOpen"> Ouvrir la modale </BmsModal>
+</template>