@vialiq/web-components 0.16.0 → 0.18.0

package/base/draggable-mixin.d.ts

@@ -1,7 +1,9 @@
 import { LitElement } from 'lit';
 type Constructor<T = object> = new (...args: any[]) => T;
+export type DragContainment = 'none' | 'viewport' | 'parent';
 export declare class DraggableInterface {
     draggable: boolean;
+    dragContainment: DragContainment;
     protected get _dragTarget(): HTMLElement | null;
     protected get _dragHandle(): HTMLElement | null;
     protected _resetDrag(): void;
@@ -11,22 +13,11 @@ export declare class DraggableInterface {
  * 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.
+ * It applies performant `transform: translate3d(x, y, 0)` positioning to `_dragTarget`.
  *
  * 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 {};

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

@@ -1 +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"}
+{"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,MAAM,eAAe,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC;AAE7D,MAAM,CAAC,OAAO,OAAO,kBAAkB;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,eAAe,CAAC;IACjC,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;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAC9D,IAAI,EAAE,CAAC,GACN,CAAC,GAAG,WAAW,CAAC,kBAAkB,CAAC,CA0SrC"}

package/base/overlay-manager.d.ts

@@ -1,4 +1,5 @@
 export type OverlayType = 'modal' | 'dropdown' | 'tooltip' | 'toast';
+export type ScrollStrategy = 'block' | 'noop';
 /**
  * OverlayManagerService
  *
@@ -11,8 +12,7 @@ export type OverlayType = 'modal' | 'dropdown' | 'tooltip' | 'toast';
  * when a modal is active.
  */
 declare class OverlayManagerService {
-    private _baseZIndexCache?;
-    private get baseZIndex();
+    private getBaseZIndex;
     private overlays;
     private _previousOverflow;
     /**
@@ -21,9 +21,10 @@ declare class OverlayManagerService {
      *
      * @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: HTMLElement, type?: OverlayType): number;
+    register(element: HTMLElement, type?: OverlayType, scrollStrategy?: ScrollStrategy): number;
     /**
      * Unregisters an element, removing it from the overlay stack.
      * Should be called when the overlay is closed or disconnected from the DOM.
@@ -47,9 +48,9 @@ declare class OverlayManagerService {
      */
     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.
+     * 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.
      */
     private _updateBodyScroll;
 }

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

@@ -1 +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"}
+{"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;AACrE,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,MAAM,CAAC;AAS9C;;;;;;;;;;GAUG;AACH,cAAM,qBAAqB;IACzB,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,QAAQ,CAA6B;IAC7C,OAAO,CAAC,iBAAiB,CAAuB;IAEhD;;;;;;;;OAQG;IACI,QAAQ,CACb,OAAO,EAAE,WAAW,EACpB,IAAI,GAAE,WAAwB,EAC9B,cAAc,CAAC,EAAE,cAAc,GAC9B,MAAM;IAkBT;;;;;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;IAQlD;;;;OAIG;IACH,OAAO,CAAC,iBAAiB;CAsB1B;AAGD,eAAO,MAAM,cAAc,uBAA8B,CAAC"}

package/base/resizable-mixin.d.ts

@@ -0,0 +1,28 @@
+import { LitElement, TemplateResult } from 'lit';
+type Constructor<T = object> = new (...args: any[]) => T;
+export declare class ResizableInterface {
+    resizable: boolean;
+    minWidth: number;
+    minHeight: number;
+    maxWidth: number;
+    maxHeight: number;
+    protected get _resizeTarget(): HTMLElement | null;
+    protected _renderResizeHandles(): TemplateResult;
+    protected _resetResize(): void;
+}
+/**
+ * ResizableMixin
+ *
+ * Provides native 8-direction resize capabilities using Pointer Events.
+ * Applies `width` and `height` inline styles to `_resizeTarget`.
+ *
+ * **Important**: All private fields use the `_rsz_` prefix to prevent
+ * name collisions when composed with other mixins (e.g., DraggableMixin).
+ *
+ * Subclasses MUST implement:
+ * - `_resizeTarget`: The HTML element that resizes (usually the dialog box).
+ * - Render `${this._renderResizeHandles()}` inside the component's template.
+ */
+export declare function ResizableMixin<T extends Constructor<LitElement>>(Base: T): T & Constructor<ResizableInterface>;
+export {};
+//# sourceMappingURL=resizable-mixin.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"resizable-mixin.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/base/resizable-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA6B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIjF,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,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,KAAK,aAAa,IAAI,WAAW,GAAG,IAAI,CAAC;IAClD,SAAS,CAAC,oBAAoB,IAAI,cAAc;IAChD,SAAS,CAAC,YAAY,IAAI,IAAI;CAC/B;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAC9D,IAAI,EAAE,CAAC,GACN,CAAC,GAAG,WAAW,CAAC,kBAAkB,CAAC,CAgNrC"}

package/button/vi-button.d.ts

@@ -53,6 +53,8 @@ export declare class ViButton extends ViButton_base {
     accessor iconOnly: boolean;
     /** Disables the button. */
     accessor disabled: boolean;
+    /** Accessible label forwarded to the inner native button. */
+    accessor ariaLabel: string | null;
     private accessor _hasIcon;
     updated(changed: PropertyValues): void;
     private onIconSlotChange;

package/button/vi-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vi-button.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/button/vi-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrF,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAE9F;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD;;;;GAIG;AACH,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,KAAK,CAAC;;AAElD;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,QAAS,SAAQ,aAAyB;IACrD,OAAgB,MAAM,0BAAmC;IAEzD,cAAuB,iBAAiB,IAAI,iBAAiB,GAAG,IAAI,CAEnE;IAED,sBAAsB;IACqB,QAAQ,CAAC,OAAO,EAAE,aAAa,CAAa;IAEvF,mDAAmD;IACR,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAQ;IAE5E,sHAAsH;IAC9C,QAAQ,CAAC,aAAa,EAAE,mBAAmB,CAAW;IAE9H,0EAA0E;IACL,QAAQ,CAAC,SAAS,UAAS;IAEhG,kGAAkG;IAC9B,QAAQ,CAAC,QAAQ,UAAS;IAE9F,2BAA2B;IACiB,QAAQ,CAAC,QAAQ,UAAS;IAE7D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAS;IAElC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAe/C,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,OAAO;IAON,MAAM,IAAI,cAAc;CAuBlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"vi-button.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/button/vi-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG9F,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAE9F;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD;;;;GAIG;AACH,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,KAAK,CAAC;;AAElD;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,QAAS,SAAQ,aAAyB;IACrD,OAAgB,MAAM,0BAAmC;IAEzD,cAAuB,iBAAiB,IAAI,iBAAiB,GAAG,IAAI,CAEnE;IAED,sBAAsB;IACqB,QAAQ,CAAC,OAAO,EAAE,aAAa,CAAa;IAEvF,mDAAmD;IACR,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAQ;IAE5E,sHAAsH;IAC9C,QAAQ,CAAC,aAAa,EAAE,mBAAmB,CAAW;IAE9H,0EAA0E;IACL,QAAQ,CAAC,SAAS,UAAS;IAEhG,kGAAkG;IAC9B,QAAQ,CAAC,QAAQ,UAAS;IAE9F,2BAA2B;IACiB,QAAQ,CAAC,QAAQ,UAAS;IAEtE,6DAA6D;IAC7D,SAAyD,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEhF,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAS;IAElC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAe/C,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,OAAO;IAON,MAAM,IAAI,cAAc;CAwBlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/button/vi-button.js

@@ -1,4 +1,4 @@
-import { unsafeCSS, css, html } from 'lit';
+import { unsafeCSS, css, nothing, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { F as FocusableMixin } from '../focusable-mixin-CmxOyPX5.js';
 import { V as ViElement } from '../vi-element-C6GfDPs3.js';
@@ -380,7 +380,7 @@ function _apply_decs_2203_r(targetClass, memberDecs, classDecs, parentClass) {
 function _identity(x) {
     return x;
 }
-var _dec, _initClass, _FocusableMixin, _dec1, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, /** Visual variant. */ _init_variant, /** Size scale — controls padding and font-size. */ _init_size, /** Icon placement: 'start' (before label) or 'end' (after label). CSS order handles it — no DOM changes on toggle. */ _init_iconPlacement, /** When true, stretches the button to fill the width of its container. */ _init_fullWidth, /** When true, styles the button for an icon-only layout (typically square with equal padding). */ _init_iconOnly, /** Disables the button. */ _init_disabled, _init__hasIcon, _initProto;
+var _dec, _initClass, _FocusableMixin, _dec1, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _dec8, /** Visual variant. */ _init_variant, /** Size scale — controls padding and font-size. */ _init_size, /** Icon placement: 'start' (before label) or 'end' (after label). CSS order handles it — no DOM changes on toggle. */ _init_iconPlacement, /** When true, stretches the button to fill the width of its container. */ _init_fullWidth, /** When true, styles the button for an icon-only layout (typically square with equal padding). */ _init_iconOnly, /** Disables the button. */ _init_disabled, /** Accessible label forwarded to the inner native button. */ _init_ariaLabel, _init__hasIcon, _initProto;
 let _ViButton;
 _dec = customElement('vi-button'), _dec1 = property({
     type: String,
@@ -403,7 +403,9 @@ _dec = customElement('vi-button'), _dec1 = property({
 }), _dec6 = property({
     type: Boolean,
     reflect: true
-}), _dec7 = state();
+}), _dec7 = property({
+    attribute: 'aria-label'
+}), _dec8 = state();
 new class extends _identity {
     constructor(){
         super(_ViButton), _initClass();
@@ -411,7 +413,7 @@ new class extends _identity {
     static{
         class ViButton extends (_FocusableMixin = FocusableMixin(ViElement)) {
             static{
-                ({ e: [_init_variant, _init_size, _init_iconPlacement, _init_fullWidth, _init_iconOnly, _init_disabled, _init__hasIcon, _initProto], c: [_ViButton, _initClass] } = _apply_decs_2203_r(this, [
+                ({ e: [_init_variant, _init_size, _init_iconPlacement, _init_fullWidth, _init_iconOnly, _init_disabled, _init_ariaLabel, _init__hasIcon, _initProto], c: [_ViButton, _initClass] } = _apply_decs_2203_r(this, [
                     [
                         _dec1,
                         1,
@@ -445,6 +447,11 @@ new class extends _identity {
                     [
                         _dec7,
                         1,
+                        "ariaLabel"
+                    ],
+                    [
+                        _dec8,
+                        1,
                         "_hasIcon"
                     ]
                 ], [
@@ -497,12 +504,19 @@ new class extends _identity {
             set disabled(_v) {
                 this.#___private_disabled_6 = _v;
             }
-            #___private__hasIcon_7 = _init__hasIcon(this, false);
+            #___private_ariaLabel_7 = _init_ariaLabel(this, null);
+            get ariaLabel() {
+                return this.#___private_ariaLabel_7;
+            }
+            set ariaLabel(_v) {
+                this.#___private_ariaLabel_7 = _v;
+            }
+            #___private__hasIcon_8 = _init__hasIcon(this, false);
             get _hasIcon() {
-                return this.#___private__hasIcon_7;
+                return this.#___private__hasIcon_8;
             }
             set _hasIcon(_v) {
-                this.#___private__hasIcon_7 = _v;
+                this.#___private__hasIcon_8 = _v;
             }
             updated(changed) {
                 super.updated(changed);
@@ -539,6 +553,7 @@ new class extends _identity {
         type="button"
         tabindex="0"
         ?disabled=${disabled}
+        aria-label=${this.ariaLabel ?? nothing}
         @click=${onClick}
       >
         <slot

package/icons/vi-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vi-icon.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/icons/vi-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGnF,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD;;;;;;;;;;;;;;;GAeG;AACH,qBACa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,0BAkBpB;IAEF;;;OAGG;IACwC,QAAQ,CAAC,IAAI,SAAM;IAE9D;;;OAGG;IACyB,QAAQ,CAAC,IAAI,SAAM;IAE/C;;;;OAIG;IACyB,QAAQ,CAAC,KAAK,SAAM;IAEvC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAqC;IAE3D,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAOnD,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAchD,YAAY,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAOrD,MAAM,IAAI,cAAc;CAoBlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
+{"version":3,"file":"vi-icon.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/icons/vi-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGnF,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD;;;;;;;;;;;;;;;GAeG;AACH,qBACa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,0BA6BpB;IAEF;;;OAGG;IACwC,QAAQ,CAAC,IAAI,SAAM;IAE9D;;;OAGG;IACyB,QAAQ,CAAC,IAAI,SAAM;IAE/C;;;;OAIG;IACyB,QAAQ,CAAC,KAAK,SAAM;IAEvC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAqC;IAE3D,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAOnD,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAchD,YAAY,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAOrD,MAAM,IAAI,cAAc;CAoBlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/icons/vi-icon.js

@@ -438,9 +438,20 @@ new class extends _identity {
       justify-content: center;
       width: var(--vi-icon-size, 24px);
       height: var(--vi-icon-size, 24px);
+      line-height: 1;
+    }
+
+    span {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      line-height: 1;
     }
 
     svg {
+      display: block;
       width: 100%;
       height: 100%;
       fill: none;

package/index.d.ts

@@ -30,6 +30,8 @@ export type { ChipVariant, ChipSize } from './chip/vi-chip.js';
 export { ViChipGroup } from './chip/vi-chip-group.js';
 export { ViAnimation } from './animation/vi-animation.js';
 export type { AnimationPreset, StaggerDirection, AnimationPhase, ViAnimationEventDetail, } from './animation/vi-animation.js';
+export { ViTag } from './tag/vi-tag.js';
+export type { TagVariant, TagAppearance, TagSize } from './tag/vi-tag.js';
 export { ViSwitch } from './switch/vi-switch.js';
 export type { SwitchSize, LabelPlacement } from './switch/vi-switch.js';
 //# sourceMappingURL=index.d.ts.map

package/index.js

@@ -1,4 +1,4 @@
-import { V as ViElement } from './vi-element-C6GfDPs3.js';
+export { V as ViElement } from './vi-element-C6GfDPs3.js';
 export { ViButton } from './button/vi-button.js';
 export { ViInput } from './input/vi-input.js';
 export { ViIcon } from './icons/vi-icon.js';
@@ -15,635 +15,5 @@ export { ViAlert } from './alert/vi-alert.js';
 export { ViChip } from './chip/vi-chip.js';
 export { ViChipGroup } from './chip/vi-chip-group.js';
 export { ViAnimation } from './animation/vi-animation.js';
-import { unsafeCSS, css, nothing, 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-DO0ycRH2.js';
-import { classMap } from 'lit/directives/class-map.js';
-
-const switchStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{.switch-wrapper{display:inline-flex;align-items:flex-start;gap:var(--vi-switch-label-gap, 8px);cursor:pointer;font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-switch-label-font-size, var(--vi-font-size-base, 16px));line-height:var(--vi-line-height-normal, 1.5);color:var(--vi-switch-label-color, var(--vi-text-primary, #111827));-webkit-user-select:none;user-select:none}.switch-label{flex:1 1 auto;min-width:0;word-break:break-word;overflow-wrap:break-word}.switch-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}.switch-track{box-sizing:border-box;position:relative;width:var(--vi-switch-track-width, 44px);height:var(--vi-switch-track-height, 24px);background-color:var(--vi-switch-track-color-off, var(--vi-border-03, #e0e0e0));border-radius:var(--vi-border-radius-full, 9999px);transition:background-color var(--vi-switch-transition-duration, .15s) ease;flex-shrink:0;margin-top:calc((1em * var(--vi-line-height-normal, 1.5) - var(--vi-switch-track-height, 24px)) / 2)}.switch-thumb{position:absolute;top:50%;left:var(--vi-switch-thumb-offset, 2px);transform:translateY(-50%);width:var(--vi-switch-thumb-size, 18px);height:var(--vi-switch-thumb-size, 18px);background-color:var(--vi-switch-thumb-color, var(--vi-text-primary-inverse, #ffffff));border-radius:50%;box-shadow:var(--vi-switch-thumb-shadow, 0 1px 3px rgba(0, 0, 0, .2));transition:left var(--vi-switch-transition-duration, .15s) ease}.switch-input:checked~.switch-track{background-color:var(--vi-switch-track-color-on, var(--vi-color-primary, #3676d0))}.switch-input:checked~.switch-track .switch-thumb{left:calc(100% - var(--vi-switch-thumb-size, 18px) - var(--vi-switch-thumb-offset, 2px))}.switch-input:focus-visible~.switch-track{outline:var(--vi-border-width-base, 2px) solid var(--vi-switch-focus-ring-color, var(--vi-focus, #3676d0));outline-offset:2px;box-shadow:0 0 0 3px var(--vi-switch-focus-ring-glow, var(--vi-color-blue-200, #cee6ff))}.switch-wrapper--disabled{cursor:not-allowed;opacity:var(--vi-switch-disabled-opacity, .5)}.switch-wrapper--disabled .switch-track{background-color:var(--vi-border-03, #e0e0e0)}.switch-wrapper--disabled .switch-input:checked~.switch-track{background-color:var(--vi-text-disabled, #9e9e9e)}@media(prefers-reduced-motion:reduce){.switch-track,.switch-thumb{transition:none}}}:host{display:inline-block;outline:none}:host([disabled]){cursor:not-allowed;pointer-events:none}::slotted(*){font-family:inherit;font-size:inherit;color:inherit}:host([size=sm]){--vi-switch-track-width: 36px;--vi-switch-track-height: 20px;--vi-switch-thumb-size: 14px}:host([size=md]){--vi-switch-track-width: 44px;--vi-switch-track-height: 24px;--vi-switch-thumb-size: 18px}:host([size=lg]){--vi-switch-track-width: 52px;--vi-switch-track-height: 28px;--vi-switch-thumb-size: 22px}";
-
-function applyDecs2203RFactory() {
-    function createAddInitializerMethod(initializers, decoratorFinishedRef) {
-        return function addInitializer(initializer) {
-            assertNotFinished(decoratorFinishedRef, "addInitializer");
-            assertCallable(initializer, "An initializer");
-            initializers.push(initializer);
-        };
-    }
-    function memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value) {
-        var kindStr;
-        switch(kind){
-            case 1:
-                kindStr = "accessor";
-                break;
-            case 2:
-                kindStr = "method";
-                break;
-            case 3:
-                kindStr = "getter";
-                break;
-            case 4:
-                kindStr = "setter";
-                break;
-            default:
-                kindStr = "field";
-        }
-        var ctx = {
-            kind: kindStr,
-            name: isPrivate ? "#" + name : name,
-            static: isStatic,
-            private: isPrivate,
-            metadata: metadata
-        };
-        var decoratorFinishedRef = {
-            v: false
-        };
-        ctx.addInitializer = createAddInitializerMethod(initializers, decoratorFinishedRef);
-        var get, set;
-        if (kind === 0) {
-            if (isPrivate) {
-                get = desc.get;
-                set = desc.set;
-            } else {
-                get = function() {
-                    return this[name];
-                };
-                set = function(v) {
-                    this[name] = v;
-                };
-            }
-        } else if (kind === 2) {
-            get = function() {
-                return desc.value;
-            };
-        } else {
-            if (kind === 1 || kind === 3) {
-                get = function() {
-                    return desc.get.call(this);
-                };
-            }
-            if (kind === 1 || kind === 4) {
-                set = function(v) {
-                    desc.set.call(this, v);
-                };
-            }
-        }
-        ctx.access = get && set ? {
-            get: get,
-            set: set
-        } : get ? {
-            get: get
-        } : {
-            set: set
-        };
-        try {
-            return dec(value, ctx);
-        } finally{
-            decoratorFinishedRef.v = true;
-        }
-    }
-    function assertNotFinished(decoratorFinishedRef, fnName) {
-        if (decoratorFinishedRef.v) {
-            throw new Error("attempted to call " + fnName + " after decoration was finished");
-        }
-    }
-    function assertCallable(fn, hint) {
-        if (typeof fn !== "function") {
-            throw new TypeError(hint + " must be a function");
-        }
-    }
-    function assertValidReturnValue(kind, value) {
-        var type = typeof value;
-        if (kind === 1) {
-            if (type !== "object" || value === null) {
-                throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
-            }
-            if (value.get !== undefined) {
-                assertCallable(value.get, "accessor.get");
-            }
-            if (value.set !== undefined) {
-                assertCallable(value.set, "accessor.set");
-            }
-            if (value.init !== undefined) {
-                assertCallable(value.init, "accessor.init");
-            }
-        } else if (type !== "function") {
-            var hint;
-            if (kind === 0) {
-                hint = "field";
-            } else if (kind === 10) {
-                hint = "class";
-            } else {
-                hint = "method";
-            }
-            throw new TypeError(hint + " decorators must return a function or void 0");
-        }
-    }
-    function applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata) {
-        var decs = decInfo[0];
-        var desc, init, value;
-        if (isPrivate) {
-            if (kind === 0 || kind === 1) {
-                desc = {
-                    get: decInfo[3],
-                    set: decInfo[4]
-                };
-            } else if (kind === 3) {
-                desc = {
-                    get: decInfo[3]
-                };
-            } else if (kind === 4) {
-                desc = {
-                    set: decInfo[3]
-                };
-            } else {
-                desc = {
-                    value: decInfo[3]
-                };
-            }
-        } else if (kind !== 0) {
-            desc = Object.getOwnPropertyDescriptor(base, name);
-        }
-        if (kind === 1) {
-            value = {
-                get: desc.get,
-                set: desc.set
-            };
-        } else if (kind === 2) {
-            value = desc.value;
-        } else if (kind === 3) {
-            value = desc.get;
-        } else if (kind === 4) {
-            value = desc.set;
-        }
-        var newValue, get, set;
-        if (typeof decs === "function") {
-            newValue = memberDec(decs, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
-            if (newValue !== void 0) {
-                assertValidReturnValue(kind, newValue);
-                if (kind === 0) {
-                    init = newValue;
-                } else if (kind === 1) {
-                    init = newValue.init;
-                    get = newValue.get || value.get;
-                    set = newValue.set || value.set;
-                    value = {
-                        get: get,
-                        set: set
-                    };
-                } else {
-                    value = newValue;
-                }
-            }
-        } else {
-            for(var i = decs.length - 1; i >= 0; i--){
-                var dec = decs[i];
-                newValue = memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
-                if (newValue !== void 0) {
-                    assertValidReturnValue(kind, newValue);
-                    var newInit;
-                    if (kind === 0) {
-                        newInit = newValue;
-                    } else if (kind === 1) {
-                        newInit = newValue.init;
-                        get = newValue.get || value.get;
-                        set = newValue.set || value.set;
-                        value = {
-                            get: get,
-                            set: set
-                        };
-                    } else {
-                        value = newValue;
-                    }
-                    if (newInit !== void 0) {
-                        if (init === void 0) {
-                            init = newInit;
-                        } else if (typeof init === "function") {
-                            init = [
-                                init,
-                                newInit
-                            ];
-                        } else {
-                            init.push(newInit);
-                        }
-                    }
-                }
-            }
-        }
-        if (kind === 0 || kind === 1) {
-            if (init === void 0) {
-                init = function(instance, init) {
-                    return init;
-                };
-            } else if (typeof init !== "function") {
-                var ownInitializers = init;
-                init = function(instance, init) {
-                    var value = init;
-                    for(var i = 0; i < ownInitializers.length; i++){
-                        value = ownInitializers[i].call(instance, value);
-                    }
-                    return value;
-                };
-            } else {
-                var originalInitializer = init;
-                init = function(instance, init) {
-                    return originalInitializer.call(instance, init);
-                };
-            }
-            ret.push(init);
-        }
-        if (kind !== 0) {
-            if (kind === 1) {
-                desc.get = value.get;
-                desc.set = value.set;
-            } else if (kind === 2) {
-                desc.value = value;
-            } else if (kind === 3) {
-                desc.get = value;
-            } else if (kind === 4) {
-                desc.set = value;
-            }
-            if (isPrivate) {
-                if (kind === 1) {
-                    ret.push(function(instance, args) {
-                        return value.get.call(instance, args);
-                    });
-                    ret.push(function(instance, args) {
-                        return value.set.call(instance, args);
-                    });
-                } else if (kind === 2) {
-                    ret.push(value);
-                } else {
-                    ret.push(function(instance, args) {
-                        return value.call(instance, args);
-                    });
-                }
-            } else {
-                Object.defineProperty(base, name, desc);
-            }
-        }
-    }
-    function applyMemberDecs(Class, decInfos, metadata) {
-        var ret = [];
-        var protoInitializers;
-        var staticInitializers;
-        var existingProtoNonFields = new Map();
-        var existingStaticNonFields = new Map();
-        for(var i = 0; i < decInfos.length; i++){
-            var decInfo = decInfos[i];
-            if (!Array.isArray(decInfo)) continue;
-            var kind = decInfo[1];
-            var name = decInfo[2];
-            var isPrivate = decInfo.length > 3;
-            var isStatic = kind >= 5;
-            var base;
-            var initializers;
-            if (isStatic) {
-                base = Class;
-                kind = kind - 5;
-                staticInitializers = staticInitializers || [];
-                initializers = staticInitializers;
-            } else {
-                base = Class.prototype;
-                protoInitializers = protoInitializers || [];
-                initializers = protoInitializers;
-            }
-            if (kind !== 0 && !isPrivate) {
-                var existingNonFields = isStatic ? existingStaticNonFields : existingProtoNonFields;
-                var existingKind = existingNonFields.get(name) || 0;
-                if (existingKind === true || existingKind === 3 && kind !== 4 || existingKind === 4 && kind !== 3) {
-                    throw new Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + name);
-                } else if (!existingKind && kind > 2) {
-                    existingNonFields.set(name, kind);
-                } else {
-                    existingNonFields.set(name, true);
-                }
-            }
-            applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata);
-        }
-        pushInitializers(ret, protoInitializers);
-        pushInitializers(ret, staticInitializers);
-        return ret;
-    }
-    function pushInitializers(ret, initializers) {
-        if (initializers) {
-            ret.push(function(instance) {
-                for(var i = 0; i < initializers.length; i++){
-                    initializers[i].call(instance);
-                }
-                return instance;
-            });
-        }
-    }
-    function applyClassDecs(targetClass, classDecs, metadata) {
-        if (classDecs.length > 0) {
-            var initializers = [];
-            var newClass = targetClass;
-            var name = targetClass.name;
-            for(var i = classDecs.length - 1; i >= 0; i--){
-                var decoratorFinishedRef = {
-                    v: false
-                };
-                try {
-                    var nextNewClass = classDecs[i](newClass, {
-                        kind: "class",
-                        name: name,
-                        addInitializer: createAddInitializerMethod(initializers, decoratorFinishedRef),
-                        metadata
-                    });
-                } finally{
-                    decoratorFinishedRef.v = true;
-                }
-                if (nextNewClass !== undefined) {
-                    assertValidReturnValue(10, nextNewClass);
-                    newClass = nextNewClass;
-                }
-            }
-            return [
-                defineMetadata(newClass, metadata),
-                function() {
-                    for(var i = 0; i < initializers.length; i++){
-                        initializers[i].call(newClass);
-                    }
-                }
-            ];
-        }
-    }
-    function defineMetadata(Class, metadata) {
-        return Object.defineProperty(Class, Symbol.metadata || Symbol.for("Symbol.metadata"), {
-            configurable: true,
-            enumerable: true,
-            value: metadata
-        });
-    }
-    return function applyDecs2203R(targetClass, memberDecs, classDecs, parentClass) {
-        if (parentClass !== void 0) {
-            var parentMetadata = parentClass[Symbol.metadata || Symbol.for("Symbol.metadata")];
-        }
-        var metadata = Object.create(parentMetadata === void 0 ? null : parentMetadata);
-        var e = applyMemberDecs(targetClass, memberDecs, metadata);
-        if (!classDecs.length) defineMetadata(targetClass, metadata);
-        return {
-            e: e,
-            get c () {
-                return applyClassDecs(targetClass, classDecs, metadata);
-            }
-        };
-    };
-}
-function _apply_decs_2203_r(targetClass, memberDecs, classDecs, parentClass) {
-    return (_apply_decs_2203_r = applyDecs2203RFactory())(targetClass, memberDecs, classDecs, parentClass);
-}
-function _identity(x) {
-    return x;
-}
-var _dec, _initClass, _ValidityMixin, _dec1, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _dec8, _dec9, // ── ValidityMixin contract ───────────────────────────────────────────────
-_init_status, _init_required, _init_validityMessage, // ── Public API ────────────────────────────────────────────────────────────
-/** Checked state. */ _init_checked, /** Size scale — controls size, padding, and font-size. */ _init_size, /** Label position relative to switch. */ _init_labelPlacement, /** Form submission value when checked. */ _init_value, /** Form field name. */ _init_name, /** Disables the switch. */ _init_disabled, _initProto;
-let _ViSwitch;
-_dec = customElement('vi-switch'), _dec1 = property({
-    reflect: true
-}), _dec2 = property({
-    type: Boolean,
-    reflect: true
-}), _dec3 = property(), _dec4 = property({
-    type: Boolean,
-    reflect: true
-}), _dec5 = property({
-    type: String,
-    reflect: true
-}), _dec6 = property({
-    type: String,
-    reflect: true,
-    attribute: 'label-placement'
-}), _dec7 = property(), _dec8 = property(), _dec9 = property({
-    type: Boolean,
-    reflect: true
-});
-new class extends _identity {
-    constructor(){
-        super(_ViSwitch), _initClass();
-    }
-    static{
-        class ViSwitch extends (_ValidityMixin = ValidityMixin(FocusableMixin(ViElement))) {
-            static{
-                ({ e: [_init_status, _init_required, _init_validityMessage, _init_checked, _init_size, _init_labelPlacement, _init_value, _init_name, _init_disabled, _initProto], c: [_ViSwitch, _initClass] } = _apply_decs_2203_r(this, [
-                    [
-                        _dec1,
-                        1,
-                        "status"
-                    ],
-                    [
-                        _dec2,
-                        1,
-                        "required"
-                    ],
-                    [
-                        _dec3,
-                        1,
-                        "validityMessage"
-                    ],
-                    [
-                        _dec4,
-                        1,
-                        "checked"
-                    ],
-                    [
-                        _dec5,
-                        1,
-                        "size"
-                    ],
-                    [
-                        _dec6,
-                        1,
-                        "labelPlacement"
-                    ],
-                    [
-                        _dec7,
-                        1,
-                        "value"
-                    ],
-                    [
-                        _dec8,
-                        1,
-                        "name"
-                    ],
-                    [
-                        _dec9,
-                        1,
-                        "disabled"
-                    ]
-                ], [
-                    _dec
-                ], _ValidityMixin));
-            }
-            static styles = css`
-    ${unsafeCSS(switchStyles)}
-  `;
-            _initialChecked = (_initProto(this), false);
-            get _focusableElement() {
-                return this.shadowRoot?.querySelector('input') ?? null;
-            }
-            #___private_status_1 = _init_status(this, 'default');
-            get status() {
-                return this.#___private_status_1;
-            }
-            set status(_v) {
-                this.#___private_status_1 = _v;
-            }
-            #___private_required_2 = _init_required(this, false);
-            get required() {
-                return this.#___private_required_2;
-            }
-            set required(_v) {
-                this.#___private_required_2 = _v;
-            }
-            #___private_validityMessage_3 = _init_validityMessage(this, '');
-            get validityMessage() {
-                return this.#___private_validityMessage_3;
-            }
-            set validityMessage(_v) {
-                this.#___private_validityMessage_3 = _v;
-            }
-            #___private_checked_4 = _init_checked(this, false);
-            get checked() {
-                return this.#___private_checked_4;
-            }
-            set checked(_v) {
-                this.#___private_checked_4 = _v;
-            }
-            #___private_size_5 = _init_size(this, 'md');
-            get size() {
-                return this.#___private_size_5;
-            }
-            set size(_v) {
-                this.#___private_size_5 = _v;
-            }
-            #___private_labelPlacement_6 = _init_labelPlacement(this, 'end');
-            get labelPlacement() {
-                return this.#___private_labelPlacement_6;
-            }
-            set labelPlacement(_v) {
-                this.#___private_labelPlacement_6 = _v;
-            }
-            #___private_value_7 = _init_value(this, 'on');
-            get value() {
-                return this.#___private_value_7;
-            }
-            set value(_v) {
-                this.#___private_value_7 = _v;
-            }
-            #___private_name_8 = _init_name(this, '');
-            get name() {
-                return this.#___private_name_8;
-            }
-            set name(_v) {
-                this.#___private_name_8 = _v;
-            }
-            #___private_disabled_9 = _init_disabled(this, false);
-            get disabled() {
-                return this.#___private_disabled_9;
-            }
-            set disabled(_v) {
-                this.#___private_disabled_9 = _v;
-            }
-            // ── ValidityMixin hook ───────────────────────────────────────────────────
-            _testValidity() {
-                const input = this._focusableElement;
-                if (input) {
-                    if (input.checked !== this.checked) {
-                        input.checked = this.checked;
-                    }
-                    const validity = input.validity;
-                    if (!validity.valid) {
-                        this.validityMessage = input.validationMessage;
-                        return {
-                            customError: validity.customError
-                        };
-                    }
-                }
-                this.validityMessage = '';
-                return {};
-            }
-            // ── Lifecycle ──────────────────────────────────────────────────────────────
-            connectedCallback() {
-                super.connectedCallback();
-                this._initialChecked = this.hasAttribute('checked');
-            }
-            updated(changed) {
-                super.updated(changed);
-                // Sync form value for form submission participation
-                if (changed.has('checked') || changed.has('value')) {
-                    this._internals.setFormValue(this.checked ? this.value : null);
-                }
-                // Centralize host focusability via FocusableMixin
-                if (changed.has('disabled')) {
-                    this._setHostFocusable(!this.disabled);
-                }
-            }
-            /** Resets value and validation state when the associated form resets. */ formResetCallback() {
-                this.checked = this._initialChecked;
-                this.status = 'default';
-                this.validityMessage = '';
-            }
-            /** Keeps disabled in sync when a containing fieldset or form is disabled. */ formDisabledCallback(disabled) {
-                this.disabled = disabled;
-            }
-            // ── Event Handlers ─────────────────────────────────────────────────────────
-            _onChange(e) {
-                e.stopPropagation();
-                if (this.disabled) return;
-                const input = e.target;
-                this.checked = input.checked;
-                this.dispatchEvent(new CustomEvent('vi-switch-change', {
-                    detail: {
-                        checked: this.checked
-                    },
-                    bubbles: true,
-                    composed: true
-                }));
-            }
-            // ── Render ─────────────────────────────────────────────────────────────────
-            render() {
-                const isValDisabled = this.disabled;
-                const inputClasses = classMap({
-                    'switch-input': true,
-                    'sr-only': true
-                });
-                const wrapperClasses = classMap({
-                    'switch-wrapper': true,
-                    'switch-wrapper--disabled': isValDisabled
-                });
-                return html`
-      <label class=${wrapperClasses} data-placement=${this.labelPlacement}>
-        ${this.labelPlacement === 'start' ? html`
-          <span part="label" class="switch-label"><slot></slot></span>
-        ` : nothing}
-
-        <input
-          type="checkbox"
-          role="switch"
-          class=${inputClasses}
-          .name=${this.name}
-          .value=${this.value}
-          ?checked=${this.checked}
-          ?disabled=${isValDisabled}
-          aria-checked=${this.checked ? 'true' : 'false'}
-          @change=${this._onChange}
-        />
-        <span part="track" class="switch-track" aria-hidden="true">
-          <span part="thumb" class="switch-thumb"></span>
-        </span>
-
-        ${this.labelPlacement === 'end' ? html`
-          <span part="label" class="switch-label"><slot></slot></span>
-        ` : nothing}
-      </label>
-    `;
-            }
-        }
-    }
-}();
-
-export { ViElement, _ViSwitch as ViSwitch };
+export { ViTag } from './tag/vi-tag.js';
+export { ViSwitch } from './switch/vi-switch.js';

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.16.0",
+  "version": "0.18.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -103,8 +103,8 @@
   },
   "peerDependencies": {
     "@floating-ui/dom": ">=1.0.0",
-    "@vialiq/flux-ui": "^0.13.0",
-    "@vialiq/icons": "^0.3.0",
+    "@vialiq/flux-ui": ">=0.0.4 <0.1.0",
+    "@vialiq/icons": ">=0.0.3 <0.1.0",
     "lit": "^3.0.0"
   },
   "keywords": [

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}";