@vialiq/web-components 0.17.0 → 0.18.0

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

@@ -1,48 +1,49 @@
 /**
  * OverlayManagerService
- * 
- * A singleton service responsible for managing the z-index stacking context 
+ *
+ * A singleton service responsible for managing the z-index stacking context
  * of all floating elements (Modals, Dropdowns, Tooltips, Toasts) across the application.
- * 
- * It ensures that newly opened overlays always appear on top of existing ones by 
+ *
+ * It ensures that newly opened overlays always appear on top of existing ones by
  * maintaining a registry and dynamically calculating the next highest z-index.
- * It also manages global state side-effects, such as locking `document.body` scroll 
+ * It also manages global state side-effects, such as locking `document.body` scroll
  * when a modal is active.
  */ class OverlayManagerService {
-    _baseZIndexCache;
-    get baseZIndex() {
-        if (this._baseZIndexCache !== undefined) return this._baseZIndexCache;
+    getBaseZIndex(element) {
         if (typeof document !== 'undefined' && typeof getComputedStyle !== 'undefined') {
             // Derive base stacking context from the modal z-index token (minus 10 to start slightly below it)
-            const cssVar = getComputedStyle(document.documentElement).getPropertyValue('--vi-modal-z-index').trim();
+            // Read directly from the element if provided to support CSS variable scoping/theming.
+            const target = element || document.documentElement;
+            const cssVar = getComputedStyle(target).getPropertyValue('--vi-modal-z-index').trim();
             const parsed = parseInt(cssVar, 10);
-            this._baseZIndexCache = !isNaN(parsed) ? parsed - 10 : 1040;
-        } else {
-            this._baseZIndexCache = 1040;
+            return !isNaN(parsed) ? parsed - 10 : 1040;
         }
-        return this._baseZIndexCache;
+        return 1040;
     }
     overlays = [];
     _previousOverflow = null;
     /**
    * Registers an element as an active overlay.
    * Calculates and returns the appropriate z-index for this overlay.
-   * 
+   *
    * @param element The DOM element being registered (e.g., the modal dialog or dropdown listbox)
    * @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') {
+   */ register(element, type = 'dropdown', scrollStrategy) {
         this.unregister(element); // Ensure no duplicates
-        let highestZIndex = this.baseZIndex;
+        let highestZIndex = this.getBaseZIndex(element);
         if (this.overlays.length > 0) {
-            highestZIndex = Math.max(...this.overlays.map((o)=>o.zIndex));
+            highestZIndex = Math.max(...this.overlays.map((o)=>o.zIndex), highestZIndex);
         }
         // Increment by 10 to allow room for backdrops (which typically sit at z-index - 1)
         const newZIndex = highestZIndex + 10;
+        const finalStrategy = scrollStrategy ?? (type === 'modal' ? 'block' : 'noop');
         this.overlays.push({
             element,
             type,
-            zIndex: newZIndex
+            zIndex: newZIndex,
+            scrollStrategy: finalStrategy
         });
         this._updateBodyScroll();
         return newZIndex;
@@ -50,7 +51,7 @@
     /**
    * Unregisters an element, removing it from the overlay stack.
    * Should be called when the overlay is closed or disconnected from the DOM.
-   * 
+   *
    * @param element The DOM element to unregister.
    */ unregister(element) {
         this.overlays = this.overlays.filter((o)=>o.element !== element);
@@ -58,7 +59,7 @@
     }
     /**
    * Gets the assigned z-index for an element if it is currently registered.
-   * 
+   *
    * @param element The DOM element to query.
    * @returns The z-index number, or null if the element is not registered.
    */ getZIndex(element) {
@@ -68,7 +69,7 @@
     /**
    * Evaluates whether the provided element is currently the top-most active overlay.
    * Useful for trapping focus or handling global Escape key presses.
-   * 
+   *
    * @param element The DOM element to check.
    * @returns True if the element has the highest z-index in the registry.
    */ isTopOverlay(element) {
@@ -77,12 +78,12 @@
         return topOverlay.element === element;
     }
     /**
-   * Locks or unlocks the document.body scroll based on the presence of modals.
-   * Modals require the body to be unscrollable to trap scroll inside the modal.
-   * It applies a utility class `vi-scroll-locked` to the body.
+   * 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.
    */ _updateBodyScroll() {
-        const hasModal = this.overlays.some((o)=>o.type === 'modal');
-        if (hasModal) {
+        const hasBlock = this.overlays.some((o)=>o.scrollStrategy === 'block');
+        if (hasBlock) {
             // Prevent double-setting if already locked
             if (!document.body.classList.contains('vi-scroll-locked')) {
                 document.body.classList.add('vi-scroll-locked');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vialiq/web-components",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -103,7 +103,7 @@
   },
   "peerDependencies": {
     "@floating-ui/dom": ">=1.0.0",
-    "@vialiq/flux-ui": "^0.14.0",
+    "@vialiq/flux-ui": ">=0.0.4 <0.1.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-CZSDXl6Z.js';
+import { O as OverlayManager } from '../overlay-manager-xco6S92C.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}";