@vialiq/web-components 0.14.0 → 0.15.0

package/input/vi-input.d.ts

@@ -27,8 +27,8 @@ declare const ViInput_base: typeof ViElement & (new (...args: any[]) => import('
  *
  * @slot helper - Helper text shown below the input.
  *
- * @fires {CustomEvent<{value:string}>} vialiq-input  - Every keystroke. Bubbles, composed.
- * @fires {CustomEvent<{value:string}>} vialiq-change - Value committed (blur). Bubbles, composed.
+ * @fires {CustomEvent<{value:string}>} vi-input-input  - Every keystroke. Bubbles, composed.
+ * @fires {CustomEvent<{value:string}>} vi-input-change - Value committed (blur). Bubbles, composed.
  * @fires {Event}                       invalid        - Cancelable; fires when checkValidity() fails.
  *
  * @csspart field      - The outer `<div>` wrapper

package/input/vi-input.js

@@ -634,7 +634,7 @@ new class extends _identity {
                 e.stopPropagation();
                 const input = e.target;
                 this.value = input.value;
-                this.dispatchEvent(new CustomEvent('vialiq-input', {
+                this.dispatchEvent(new CustomEvent('vi-input-input', {
                     detail: {
                         value: this.value
                     },
@@ -646,7 +646,7 @@ new class extends _identity {
                 e.stopPropagation();
                 const input = e.target;
                 this.value = input.value;
-                this.dispatchEvent(new CustomEvent('vialiq-change', {
+                this.dispatchEvent(new CustomEvent('vi-input-change', {
                     detail: {
                         value: this.value
                     },

package/overlay-manager-CZSDXl6Z.js

@@ -0,0 +1,108 @@
+/**
+ * OverlayManagerService
+ * 
+ * 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 
+ * maintaining a registry and dynamically calculating the next highest z-index.
+ * 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;
+        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();
+            const parsed = parseInt(cssVar, 10);
+            this._baseZIndexCache = !isNaN(parsed) ? parsed - 10 : 1040;
+        } else {
+            this._baseZIndexCache = 1040;
+        }
+        return this._baseZIndexCache;
+    }
+    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.
+   * @returns The calculated z-index to be applied to the element.
+   */ register(element, type = 'dropdown') {
+        this.unregister(element); // Ensure no duplicates
+        let highestZIndex = this.baseZIndex;
+        if (this.overlays.length > 0) {
+            highestZIndex = Math.max(...this.overlays.map((o)=>o.zIndex));
+        }
+        // Increment by 10 to allow room for backdrops (which typically sit at z-index - 1)
+        const newZIndex = highestZIndex + 10;
+        this.overlays.push({
+            element,
+            type,
+            zIndex: newZIndex
+        });
+        this._updateBodyScroll();
+        return newZIndex;
+    }
+    /**
+   * 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);
+        this._updateBodyScroll();
+    }
+    /**
+   * 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) {
+        const item = this.overlays.find((o)=>o.element === element);
+        return item ? item.zIndex : null;
+    }
+    /**
+   * 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) {
+        if (this.overlays.length === 0) return false;
+        const topOverlay = this.overlays.reduce((prev, current)=>prev.zIndex > current.zIndex ? prev : current);
+        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.
+   */ _updateBodyScroll() {
+        const hasModal = this.overlays.some((o)=>o.type === 'modal');
+        if (hasModal) {
+            // Prevent double-setting if already locked
+            if (!document.body.classList.contains('vi-scroll-locked')) {
+                document.body.classList.add('vi-scroll-locked');
+                this._previousOverflow = document.body.style.getPropertyValue('overflow') || null;
+                document.body.style.setProperty('overflow', 'hidden', 'important');
+            }
+        } else {
+            if (document.body.classList.contains('vi-scroll-locked')) {
+                document.body.classList.remove('vi-scroll-locked');
+                if (this._previousOverflow !== null) {
+                    document.body.style.setProperty('overflow', this._previousOverflow);
+                } else {
+                    document.body.style.removeProperty('overflow');
+                }
+                this._previousOverflow = null;
+            }
+        }
+    }
+}
+// Export as a singleton
+const OverlayManager = new OverlayManagerService();
+
+export { OverlayManager as O };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vialiq/web-components",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -103,8 +103,8 @@
   },
   "peerDependencies": {
     "@floating-ui/dom": ">=1.0.0",
-    "@vialiq/flux-ui": "^0.12.0",
-    "@vialiq/icons": "^0.2.0",
+    "@vialiq/flux-ui": ">=0.0.4 <0.1.0",
+    "@vialiq/icons": ">=0.0.3 <0.1.0",
     "lit": "^3.0.0"
   },
   "keywords": [

package/radio/vi-radio-group.d.ts

@@ -23,7 +23,7 @@ declare const ViRadioGroup_base: typeof ViElement & (new (...args: any[]) => imp
  * @slot label - Text displayed above the group.
  * @slot helper - Helper text displayed below the group.
  *
- * @fires {CustomEvent<{value: string}>} vialiq-change - Dispatched when selection changes. Bubbles, composed.
+ * @fires {CustomEvent<{value: string}>} vi-radio-group-change - Dispatched when selection changes. Bubbles, composed.
  * @fires {Event}                        invalid       - Fired when validation check fails.
  */
 export declare class ViRadioGroup extends ViRadioGroup_base {

package/radio/vi-radio-group.js

@@ -649,7 +649,7 @@ new class extends _identity {
                 this.value = targetRadio.value;
                 this._updateRadios();
                 if (this.value !== oldValue) {
-                    this.dispatchEvent(new CustomEvent('vialiq-change', {
+                    this.dispatchEvent(new CustomEvent('vi-radio-group-change', {
                         detail: {
                             value: this.value
                         },
@@ -696,7 +696,7 @@ new class extends _identity {
                     this._updateRadios();
                     targetRadio.focus();
                     if (this.value !== oldValue) {
-                        this.dispatchEvent(new CustomEvent('vialiq-change', {
+                        this.dispatchEvent(new CustomEvent('vi-radio-group-change', {
                             detail: {
                                 value: this.value
                             },
@@ -715,7 +715,7 @@ new class extends _identity {
                     this.value = '';
                     this._updateRadios();
                     if (this.value !== oldValue) {
-                        this.dispatchEvent(new CustomEvent('vialiq-change', {
+                        this.dispatchEvent(new CustomEvent('vi-radio-group-change', {
                             detail: {
                                 value: this.value
                             },

package/tooltip/vi-tooltip.js

@@ -2,116 +2,10 @@ 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';
 
 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}";
 
-/**
- * OverlayManagerService
- * 
- * 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 
- * maintaining a registry and dynamically calculating the next highest z-index.
- * 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;
-        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();
-            const parsed = parseInt(cssVar, 10);
-            this._baseZIndexCache = !isNaN(parsed) ? parsed - 10 : 1040;
-        } else {
-            this._baseZIndexCache = 1040;
-        }
-        return this._baseZIndexCache;
-    }
-    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.
-   * @returns The calculated z-index to be applied to the element.
-   */ register(element, type = 'dropdown') {
-        this.unregister(element); // Ensure no duplicates
-        let highestZIndex = this.baseZIndex;
-        if (this.overlays.length > 0) {
-            highestZIndex = Math.max(...this.overlays.map((o)=>o.zIndex));
-        }
-        // Increment by 10 to allow room for backdrops (which typically sit at z-index - 1)
-        const newZIndex = highestZIndex + 10;
-        this.overlays.push({
-            element,
-            type,
-            zIndex: newZIndex
-        });
-        this._updateBodyScroll();
-        return newZIndex;
-    }
-    /**
-   * 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);
-        this._updateBodyScroll();
-    }
-    /**
-   * 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) {
-        const item = this.overlays.find((o)=>o.element === element);
-        return item ? item.zIndex : null;
-    }
-    /**
-   * 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) {
-        if (this.overlays.length === 0) return false;
-        const topOverlay = this.overlays.reduce((prev, current)=>prev.zIndex > current.zIndex ? prev : current);
-        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.
-   */ _updateBodyScroll() {
-        const hasModal = this.overlays.some((o)=>o.type === 'modal');
-        if (hasModal) {
-            // Prevent double-setting if already locked
-            if (!document.body.classList.contains('vi-scroll-locked')) {
-                document.body.classList.add('vi-scroll-locked');
-                this._previousOverflow = document.body.style.getPropertyValue('overflow') || null;
-                document.body.style.setProperty('overflow', 'hidden', 'important');
-            }
-        } else {
-            if (document.body.classList.contains('vi-scroll-locked')) {
-                document.body.classList.remove('vi-scroll-locked');
-                if (this._previousOverflow !== null) {
-                    document.body.style.setProperty('overflow', this._previousOverflow);
-                } else {
-                    document.body.style.removeProperty('overflow');
-                }
-                this._previousOverflow = null;
-            }
-        }
-    }
-}
-// Export as a singleton
-const OverlayManager = new OverlayManagerService();
-
 function applyDecs2203RFactory() {
     function createAddInitializerMethod(initializers, decoratorFinishedRef) {
         return function addInitializer(initializer) {
@@ -790,7 +684,7 @@ new class extends _identity {
                         document.addEventListener('pointerdown', this._handleDocumentClick);
                     }
                 }
-                this.dispatchEvent(new CustomEvent('vialiq-show', {
+                this.dispatchEvent(new CustomEvent('vi-tooltip-show', {
                     bubbles: true,
                     composed: true
                 }));
@@ -815,7 +709,7 @@ new class extends _identity {
                     }
                     document.removeEventListener('pointerdown', this._handleDocumentClick);
                 }
-                this.dispatchEvent(new CustomEvent('vialiq-hide', {
+                this.dispatchEvent(new CustomEvent('vi-tooltip-hide', {
                     bubbles: true,
                     composed: true
                 }));