@vialiq/web-components 0.18.0 → 0.20.0

package/{overlay-manager-xco6S92C.js → overlay-manager-Ch_6fr_D.js}

@@ -22,6 +22,8 @@
     }
     overlays = [];
     _previousOverflow = null;
+    _previousPaddingRight = null;
+    _inertedElements = [];
     /**
    * Registers an element as an active overlay.
    * Calculates and returns the appropriate z-index for this overlay.
@@ -30,7 +32,7 @@
    * @param type The type of overlay, used to determine behaviors like scroll-locking.
    * @param scrollStrategy How this overlay interacts with background scrolling.
    * @returns The calculated z-index to be applied to the element.
-   */ register(element, type = 'dropdown', scrollStrategy) {
+   */ register(element, type = 'dropdown', scrollStrategy, options) {
         this.unregister(element); // Ensure no duplicates
         let highestZIndex = this.getBaseZIndex(element);
         if (this.overlays.length > 0) {
@@ -43,9 +45,11 @@
             element,
             type,
             zIndex: newZIndex,
-            scrollStrategy: finalStrategy
+            scrollStrategy: finalStrategy,
+            noBackdrop: options?.noBackdrop
         });
         this._updateBodyScroll();
+        this._syncInertState();
         return newZIndex;
     }
     /**
@@ -56,6 +60,7 @@
    */ unregister(element) {
         this.overlays = this.overlays.filter((o)=>o.element !== element);
         this._updateBodyScroll();
+        this._syncInertState();
     }
     /**
    * Gets the assigned z-index for an element if it is currently registered.
@@ -78,6 +83,46 @@
         return topOverlay.element === element;
     }
     /**
+   * Syncs the `inert` attribute on `document.body` children based on the active overlay stack.
+   * Modals with a backdrop trap focus globally, so everything beneath them must be `inert`.
+   */ _syncInertState() {
+        if (typeof document === 'undefined') return;
+        // Find the topmost modal that requires a backdrop
+        const blockingOverlays = this.overlays.filter((o)=>o.type === 'modal' && !o.noBackdrop);
+        const topBlocking = blockingOverlays.length > 0 ? blockingOverlays[blockingOverlays.length - 1] : null;
+        if (!topBlocking) {
+            // If no blocking overlays, clear all inert state
+            this._inertedElements.forEach((el)=>{
+                el.inert = false;
+            });
+            this._inertedElements = [];
+            return;
+        }
+        // Determine which overlays should NOT be inert (the top blocking one and any above it)
+        const activeOverlayElements = new Set();
+        const topBlockingIndex = this.overlays.indexOf(topBlocking);
+        for(let i = topBlockingIndex; i < this.overlays.length; i++){
+            activeOverlayElements.add(this.overlays[i].element);
+        }
+        // Mark children of body
+        Array.from(document.body.children).forEach((child)=>{
+            const el = child;
+            // Never make the active overlays inert
+            if (activeOverlayElements.has(el)) {
+                if (this._inertedElements.includes(el)) {
+                    el.inert = false;
+                    this._inertedElements = this._inertedElements.filter((e)=>e !== el);
+                }
+                return;
+            }
+            // If it's not an active overlay, and not already inert, make it inert
+            if (!el.inert) {
+                el.inert = true;
+                this._inertedElements.push(el);
+            }
+        });
+    }
+    /**
    * Locks or unlocks the document.body scroll based on the active overlays.
    * Modals (and other overlays with scrollStrategy='block') require the body 
    * to be unscrollable. It applies a utility class `vi-scroll-locked` to the body.
@@ -86,9 +131,17 @@
         if (hasBlock) {
             // Prevent double-setting if already locked
             if (!document.body.classList.contains('vi-scroll-locked')) {
+                // Calculate scrollbar width before removing overflow
+                const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
                 document.body.classList.add('vi-scroll-locked');
                 this._previousOverflow = document.body.style.getPropertyValue('overflow') || null;
+                this._previousPaddingRight = document.body.style.getPropertyValue('padding-right') || null;
                 document.body.style.setProperty('overflow', 'hidden', 'important');
+                // Apply compensation padding to prevent layout shift
+                if (scrollbarWidth > 0) {
+                    const currentPadding = parseFloat(window.getComputedStyle(document.body).paddingRight || '0');
+                    document.body.style.setProperty('padding-right', `${currentPadding + scrollbarWidth}px`, 'important');
+                }
             }
         } else {
             if (document.body.classList.contains('vi-scroll-locked')) {
@@ -98,7 +151,13 @@
                 } else {
                     document.body.style.removeProperty('overflow');
                 }
+                if (this._previousPaddingRight !== null) {
+                    document.body.style.setProperty('padding-right', this._previousPaddingRight);
+                } else {
+                    document.body.style.removeProperty('padding-right');
+                }
                 this._previousOverflow = null;
+                this._previousPaddingRight = null;
             }
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vialiq/web-components",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -103,7 +103,7 @@
   },
   "peerDependencies": {
     "@floating-ui/dom": ">=1.0.0",
-    "@vialiq/flux-ui": ">=0.0.4 <0.1.0",
+    "@vialiq/flux-ui": "^0.16.0",
     "@vialiq/icons": ">=0.0.3 <0.1.0",
     "lit": "^3.0.0"
   },

package/tooltip/vi-tooltip.js

@@ -2,7 +2,7 @@ import { unsafeCSS, css, nothing, html } from 'lit';
 import { customElement, property, state, query } from 'lit/decorators.js';
 import { V as ViElement } from '../vi-element-C6GfDPs3.js';
 import { autoUpdate, offset, flip, shift, arrow, computePosition } from '@floating-ui/dom';
-import { O as OverlayManager } from '../overlay-manager-xco6S92C.js';
+import { O as OverlayManager } from '../overlay-manager-Ch_6fr_D.js';
 
 const tooltipStyles = "@charset \"UTF-8\";@layer reset,components,utilities;.tooltip-panel{position:fixed;z-index:var(--vi-tooltip-z-index, var(--vi-tooltip-z-index, 1070));pointer-events:none;opacity:0;transform:scale(.95);transition:opacity .15s ease-out,transform .15s ease-out;margin:0;border:none;background:transparent;padding:0;overflow:visible;font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif)}.tooltip-panel[popover]:popover-open{display:block;pointer-events:auto;opacity:1;transform:scale(1)}.tooltip-panel{transition-property:opacity,transform,display,overlay;transition-behavior:allow-discrete}@media(prefers-reduced-motion:reduce){.tooltip-panel{transition:none;transform:none}}.tooltip-content{background-color:var(--vi-tooltip-background, var(--vi-layer-inverse, #111827));color:var(--vi-tooltip-color, var(--vi-text-primary-inverse, #ffffff));font-size:var(--vi-tooltip-font-size, 12px);line-height:1.4;padding:var(--vi-tooltip-padding, 6px 10px);border-radius:var(--vi-tooltip-border-radius, 4px);box-shadow:var(--vi-tooltip-shadow, var(--vi-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .1)));max-width:var(--vi-tooltip-max-width, 240px);word-wrap:break-word;white-space:normal;position:relative}.tooltip-arrow{position:absolute;width:0;height:0;border-style:solid;border-color:transparent;pointer-events:none}.tooltip-panel[placement^=top] .tooltip-arrow,.tooltip-panel[data-placement^=top] .tooltip-arrow{bottom:calc(-1 * var(--vi-tooltip-arrow-size, 6px));left:50%;transform:translate(-50%);border-width:var(--vi-tooltip-arrow-size, 6px) var(--vi-tooltip-arrow-size, 6px) 0;border-top-color:var(--vi-tooltip-background, var(--vi-layer-inverse, #111827))}.tooltip-panel[placement^=bottom] .tooltip-arrow,.tooltip-panel[data-placement^=bottom] .tooltip-arrow{top:calc(-1 * var(--vi-tooltip-arrow-size, 6px));left:50%;transform:translate(-50%);border-width:0 var(--vi-tooltip-arrow-size, 6px) var(--vi-tooltip-arrow-size, 6px);border-bottom-color:var(--vi-tooltip-background, var(--vi-layer-inverse, #111827))}.tooltip-panel[placement=left] .tooltip-arrow,.tooltip-panel[data-placement=left] .tooltip-arrow{right:calc(-1 * var(--vi-tooltip-arrow-size, 6px));top:50%;transform:translateY(-50%);border-width:var(--vi-tooltip-arrow-size, 6px) 0 var(--vi-tooltip-arrow-size, 6px) var(--vi-tooltip-arrow-size, 6px);border-left-color:var(--vi-tooltip-background, var(--vi-layer-inverse, #111827))}.tooltip-panel[placement=right] .tooltip-arrow,.tooltip-panel[data-placement=right] .tooltip-arrow{left:calc(-1 * var(--vi-tooltip-arrow-size, 6px));top:50%;transform:translateY(-50%);border-width:var(--vi-tooltip-arrow-size, 6px) var(--vi-tooltip-arrow-size, 6px) var(--vi-tooltip-arrow-size, 6px) 0;border-right-color:var(--vi-tooltip-background, var(--vi-layer-inverse, #111827))}.tooltip-panel[placement$=-start] .tooltip-arrow,.tooltip-panel[data-placement$=-start] .tooltip-arrow{left:12px;transform:none}.tooltip-panel[placement$=-end] .tooltip-arrow,.tooltip-panel[data-placement$=-end] .tooltip-arrow{left:auto;right:12px;transform:none}:host{display:inline-block}";