@vialiq/web-components 0.13.0 → 0.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/animation-constants-LE17KXe0.js +476 -0
- package/badge/index.js +1 -0
- package/badge/vi-badge.js +603 -0
- package/base/controllers/floating-controller.d.ts +33 -8
- package/base/controllers/floating-controller.d.ts.map +1 -1
- package/base/draggable-mixin.d.ts +33 -0
- package/base/draggable-mixin.d.ts.map +1 -0
- package/base/focus-trap-mixin.d.ts +4 -4
- package/base/focus-trap-mixin.d.ts.map +1 -1
- package/base/overlay-manager.d.ts +58 -0
- package/base/overlay-manager.d.ts.map +1 -0
- package/checkbox/vi-checkbox.d.ts +1 -1
- package/checkbox/vi-checkbox.js +2 -2
- package/flow-BYvW0t4Z.js +883 -0
- package/index.js +7 -4411
- package/input/vi-input.d.ts +2 -2
- package/input/vi-input.js +3 -3
- package/overlay-manager-CZSDXl6Z.js +108 -0
- package/package.json +3 -3
- package/radio/vi-radio-group.d.ts +1 -1
- package/radio/vi-radio-group.js +4 -4
- package/tooltip/vi-tooltip.d.ts +8 -0
- package/tooltip/vi-tooltip.d.ts.map +1 -1
- package/tooltip/vi-tooltip.js +27 -7
- package/{validity-mixin-H4aOFJEr.js → validity-mixin-DO0ycRH2.js} +1 -1
package/input/vi-input.d.ts
CHANGED
|
@@ -27,8 +27,8 @@ declare const ViInput_base: typeof ViElement & (new (...args: any[]) => import('
|
|
|
27
27
|
*
|
|
28
28
|
* @slot helper - Helper text shown below the input.
|
|
29
29
|
*
|
|
30
|
-
* @fires {CustomEvent<{value:string}>}
|
|
31
|
-
* @fires {CustomEvent<{value:string}>}
|
|
30
|
+
* @fires {CustomEvent<{value:string}>} vi-input-input - Every keystroke. Bubbles, composed.
|
|
31
|
+
* @fires {CustomEvent<{value:string}>} vi-input-change - Value committed (blur). Bubbles, composed.
|
|
32
32
|
* @fires {Event} invalid - Cancelable; fires when checkValidity() fails.
|
|
33
33
|
*
|
|
34
34
|
* @csspart field - The outer `<div>` wrapper
|
package/input/vi-input.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { unsafeCSS, css, html } from 'lit';
|
|
2
2
|
import { customElement, property } from 'lit/decorators.js';
|
|
3
3
|
import { F as FocusableMixin } from '../focusable-mixin-CmxOyPX5.js';
|
|
4
|
-
import { V as ValidityMixin } from '../validity-mixin-
|
|
4
|
+
import { V as ValidityMixin } from '../validity-mixin-DO0ycRH2.js';
|
|
5
5
|
import { V as ViElement } from '../vi-element-C6GfDPs3.js';
|
|
6
6
|
import { i as ifNonEmpty } from '../if-non-empty-DX8UGa-B.js';
|
|
7
7
|
|
|
@@ -634,7 +634,7 @@ new class extends _identity {
|
|
|
634
634
|
e.stopPropagation();
|
|
635
635
|
const input = e.target;
|
|
636
636
|
this.value = input.value;
|
|
637
|
-
this.dispatchEvent(new CustomEvent('
|
|
637
|
+
this.dispatchEvent(new CustomEvent('vi-input-input', {
|
|
638
638
|
detail: {
|
|
639
639
|
value: this.value
|
|
640
640
|
},
|
|
@@ -646,7 +646,7 @@ new class extends _identity {
|
|
|
646
646
|
e.stopPropagation();
|
|
647
647
|
const input = e.target;
|
|
648
648
|
this.value = input.value;
|
|
649
|
-
this.dispatchEvent(new CustomEvent('
|
|
649
|
+
this.dispatchEvent(new CustomEvent('vi-input-change', {
|
|
650
650
|
detail: {
|
|
651
651
|
value: this.value
|
|
652
652
|
},
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* OverlayManagerService
|
|
3
|
+
*
|
|
4
|
+
* A singleton service responsible for managing the z-index stacking context
|
|
5
|
+
* of all floating elements (Modals, Dropdowns, Tooltips, Toasts) across the application.
|
|
6
|
+
*
|
|
7
|
+
* It ensures that newly opened overlays always appear on top of existing ones by
|
|
8
|
+
* maintaining a registry and dynamically calculating the next highest z-index.
|
|
9
|
+
* It also manages global state side-effects, such as locking `document.body` scroll
|
|
10
|
+
* when a modal is active.
|
|
11
|
+
*/ class OverlayManagerService {
|
|
12
|
+
_baseZIndexCache;
|
|
13
|
+
get baseZIndex() {
|
|
14
|
+
if (this._baseZIndexCache !== undefined) return this._baseZIndexCache;
|
|
15
|
+
if (typeof document !== 'undefined' && typeof getComputedStyle !== 'undefined') {
|
|
16
|
+
// Derive base stacking context from the modal z-index token (minus 10 to start slightly below it)
|
|
17
|
+
const cssVar = getComputedStyle(document.documentElement).getPropertyValue('--vi-modal-z-index').trim();
|
|
18
|
+
const parsed = parseInt(cssVar, 10);
|
|
19
|
+
this._baseZIndexCache = !isNaN(parsed) ? parsed - 10 : 1040;
|
|
20
|
+
} else {
|
|
21
|
+
this._baseZIndexCache = 1040;
|
|
22
|
+
}
|
|
23
|
+
return this._baseZIndexCache;
|
|
24
|
+
}
|
|
25
|
+
overlays = [];
|
|
26
|
+
_previousOverflow = null;
|
|
27
|
+
/**
|
|
28
|
+
* Registers an element as an active overlay.
|
|
29
|
+
* Calculates and returns the appropriate z-index for this overlay.
|
|
30
|
+
*
|
|
31
|
+
* @param element The DOM element being registered (e.g., the modal dialog or dropdown listbox)
|
|
32
|
+
* @param type The type of overlay, used to determine behaviors like scroll-locking.
|
|
33
|
+
* @returns The calculated z-index to be applied to the element.
|
|
34
|
+
*/ register(element, type = 'dropdown') {
|
|
35
|
+
this.unregister(element); // Ensure no duplicates
|
|
36
|
+
let highestZIndex = this.baseZIndex;
|
|
37
|
+
if (this.overlays.length > 0) {
|
|
38
|
+
highestZIndex = Math.max(...this.overlays.map((o)=>o.zIndex));
|
|
39
|
+
}
|
|
40
|
+
// Increment by 10 to allow room for backdrops (which typically sit at z-index - 1)
|
|
41
|
+
const newZIndex = highestZIndex + 10;
|
|
42
|
+
this.overlays.push({
|
|
43
|
+
element,
|
|
44
|
+
type,
|
|
45
|
+
zIndex: newZIndex
|
|
46
|
+
});
|
|
47
|
+
this._updateBodyScroll();
|
|
48
|
+
return newZIndex;
|
|
49
|
+
}
|
|
50
|
+
/**
|
|
51
|
+
* Unregisters an element, removing it from the overlay stack.
|
|
52
|
+
* Should be called when the overlay is closed or disconnected from the DOM.
|
|
53
|
+
*
|
|
54
|
+
* @param element The DOM element to unregister.
|
|
55
|
+
*/ unregister(element) {
|
|
56
|
+
this.overlays = this.overlays.filter((o)=>o.element !== element);
|
|
57
|
+
this._updateBodyScroll();
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* Gets the assigned z-index for an element if it is currently registered.
|
|
61
|
+
*
|
|
62
|
+
* @param element The DOM element to query.
|
|
63
|
+
* @returns The z-index number, or null if the element is not registered.
|
|
64
|
+
*/ getZIndex(element) {
|
|
65
|
+
const item = this.overlays.find((o)=>o.element === element);
|
|
66
|
+
return item ? item.zIndex : null;
|
|
67
|
+
}
|
|
68
|
+
/**
|
|
69
|
+
* Evaluates whether the provided element is currently the top-most active overlay.
|
|
70
|
+
* Useful for trapping focus or handling global Escape key presses.
|
|
71
|
+
*
|
|
72
|
+
* @param element The DOM element to check.
|
|
73
|
+
* @returns True if the element has the highest z-index in the registry.
|
|
74
|
+
*/ isTopOverlay(element) {
|
|
75
|
+
if (this.overlays.length === 0) return false;
|
|
76
|
+
const topOverlay = this.overlays.reduce((prev, current)=>prev.zIndex > current.zIndex ? prev : current);
|
|
77
|
+
return topOverlay.element === element;
|
|
78
|
+
}
|
|
79
|
+
/**
|
|
80
|
+
* Locks or unlocks the document.body scroll based on the presence of modals.
|
|
81
|
+
* Modals require the body to be unscrollable to trap scroll inside the modal.
|
|
82
|
+
* It applies a utility class `vi-scroll-locked` to the body.
|
|
83
|
+
*/ _updateBodyScroll() {
|
|
84
|
+
const hasModal = this.overlays.some((o)=>o.type === 'modal');
|
|
85
|
+
if (hasModal) {
|
|
86
|
+
// Prevent double-setting if already locked
|
|
87
|
+
if (!document.body.classList.contains('vi-scroll-locked')) {
|
|
88
|
+
document.body.classList.add('vi-scroll-locked');
|
|
89
|
+
this._previousOverflow = document.body.style.getPropertyValue('overflow') || null;
|
|
90
|
+
document.body.style.setProperty('overflow', 'hidden', 'important');
|
|
91
|
+
}
|
|
92
|
+
} else {
|
|
93
|
+
if (document.body.classList.contains('vi-scroll-locked')) {
|
|
94
|
+
document.body.classList.remove('vi-scroll-locked');
|
|
95
|
+
if (this._previousOverflow !== null) {
|
|
96
|
+
document.body.style.setProperty('overflow', this._previousOverflow);
|
|
97
|
+
} else {
|
|
98
|
+
document.body.style.removeProperty('overflow');
|
|
99
|
+
}
|
|
100
|
+
this._previousOverflow = null;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
// Export as a singleton
|
|
106
|
+
const OverlayManager = new OverlayManagerService();
|
|
107
|
+
|
|
108
|
+
export { OverlayManager as O };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vialiq/web-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.15.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -103,8 +103,8 @@
|
|
|
103
103
|
},
|
|
104
104
|
"peerDependencies": {
|
|
105
105
|
"@floating-ui/dom": ">=1.0.0",
|
|
106
|
-
"@vialiq/flux-ui": "
|
|
107
|
-
"@vialiq/icons": "
|
|
106
|
+
"@vialiq/flux-ui": ">=0.0.4 <0.1.0",
|
|
107
|
+
"@vialiq/icons": ">=0.0.3 <0.1.0",
|
|
108
108
|
"lit": "^3.0.0"
|
|
109
109
|
},
|
|
110
110
|
"keywords": [
|
|
@@ -23,7 +23,7 @@ declare const ViRadioGroup_base: typeof ViElement & (new (...args: any[]) => imp
|
|
|
23
23
|
* @slot label - Text displayed above the group.
|
|
24
24
|
* @slot helper - Helper text displayed below the group.
|
|
25
25
|
*
|
|
26
|
-
* @fires {CustomEvent<{value: string}>}
|
|
26
|
+
* @fires {CustomEvent<{value: string}>} vi-radio-group-change - Dispatched when selection changes. Bubbles, composed.
|
|
27
27
|
* @fires {Event} invalid - Fired when validation check fails.
|
|
28
28
|
*/
|
|
29
29
|
export declare class ViRadioGroup extends ViRadioGroup_base {
|
package/radio/vi-radio-group.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { unsafeCSS, css, html } from 'lit';
|
|
2
2
|
import { customElement, property } from 'lit/decorators.js';
|
|
3
|
-
import { V as ValidityMixin } from '../validity-mixin-
|
|
3
|
+
import { V as ValidityMixin } from '../validity-mixin-DO0ycRH2.js';
|
|
4
4
|
import { V as ViElement } from '../vi-element-C6GfDPs3.js';
|
|
5
5
|
|
|
6
6
|
const radioGroupStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{.radio-group{border:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--vi-radio-group-spacing-field-gap, var(--vi-spacing-xs, 8px));width:100%}.radio-group-legend{font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-radio-group-label-font-size, var(--vi-font-size-base, 16px));font-weight:var(--vi-font-weight-semibold, 600);color:var(--vi-radio-group-label-color, var(--vi-text-primary, #111827));padding:0;margin:0;margin-block-end:var(--vi-radio-group-legend-margin-bottom, var(--vi-spacing-xs, 8px))}.radio-group-items{display:flex;gap:var(--vi-radio-group-gap, 8px)}.radio-group-items[orientation=vertical]{flex-direction:column}.radio-group-items[orientation=horizontal]{flex-direction:row;flex-wrap:wrap;gap:var(--vi-radio-group-gap-horizontal, 24px)}.radio-group-helper{display:block;font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-radio-group-helper-font-size, var(--vi-font-size-xs, 12px));color:var(--vi-radio-group-helper-color, var(--vi-text-helper, #9e9e9e))}.radio-group-validation{display:block;font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-radio-group-validation-font-size, var(--vi-font-size-xs, 12px));color:var(--vi-radio-group-validation-color, var(--vi-text-helper, #9e9e9e));margin-block-start:var(--vi-radio-group-validation-margin-top, var(--vi-spacing-xs, 8px))}.radio-group-validation.radio-group-validation--invalid{color:var(--vi-radio-group-error-color, var(--vi-color-error, #ef4444))}.radio-group-validation.radio-group-validation--valid{color:var(--vi-radio-group-success-color, var(--vi-color-success, #489167))}.radio-wrapper{display:inline-flex;align-items:center;gap:var(--vi-radio-label-gap, 8px);cursor:pointer;font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-radio-label-font-size, var(--vi-font-size-base, 16px));line-height:var(--vi-line-height-normal, 1.5);color:var(--vi-radio-label-color, var(--vi-text-primary, #111827));position:relative;-webkit-user-select:none;user-select:none}.radio-input{position:absolute!important;clip-path:inset(50%)!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;white-space:nowrap!important}.radio-circle{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:var(--vi-radio-size, 18px);height:var(--vi-radio-size, 18px);border:var(--vi-border-width-base, 2px) solid var(--vi-radio-border-color, var(--vi-outline, #e5e7eb));border-radius:50%;background-color:var(--vi-radio-background-color, var(--vi-color-background, #ffffff));transition:border-color .15s ease,box-shadow .15s ease;flex-shrink:0}.radio-dot{box-sizing:border-box;width:var(--vi-radio-dot-size, 8px);height:var(--vi-radio-dot-size, 8px);border-radius:50%;background-color:var(--vi-radio-dot-color, var(--vi-color-primary, #3676d0));transform:scale(0);opacity:0;transition:transform .15s cubic-bezier(.4,0,.2,1),opacity .15s ease}.radio-input:checked+.radio-circle{border-color:var(--vi-radio-border-color-checked, var(--vi-color-primary, #3676d0))}.radio-input:checked+.radio-circle .radio-dot{transform:scale(1);opacity:1}.radio-input:focus-visible+.radio-circle{outline:var(--vi-border-width-base, 2px) solid var(--vi-radio-focus-ring-color, var(--vi-focus, #3676d0));outline-offset:2px;box-shadow:0 0 0 3px var(--vi-radio-focus-ring-glow, var(--vi-color-blue-200, #cee6ff))}.radio-wrapper:hover:not(.radio-wrapper--disabled) .radio-circle{border-color:var(--vi-radio-border-color-hover, var(--vi-border-inverse-03, #757575))}.radio-wrapper:hover:not(.radio-wrapper--disabled) .radio-input:checked+.radio-circle{border-color:var(--vi-radio-border-color-checked-hover, var(--vi-color-primary, #3676d0))}.radio-wrapper--disabled{cursor:not-allowed;opacity:var(--vi-radio-disabled-opacity, .5)}.radio-wrapper--disabled .radio-circle{background-color:var(--vi-layer-disabled, #f3f4f6);border-color:var(--vi-border-02, #eeeeee)}.radio-wrapper--disabled .radio-dot{background-color:var(--vi-text-disabled, #9e9e9e)}@media(prefers-reduced-motion:reduce){.radio-circle,.radio-dot{transition:none}}}:host{display:block;outline:none}:host([disabled]){cursor:not-allowed;pointer-events:none}:host([status=invalid]){--vi-radio-group-label-color: var(--vi-color-error, #ef4444)}::slotted(*){font-family:inherit;font-size:inherit;color:inherit}:host([size=xs]){--vi-radio-group-label-font-size: var(--vi-font-size-xs, 12px);--vi-radio-group-legend-margin-bottom: 4px}:host([size=sm]){--vi-radio-group-label-font-size: var(--vi-font-size-sm, 14px);--vi-radio-group-legend-margin-bottom: 6px}:host([size=lg]){--vi-radio-group-label-font-size: var(--vi-font-size-lg, 18px);--vi-radio-group-legend-margin-bottom: 10px}";
|
|
@@ -649,7 +649,7 @@ new class extends _identity {
|
|
|
649
649
|
this.value = targetRadio.value;
|
|
650
650
|
this._updateRadios();
|
|
651
651
|
if (this.value !== oldValue) {
|
|
652
|
-
this.dispatchEvent(new CustomEvent('
|
|
652
|
+
this.dispatchEvent(new CustomEvent('vi-radio-group-change', {
|
|
653
653
|
detail: {
|
|
654
654
|
value: this.value
|
|
655
655
|
},
|
|
@@ -696,7 +696,7 @@ new class extends _identity {
|
|
|
696
696
|
this._updateRadios();
|
|
697
697
|
targetRadio.focus();
|
|
698
698
|
if (this.value !== oldValue) {
|
|
699
|
-
this.dispatchEvent(new CustomEvent('
|
|
699
|
+
this.dispatchEvent(new CustomEvent('vi-radio-group-change', {
|
|
700
700
|
detail: {
|
|
701
701
|
value: this.value
|
|
702
702
|
},
|
|
@@ -715,7 +715,7 @@ new class extends _identity {
|
|
|
715
715
|
this.value = '';
|
|
716
716
|
this._updateRadios();
|
|
717
717
|
if (this.value !== oldValue) {
|
|
718
|
-
this.dispatchEvent(new CustomEvent('
|
|
718
|
+
this.dispatchEvent(new CustomEvent('vi-radio-group-change', {
|
|
719
719
|
detail: {
|
|
720
720
|
value: this.value
|
|
721
721
|
},
|
package/tooltip/vi-tooltip.d.ts
CHANGED
|
@@ -5,8 +5,15 @@ export type TooltipPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bot
|
|
|
5
5
|
export type TooltipTrigger = 'hover focus' | 'hover' | 'focus' | 'click';
|
|
6
6
|
/**
|
|
7
7
|
* vi-tooltip
|
|
8
|
+
*
|
|
8
9
|
* A floating hint providing supplementary info on hover or focus using Floating UI.
|
|
9
10
|
*
|
|
11
|
+
* **Developer Notes & Architecture:**
|
|
12
|
+
* - **Positioning Strategy**: Tooltips always use `strategy: absolute` natively, but users can override this via the `popper-options` property if they need `fixed` hoisting to escape tight containers.
|
|
13
|
+
* - **Z-Index**: `OverlayManager` guarantees tooltips render above modals and dropdowns.
|
|
14
|
+
* - **Accessibility**: Automatically calculates whether its slotted content is interactive (contains links/buttons). If so, it uses `aria-details`; if plain text, it uses `aria-describedby`.
|
|
15
|
+
* - **Teleportation**: `vi-tooltip` does **not** teleport its floating panel to `document.body`. This is an explicit design choice to preserve Shadow DOM encapsulation for the `<slot name="content">` and scoped styling.
|
|
16
|
+
*
|
|
10
17
|
* @element vi-tooltip
|
|
11
18
|
* @attr content - Plain text tooltip content
|
|
12
19
|
* @attr placement - Preferred position: top | top-start | top-end | bottom | bottom-start | bottom-end | left | right (default: top)
|
|
@@ -48,6 +55,7 @@ export declare class ViTooltip extends ViElement {
|
|
|
48
55
|
private _hideTimeout?;
|
|
49
56
|
private _triggerElement;
|
|
50
57
|
private _cleanupAutoUpdate?;
|
|
58
|
+
private _overlayZIndex;
|
|
51
59
|
private _panelId;
|
|
52
60
|
constructor();
|
|
53
61
|
connectedCallback(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vi-tooltip.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/tooltip/vi-tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9F,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAOL,KAAK,qBAAqB,EAC3B,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"vi-tooltip.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/tooltip/vi-tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9F,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAOL,KAAK,qBAAqB,EAC3B,MAAM,kBAAkB,CAAC;AAI1B,MAAM,MAAM,gBAAgB,GACxB,KAAK,GAAG,WAAW,GAAG,SAAS,GAC/B,QAAQ,GAAG,cAAc,GAAG,YAAY,GACxC,MAAM,GAAG,OAAO,CAAC;AAErB,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAEzE;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBACa,SAAU,SAAQ,SAAS;IACtC,OAAgB,MAAM,0BAAoC;IAE9B,QAAQ,CAAC,OAAO,SAAM;IAEP,QAAQ,CAAC,SAAS,EAAE,gBAAgB,CAAS;IAE5D,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAiB;IAEjD,QAAQ,CAAC,KAAK,SAAO;IAEI,QAAQ,CAAC,SAAS,SAAO;IAE1B,QAAQ,CAAC,QAAQ,SAAO;IAEhC,QAAQ,CAAC,QAAQ,UAAS;IAEtE;;;;MAIE;IAeD,QAAQ,CAAC,aAAa,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAM;IAEpD,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAS;IAE/B,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAS;IAExB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAyB;IACrD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA0B;IACnD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA0B;IAEtF,OAAO,CAAC,YAAY,CAAC,CAAS;IAC9B,OAAO,CAAC,YAAY,CAAC,CAAS;IAC9B,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,kBAAkB,CAAC,CAAa;IACxC,OAAO,CAAC,cAAc,CAAuB;IAE7C,OAAO,CAAC,QAAQ,CAAoE;;IAO3E,iBAAiB,IAAI,IAAI;IAIzB,oBAAoB,IAAI,IAAI;cAkBlB,YAAY,IAAI,IAAI;IAO9B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAgB/C,6BAA6B;IAC7B,IAAI,IAAI,IAAI;IAgBd,6BAA6B;IAC7B,IAAI,CAAC,SAAS,UAAQ,GAAG,IAAI;IAe3B,OAAO,CAAC,YAAY;IAgCpB,OAAO,CAAC,aAAa;IA0BrB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,qBAAqB;IAa7B,OAAO,CAAC,sBAAsB;IAwB9B,OAAO,CAAC,kBAAkB;IAgB1B,OAAO,CAAC,kBAAkB;IAY1B,OAAO,CAAC,eAAe,CAIrB;IAEF,OAAO,CAAC,eAAe,CAIrB;IAEF,OAAO,CAAC,UAAU,CAIhB;IAEF,OAAO,CAAC,WAAW,CAIjB;IAEF,OAAO,CAAC,QAAQ,CAQd;IAEF,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,oBAAoB;IAY5B,OAAO,CAAC,gBAAgB;IAoEf,MAAM,IAAI,cAAc;CAsClC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
|
package/tooltip/vi-tooltip.js
CHANGED
|
@@ -2,8 +2,9 @@ import { unsafeCSS, css, nothing, html } from 'lit';
|
|
|
2
2
|
import { customElement, property, state, query } from 'lit/decorators.js';
|
|
3
3
|
import { V as ViElement } from '../vi-element-C6GfDPs3.js';
|
|
4
4
|
import { autoUpdate, offset, flip, shift, arrow, computePosition } from '@floating-ui/dom';
|
|
5
|
+
import { O as OverlayManager } from '../overlay-manager-CZSDXl6Z.js';
|
|
5
6
|
|
|
6
|
-
const tooltipStyles = "@charset \"UTF-8\";@layer reset,components,utilities;.tooltip-panel{position:fixed;z-index:var(--vi-tooltip-z-index,
|
|
7
|
+
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}";
|
|
7
8
|
|
|
8
9
|
function applyDecs2203RFactory() {
|
|
9
10
|
function createAddInitializerMethod(initializers, decoratorFinishedRef) {
|
|
@@ -591,6 +592,7 @@ new class extends _identity {
|
|
|
591
592
|
_hideTimeout;
|
|
592
593
|
_triggerElement = null;
|
|
593
594
|
_cleanupAutoUpdate;
|
|
595
|
+
_overlayZIndex = null;
|
|
594
596
|
_panelId = `vi-tooltip-panel-${Math.random().toString(36).substring(2, 9)}`;
|
|
595
597
|
constructor(){
|
|
596
598
|
super();
|
|
@@ -606,16 +608,25 @@ new class extends _identity {
|
|
|
606
608
|
this._cleanupAutoUpdate();
|
|
607
609
|
this._cleanupAutoUpdate = undefined;
|
|
608
610
|
}
|
|
611
|
+
if (this._tooltipPanel && this._overlayZIndex !== null) {
|
|
612
|
+
OverlayManager.unregister(this._tooltipPanel);
|
|
613
|
+
this._overlayZIndex = null;
|
|
614
|
+
}
|
|
609
615
|
this._removeTriggerAria();
|
|
610
616
|
super.disconnectedCallback();
|
|
611
617
|
}
|
|
612
618
|
firstUpdated() {
|
|
613
|
-
|
|
619
|
+
// Defer initialization to avoid Lit's "change in update" warning
|
|
620
|
+
Promise.resolve().then(()=>{
|
|
621
|
+
this._updateTriggerElement();
|
|
622
|
+
});
|
|
614
623
|
}
|
|
615
624
|
updated(changed) {
|
|
616
625
|
super.updated(changed);
|
|
617
626
|
if (changed.has('disabled') && this.disabled && this._open) {
|
|
618
|
-
|
|
627
|
+
Promise.resolve().then(()=>{
|
|
628
|
+
this._closeTooltip();
|
|
629
|
+
});
|
|
619
630
|
}
|
|
620
631
|
if (changed.has('maxWidth') && this._tooltipPanel) {
|
|
621
632
|
this._tooltipPanel.style.setProperty('--vi-tooltip-max-width', `${this.maxWidth}px`);
|
|
@@ -661,6 +672,9 @@ new class extends _identity {
|
|
|
661
672
|
} catch {
|
|
662
673
|
panel.style.display = 'block';
|
|
663
674
|
}
|
|
675
|
+
// Register with OverlayManager
|
|
676
|
+
this._overlayZIndex = OverlayManager.register(panel, 'tooltip');
|
|
677
|
+
panel.style.zIndex = this._overlayZIndex.toString();
|
|
664
678
|
this._positionTooltip();
|
|
665
679
|
// Start autoUpdate monitoring for bounds changes
|
|
666
680
|
this._cleanupAutoUpdate = autoUpdate(trigger, panel, ()=>{
|
|
@@ -670,7 +684,7 @@ new class extends _identity {
|
|
|
670
684
|
document.addEventListener('pointerdown', this._handleDocumentClick);
|
|
671
685
|
}
|
|
672
686
|
}
|
|
673
|
-
this.dispatchEvent(new CustomEvent('
|
|
687
|
+
this.dispatchEvent(new CustomEvent('vi-tooltip-show', {
|
|
674
688
|
bubbles: true,
|
|
675
689
|
composed: true
|
|
676
690
|
}));
|
|
@@ -686,13 +700,16 @@ new class extends _identity {
|
|
|
686
700
|
} catch {
|
|
687
701
|
panel.style.display = 'none';
|
|
688
702
|
}
|
|
703
|
+
OverlayManager.unregister(panel);
|
|
704
|
+
panel.style.removeProperty('z-index');
|
|
705
|
+
this._overlayZIndex = null;
|
|
689
706
|
if (this._cleanupAutoUpdate) {
|
|
690
707
|
this._cleanupAutoUpdate();
|
|
691
708
|
this._cleanupAutoUpdate = undefined;
|
|
692
709
|
}
|
|
693
710
|
document.removeEventListener('pointerdown', this._handleDocumentClick);
|
|
694
711
|
}
|
|
695
|
-
this.dispatchEvent(new CustomEvent('
|
|
712
|
+
this.dispatchEvent(new CustomEvent('vi-tooltip-hide', {
|
|
696
713
|
bubbles: true,
|
|
697
714
|
composed: true
|
|
698
715
|
}));
|
|
@@ -837,7 +854,10 @@ new class extends _identity {
|
|
|
837
854
|
Object.assign(panel.style, {
|
|
838
855
|
position: strategy,
|
|
839
856
|
left: `${x}px`,
|
|
840
|
-
top: `${y}px
|
|
857
|
+
top: `${y}px`,
|
|
858
|
+
right: 'auto',
|
|
859
|
+
bottom: 'auto',
|
|
860
|
+
margin: '0'
|
|
841
861
|
});
|
|
842
862
|
// Update data-placement attribute to trigger arrow CSS styles
|
|
843
863
|
panel.setAttribute('data-placement', placement);
|
|
@@ -880,11 +900,11 @@ new class extends _identity {
|
|
|
880
900
|
</span>
|
|
881
901
|
|
|
882
902
|
<div
|
|
883
|
-
popover="manual"
|
|
884
903
|
id=${_panelId}
|
|
885
904
|
class="tooltip-panel"
|
|
886
905
|
part="tooltip"
|
|
887
906
|
role=${this._isInteractive ? 'dialog' : 'tooltip'}
|
|
907
|
+
popover="manual"
|
|
888
908
|
aria-modal=${this._isInteractive ? 'false' : nothing}
|
|
889
909
|
aria-label=${this._isInteractive ? content || 'Tooltip' : nothing}
|
|
890
910
|
placement=${placement}
|
|
@@ -458,7 +458,7 @@ function _apply_decs_2203_r(targetClass, memberDecs, classDecs, parentClass) {
|
|
|
458
458
|
* Whether this control will participate in form validation.
|
|
459
459
|
* Per spec, disabled controls return false (they are not candidates).
|
|
460
460
|
*/ get willValidate() {
|
|
461
|
-
return this._internals.willValidate;
|
|
461
|
+
return !this.disabled && this._internals.willValidate;
|
|
462
462
|
}
|
|
463
463
|
// ── Extension hooks for subclasses ────────────────────────────────────────
|
|
464
464
|
/**
|