@vialiq/web-components 0.16.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/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

@@ -2,7 +2,8 @@ import { 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';
-export { getIcon, registerIcons } from './icons/registry.js';
+import { registerIcons } from './icons/registry.js';
+export { getIcon } from './icons/registry.js';
 export { ViRadio } from './radio/vi-radio.js';
 export { ViRadioGroup } from './radio/vi-radio-group.js';
 export { ViCheckbox } from './checkbox/vi-checkbox.js';
@@ -17,9 +18,673 @@ 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 { classMap } from 'lit/directives/class-map.js';
+import { xIcon, checkIcon } from '@vialiq/icons';
 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 tagStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{:host,:root{--vi-tag-height: 24px;--vi-tag-padding-x: 10px;--vi-tag-border-radius: 4px;--vi-tag-font-size: var(--vi-font-size-xs, var(--vi-font-size-xs, 12px));--vi-tag-font-weight: var(--vi-font-weight-medium, var(--vi-font-weight-medium, 500));--vi-tag-gap: 6px;--vi-tag-remove-size: 16px;--vi-tag-dot-size: 6px;--vi-tag-avatar-size: 14px;--vi-tag-icon-size: 14px;--vi-tag-transition: all .15s cubic-bezier(.4, 0, .2, 1);--vi-tag-disabled-opacity: .5;--vi-tag-max-width: 100%}.tag{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--vi-tag-height);padding-inline:var(--vi-tag-padding-x);border-radius:var(--vi-tag-border-radius);font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-tag-font-size);font-weight:var(--vi-tag-font-weight);line-height:1;gap:var(--vi-tag-gap);transition:var(--vi-tag-transition);-webkit-user-select:none;user-select:none;border:var(--vi-border-width-thin, 1px) solid transparent;cursor:default;max-width:var(--vi-tag-max-width);vertical-align:middle;position:relative}.tag.tag--pill{border-radius:9999px}.tag.tag--removable{padding-inline-end:calc(var(--vi-tag-padding-x) - 4px)}.tag .tag-content-wrapper{display:inline-flex;align-items:center;justify-content:center;gap:var(--vi-tag-gap);min-width:0;flex:1 1 auto;height:100%;line-height:1;outline:none;border-radius:inherit}.tag .tag-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;line-height:1;display:inline-block}.tag .tag-icon,.tag .tag-avatar,.tag .tag-checkmark{display:inline-flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0}.tag .tag-avatar ::slotted(*){width:var(--vi-tag-avatar-size, calc(var(--vi-tag-height) - 10px));height:var(--vi-tag-avatar-size, calc(var(--vi-tag-height) - 10px));border-radius:50%;object-fit:cover;display:block}.tag .tag-dot{display:inline-block;width:var(--vi-tag-dot-size);height:var(--vi-tag-dot-size);border-radius:50%;background-color:currentColor;flex-shrink:0}.tag .tag-count{display:inline-flex;align-items:center;justify-content:center;padding-inline:5px;height:calc(var(--vi-tag-height) - 10px);min-width:calc(var(--vi-tag-height) - 10px);font-size:10px;font-weight:var(--vi-font-weight-semibold, 600);border-radius:9999px;background-color:#00000014;color:inherit;line-height:1;flex-shrink:0;margin-inline-start:2px}.tag.tag-clickable{cursor:pointer}.tag.tag-clickable:hover{transform:translateY(-1px)}.tag.tag-clickable:active{transform:translateY(0) scale(.98)}.tag.appearance-subtle.variant-neutral{background-color:var(--vi-tag-neutral-bg, var(--vi-layer-02, #f3f4f6));color:var(--vi-tag-neutral-color, var(--vi-text-primary, #111827));border-color:var(--vi-tag-neutral-border, var(--vi-border-03, #e0e0e0))}.tag.appearance-subtle.variant-neutral.tag-clickable:hover{background-color:var(--vi-tag-neutral-hover-bg, var(--vi-layer-03, #e5e7eb));border-color:var(--vi-tag-neutral-hover-border, var(--vi-border-04, #bdbdbd))}.tag.appearance-subtle.variant-neutral.tag-selected{background-color:var(--vi-tag-neutral-selected-bg, var(--vi-layer-03, #e5e7eb));border-color:var(--vi-tag-neutral-selected-border, var(--vi-color-primary, #3676d0));color:var(--vi-tag-neutral-selected-color, var(--vi-color-primary, #3676d0))}.tag.appearance-subtle.variant-primary{background-color:var(--vi-tag-primary-bg, var(--vi-bg-info, #e3f2fd));color:var(--vi-tag-primary-color, var(--vi-text-info, #3676d0));border-color:var(--vi-tag-primary-border, var(--vi-color-blue-300, #a3d1fa))}.tag.appearance-subtle.variant-primary.tag-clickable:hover{background-color:var(--vi-tag-primary-hover-bg, var(--vi-color-blue-100, #ebf5ff));border-color:var(--vi-tag-primary-hover-border, var(--vi-color-blue-400, #74b6f4))}.tag.appearance-subtle.variant-primary.tag-selected{background-color:var(--vi-tag-primary-selected-bg, var(--vi-color-blue-100, #ebf5ff));border-color:var(--vi-tag-primary-selected-border, var(--vi-color-primary, #3676d0));color:var(--vi-tag-primary-selected-color, var(--vi-color-blue-800, #2d5fa8))}.tag.appearance-subtle.variant-success{background-color:var(--vi-tag-success-bg, var(--vi-bg-success, #e6f9f0));color:var(--vi-tag-success-color, var(--vi-text-success, #265a3d));border-color:var(--vi-tag-success-border, var(--vi-color-green-300, #96c4ab))}.tag.appearance-subtle.variant-success.tag-clickable:hover{background-color:var(--vi-tag-success-hover-bg, var(--vi-color-green-100, #e6f0eb));border-color:var(--vi-tag-success-hover-border, var(--vi-color-green-400, #6eab88))}.tag.appearance-subtle.variant-success.tag-selected{background-color:var(--vi-tag-success-selected-bg, var(--vi-color-green-100, #e6f0eb));border-color:var(--vi-tag-success-selected-border, var(--vi-color-success, #489167));color:var(--vi-tag-success-selected-color, var(--vi-color-green-800, #17402a))}.tag.appearance-subtle.variant-warning{background-color:var(--vi-tag-warning-bg, var(--vi-bg-warning, #fff8e1));color:var(--vi-tag-warning-color, var(--vi-text-warning, #e68300));border-color:var(--vi-tag-warning-border, var(--vi-color-yellow-300, #ffd359))}.tag.appearance-subtle.variant-warning.tag-clickable:hover{background-color:var(--vi-tag-warning-hover-bg, var(--vi-color-yellow-100, #ffeab1));border-color:var(--vi-tag-warning-hover-border, var(--vi-color-yellow-400, #ffc72e))}.tag.appearance-subtle.variant-warning.tag-selected{background-color:var(--vi-tag-warning-selected-bg, var(--vi-color-yellow-100, #ffeab1));border-color:var(--vi-tag-warning-selected-border, var(--vi-color-warning, #ffba00));color:var(--vi-tag-warning-selected-color, var(--vi-color-yellow-800, #e68300))}.tag.appearance-subtle.variant-danger{background-color:var(--vi-tag-danger-bg, var(--vi-bg-error, #ffebee));color:var(--vi-tag-danger-color, var(--vi-text-error, #db231b));border-color:var(--vi-tag-danger-border, var(--vi-color-red-300, #ee6f68))}.tag.appearance-subtle.variant-danger.tag-clickable:hover{background-color:var(--vi-tag-danger-hover-bg, var(--vi-color-red-100, #ffccce));border-color:var(--vi-tag-danger-hover-border, var(--vi-color-red-400, #f74d40))}.tag.appearance-subtle.variant-danger.tag-selected{background-color:var(--vi-tag-danger-selected-bg, var(--vi-color-red-100, #ffccce));border-color:var(--vi-tag-danger-selected-border, var(--vi-color-error, #ef4444));color:var(--vi-tag-danger-selected-color, var(--vi-color-red-800, #ce1a12))}.tag.appearance-subtle.variant-info{background-color:var(--vi-tag-info-bg, var(--vi-color-blue-100, #ebf5ff));color:var(--vi-tag-info-color, var(--vi-color-blue-700, #3676d0));border-color:var(--vi-tag-info-border, var(--vi-color-blue-300, #a3d1fa))}.tag.appearance-subtle.variant-info.tag-clickable:hover{background-color:var(--vi-tag-info-hover-bg, var(--vi-color-blue-200, #cee6ff));border-color:var(--vi-tag-info-hover-border, var(--vi-color-blue-500, #3f96f1))}.tag.appearance-subtle.variant-info.tag-selected{background-color:var(--vi-tag-info-selected-bg, var(--vi-color-blue-200, #cee6ff));border-color:var(--vi-tag-info-selected-border, var(--vi-color-blue-700, #3676d0));color:var(--vi-tag-info-selected-color, var(--vi-color-blue-900, #254882))}.tag.appearance-subtle.variant-contrast{background-color:var(--vi-tag-contrast-bg, var(--vi-text-primary, #111827));color:var(--vi-tag-contrast-color, var(--vi-text-primary-inverse, #ffffff));border-color:var(--vi-tag-contrast-border, var(--vi-text-primary, #111827))}.tag.appearance-subtle.variant-contrast .tag-count{background-color:#fff3}.tag.appearance-outline{background-color:transparent}.tag.appearance-outline.variant-neutral{color:var(--vi-tag-outline-neutral-color, var(--vi-text-primary, #111827));border-color:var(--vi-tag-outline-neutral-border, var(--vi-border-04, #bdbdbd))}.tag.appearance-outline.variant-neutral.tag-clickable:hover,.tag.appearance-outline.variant-neutral.tag-selected{background-color:var(--vi-tag-outline-neutral-hover-bg, var(--vi-layer-02, #f3f4f6))}.tag.appearance-outline.variant-primary{color:var(--vi-tag-outline-primary-color, var(--vi-color-primary, #3676d0));border-color:var(--vi-tag-outline-primary-border, var(--vi-color-primary, #3676d0))}.tag.appearance-outline.variant-primary.tag-clickable:hover,.tag.appearance-outline.variant-primary.tag-selected{background-color:var(--vi-tag-outline-primary-hover-bg, var(--vi-bg-info, #e3f2fd))}.tag.appearance-outline.variant-success{color:var(--vi-tag-outline-success-color, var(--vi-color-success, #489167));border-color:var(--vi-tag-outline-success-border, var(--vi-color-success, #489167))}.tag.appearance-outline.variant-success.tag-clickable:hover,.tag.appearance-outline.variant-success.tag-selected{background-color:var(--vi-tag-outline-success-hover-bg, var(--vi-bg-success, #e6f9f0))}.tag.appearance-outline.variant-warning{color:var(--vi-tag-outline-warning-color, var(--vi-color-warning, #ffba00));border-color:var(--vi-tag-outline-warning-border, var(--vi-color-warning, #ffba00))}.tag.appearance-outline.variant-warning.tag-clickable:hover,.tag.appearance-outline.variant-warning.tag-selected{background-color:var(--vi-tag-outline-warning-hover-bg, var(--vi-bg-warning, #fff8e1))}.tag.appearance-outline.variant-danger{color:var(--vi-tag-outline-danger-color, var(--vi-color-error, #ef4444));border-color:var(--vi-tag-outline-danger-border, var(--vi-color-error, #ef4444))}.tag.appearance-outline.variant-danger.tag-clickable:hover,.tag.appearance-outline.variant-danger.tag-selected{background-color:var(--vi-tag-outline-danger-hover-bg, var(--vi-bg-error, #ffebee))}.tag.appearance-outline.variant-info{color:var(--vi-tag-outline-info-color, var(--vi-color-blue-700, #3676d0));border-color:var(--vi-tag-outline-info-border, var(--vi-color-blue-500, #3f96f1))}.tag.appearance-outline.variant-info.tag-clickable:hover,.tag.appearance-outline.variant-info.tag-selected{background-color:var(--vi-tag-outline-info-hover-bg, var(--vi-color-blue-100, #ebf5ff))}.tag.appearance-outline.variant-contrast{color:var(--vi-tag-outline-contrast-color, var(--vi-text-primary, #111827));border-color:var(--vi-tag-outline-contrast-border, var(--vi-text-primary, #111827))}.tag.appearance-outline.variant-contrast.tag-clickable:hover,.tag.appearance-outline.variant-contrast.tag-selected{background-color:var(--vi-tag-outline-contrast-hover-bg, var(--vi-layer-02, #f3f4f6))}.tag.appearance-solid{border-color:transparent;box-shadow:0 1px 2px #0000000d}.tag.appearance-solid.variant-neutral{background-color:var(--vi-tag-solid-neutral-bg, var(--vi-border-inverse-03, #757575));color:var(--vi-tag-solid-neutral-color, var(--vi-text-primary-inverse, #ffffff))}.tag.appearance-solid.variant-neutral.tag-clickable:hover,.tag.appearance-solid.variant-neutral.tag-selected{background-color:var(--vi-tag-solid-neutral-hover-bg, var(--vi-text-primary, #111827))}.tag.appearance-solid.variant-primary{background-color:var(--vi-tag-solid-primary-bg, var(--vi-color-primary, #3676d0));color:var(--vi-tag-solid-primary-color, var(--vi-text-primary-inverse, #ffffff))}.tag.appearance-solid.variant-primary.tag-clickable:hover,.tag.appearance-solid.variant-primary.tag-selected{background-color:var(--vi-tag-solid-primary-hover-bg, var(--vi-color-blue-800, #2d5fa8))}.tag.appearance-solid.variant-success{background-color:var(--vi-tag-solid-success-bg, var(--vi-color-success, #489167));color:var(--vi-tag-solid-success-color, var(--vi-text-primary-inverse, #ffffff))}.tag.appearance-solid.variant-success.tag-clickable:hover,.tag.appearance-solid.variant-success.tag-selected{background-color:var(--vi-tag-solid-success-hover-bg, var(--vi-color-green-700, #265a3d))}.tag.appearance-solid.variant-warning{background-color:var(--vi-tag-solid-warning-bg, var(--vi-color-warning, #ffba00));color:var(--vi-tag-solid-warning-color, var(--vi-text-primary-inverse, #ffffff))}.tag.appearance-solid.variant-warning.tag-clickable:hover,.tag.appearance-solid.variant-warning.tag-selected{background-color:var(--vi-tag-solid-warning-hover-bg, var(--vi-color-yellow-700, #ff9900))}.tag.appearance-solid.variant-danger{background-color:var(--vi-tag-solid-danger-bg, var(--vi-color-error, #ef4444));color:var(--vi-tag-solid-danger-color, var(--vi-text-primary-inverse, #ffffff))}.tag.appearance-solid.variant-danger.tag-clickable:hover,.tag.appearance-solid.variant-danger.tag-selected{background-color:var(--vi-tag-solid-danger-hover-bg, var(--vi-color-red-700, #db231b))}.tag.appearance-solid.variant-info{background-color:var(--vi-tag-solid-info-bg, var(--vi-color-blue-600, #3b86de));color:var(--vi-tag-solid-info-color, var(--vi-text-primary-inverse, #ffffff))}.tag.appearance-solid.variant-info.tag-clickable:hover,.tag.appearance-solid.variant-info.tag-selected{background-color:var(--vi-tag-solid-info-hover-bg, var(--vi-color-blue-800, #2d5fa8))}.tag.appearance-solid.variant-contrast{background-color:var(--vi-tag-solid-contrast-bg, var(--vi-text-primary, #111827));color:var(--vi-tag-solid-contrast-color, var(--vi-text-primary-inverse, #ffffff))}.tag.appearance-solid .tag-count{background-color:#ffffff40}.tag.size-xs{--vi-tag-height: 18px;--vi-tag-font-size: 10px;--vi-tag-padding-x: 6px;--vi-tag-gap: 4px;--vi-tag-remove-size: 12px;--vi-tag-dot-size: 4px;--vi-tag-avatar-size: 10px;--vi-tag-icon-size: 10px}.tag.size-sm{--vi-tag-height: 20px;--vi-tag-font-size: 11px;--vi-tag-padding-x: 8px;--vi-tag-gap: 5px;--vi-tag-remove-size: 14px;--vi-tag-dot-size: 5px;--vi-tag-avatar-size: 12px;--vi-tag-icon-size: 12px}.tag.size-lg{--vi-tag-height: 28px;--vi-tag-font-size: 13px;--vi-tag-padding-x: 12px;--vi-tag-gap: 8px;--vi-tag-remove-size: 18px;--vi-tag-dot-size: 7px;--vi-tag-avatar-size: 18px;--vi-tag-icon-size: 16px}.tag.is-disabled{opacity:var(--vi-tag-disabled-opacity);pointer-events:none;cursor:not-allowed;box-shadow:none!important;transform:none!important}.tag-remove-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--vi-tag-remove-size);height:var(--vi-tag-remove-size);min-width:var(--vi-tag-remove-size);padding:0;border-radius:50%;margin-inline-start:2px;margin-inline-end:0;cursor:pointer;background:transparent;border:none;color:inherit;transition:var(--vi-tag-transition);flex-shrink:0;line-height:1}.tag-remove-btn:hover{background-color:#0000001f}.tag-remove-btn:active{transform:scale(.92)}}:host{display:inline-flex;vertical-align:middle;margin-inline-end:var(--vi-tag-margin-end, 6px);margin-block:var(--vi-tag-margin-block, 2px);outline:none}:host([disabled]){cursor:not-allowed;pointer-events:none}::slotted(vi-icon),::slotted(svg){display:block}::slotted(img){display:block;width:14px;height:14px;border-radius:50%;object-fit:cover}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}";
+
+function applyDecs2203RFactory$1() {
+    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$1(targetClass, memberDecs, classDecs, parentClass) {
+    return (_apply_decs_2203_r$1 = applyDecs2203RFactory$1())(targetClass, memberDecs, classDecs, parentClass);
+}
+function _identity$1(x) {
+    return x;
+}
+var _dec$1, _initClass$1, _ViElement, _dec1$1, _dec2$1, _dec3$1, _dec4$1, _dec5$1, _dec6$1, _dec7$1, _dec8$1, _dec9$1, _dec10, /** Colour variant */ _init_variant, /** Visual appearance mode */ _init_appearance, /** Size scale */ _init_size$1, /** Fully rounded pill shape (9999px radius) */ _init_pill, /** Status dot indicator prefix */ _init_dot, /** Suffix count badge value */ _init_count, /** Show remove button */ _init_removable, /** Interactive selectable filter mode */ _init_selectable, /** Selected/active state */ _init_selected, /** Disable interactions */ _init_disabled$1, _initProto$1;
+let _ViTag;
+_dec$1 = customElement('vi-tag'), _dec1$1 = property({
+    type: String,
+    reflect: true
+}), _dec2$1 = property({
+    type: String,
+    reflect: true
+}), _dec3$1 = property({
+    type: String,
+    reflect: true
+}), _dec4$1 = property({
+    type: Boolean,
+    reflect: true
+}), _dec5$1 = property({
+    type: Boolean,
+    reflect: true
+}), _dec6$1 = property({
+    type: Number
+}), _dec7$1 = property({
+    type: Boolean
+}), _dec8$1 = property({
+    type: Boolean,
+    reflect: true
+}), _dec9$1 = property({
+    type: Boolean,
+    reflect: true
+}), _dec10 = property({
+    type: Boolean,
+    reflect: true
+});
+new class extends _identity$1 {
+    constructor(){
+        super(_ViTag), _initClass$1();
+    }
+    static{
+        class ViTag extends (_ViElement = ViElement) {
+            static{
+                ({ e: [_init_variant, _init_appearance, _init_size$1, _init_pill, _init_dot, _init_count, _init_removable, _init_selectable, _init_selected, _init_disabled$1, _initProto$1], c: [_ViTag, _initClass$1] } = _apply_decs_2203_r$1(this, [
+                    [
+                        _dec1$1,
+                        1,
+                        "variant"
+                    ],
+                    [
+                        _dec2$1,
+                        1,
+                        "appearance"
+                    ],
+                    [
+                        _dec3$1,
+                        1,
+                        "size"
+                    ],
+                    [
+                        _dec4$1,
+                        1,
+                        "pill"
+                    ],
+                    [
+                        _dec5$1,
+                        1,
+                        "dot"
+                    ],
+                    [
+                        _dec6$1,
+                        1,
+                        "count"
+                    ],
+                    [
+                        _dec7$1,
+                        1,
+                        "removable"
+                    ],
+                    [
+                        _dec8$1,
+                        1,
+                        "selectable"
+                    ],
+                    [
+                        _dec9$1,
+                        1,
+                        "selected"
+                    ],
+                    [
+                        _dec10,
+                        1,
+                        "disabled"
+                    ]
+                ], [
+                    _dec$1
+                ], _ViElement));
+            }
+            static styles = css`
+    ${unsafeCSS(tagStyles)}
+  `;
+            #___private_variant_1 = (_initProto$1(this), _init_variant(this, 'neutral'));
+            get variant() {
+                return this.#___private_variant_1;
+            }
+            set variant(_v) {
+                this.#___private_variant_1 = _v;
+            }
+            #___private_appearance_2 = _init_appearance(this, 'subtle');
+            get appearance() {
+                return this.#___private_appearance_2;
+            }
+            set appearance(_v) {
+                this.#___private_appearance_2 = _v;
+            }
+            #___private_size_3 = _init_size$1(this, 'md');
+            get size() {
+                return this.#___private_size_3;
+            }
+            set size(_v) {
+                this.#___private_size_3 = _v;
+            }
+            #___private_pill_4 = _init_pill(this, false);
+            get pill() {
+                return this.#___private_pill_4;
+            }
+            set pill(_v) {
+                this.#___private_pill_4 = _v;
+            }
+            #___private_dot_5 = _init_dot(this, false);
+            get dot() {
+                return this.#___private_dot_5;
+            }
+            set dot(_v) {
+                this.#___private_dot_5 = _v;
+            }
+            #___private_count_6 = _init_count(this, undefined);
+            get count() {
+                return this.#___private_count_6;
+            }
+            set count(_v) {
+                this.#___private_count_6 = _v;
+            }
+            #___private_removable_7 = _init_removable(this, false);
+            get removable() {
+                return this.#___private_removable_7;
+            }
+            set removable(_v) {
+                this.#___private_removable_7 = _v;
+            }
+            #___private_selectable_8 = _init_selectable(this, false);
+            get selectable() {
+                return this.#___private_selectable_8;
+            }
+            set selectable(_v) {
+                this.#___private_selectable_8 = _v;
+            }
+            #___private_selected_9 = _init_selected(this, false);
+            get selected() {
+                return this.#___private_selected_9;
+            }
+            set selected(_v) {
+                this.#___private_selected_9 = _v;
+            }
+            #___private_disabled_10 = _init_disabled$1(this, false);
+            get disabled() {
+                return this.#___private_disabled_10;
+            }
+            set disabled(_v) {
+                this.#___private_disabled_10 = _v;
+            }
+            static _iconsRegistered = false;
+            connectedCallback() {
+                super.connectedCallback();
+                if (!ViTag._iconsRegistered) {
+                    registerIcons([
+                        xIcon,
+                        checkIcon
+                    ]);
+                    ViTag._iconsRegistered = true;
+                }
+                if (this.closest('[role="list"]') !== null && !this.hasAttribute('role')) {
+                    this.setAttribute('role', 'listitem');
+                }
+            }
+            _handleTagClick(_e) {
+                if (this.disabled || !this.selectable) return;
+                this.selected = !this.selected;
+                this.dispatchEvent(new CustomEvent('vi-tag-select', {
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        selected: this.selected
+                    }
+                }));
+            }
+            _handleRemoveClick(e) {
+                e.stopPropagation();
+                if (this.disabled) return;
+                this._fireRemoveEvent();
+            }
+            _handleKeyDown(e) {
+                if (this.disabled) return;
+                if (this.removable && (e.key === 'Delete' || e.key === 'Backspace')) {
+                    e.preventDefault();
+                    this._fireRemoveEvent();
+                } else if ((e.key === 'Enter' || e.key === ' ') && this.selectable) {
+                    e.preventDefault();
+                    this._handleTagClick();
+                }
+            }
+            _handleSlotChange() {
+                this.requestUpdate();
+            }
+            _fireRemoveEvent() {
+                this.dispatchEvent(new CustomEvent('vi-tag-remove', {
+                    bubbles: true,
+                    composed: true
+                }));
+            }
+            get _removeLabel() {
+                return `Remove ${this.textContent?.trim() || 'tag'}`;
+            }
+            render() {
+                const isTabbable = (this.selectable || this.removable) && !this.disabled;
+                const classes = {
+                    'tag': true,
+                    [`variant-${this.variant}`]: true,
+                    [`appearance-${this.appearance}`]: true,
+                    [`size-${this.size}`]: true,
+                    'tag--pill': this.pill,
+                    'tag--removable': this.removable,
+                    'tag-clickable': !this.disabled && this.selectable,
+                    'tag-selected': this.selected,
+                    'is-disabled': this.disabled
+                };
+                return html`
+      <span
+        part="tag"
+        class=${classMap(classes)}
+        aria-disabled=${this.disabled ? 'true' : 'false'}
+      >
+        <span
+          class="tag-content-wrapper"
+          role=${this.selectable ? 'button' : nothing}
+          tabindex=${this.disabled ? '-1' : isTabbable ? 0 : nothing}
+          aria-disabled=${this.disabled ? 'true' : 'false'}
+          aria-pressed=${this.selectable ? this.selected ? 'true' : 'false' : nothing}
+          @click=${this.selectable ? this._handleTagClick : nothing}
+          @keydown=${this._handleKeyDown}
+        >
+          ${this.dot ? html`<span part="dot" class="tag-dot" aria-hidden="true"></span>` : ''}
+          ${this.selectable && this.selected ? html`
+                <span part="checkmark" class="tag-checkmark" aria-hidden="true">
+                  <vi-icon name="check" size="12"></vi-icon>
+                </span>
+              ` : ''}
+          <span part="avatar" class="tag-avatar">
+            <slot name="avatar"></slot>
+          </span>
+          <span part="icon" class="tag-icon">
+            <slot name="icon"></slot>
+          </span>
+          <span part="label" class="tag-label">
+            <slot @slotchange=${this._handleSlotChange}></slot>
+          </span>
+          ${this.count !== undefined ? html`<span part="count" class="tag-count">${this.count}</span>` : ''}
+          <slot name="suffix"></slot>
+        </span>
+        ${this.removable ? html`
+              <vi-button
+                part="remove-btn"
+                exportparts="button: remove-btn-button, icon: remove-btn-icon"
+                class="tag-remove-btn"
+                variant="ghost"
+                size="xs"
+                icon-only
+                ?disabled=${this.disabled}
+                @click=${this._handleRemoveClick}
+              >
+                <vi-icon slot="icon" name="x" size="12" aria-hidden="true"></vi-icon>
+                <span class="sr-only">${this._removeLabel}</span>
+              </vi-button>
+            ` : ''}
+      </span>
+    `;
+            }
+        }
+    }
+}();
 
 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}";
 
@@ -646,4 +1311,4 @@ new class extends _identity {
     }
 }();
 
-export { ViElement, _ViSwitch as ViSwitch };
+export { ViElement, _ViSwitch as ViSwitch, _ViTag as ViTag, registerIcons };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vialiq/web-components",
-  "version": "0.16.0",
+  "version": "0.17.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.14.0",
+    "@vialiq/icons": ">=0.0.3 <0.1.0",
     "lit": "^3.0.0"
   },
   "keywords": [