@vialiq/web-components 0.15.0 → 0.17.0

package/base/draggable-mixin.d.ts

@@ -11,22 +11,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,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;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAC9D,IAAI,EAAE,CAAC,GACN,CAAC,GAAG,WAAW,CAAC,kBAAkB,CAAC,CAsOrC"}

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

@@ -1 +1 @@
-{"version":3,"file":"vi-checkbox.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/checkbox/vi-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAGb,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAIlD,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;;AAErD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBACa,UAAW,SAAQ,eAAwC;IACtE,OAAgB,MAAM,0BAEpB;IAEF,OAAO,CAAC,eAAe,CAAS;IAEhC,cAAuB,iBAAiB,IAAI,gBAAgB,GAAG,IAAI,CAElE;IAI4B,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAa;IAC5B,QAAQ,CAAC,QAAQ,UAAS;IAC1D,QAAQ,CAAC,eAAe,SAAM;IAI1C,qBAAqB;IACuB,QAAQ,CAAC,OAAO,UAAS;IAErE,qCAAqC;IACO,QAAQ,CAAC,aAAa,UAAS;IAE3E,0DAA0D;IACf,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAQ;IAE9E,0CAA0C;IAC9B,QAAQ,CAAC,KAAK,SAAQ;IAElC,uBAAuB;IACX,QAAQ,CAAC,IAAI,SAAM;IAE/B,6BAA6B;IACe,QAAQ,CAAC,QAAQ,UAAS;IAItE,SAAS,CAAC,aAAa,IAAI,OAAO,CAAC,kBAAkB,CAAC;IA0B7C,iBAAiB,IAAI,IAAI;IAKzB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAoB/C,yEAAyE;IACzE,iBAAiB,IAAI,IAAI;IAOzB,6EAA6E;IAC7E,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAM7C,OAAO,CAAC,SAAS;IAmBR,MAAM,IAAI,cAAc;CA0ClC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"vi-checkbox.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/checkbox/vi-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAGb,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAIlD,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;;AAErD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBACa,UAAW,SAAQ,eAAwC;IACtE,OAAgB,MAAM,0BAEpB;IAEF,OAAO,CAAC,eAAe,CAAS;IAEhC,cAAuB,iBAAiB,IAAI,gBAAgB,GAAG,IAAI,CAElE;IAI4B,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAa;IAC5B,QAAQ,CAAC,QAAQ,UAAS;IAC1D,QAAQ,CAAC,eAAe,SAAM;IAI1C,qBAAqB;IACuB,QAAQ,CAAC,OAAO,UAAS;IAErE,qCAAqC;IACO,QAAQ,CAAC,aAAa,UAAS;IAE3E,0DAA0D;IACf,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAQ;IAE9E,0CAA0C;IAC9B,QAAQ,CAAC,KAAK,SAAQ;IAElC,uBAAuB;IACX,QAAQ,CAAC,IAAI,SAAM;IAE/B,6BAA6B;IACe,QAAQ,CAAC,QAAQ,UAAS;IAItE,SAAS,CAAC,aAAa,IAAI,OAAO,CAAC,kBAAkB,CAAC;IA0B7C,iBAAiB,IAAI,IAAI;IAKzB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAc/C,yEAAyE;IACzE,iBAAiB,IAAI,IAAI;IAOzB,6EAA6E;IAC7E,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAM7C,OAAO,CAAC,SAAS;IAmBR,MAAM,IAAI,cAAc;CA0ClC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/checkbox/vi-checkbox.js

@@ -572,11 +572,6 @@ new class extends _identity {
                 if (changed.has('disabled')) {
                     this._setHostFocusable(!this.disabled);
                 }
-                // Sync inner input's tabindex with host's tabIndex (which is managed by FocusableMixin)
-                const input = this._focusableElement;
-                if (input && input.tabIndex !== this.tabIndex) {
-                    input.tabIndex = this.tabIndex;
-                }
             }
             /** Resets value and validation state when the associated form resets. */ formResetCallback() {
                 this.checked = this._initialChecked;

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,4 +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