@vialiq/web-components 0.13.0 → 0.14.0

package/base/controllers/floating-controller.d.ts

@@ -1,5 +1,10 @@
 import { ReactiveController, ReactiveControllerHost } from 'lit';
 import { Placement } from '@floating-ui/dom';
+/**
+ * FloatingControllerOptions
+ *
+ * Configuration options for the FloatingController.
+ */
 export interface FloatingControllerOptions {
     /** Function returning the reference element (e.g. trigger/input). */
     reference: () => HTMLElement | null;
@@ -9,7 +14,12 @@ export interface FloatingControllerOptions {
     placement?: () => Placement;
     /** Space in px between reference and floating. */
     offset?: number;
-    /** Whether to use fixed positioning instead of absolute. */
+    /**
+     * When true, uses `position: fixed` instead of `absolute`.
+     * This allows the floating element to escape tight `overflow: hidden` containers
+     * (like modals) without needing to be physically moved (teleported) in the DOM,
+     * preserving Shadow DOM encapsulation and slotting.
+     */
     hoist?: () => boolean;
     /** Element or selector string to constrain flipping. */
     boundary?: () => HTMLElement | string | null;
@@ -17,27 +27,42 @@ export interface FloatingControllerOptions {
     matchWidth?: boolean;
 }
 /**
- * A Reactive Controller that manages @floating-ui/dom positioning.
- * Abstracts away the autoUpdate and positioning logic from complex components.
+ * FloatingController
+ *
+ * A Lit Reactive Controller that manages `@floating-ui/dom` positioning logic.
+ * It abstracts away the complex math and event listeners (autoUpdate) required to
+ * keep a popup/dropdown anchored to a reference element during scrolling/resizing.
+ *
+ * It also automatically registers the floating element with the `OverlayManager`
+ * to ensure correct z-index stacking when `hoist` is true.
  */
 export declare class FloatingController implements ReactiveController {
     private host;
     private options;
     private _cleanup?;
+    private _overlayZIndex;
     constructor(host: ReactiveControllerHost, options: FloatingControllerOptions);
     hostDisconnected(): void;
     /**
-     * Starts the floating UI auto-update listener.
-     * Call this when the popover opens.
+     * Starts the floating UI `autoUpdate` listener cycle.
+     * This should be called when the popover physically opens (e.g., in `updated()`).
+     *
+     * If `hoist` is true, it also acquires a high z-index from the `OverlayManager`.
      */
     start(): void;
     /**
-     * Stops the floating UI auto-update listener.
-     * Call this when the popover closes.
+     * Stops the floating UI `autoUpdate` listener cycle.
+     * This should be called when the popover closes, or when the host component disconnects.
+     *
+     * It also releases its z-index back to the `OverlayManager`.
      */
     stop(): void;
     /**
-     * Imperatively update position.
+     * Imperatively calculates and applies the new coordinates (`x`, `y`) using Floating UI.
+     *
+     * This method applies various CSS property resets (`margin`, `bottom`, `right`, `minWidth`)
+     * to ensure that the base CSS of the floating element does not distort the absolute coordinates
+     * provided by Floating UI.
      */
     updatePosition(): Promise<void>;
 }

package/base/controllers/floating-controller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"floating-controller.d.ts","sourceRoot":"","sources":["../../../../../libs/web-components/src/base/controllers/floating-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AACjE,OAAO,EAAmD,KAAK,SAAS,EAAmB,MAAM,kBAAkB,CAAC;AAEpH,MAAM,WAAW,yBAAyB;IACxC,qEAAqE;IACrE,SAAS,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACpC,sEAAsE;IACtE,QAAQ,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACnC,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,SAAS,CAAC;IAC5B,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,OAAO,CAAC;IACtB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,WAAW,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7C,4FAA4F;IAC5F,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;GAGG;AACH,qBAAa,kBAAmB,YAAW,kBAAkB;IAIzD,OAAO,CAAC,IAAI;IACZ,OAAO,CAAC,OAAO;IAJjB,OAAO,CAAC,QAAQ,CAAC,CAAa;gBAGpB,IAAI,EAAE,sBAAsB,EAC5B,OAAO,EAAE,yBAAyB;IAK5C,gBAAgB;IAIhB;;;OAGG;IACH,KAAK;IAgBL;;;OAGG;IACH,IAAI;IAOJ;;OAEG;IACG,cAAc,IAAI,OAAO,CAAC,IAAI,CAAC;CA+CtC"}
+{"version":3,"file":"floating-controller.d.ts","sourceRoot":"","sources":["../../../../../libs/web-components/src/base/controllers/floating-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AACjE,OAAO,EAAmD,KAAK,SAAS,EAAmB,MAAM,kBAAkB,CAAC;AAGpH;;;;GAIG;AACH,MAAM,WAAW,yBAAyB;IACxC,qEAAqE;IACrE,SAAS,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACpC,sEAAsE;IACtE,QAAQ,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACnC,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,SAAS,CAAC;IAC5B,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,OAAO,CAAC;IACtB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,WAAW,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7C,4FAA4F;IAC5F,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;GASG;AACH,qBAAa,kBAAmB,YAAW,kBAAkB;IAKzD,OAAO,CAAC,IAAI;IACZ,OAAO,CAAC,OAAO;IALjB,OAAO,CAAC,QAAQ,CAAC,CAAa;IAC9B,OAAO,CAAC,cAAc,CAAuB;gBAGnC,IAAI,EAAE,sBAAsB,EAC5B,OAAO,EAAE,yBAAyB;IAK5C,gBAAgB;IAIhB;;;;;OAKG;IACH,KAAK;IAyBL;;;;;OAKG;IACH,IAAI;IAgBJ;;;;;;OAMG;IACG,cAAc,IAAI,OAAO,CAAC,IAAI,CAAC;CAmDtC"}

package/base/draggable-mixin.d.ts

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+type Constructor<T = object> = new (...args: any[]) => T;
+export declare class DraggableInterface {
+    draggable: boolean;
+    protected get _dragTarget(): HTMLElement | null;
+    protected get _dragHandle(): HTMLElement | null;
+    protected _resetDrag(): void;
+    protected _stopDrag(): void;
+}
+/**
+ * DraggableMixin
+ *
+ * Provides native drag-and-drop capabilities using Pointer Events to any LitElement.
+ * It is primarily designed for modals and dialogs that need to be repositioned by the user.
+ *
+ * By default, this applies a `transform: translate3d(x, y, 0)` to the element returned
+ * by `_dragTarget`. This is highly performant and avoids reflowing the layout.
+ *
+ * Subclasses MUST implement:
+ * - `_dragTarget`: The HTML element that moves (usually the outer container or dialog).
+ * - `_dragHandle`: The HTML element that accepts pointer events to initiate the drag (usually a header).
+ *
+ * @example
+ * ```typescript
+ * class MyModal extends DraggableMixin(LitElement) {
+ *   protected get _dragTarget() { return this.shadowRoot.querySelector('.modal'); }
+ *   protected get _dragHandle() { return this.shadowRoot.querySelector('.header'); }
+ * }
+ * ```
+ */
+export declare function DraggableMixin<T extends Constructor<LitElement>>(Base: T): T & Constructor<DraggableInterface>;
+export {};
+//# sourceMappingURL=draggable-mixin.d.ts.map

package/base/draggable-mixin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"draggable-mixin.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/base/draggable-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AAItD,KAAK,WAAW,CAAC,CAAC,GAAG,MAAM,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAEzD,MAAM,CAAC,OAAO,OAAO,kBAAkB;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,KAAK,WAAW,IAAI,WAAW,GAAG,IAAI,CAAC;IAChD,SAAS,KAAK,WAAW,IAAI,WAAW,GAAG,IAAI,CAAC;IAChD,SAAS,CAAC,UAAU,IAAI,IAAI;IAC5B,SAAS,CAAC,SAAS,IAAI,IAAI;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAC9D,IAAI,EAAE,CAAC,GACN,CAAC,GAAG,WAAW,CAAC,kBAAkB,CAAC,CA+NrC"}

package/base/focus-trap-mixin.d.ts

@@ -14,13 +14,13 @@ export declare class FocusTrapInterface {
      * @param initialFocus - Optional element to focus first. Defaults to the
      *   first focusable element found in the shadow root.
      */
-    protected _activateFocusTrap(initialFocus?: HTMLElement): void;
+    protected _activateFocusTrap(initialFocus?: HTMLElement | null, autofocus?: boolean): void;
     /**
      * Deactivates the focus trap.
-     * Removes the Tab intercept and restores focus to the element that was
-     * focused immediately before `_activateFocusTrap()` was called.
+     * Removes the Tab intercept and restores focus to the specified returnFocus
+     * element, or falls back to the element that was focused before activation.
      */
-    protected _deactivateFocusTrap(): void;
+    protected _deactivateFocusTrap(returnFocus?: HTMLElement | null): void;
 }
 /**
  * FocusTrapMixin

package/base/focus-trap-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focus-trap-mixin.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/base/focus-trap-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,KAAK,WAAW,CAAC,CAAC,GAAG,MAAM,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAEzD;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAkB;IACrC;;;;;;;;OAQG;IACH,SAAS,CAAC,kBAAkB,CAAC,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI;IAE9D;;;;OAIG;IACH,SAAS,CAAC,oBAAoB,IAAI,IAAI;CACvC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6FG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAC9D,IAAI,EAAE,CAAC,GACN,CAAC,GAAG,WAAW,CAAC,kBAAkB,CAAC,CA2KrC"}
+{"version":3,"file":"focus-trap-mixin.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/base/focus-trap-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,KAAK,WAAW,CAAC,CAAC,GAAG,MAAM,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAEzD;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAkB;IACrC;;;;;;;;OAQG;IACH,SAAS,CAAC,kBAAkB,CAC1B,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,EACjC,SAAS,CAAC,EAAE,OAAO,GAClB,IAAI;IAEP;;;;OAIG;IACH,SAAS,CAAC,oBAAoB,CAAC,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI;CACvE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6FG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAC9D,IAAI,EAAE,CAAC,GACN,CAAC,GAAG,WAAW,CAAC,kBAAkB,CAAC,CAqPrC"}

package/base/overlay-manager.d.ts

@@ -0,0 +1,58 @@
+export type OverlayType = 'modal' | 'dropdown' | 'tooltip' | 'toast';
+/**
+ * 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.
+ */
+declare class OverlayManagerService {
+    private _baseZIndexCache?;
+    private get baseZIndex();
+    private overlays;
+    private _previousOverflow;
+    /**
+     * 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: HTMLElement, type?: OverlayType): number;
+    /**
+     * 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: HTMLElement): void;
+    /**
+     * 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: HTMLElement): number | 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: HTMLElement): boolean;
+    /**
+     * 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.
+     */
+    private _updateBodyScroll;
+}
+export declare const OverlayManager: OverlayManagerService;
+export {};
+//# sourceMappingURL=overlay-manager.d.ts.map

package/base/overlay-manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay-manager.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/base/overlay-manager.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC;AAQrE;;;;;;;;;;GAUG;AACH,cAAM,qBAAqB;IACzB,OAAO,CAAC,gBAAgB,CAAC,CAAS;IAClC,OAAO,KAAK,UAAU,GAarB;IACD,OAAO,CAAC,QAAQ,CAA6B;IAC7C,OAAO,CAAC,iBAAiB,CAAuB;IAEhD;;;;;;;OAOG;IACI,QAAQ,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,GAAE,WAAwB,GAAG,MAAM;IAiB7E;;;;;OAKG;IACI,UAAU,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAK7C;;;;;OAKG;IACI,SAAS,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI;IAKrD;;;;;;OAMG;IACI,YAAY,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO;IAMlD;;;;OAIG;IACH,OAAO,CAAC,iBAAiB;CAqB1B;AAGD,eAAO,MAAM,cAAc,uBAA8B,CAAC"}

package/checkbox/vi-checkbox.js

@@ -1,7 +1,7 @@
 import { unsafeCSS, css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { F as FocusableMixin } from '../focusable-mixin-CmxOyPX5.js';
-import { V as ValidityMixin } from '../validity-mixin-H4aOFJEr.js';
+import { V as ValidityMixin } from '../validity-mixin-DO0ycRH2.js';
 import { V as ViElement } from '../vi-element-C6GfDPs3.js';
 import { classMap } from 'lit/directives/class-map.js';