@vialiq/web-components 0.12.0 → 0.14.0

package/badge/vi-badge.d.ts

@@ -1,4 +1,4 @@
-import { type TemplateResult } from 'lit';
+import { TemplateResult } from 'lit';
 import { ViElement } from '../base/vi-element.js';
 export type BadgeVariant = 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
 export type BadgeSize = 'sm' | 'md' | 'lg';
@@ -23,7 +23,7 @@ export type BadgeSize = 'sm' | 'md' | 'lg';
  * @csspart icon  - Icon slot wrapper
  */
 export declare class ViBadge extends ViElement {
-    static styles: import("lit").CSSResult;
+    static styles: import('lit').CSSResult;
     /** Colour semantic */
     accessor variant: BadgeVariant;
     /** Size */

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

@@ -0,0 +1,69 @@
+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;
+    /** Function returning the floating element (e.g. popover/listbox). */
+    floating: () => HTMLElement | null;
+    /** Function returning the desired placement. */
+    placement?: () => Placement;
+    /** Space in px between reference and floating. */
+    offset?: number;
+    /**
+     * 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;
+    /** Whether the floating element should be forced to match the reference element's width. */
+    matchWidth?: boolean;
+}
+/**
+ * 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 `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 `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 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>;
+}
+//# sourceMappingURL=floating-controller.d.ts.map

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

@@ -0,0 +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;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/if-non-empty.d.ts

@@ -58,5 +58,5 @@
  *     - You need the attribute to literally be "" (rare, document when intentional)
  *     - The binding is to a custom element property — use .prop=${val} instead
  */
-export declare const ifNonEmpty: (value: string | null | undefined) => string | typeof import("lit-html").nothing;
+export declare const ifNonEmpty: (value: string | null | undefined) => string | typeof import('lit-html').nothing;
 //# sourceMappingURL=if-non-empty.d.ts.map

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/button/vi-button.d.ts

@@ -1,4 +1,4 @@
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 import { ViElement } from '../base/vi-element.js';
 /**
  * Button visual variant.
@@ -18,7 +18,7 @@ export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
  * Controlled via CSS `order` — no extra wrapper elements needed.
  */
 export type ButtonIconPlacement = 'start' | 'end';
-declare const ViButton_base: typeof ViElement & (new (...args: any[]) => import("../base/focusable-mixin.js").FocusableInterface);
+declare const ViButton_base: typeof ViElement & (new (...args: any[]) => import('../base/focusable-mixin.js').FocusableInterface);
 /**
  * vi-button
  * Self-styled button component using Flux UI token fallbacks.
@@ -39,7 +39,7 @@ declare const ViButton_base: typeof ViElement & (new (...args: any[]) => import(
  * @csspart label  - The label span
  */
 export declare class ViButton extends ViButton_base {
-    static styles: import("lit").CSSResult;
+    static styles: import('lit').CSSResult;
     protected get _focusableElement(): HTMLButtonElement | null;
     /** Visual variant. */
     accessor variant: ButtonVariant;

package/checkbox/vi-checkbox.d.ts

@@ -1,8 +1,8 @@
-import { type PropertyValues, type TemplateResult } from 'lit';
-import { type ControlStatus } from '../base/validity-mixin.js';
+import { PropertyValues, TemplateResult } from 'lit';
+import { ControlStatus } from '../base/validity-mixin.js';
 import { ViElement } from '../base/vi-element.js';
 export type CheckboxSize = 'xs' | 'sm' | 'md' | 'lg';
-declare const ViCheckbox_base: typeof ViElement & (new (...args: any[]) => import("../base/focusable-mixin.js").FocusableInterface) & (new (...args: any[]) => import("../base/validity-mixin.js").ValidityInterface<unknown>);
+declare const ViCheckbox_base: typeof ViElement & (new (...args: any[]) => import('../base/focusable-mixin.js').FocusableInterface) & (new (...args: any[]) => import('../base/validity-mixin.js').ValidityInterface<unknown>);
 /**
  * vi-checkbox
  * Form-associated checkbox control using Flux UI tokens.
@@ -29,7 +29,7 @@ declare const ViCheckbox_base: typeof ViElement & (new (...args: any[]) => impor
  * @csspart label - The label text wrapper.
  */
 export declare class ViCheckbox extends ViCheckbox_base {
-    static styles: import("lit").CSSResult;
+    static styles: import('lit').CSSResult;
     private _initialChecked;
     protected get _focusableElement(): HTMLInputElement | null;
     accessor status: ControlStatus;

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';
 

package/icons/vi-icon.d.ts

@@ -1,4 +1,4 @@
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 import { ViElement } from '../base/vi-element.js';
 /**
  * vi-icon
@@ -17,7 +17,7 @@ import { ViElement } from '../base/vi-element.js';
  * @attr label - Accessible label; omit for decorative icons
  */
 export declare class ViIcon extends ViElement {
-    static styles: import("lit").CSSResult;
+    static styles: import('lit').CSSResult;
     /**
      * The registered icon name to render.
      * @attr

package/icons/vi-icon.js

@@ -444,7 +444,7 @@ new class extends _identity {
       width: 100%;
       height: 100%;
       fill: none;
-      stroke: currentColor;
+      stroke: var(--vi-icon-color, currentColor);
       stroke-width: 2;
       stroke-linecap: round;
       stroke-linejoin: round;