@vialiq/web-components 0.10.0 → 0.11.0

package/index.js

@@ -18,7 +18,7 @@ import { V as ValidityMixin } from './validity-mixin-H4aOFJEr.js';
 
 const badgeStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{.badge{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;box-sizing:border-box;font-size:var(--vi-badge-font-size, 11px);font-weight:var(--vi-badge-font-weight, var(--vi-font-weight-semibold, 600));padding:var(--vi-badge-padding, 2px 8px);border-radius:var(--vi-badge-border-radius, 9999px);gap:var(--vi-badge-gap, 4px);border:var(--vi-border-width-thin, 1px) solid transparent}.dot{display:inline-block;width:var(--vi-badge-dot-size, 8px);height:var(--vi-badge-dot-size, 8px);border-radius:50%;background-color:currentColor;flex-shrink:0}.icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}}:host{display:inline-block;vertical-align:middle}:host([hidden]),:host([count=\"0\"]:not([show-zero])){display:none!important}:host([size=sm]){--vi-badge-font-size: 10px;--vi-badge-padding: 0 6px;--vi-badge-gap: 2px;--vi-badge-dot-size: 6px}:host([size=md]){--vi-badge-font-size: 11px;--vi-badge-padding: 2px 8px;--vi-badge-gap: 4px;--vi-badge-dot-size: 8px}:host([size=lg]){--vi-badge-font-size: 13px;--vi-badge-padding: 4px 12px;--vi-badge-gap: 6px;--vi-badge-dot-size: 10px}:host([pill]){--vi-badge-border-radius: 9999px}:host(:not([pill])){--vi-badge-border-radius: var(--vi-border-radius-sm, 2px)}.badge.dot-only{--vi-badge-padding: 4px}:host([variant=neutral]) .badge{background-color:var(--vi-badge-neutral-bg, var(--vi-border-02, #eeeeee));color:var(--vi-badge-neutral-color, var(--vi-text-secondary, #4b5563))}:host([variant=primary]) .badge{background-color:var(--vi-badge-primary-bg, var(--vi-bg-info, #e3f2fd));color:var(--vi-badge-primary-color, var(--vi-text-info, #3676d0))}:host([variant=success]) .badge{background-color:var(--vi-badge-success-bg, var(--vi-bg-success, #e6f9f0));color:var(--vi-badge-success-color, var(--vi-text-success, #265a3d))}:host([variant=warning]) .badge{background-color:var(--vi-badge-warning-bg, var(--vi-bg-warning, #fff8e1));color:var(--vi-badge-warning-color, var(--vi-text-warning, #e68300))}:host([variant=danger]) .badge{background-color:var(--vi-badge-danger-bg, var(--vi-bg-error, #ffebee));color:var(--vi-badge-danger-color, var(--vi-text-error, #db231b))}:host([variant=info]) .badge{background-color:var(--vi-badge-info-bg, var(--vi-bg-info, #e3f2fd));color:var(--vi-badge-info-color, var(--vi-text-info, #3676d0))}:host([outline][variant=neutral]) .badge{background-color:transparent;color:var(--vi-badge-neutral-color, var(--vi-text-secondary, #4b5563));border-color:var(--vi-badge-neutral-border, var(--vi-border-03, #e0e0e0))}:host([outline][variant=primary]) .badge{background-color:transparent;color:var(--vi-badge-primary-color, var(--vi-text-info, #3676d0));border-color:var(--vi-badge-primary-border, var(--vi-color-primary, #3676d0))}:host([outline][variant=success]) .badge{background-color:transparent;color:var(--vi-badge-success-color, var(--vi-text-success, #265a3d));border-color:var(--vi-badge-success-border, var(--vi-color-success, #489167))}:host([outline][variant=warning]) .badge{background-color:transparent;color:var(--vi-badge-warning-color, var(--vi-text-warning, #e68300));border-color:var(--vi-badge-warning-border, var(--vi-color-warning, #ffba00))}:host([outline][variant=danger]) .badge{background-color:transparent;color:var(--vi-badge-danger-color, var(--vi-text-error, #db231b));border-color:var(--vi-badge-danger-border, var(--vi-color-error, #ef4444))}:host([outline][variant=info]) .badge{background-color:transparent;color:var(--vi-badge-info-color, var(--vi-text-info, #3676d0));border-color:var(--vi-badge-info-border, var(--vi-color-info, #3676d0))}.icon{display:inline-flex;flex-shrink:0}.icon[hidden]{display:none}::slotted(vi-icon),::slotted(svg){--vi-icon-size: 1em;width:1em;height:1em}";
 
-function applyDecs2203RFactory$3() {
+function applyDecs2203RFactory$4() {
     function createAddInitializerMethod(initializers, decoratorFinishedRef) {
         return function addInitializer(initializer) {
             assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -387,103 +387,103 @@ function applyDecs2203RFactory$3() {
         };
     };
 }
-function _apply_decs_2203_r$3(targetClass, memberDecs, classDecs, parentClass) {
-    return (_apply_decs_2203_r$3 = applyDecs2203RFactory$3())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r$4(targetClass, memberDecs, classDecs, parentClass) {
+    return (_apply_decs_2203_r$4 = applyDecs2203RFactory$4())(targetClass, memberDecs, classDecs, parentClass);
 }
-function _identity$3(x) {
+function _identity$4(x) {
     return x;
 }
-var _dec$3, _initClass$3, _ViElement$1, _dec1$3, _dec2$3, _dec3$3, _dec4$3, _dec5$3, _dec6$3, _dec7$3, _dec8$3, _dec9$3, _dec10$3, /** Colour semantic */ _init_variant$2, /** Size */ _init_size$1, /** Show coloured dot */ _init_dot, /** Fully rounded (pill shape) vs. square */ _init_pill, /** Numeric count to display */ _init_count, /** Show the badge even if the count is zero */ _init_showZero, /** Max count before showing {max}+ */ _init_max, /** Outlined/ghost style */ _init_outline, _init__hasIcon$1, _init__hasDefaultSlot, _initProto$3;
+var _dec$4, _initClass$4, _ViElement$2, _dec1$4, _dec2$4, _dec3$4, _dec4$4, _dec5$4, _dec6$4, _dec7$4, _dec8$4, _dec9$4, _dec10$4, /** Colour semantic */ _init_variant$2, /** Size */ _init_size$1, /** Show coloured dot */ _init_dot, /** Fully rounded (pill shape) vs. square */ _init_pill, /** Numeric count to display */ _init_count, /** Show the badge even if the count is zero */ _init_showZero, /** Max count before showing {max}+ */ _init_max, /** Outlined/ghost style */ _init_outline, _init__hasIcon$1, _init__hasDefaultSlot, _initProto$4;
 let _ViBadge;
-_dec$3 = customElement('vi-badge'), _dec1$3 = property({
+_dec$4 = customElement('vi-badge'), _dec1$4 = property({
     type: String,
     reflect: true
-}), _dec2$3 = property({
+}), _dec2$4 = property({
     type: String,
     reflect: true
-}), _dec3$3 = property({
+}), _dec3$4 = property({
     type: Boolean,
     reflect: true
-}), _dec4$3 = property({
+}), _dec4$4 = property({
     type: Boolean,
     reflect: true
-}), _dec5$3 = property({
+}), _dec5$4 = property({
     type: Number,
     reflect: true
-}), _dec6$3 = property({
+}), _dec6$4 = property({
     type: Boolean,
     reflect: true,
     attribute: 'show-zero'
-}), _dec7$3 = property({
+}), _dec7$4 = property({
     type: Number
-}), _dec8$3 = property({
+}), _dec8$4 = property({
     type: Boolean,
     reflect: true
-}), _dec9$3 = state(), _dec10$3 = state();
-new class extends _identity$3 {
+}), _dec9$4 = state(), _dec10$4 = state();
+new class extends _identity$4 {
     constructor(){
-        super(_ViBadge), _initClass$3();
+        super(_ViBadge), _initClass$4();
     }
     static{
-        class ViBadge extends (_ViElement$1 = ViElement) {
+        class ViBadge extends (_ViElement$2 = ViElement) {
             static{
-                ({ e: [_init_variant$2, _init_size$1, _init_dot, _init_pill, _init_count, _init_showZero, _init_max, _init_outline, _init__hasIcon$1, _init__hasDefaultSlot, _initProto$3], c: [_ViBadge, _initClass$3] } = _apply_decs_2203_r$3(this, [
+                ({ e: [_init_variant$2, _init_size$1, _init_dot, _init_pill, _init_count, _init_showZero, _init_max, _init_outline, _init__hasIcon$1, _init__hasDefaultSlot, _initProto$4], c: [_ViBadge, _initClass$4] } = _apply_decs_2203_r$4(this, [
                     [
-                        _dec1$3,
+                        _dec1$4,
                         1,
                         "variant"
                     ],
                     [
-                        _dec2$3,
+                        _dec2$4,
                         1,
                         "size"
                     ],
                     [
-                        _dec3$3,
+                        _dec3$4,
                         1,
                         "dot"
                     ],
                     [
-                        _dec4$3,
+                        _dec4$4,
                         1,
                         "pill"
                     ],
                     [
-                        _dec5$3,
+                        _dec5$4,
                         1,
                         "count"
                     ],
                     [
-                        _dec6$3,
+                        _dec6$4,
                         1,
                         "showZero"
                     ],
                     [
-                        _dec7$3,
+                        _dec7$4,
                         1,
                         "max"
                     ],
                     [
-                        _dec8$3,
+                        _dec8$4,
                         1,
                         "outline"
                     ],
                     [
-                        _dec9$3,
+                        _dec9$4,
                         1,
                         "_hasIcon"
                     ],
                     [
-                        _dec10$3,
+                        _dec10$4,
                         1,
                         "_hasDefaultSlot"
                     ]
                 ], [
-                    _dec$3
-                ], _ViElement$1));
+                    _dec$4
+                ], _ViElement$2));
             }
             static styles = css`${unsafeCSS(badgeStyles)}`;
-            #___private_variant_1 = (_initProto$3(this), _init_variant$2(this, 'neutral'));
+            #___private_variant_1 = (_initProto$4(this), _init_variant$2(this, 'neutral'));
             get variant() {
                 return this.#___private_variant_1;
             }
@@ -616,7 +616,7 @@ new class extends _identity$3 {
 
 const alertStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{.alert-root{display:flex;align-items:flex-start;box-sizing:border-box;width:100%;border-radius:var(--vi-alert-border-radius, 6px);padding:var(--vi-alert-padding, 12px 16px);gap:var(--vi-alert-gap, 12px);border-width:var(--vi-alert-border-width, 1px);border-style:solid;font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-font-size-sm, 14px);line-height:var(--vi-line-height-normal, 1.5)}.alert-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding-top:2px}.alert-content{display:flex;flex-direction:column;flex-grow:1;min-width:0}.alert-title{font-weight:var(--vi-font-weight-semibold, 600);margin-bottom:4px;display:block}.alert-actions{display:flex;align-items:center;gap:var(--vi-spacing-xs, 8px);margin-top:var(--vi-spacing-sm, 16px)}}:host{display:block;width:100%}:host([floating]){position:absolute;top:0;left:0;right:0;z-index:var(--vi-alert-floating-z-index, 10);box-shadow:var(--vi-alert-floating-shadow, 0 4px 12px rgba(0, 0, 0, .12))}:host([hidden]){display:none!important}.alert-root{overflow:hidden}.alert-root[data-variant=neutral]{background-color:var(--vi-alert-neutral-bg, var(--vi-layer-02, #f3f4f6));border-color:var(--vi-alert-neutral-border, var(--vi-border-04, #bdbdbd));color:var(--vi-alert-neutral-text-color, var(--vi-text-primary, #111827))}.alert-root[data-variant=neutral] .alert-title{color:var(--vi-alert-neutral-title-color, var(--vi-text-primary, #111827))}.alert-root[data-variant=neutral] .alert-icon{color:var(--vi-alert-neutral-icon-color, var(--vi-text-secondary, #4b5563))}.alert-root[data-variant=info]{background-color:var(--vi-alert-info-bg, var(--vi-bg-info, #e3f2fd));border-color:var(--vi-alert-info-border, var(--vi-color-info, #3676d0));color:var(--vi-alert-info-text-color, var(--vi-text-info, #3676d0))}.alert-root[data-variant=info] .alert-title{color:var(--vi-alert-info-title-color, var(--vi-text-info, #3676d0))}.alert-root[data-variant=info] .alert-icon{color:var(--vi-alert-info-icon-color, var(--vi-color-info, #3676d0))}.alert-root[data-variant=success]{background-color:var(--vi-alert-success-bg, var(--vi-bg-success, #e6f9f0));border-color:var(--vi-alert-success-border, var(--vi-color-success, #489167));color:var(--vi-alert-success-text-color, var(--vi-text-success, #265a3d))}.alert-root[data-variant=success] .alert-title{color:var(--vi-alert-success-title-color, var(--vi-text-success, #265a3d))}.alert-root[data-variant=success] .alert-icon{color:var(--vi-alert-success-icon-color, var(--vi-color-success, #489167))}.alert-root[data-variant=warning]{background-color:var(--vi-alert-warning-bg, var(--vi-bg-warning, #fff8e1));border-color:var(--vi-alert-warning-border, var(--vi-color-warning, #ffba00));color:var(--vi-alert-warning-text-color, var(--vi-text-warning, #e68300))}.alert-root[data-variant=warning] .alert-title{color:var(--vi-alert-warning-title-color, var(--vi-text-warning, #e68300))}.alert-root[data-variant=warning] .alert-icon{color:var(--vi-alert-warning-icon-color, var(--vi-color-warning, #ffba00))}.alert-root[data-variant=danger]{background-color:var(--vi-alert-danger-bg, var(--vi-bg-error, #ffebee));border-color:var(--vi-alert-danger-border, var(--vi-color-error, #ef4444));color:var(--vi-alert-danger-text-color, var(--vi-text-error, #db231b))}.alert-root[data-variant=danger] .alert-title{color:var(--vi-alert-danger-title-color, var(--vi-text-error, #db231b))}.alert-root[data-variant=danger] .alert-icon{color:var(--vi-alert-danger-icon-color, var(--vi-color-error, #ef4444))}vi-icon,::slotted(vi-icon),::slotted(svg){--vi-icon-size: 1.25em;width:1.25em;height:1.25em}vi-button[part=close-btn]{margin-top:-4px;margin-right:-4px;margin-left:4px}";
 
-function applyDecs2203RFactory$2() {
+function applyDecs2203RFactory$3() {
     function createAddInitializerMethod(initializers, decoratorFinishedRef) {
         return function addInitializer(initializer) {
             assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -985,19 +985,19 @@ function applyDecs2203RFactory$2() {
         };
     };
 }
-function _apply_decs_2203_r$2(targetClass, memberDecs, classDecs, parentClass) {
-    return (_apply_decs_2203_r$2 = applyDecs2203RFactory$2())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r$3(targetClass, memberDecs, classDecs, parentClass) {
+    return (_apply_decs_2203_r$3 = applyDecs2203RFactory$3())(targetClass, memberDecs, classDecs, parentClass);
 }
-function _identity$2(x) {
+function _identity$3(x) {
     return x;
 }
-var _dec$2, _initClass$2, _ViElement, _dec1$2, _dec2$2, _dec3$2, _dec4$2, _dec5$2, _dec6$2, _dec7$2, _dec8$2, _dec9$2, _dec10$2, _dec11$1, _dec12, _dec13, /** Colour, icon, ARIA role */ _init_variant$1, /** Bold headline (optional) */ _init_title, /** Show × dismiss button */ _init_dismissible, /** Accessible label for the dismiss button */ _init_dismissLabel, /**
+var _dec$3, _initClass$3, _ViElement$1, _dec1$3, _dec2$3, _dec3$3, _dec4$3, _dec5$3, _dec6$3, _dec7$3, _dec8$3, _dec9$3, _dec10$3, _dec11$2, _dec12$1, _dec13$1, /** Colour, icon, ARIA role */ _init_variant$1, /** Bold headline (optional) */ _init_title, /** Show × dismiss button */ _init_dismissible, /** Accessible label for the dismiss button */ _init_dismissLabel, /**
    * Enables auto-hiding after a duration (default: 5000ms).
    * Note: Setting a positive `duration` or `auto-hide-duration` also implicitly enables auto-hiding.
    */ _init_autoHide, /** Auto hide duration in milliseconds (default: 5000ms) */ _init_autoHideDuration, /**
    * Alias for auto-hide-duration in milliseconds.
    * Setting a positive duration enables auto-hiding automatically.
-   */ _init_duration, /** Override the default status icon name */ _init_icon, /** Controls whether the alert is displayed */ _init_open, /** Position alert absolutely over parent container without pushing layout */ _init_floating, /** Hide the icon */ _init_noIcon, _init__hasTitleSlot, _init__hasActionsSlot, _initProto$2;
+   */ _init_duration$1, /** Override the default status icon name */ _init_icon, /** Controls whether the alert is displayed */ _init_open$1, /** Position alert absolutely over parent container without pushing layout */ _init_floating, /** Hide the icon */ _init_noIcon, _init__hasTitleSlot, _init__hasActionsSlot, _initProto$3;
 const checkCircleIcon = {
     name: 'check-circle',
     data: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>`
@@ -1026,120 +1026,120 @@ registerIcons([
     lockIcon
 ]);
 let _ViAlert;
-_dec$2 = customElement('vi-alert'), _dec1$2 = property({
+_dec$3 = customElement('vi-alert'), _dec1$3 = property({
     type: String,
     reflect: true
-}), _dec2$2 = property({
+}), _dec2$3 = property({
     type: String
-}), _dec3$2 = property({
+}), _dec3$3 = property({
     type: Boolean,
     reflect: true
-}), _dec4$2 = property({
+}), _dec4$3 = property({
     type: String,
     attribute: 'dismiss-label'
-}), _dec5$2 = property({
+}), _dec5$3 = property({
     type: Boolean,
     attribute: 'auto-hide',
     reflect: true
-}), _dec6$2 = property({
+}), _dec6$3 = property({
     type: Number,
     attribute: 'auto-hide-duration'
-}), _dec7$2 = property({
+}), _dec7$3 = property({
     type: Number
-}), _dec8$2 = property({
+}), _dec8$3 = property({
     type: String
-}), _dec9$2 = property({
+}), _dec9$3 = property({
     type: Boolean,
     reflect: true
-}), _dec10$2 = property({
+}), _dec10$3 = property({
     type: Boolean,
     reflect: true
-}), _dec11$1 = property({
+}), _dec11$2 = property({
     type: Boolean,
     attribute: 'no-icon',
     reflect: true
-}), _dec12 = state(), _dec13 = state();
-new class extends _identity$2 {
+}), _dec12$1 = state(), _dec13$1 = state();
+new class extends _identity$3 {
     constructor(){
-        super(_ViAlert), _initClass$2();
+        super(_ViAlert), _initClass$3();
     }
     static{
-        class ViAlert extends (_ViElement = ViElement) {
+        class ViAlert extends (_ViElement$1 = ViElement) {
             static{
-                ({ e: [_init_variant$1, _init_title, _init_dismissible, _init_dismissLabel, _init_autoHide, _init_autoHideDuration, _init_duration, _init_icon, _init_open, _init_floating, _init_noIcon, _init__hasTitleSlot, _init__hasActionsSlot, _initProto$2], c: [_ViAlert, _initClass$2] } = _apply_decs_2203_r$2(this, [
+                ({ e: [_init_variant$1, _init_title, _init_dismissible, _init_dismissLabel, _init_autoHide, _init_autoHideDuration, _init_duration$1, _init_icon, _init_open$1, _init_floating, _init_noIcon, _init__hasTitleSlot, _init__hasActionsSlot, _initProto$3], c: [_ViAlert, _initClass$3] } = _apply_decs_2203_r$3(this, [
                     [
-                        _dec1$2,
+                        _dec1$3,
                         1,
                         "variant"
                     ],
                     [
-                        _dec2$2,
+                        _dec2$3,
                         1,
                         "title"
                     ],
                     [
-                        _dec3$2,
+                        _dec3$3,
                         1,
                         "dismissible"
                     ],
                     [
-                        _dec4$2,
+                        _dec4$3,
                         1,
                         "dismissLabel"
                     ],
                     [
-                        _dec5$2,
+                        _dec5$3,
                         1,
                         "autoHide"
                     ],
                     [
-                        _dec6$2,
+                        _dec6$3,
                         1,
                         "autoHideDuration"
                     ],
                     [
-                        _dec7$2,
+                        _dec7$3,
                         1,
                         "duration"
                     ],
                     [
-                        _dec8$2,
+                        _dec8$3,
                         1,
                         "icon"
                     ],
                     [
-                        _dec9$2,
+                        _dec9$3,
                         1,
                         "open"
                     ],
                     [
-                        _dec10$2,
+                        _dec10$3,
                         1,
                         "floating"
                     ],
                     [
-                        _dec11$1,
+                        _dec11$2,
                         1,
                         "noIcon"
                     ],
                     [
-                        _dec12,
+                        _dec12$1,
                         1,
                         "_hasTitleSlot"
                     ],
                     [
-                        _dec13,
+                        _dec13$1,
                         1,
                         "_hasActionsSlot"
                     ]
                 ], [
-                    _dec$2
-                ], _ViElement));
+                    _dec$3
+                ], _ViElement$1));
             }
             static styles = css`
     ${unsafeCSS(alertStyles)}
   `;
-            #___private_variant_1 = (_initProto$2(this), _init_variant$1(this, 'info'));
+            #___private_variant_1 = (_initProto$3(this), _init_variant$1(this, 'info'));
             get variant() {
                 return this.#___private_variant_1;
             }
@@ -1181,7 +1181,7 @@ new class extends _identity$2 {
             set autoHideDuration(_v) {
                 this.#___private_autoHideDuration_6 = _v;
             }
-            #___private_duration_7 = _init_duration(this, undefined);
+            #___private_duration_7 = _init_duration$1(this, undefined);
             get duration() {
                 return this.#___private_duration_7;
             }
@@ -1195,7 +1195,7 @@ new class extends _identity$2 {
             set icon(_v) {
                 this.#___private_icon_8 = _v;
             }
-            #___private_open_9 = _init_open(this, true);
+            #___private_open_9 = _init_open$1(this, true);
             get open() {
                 return this.#___private_open_9;
             }
@@ -1468,7 +1468,7 @@ new class extends _identity$2 {
 
 const chipStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{.chip,button{display:inline-flex;align-items:center;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;outline:none;border-style:solid;height:var(--vi-chip-height, var(--vi-chip-height-md, 32px));padding:var(--vi-chip-padding, 0 10px);border-radius:var(--vi-chip-border-radius, 999px);border-width:var(--vi-chip-border-width, 1px);gap:var(--vi-chip-gap, 6px);font-size:var(--vi-chip-font-size, var(--vi-font-size-sm));font-weight:var(--vi-chip-font-weight, var(--vi-font-weight-medium));transition:all var(--vi-chip-transition, .1s ease);background-color:var(--vi-chip-bg-color, var(--vi-layer-02, #f3f4f6));border-color:var(--vi-chip-border-color, var(--vi-border-03, #e0e0e0));color:var(--vi-chip-text-color, var(--vi-color-foreground, #111827))}.chip:focus-visible,button:focus-visible{outline:var(--vi-border-width-base, 2px) solid var(--vi-chip-focus-ring-color, var(--vi-focus, #3676d0));outline-offset:0;box-shadow:0 0 0 3px var(--vi-chip-focus-ring-glow, var(--vi-color-blue-200, #cee6ff))}.chip[aria-disabled=true],button[aria-disabled=true]{cursor:not-allowed}.chip-avatar{display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;width:calc(100% - 8px);height:calc(100% - 8px);margin-inline-start:-4px}.chip-icon{display:inline-flex;align-items:center}.chip-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chip-group{display:flex;align-items:center}}:host{display:inline-block;vertical-align:middle}:host([hidden]){display:none!important}:host([size=sm]) button{--vi-chip-height: var(--vi-chip-height-sm);--vi-chip-font-size: var(--vi-font-size-xs);--vi-chip-padding: 0 8px}:host([size=md]) button{--vi-chip-height: var(--vi-chip-height-md);--vi-chip-font-size: var(--vi-font-size-sm);--vi-chip-padding: 0 10px}:host([size=lg]) button{--vi-chip-height: var(--vi-chip-height-lg);--vi-chip-font-size: var(--vi-font-size-base);--vi-chip-padding: 0 12px}:host([variant=neutral]) button{--vi-chip-bg-color: var(--vi-color-grey-100, #f5f5f5);--vi-chip-border-color: var(--vi-color-grey-300, #e0e0e0);--vi-chip-text-color: var(--vi-color-grey-700, #616161)}:host([variant=neutral]:not([disabled])) button:hover{--vi-chip-bg-color: var(--vi-color-grey-200, #eeeeee);--vi-chip-border-color: var(--vi-color-grey-400, #bdbdbd);--vi-chip-text-color: var(--vi-color-grey-900, #212121)}:host([variant=neutral][selected]) button{--vi-chip-bg-color: var(--vi-color-primary, #3676d0);--vi-chip-border-color: var(--vi-color-primary, #3676d0);--vi-chip-text-color: var(--vi-text-primary-inverse, #ffffff)}:host([variant=neutral][selected]:not([disabled])) button:hover{--vi-chip-bg-color: var(--vi-color-blue-800, #2d5fa8);--vi-chip-border-color: var(--vi-color-blue-800, #2d5fa8)}:host([variant=primary]) button{--vi-chip-bg-color: var(--vi-bg-info, #e3f2fd);--vi-chip-border-color: var(--vi-bg-info, #e3f2fd);--vi-chip-text-color: var(--vi-text-info, #3676d0)}:host([variant=primary]:not([disabled])) button:hover{--vi-chip-bg-color: var(--vi-color-blue-100, #ebf5ff);--vi-chip-border-color: var(--vi-color-blue-200, #cee6ff)}:host([variant=primary][selected]) button{--vi-chip-bg-color: var(--vi-color-info, #3676d0);--vi-chip-border-color: var(--vi-color-info, #3676d0);--vi-chip-text-color: var(--vi-text-primary-inverse, #ffffff)}:host([variant=success]) button{--vi-chip-bg-color: var(--vi-bg-success, #e6f9f0);--vi-chip-border-color: var(--vi-bg-success, #e6f9f0);--vi-chip-text-color: var(--vi-text-success, #265a3d)}:host([variant=success]:not([disabled])) button:hover{--vi-chip-bg-color: var(--vi-color-green-100, #e6f0eb);--vi-chip-border-color: var(--vi-color-green-200, #c0dbcd)}:host([variant=success][selected]) button{--vi-chip-bg-color: var(--vi-color-success, #489167);--vi-chip-border-color: var(--vi-color-success, #489167);--vi-chip-text-color: var(--vi-text-primary-inverse, #ffffff)}:host([variant=warning]) button{--vi-chip-bg-color: var(--vi-bg-warning, #fff8e1);--vi-chip-border-color: var(--vi-bg-warning, #fff8e1);--vi-chip-text-color: var(--vi-text-warning, #e68300)}:host([variant=warning]:not([disabled])) button:hover{--vi-chip-bg-color: var(--vi-color-yellow-100, #ffeab1);--vi-chip-border-color: var(--vi-color-yellow-200, #ffde85)}:host([variant=warning][selected]) button{--vi-chip-bg-color: var(--vi-color-warning, #ffba00);--vi-chip-border-color: var(--vi-color-warning, #ffba00);--vi-chip-text-color: var(--vi-text-primary-inverse, #ffffff)}:host([variant=danger]) button{--vi-chip-bg-color: var(--vi-bg-error, #ffebee);--vi-chip-border-color: var(--vi-bg-error, #ffebee);--vi-chip-text-color: var(--vi-text-error, #db231b)}:host([variant=danger]:not([disabled])) button:hover{--vi-chip-bg-color: var(--vi-color-red-100, #ffccce);--vi-chip-border-color: var(--vi-color-red-200, #f69892)}:host([variant=danger][selected]) button{--vi-chip-bg-color: var(--vi-color-error, #ef4444);--vi-chip-border-color: var(--vi-color-error, #ef4444);--vi-chip-text-color: var(--vi-text-primary-inverse, #ffffff)}:host([variant=info]) button{--vi-chip-bg-color: var(--vi-bg-info, #e3f2fd);--vi-chip-border-color: var(--vi-bg-info, #e3f2fd);--vi-chip-text-color: var(--vi-text-info, #3676d0)}:host([variant=info]:not([disabled])) button:hover{--vi-chip-bg-color: var(--vi-color-blue-100, #ebf5ff);--vi-chip-border-color: var(--vi-color-blue-200, #cee6ff)}:host([variant=info][selected]) button{--vi-chip-bg-color: var(--vi-color-info, #3676d0);--vi-chip-border-color: var(--vi-color-info, #3676d0);--vi-chip-text-color: var(--vi-text-primary-inverse, #ffffff)}:host([disabled]) button{--vi-chip-bg-color: var(--vi-color-grey-50, #fafafa);--vi-chip-border-color: var(--vi-color-grey-200, #eeeeee);--vi-chip-text-color: var(--vi-color-grey-300, #e0e0e0)}.chip-avatar[hidden],.chip-icon[hidden],::slotted([slot=trailing-icon][hidden]){display:none!important}vi-button[part=remove-btn]{margin-inline-start:4px;margin-inline-end:-6px;border-radius:50%;color:inherit}";
 
-function applyDecs2203RFactory$1() {
+function applyDecs2203RFactory$2() {
     function createAddInitializerMethod(initializers, decoratorFinishedRef) {
         return function addInitializer(initializer) {
             assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -1837,108 +1837,108 @@ function applyDecs2203RFactory$1() {
         };
     };
 }
-function _apply_decs_2203_r$1(targetClass, memberDecs, classDecs, parentClass) {
-    return (_apply_decs_2203_r$1 = applyDecs2203RFactory$1())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r$2(targetClass, memberDecs, classDecs, parentClass) {
+    return (_apply_decs_2203_r$2 = applyDecs2203RFactory$2())(targetClass, memberDecs, classDecs, parentClass);
 }
-function _identity$1(x) {
+function _identity$2(x) {
     return x;
 }
-var _dec$1, _initClass$1, _FocusableMixin, _dec1$1, _dec2$1, _dec3$1, _dec4$1, _dec5$1, _dec6$1, _dec7$1, _dec8$1, _dec9$1, _dec10$1, _dec11, /** Value for group selection tracking. */ _init_value$1, /** Selected / active state. */ _init_selected, /** Disables the chip. */ _init_disabled$1, /** Show × remove button. */ _init_removable, /** Screen reader text for the remove button (default: 'Remove') */ _init_removeAriaLabel, /** Base colour. */ _init_variant, /** Chip size. */ _init_size, _init__inGroup, _init__hasAvatar, _init__hasIcon, _init__hasTrailingIcon, _initProto$1;
+var _dec$2, _initClass$2, _FocusableMixin, _dec1$2, _dec2$2, _dec3$2, _dec4$2, _dec5$2, _dec6$2, _dec7$2, _dec8$2, _dec9$2, _dec10$2, _dec11$1, /** Value for group selection tracking. */ _init_value$1, /** Selected / active state. */ _init_selected, /** Disables the chip. */ _init_disabled$1, /** Show × remove button. */ _init_removable, /** Screen reader text for the remove button (default: 'Remove') */ _init_removeAriaLabel, /** Base colour. */ _init_variant, /** Chip size. */ _init_size, _init__inGroup, _init__hasAvatar, _init__hasIcon, _init__hasTrailingIcon, _initProto$2;
 let _ViChip;
-_dec$1 = customElement('vi-chip'), _dec1$1 = property({
+_dec$2 = customElement('vi-chip'), _dec1$2 = property({
     type: String,
     reflect: true
-}), _dec2$1 = property({
+}), _dec2$2 = property({
     type: Boolean,
     reflect: true
-}), _dec3$1 = property({
+}), _dec3$2 = property({
     type: Boolean,
     reflect: true
-}), _dec4$1 = property({
+}), _dec4$2 = property({
     type: Boolean,
     reflect: true
-}), _dec5$1 = property({
+}), _dec5$2 = property({
     type: String,
     attribute: 'remove-aria-label'
-}), _dec6$1 = property({
+}), _dec6$2 = property({
     type: String,
     reflect: true
-}), _dec7$1 = property({
+}), _dec7$2 = property({
     type: String,
     reflect: true
-}), _dec8$1 = state(), _dec9$1 = state(), _dec10$1 = state(), _dec11 = state();
-new class extends _identity$1 {
+}), _dec8$2 = state(), _dec9$2 = state(), _dec10$2 = state(), _dec11$1 = state();
+new class extends _identity$2 {
     constructor(){
-        super(_ViChip), _initClass$1();
+        super(_ViChip), _initClass$2();
     }
     static{
         class ViChip extends (_FocusableMixin = FocusableMixin(ViElement)) {
             static{
-                ({ e: [_init_value$1, _init_selected, _init_disabled$1, _init_removable, _init_removeAriaLabel, _init_variant, _init_size, _init__inGroup, _init__hasAvatar, _init__hasIcon, _init__hasTrailingIcon, _initProto$1], c: [_ViChip, _initClass$1] } = _apply_decs_2203_r$1(this, [
+                ({ e: [_init_value$1, _init_selected, _init_disabled$1, _init_removable, _init_removeAriaLabel, _init_variant, _init_size, _init__inGroup, _init__hasAvatar, _init__hasIcon, _init__hasTrailingIcon, _initProto$2], c: [_ViChip, _initClass$2] } = _apply_decs_2203_r$2(this, [
                     [
-                        _dec1$1,
+                        _dec1$2,
                         1,
                         "value"
                     ],
                     [
-                        _dec2$1,
+                        _dec2$2,
                         1,
                         "selected"
                     ],
                     [
-                        _dec3$1,
+                        _dec3$2,
                         1,
                         "disabled"
                     ],
                     [
-                        _dec4$1,
+                        _dec4$2,
                         1,
                         "removable"
                     ],
                     [
-                        _dec5$1,
+                        _dec5$2,
                         1,
                         "removeAriaLabel"
                     ],
                     [
-                        _dec6$1,
+                        _dec6$2,
                         1,
                         "variant"
                     ],
                     [
-                        _dec7$1,
+                        _dec7$2,
                         1,
                         "size"
                     ],
                     [
-                        _dec8$1,
+                        _dec8$2,
                         1,
                         "_inGroup"
                     ],
                     [
-                        _dec9$1,
+                        _dec9$2,
                         1,
                         "_hasAvatar"
                     ],
                     [
-                        _dec10$1,
+                        _dec10$2,
                         1,
                         "_hasIcon"
                     ],
                     [
-                        _dec11,
+                        _dec11$1,
                         1,
                         "_hasTrailingIcon"
                     ]
                 ], [
-                    _dec$1
+                    _dec$2
                 ], _FocusableMixin));
             }
             static styles = css`${unsafeCSS(chipStyles)}`;
             get _focusableElement() {
                 return this.shadowRoot?.querySelector('button') ?? null;
             }
-            #___private_value_1 = (_initProto$1(this), _init_value$1(this, ''));
+            #___private_value_1 = (_initProto$2(this), _init_value$1(this, ''));
             get value() {
                 return this.#___private_value_1;
             }
@@ -2166,7 +2166,7 @@ new class extends _identity$1 {
 
 const groupStyles = ":host{display:block}:host([hidden]){display:none!important}[part=group]{display:flex;align-items:center}";
 
-function applyDecs2203RFactory() {
+function applyDecs2203RFactory$1() {
     function createAddInitializerMethod(initializers, decoratorFinishedRef) {
         return function addInitializer(initializer) {
             assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -2535,100 +2535,100 @@ function applyDecs2203RFactory() {
         };
     };
 }
-function _apply_decs_2203_r(targetClass, memberDecs, classDecs, parentClass) {
-    return (_apply_decs_2203_r = applyDecs2203RFactory())(targetClass, memberDecs, classDecs, parentClass);
+function _apply_decs_2203_r$1(targetClass, memberDecs, classDecs, parentClass) {
+    return (_apply_decs_2203_r$1 = applyDecs2203RFactory$1())(targetClass, memberDecs, classDecs, parentClass);
 }
-function _identity(x) {
+function _identity$1(x) {
     return x;
 }
-var _dec, _initClass, _ValidityMixin, _dec1, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _dec8, _dec9, _dec10, /** Currently selected chip values. */ _init_value, /** Allow multiple selections. */ _init_multi, /** Form field name. */ _init_name, /** At least one chip must be selected. */ _init_required, /** Disable all chips. */ _init_disabled, /** Chips wrap to next line. */ _init_wrap, /** Gap between chips. */ _init_gap, // ValidityMixin requirements
-_init_status, _init_validityMessage, _init__chips, _initProto;
+var _dec$1, _initClass$1, _ValidityMixin, _dec1$1, _dec2$1, _dec3$1, _dec4$1, _dec5$1, _dec6$1, _dec7$1, _dec8$1, _dec9$1, _dec10$1, /** Currently selected chip values. */ _init_value, /** Allow multiple selections. */ _init_multi, /** Form field name. */ _init_name$1, /** At least one chip must be selected. */ _init_required, /** Disable all chips. */ _init_disabled, /** Chips wrap to next line. */ _init_wrap, /** Gap between chips. */ _init_gap, // ValidityMixin requirements
+_init_status, _init_validityMessage, _init__chips, _initProto$1;
 let _ViChipGroup;
-_dec = customElement('vi-chip-group'), _dec1 = property({
+_dec$1 = customElement('vi-chip-group'), _dec1$1 = property({
     type: Array
-}), _dec2 = property({
+}), _dec2$1 = property({
     type: Boolean
-}), _dec3 = property({
+}), _dec3$1 = property({
     type: String
-}), _dec4 = property({
+}), _dec4$1 = property({
     type: Boolean,
     reflect: true
-}), _dec5 = property({
+}), _dec5$1 = property({
     type: Boolean,
     reflect: true
-}), _dec6 = property({
+}), _dec6$1 = property({
     type: Boolean
-}), _dec7 = property({
+}), _dec7$1 = property({
     type: String
-}), _dec8 = property({
+}), _dec8$1 = property({
     reflect: true
-}), _dec9 = property(), _dec10 = queryAssignedElements({
+}), _dec9$1 = property(), _dec10$1 = queryAssignedElements({
     selector: 'vi-chip'
 });
-new class extends _identity {
+new class extends _identity$1 {
     constructor(){
-        super(_ViChipGroup), _initClass();
+        super(_ViChipGroup), _initClass$1();
     }
     static{
         class ViChipGroup extends (_ValidityMixin = ValidityMixin(ViElement)) {
             static{
-                ({ e: [_init_value, _init_multi, _init_name, _init_required, _init_disabled, _init_wrap, _init_gap, _init_status, _init_validityMessage, _init__chips, _initProto], c: [_ViChipGroup, _initClass] } = _apply_decs_2203_r(this, [
+                ({ e: [_init_value, _init_multi, _init_name$1, _init_required, _init_disabled, _init_wrap, _init_gap, _init_status, _init_validityMessage, _init__chips, _initProto$1], c: [_ViChipGroup, _initClass$1] } = _apply_decs_2203_r$1(this, [
                     [
-                        _dec1,
+                        _dec1$1,
                         1,
                         "value"
                     ],
                     [
-                        _dec2,
+                        _dec2$1,
                         1,
                         "multi"
                     ],
                     [
-                        _dec3,
+                        _dec3$1,
                         1,
                         "name"
                     ],
                     [
-                        _dec4,
+                        _dec4$1,
                         1,
                         "required"
                     ],
                     [
-                        _dec5,
+                        _dec5$1,
                         1,
                         "disabled"
                     ],
                     [
-                        _dec6,
+                        _dec6$1,
                         1,
                         "wrap"
                     ],
                     [
-                        _dec7,
+                        _dec7$1,
                         1,
                         "gap"
                     ],
                     [
-                        _dec8,
+                        _dec8$1,
                         1,
                         "status"
                     ],
                     [
-                        _dec9,
+                        _dec9$1,
                         1,
                         "validityMessage"
                     ],
                     [
-                        _dec10,
+                        _dec10$1,
                         1,
                         "_chips"
                     ]
                 ], [
-                    _dec
+                    _dec$1
                 ], _ValidityMixin));
             }
             static styles = css`${unsafeCSS(groupStyles)}`;
-            #___private_value_1 = (_initProto(this), _init_value(this, []));
+            #___private_value_1 = (_initProto$1(this), _init_value(this, []));
             get value() {
                 return this.#___private_value_1;
             }
@@ -2642,7 +2642,7 @@ new class extends _identity {
             set multi(_v) {
                 this.#___private_multi_2 = _v;
             }
-            #___private_name_3 = _init_name(this, '');
+            #___private_name_3 = _init_name$1(this, '');
             get name() {
                 return this.#___private_name_3;
             }
@@ -2887,4 +2887,1554 @@ new class extends _identity {
     }
 }();
 
-export { _ViAlert as ViAlert, _ViBadge as ViBadge, _ViChip as ViChip, _ViChipGroup as ViChipGroup, ViElement, registerIcons };
+const animationStyles = "@charset \"UTF-8\";@layer reset,components,utilities;:root{--vi-animation-duration-fast: .15s;--vi-animation-duration-base: .3s;--vi-animation-duration-slow: .5s;--vi-animation-easing-standard: cubic-bezier(.2, 0, 0, 1);--vi-animation-easing-entrance: cubic-bezier(0, 0, .2, 1);--vi-animation-easing-exit: cubic-bezier(.4, 0, 1, 1);--vi-animation-easing-bounce: cubic-bezier(.34, 1.56, .64, 1);--vi-animation-expand-max-height: 100vh;--vi-animation-expand-max-width: 100vw}@keyframes vi-fade-in{0%{opacity:0}to{opacity:1}}@keyframes vi-fade-out{0%{opacity:1}to{opacity:0}}@keyframes vi-fade-in-up{0%{opacity:0;transform:translate3d(0,1rem,0)}to{opacity:1;transform:translateZ(0)}}@keyframes vi-fade-in-down{0%{opacity:0;transform:translate3d(0,-1rem,0)}to{opacity:1;transform:translateZ(0)}}@keyframes vi-fade-in-left{0%{opacity:0;transform:translate3d(-1rem,0,0)}to{opacity:1;transform:translateZ(0)}}@keyframes vi-fade-in-right{0%{opacity:0;transform:translate3d(1rem,0,0)}to{opacity:1;transform:translateZ(0)}}@keyframes vi-fade-out-up{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-1rem,0)}}@keyframes vi-fade-out-down{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,1rem,0)}}@keyframes vi-fade-out-left{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(-1rem,0,0)}}@keyframes vi-fade-out-right{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(1rem,0,0)}}@keyframes vi-zoom-in{0%{opacity:0;transform:scale3d(.92,.92,.92)}to{opacity:1;transform:scaleZ(1)}}@keyframes vi-zoom-out{0%{opacity:1;transform:scaleZ(1)}to{opacity:0;transform:scale3d(.92,.92,.92)}}@keyframes vi-scale-up{0%{transform:scale3d(.8,.8,.8)}to{transform:scaleZ(1)}}@keyframes vi-scale-down{0%{transform:scale3d(1.2,1.2,1.2)}to{transform:scaleZ(1)}}@keyframes vi-bounce-in{0%{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:.9;transform:scale3d(1.08,1.08,1.08)}75%{transform:scale3d(.95,.95,.95)}to{opacity:1;transform:scaleZ(1)}}@keyframes vi-bounce-out{0%{opacity:1;transform:scaleZ(1)}20%{transform:scale3d(.9,.9,.9)}50%{opacity:1;transform:scale3d(1.1,1.1,1.1)}to{opacity:0;transform:scale3d(.3,.3,.3)}}@keyframes vi-pop-in{0%{opacity:0;transform:scale3d(.8,.8,1)}70%{transform:scale3d(1.05,1.05,1)}to{opacity:1;transform:scaleZ(1)}}@keyframes vi-pop-out{0%{opacity:1;transform:scaleZ(1)}to{opacity:0;transform:scale3d(.8,.8,1)}}@keyframes vi-slide-in-top{0%{transform:translate3d(0,-100%,0)}to{transform:translateZ(0)}}@keyframes vi-slide-in-bottom{0%{transform:translate3d(0,100%,0)}to{transform:translateZ(0)}}@keyframes vi-slide-in-left{0%{transform:translate3d(-100%,0,0)}to{transform:translateZ(0)}}@keyframes vi-slide-in-right{0%{transform:translate3d(100%,0,0)}to{transform:translateZ(0)}}@keyframes vi-slide-out-top{0%{transform:translateZ(0)}to{transform:translate3d(0,-100%,0)}}@keyframes vi-slide-out-bottom{0%{transform:translateZ(0)}to{transform:translate3d(0,100%,0)}}@keyframes vi-slide-out-left{0%{transform:translateZ(0)}to{transform:translate3d(-100%,0,0)}}@keyframes vi-slide-out-right{0%{transform:translateZ(0)}to{transform:translate3d(100%,0,0)}}@keyframes vi-flip-x{0%{transform:perspective(400px) rotateX(90deg);opacity:0}to{transform:perspective(400px) rotateX(0);opacity:1}}@keyframes vi-flip-y{0%{transform:perspective(400px) rotateY(90deg);opacity:0}to{transform:perspective(400px) rotateY(0);opacity:1}}@keyframes vi-perspective-pop{0%{transform:perspective(600px) translateZ(-100px);opacity:0}to{transform:perspective(600px) translateZ(0);opacity:1}}@keyframes vi-expand-vertical{0%{max-height:0;opacity:0}to{max-height:var(--vi-animation-expand-max-height, 100vh);opacity:1}}@keyframes vi-collapse-vertical{0%{max-height:var(--vi-animation-expand-max-height, 100vh);opacity:1}to{max-height:0;opacity:0}}@keyframes vi-expand-horizontal{0%{max-width:0;opacity:0}to{max-width:var(--vi-animation-expand-max-width, 100vw);opacity:1}}@keyframes vi-collapse-horizontal{0%{max-width:var(--vi-animation-expand-max-width, 100vw);opacity:1}to{max-width:0;opacity:0}}@keyframes vi-pulse{0%{transform:scaleZ(1)}50%{transform:scale3d(1.05,1.05,1.05)}to{transform:scaleZ(1)}}@keyframes vi-bounce{0%,20%,53%,80%,to{transform:translateZ(0)}40%,43%{transform:translate3d(0,-12px,0)}70%{transform:translate3d(0,-6px,0)}90%{transform:translate3d(0,-2px,0)}}@keyframes vi-shake{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-4px,0,0)}20%,40%,60%,80%{transform:translate3d(4px,0,0)}}@keyframes vi-wobble{0%,to{transform:translateZ(0) rotate(0)}15%{transform:translate3d(-15%,0,0) rotate(-4deg)}30%{transform:translate3d(12%,0,0) rotate(3deg)}45%{transform:translate3d(-9%,0,0) rotate(-2deg)}60%{transform:translate3d(6%,0,0) rotate(1deg)}75%{transform:translate3d(-3%,0,0) rotate(-1deg)}}@keyframes vi-heartbeat{0%{transform:scale(1)}14%{transform:scale(1.15)}28%{transform:scale(1)}42%{transform:scale(1.15)}70%{transform:scale(1)}}@keyframes vi-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}:host{display:contents}:host([hidden]){display:none!important}";
+
+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, _ViElement, _dec1, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _dec8, _dec9, _dec10, _dec11, _dec12, _dec13, _dec14, _dec15, _dec16, _dec17, _dec18, _init_name, _init_enter, _init_exit, _init_duration, _init_delay, _init_easing, _init_iterations, _init_direction, _init_fill, _init_open, _init_autoPlay, _init_cascade, _init_stagger, _init_staggerSelector, _init_staggerDirection, _init_reducedMotion, _init_keyframes, _init__isAnimating, _initProto;
+/**
+ * Explicit exit counterpart map.
+ * Replaces fragile string.replace('in','out') which corrupted strings like 'spin' -> 'spout'.
+ */ const EXIT_COUNTERPART = {
+    'fade-in': 'fade-out',
+    'fade-in-up': 'fade-out-down',
+    'fade-in-down': 'fade-out-up',
+    'fade-in-left': 'fade-out-right',
+    'fade-in-right': 'fade-out-left',
+    'zoom-in': 'zoom-out',
+    'scale-up': 'scale-down',
+    'bounce-in': 'bounce-out',
+    'pop-in': 'pop-out',
+    'slide-in-top': 'slide-out-top',
+    'slide-in-bottom': 'slide-out-bottom',
+    'slide-in-left': 'slide-out-left',
+    'slide-in-right': 'slide-out-right',
+    'flip-x': 'fade-out',
+    'flip-y': 'fade-out',
+    'perspective-pop': 'fade-out',
+    'expand-vertical': 'collapse-vertical',
+    'expand-horizontal': 'collapse-horizontal'
+};
+/**
+ * WAAPI (Web Animations API) keyframe definitions — used by this component's imperative
+ * runtime path via `element.animate()`. These are the canonical source for adding or
+ * changing a preset. When you add a preset here you MUST also add the matching
+ * `@keyframes vi-<name>` rule in `libs/flux-ui/components/_animation.scss`, which serves
+ * the parallel CSS-only consumer path (`animation: vi-fade-in 300ms ...`).
+ * The two representations cannot share a runtime source without a build-time code-gen step.
+ */ const PRESET_KEYFRAMES = {
+    'fade-in': [
+        {
+            opacity: 0
+        },
+        {
+            opacity: 1
+        }
+    ],
+    'fade-out': [
+        {
+            opacity: 1
+        },
+        {
+            opacity: 0
+        }
+    ],
+    'fade-in-up': [
+        {
+            opacity: 0,
+            transform: 'translate3d(0, 1rem, 0)'
+        },
+        {
+            opacity: 1,
+            transform: 'translate3d(0, 0, 0)'
+        }
+    ],
+    'fade-in-down': [
+        {
+            opacity: 0,
+            transform: 'translate3d(0, -1rem, 0)'
+        },
+        {
+            opacity: 1,
+            transform: 'translate3d(0, 0, 0)'
+        }
+    ],
+    'fade-in-left': [
+        {
+            opacity: 0,
+            transform: 'translate3d(-1rem, 0, 0)'
+        },
+        {
+            opacity: 1,
+            transform: 'translate3d(0, 0, 0)'
+        }
+    ],
+    'fade-in-right': [
+        {
+            opacity: 0,
+            transform: 'translate3d(1rem, 0, 0)'
+        },
+        {
+            opacity: 1,
+            transform: 'translate3d(0, 0, 0)'
+        }
+    ],
+    'fade-out-up': [
+        {
+            opacity: 1,
+            transform: 'translate3d(0, 0, 0)'
+        },
+        {
+            opacity: 0,
+            transform: 'translate3d(0, -1rem, 0)'
+        }
+    ],
+    'fade-out-down': [
+        {
+            opacity: 1,
+            transform: 'translate3d(0, 0, 0)'
+        },
+        {
+            opacity: 0,
+            transform: 'translate3d(0, 1rem, 0)'
+        }
+    ],
+    'fade-out-left': [
+        {
+            opacity: 1,
+            transform: 'translate3d(0, 0, 0)'
+        },
+        {
+            opacity: 0,
+            transform: 'translate3d(-1rem, 0, 0)'
+        }
+    ],
+    'fade-out-right': [
+        {
+            opacity: 1,
+            transform: 'translate3d(0, 0, 0)'
+        },
+        {
+            opacity: 0,
+            transform: 'translate3d(1rem, 0, 0)'
+        }
+    ],
+    'zoom-in': [
+        {
+            opacity: 0,
+            transform: 'scale3d(0.92, 0.92, 0.92)'
+        },
+        {
+            opacity: 1,
+            transform: 'scale3d(1, 1, 1)'
+        }
+    ],
+    'zoom-out': [
+        {
+            opacity: 1,
+            transform: 'scale3d(1, 1, 1)'
+        },
+        {
+            opacity: 0,
+            transform: 'scale3d(0.92, 0.92, 0.92)'
+        }
+    ],
+    'scale-up': [
+        {
+            transform: 'scale3d(0.8, 0.8, 0.8)'
+        },
+        {
+            transform: 'scale3d(1, 1, 1)'
+        }
+    ],
+    'scale-down': [
+        {
+            transform: 'scale3d(1.2, 1.2, 1.2)'
+        },
+        {
+            transform: 'scale3d(1, 1, 1)'
+        }
+    ],
+    'bounce-in': [
+        {
+            opacity: 0,
+            transform: 'scale3d(0.3, 0.3, 0.3)',
+            offset: 0
+        },
+        {
+            opacity: 0.9,
+            transform: 'scale3d(1.08, 1.08, 1.08)',
+            offset: 0.5
+        },
+        {
+            opacity: 1,
+            transform: 'scale3d(0.95, 0.95, 0.95)',
+            offset: 0.75
+        },
+        {
+            opacity: 1,
+            transform: 'scale3d(1, 1, 1)',
+            offset: 1
+        }
+    ],
+    'bounce-out': [
+        {
+            opacity: 1,
+            transform: 'scale3d(1, 1, 1)',
+            offset: 0
+        },
+        {
+            opacity: 1,
+            transform: 'scale3d(0.9, 0.9, 0.9)',
+            offset: 0.2
+        },
+        {
+            opacity: 1,
+            transform: 'scale3d(1.1, 1.1, 1.1)',
+            offset: 0.5
+        },
+        {
+            opacity: 0,
+            transform: 'scale3d(0.3, 0.3, 0.3)',
+            offset: 1
+        }
+    ],
+    'pop-in': [
+        {
+            opacity: 0,
+            transform: 'scale3d(0.8, 0.8, 1)',
+            offset: 0
+        },
+        {
+            opacity: 1,
+            transform: 'scale3d(1.05, 1.05, 1)',
+            offset: 0.7
+        },
+        {
+            opacity: 1,
+            transform: 'scale3d(1, 1, 1)',
+            offset: 1
+        }
+    ],
+    'pop-out': [
+        {
+            opacity: 1,
+            transform: 'scale3d(1, 1, 1)'
+        },
+        {
+            opacity: 0,
+            transform: 'scale3d(0.8, 0.8, 1)'
+        }
+    ],
+    'slide-in-top': [
+        {
+            transform: 'translate3d(0, -100%, 0)'
+        },
+        {
+            transform: 'translate3d(0, 0, 0)'
+        }
+    ],
+    'slide-in-bottom': [
+        {
+            transform: 'translate3d(0, 100%, 0)'
+        },
+        {
+            transform: 'translate3d(0, 0, 0)'
+        }
+    ],
+    'slide-in-left': [
+        {
+            transform: 'translate3d(-100%, 0, 0)'
+        },
+        {
+            transform: 'translate3d(0, 0, 0)'
+        }
+    ],
+    'slide-in-right': [
+        {
+            transform: 'translate3d(100%, 0, 0)'
+        },
+        {
+            transform: 'translate3d(0, 0, 0)'
+        }
+    ],
+    'slide-out-top': [
+        {
+            transform: 'translate3d(0, 0, 0)'
+        },
+        {
+            transform: 'translate3d(0, -100%, 0)'
+        }
+    ],
+    'slide-out-bottom': [
+        {
+            transform: 'translate3d(0, 0, 0)'
+        },
+        {
+            transform: 'translate3d(0, 100%, 0)'
+        }
+    ],
+    'slide-out-left': [
+        {
+            transform: 'translate3d(0, 0, 0)'
+        },
+        {
+            transform: 'translate3d(-100%, 0, 0)'
+        }
+    ],
+    'slide-out-right': [
+        {
+            transform: 'translate3d(0, 0, 0)'
+        },
+        {
+            transform: 'translate3d(100%, 0, 0)'
+        }
+    ],
+    'flip-x': [
+        {
+            transform: 'perspective(400px) rotate3d(1, 0, 0, 90deg)',
+            opacity: 0
+        },
+        {
+            transform: 'perspective(400px) rotate3d(1, 0, 0, 0deg)',
+            opacity: 1
+        }
+    ],
+    'flip-y': [
+        {
+            transform: 'perspective(400px) rotate3d(0, 1, 0, 90deg)',
+            opacity: 0
+        },
+        {
+            transform: 'perspective(400px) rotate3d(0, 1, 0, 0deg)',
+            opacity: 1
+        }
+    ],
+    'perspective-pop': [
+        {
+            transform: 'perspective(600px) translateZ(-100px)',
+            opacity: 0
+        },
+        {
+            transform: 'perspective(600px) translateZ(0)',
+            opacity: 1
+        }
+    ],
+    // Fallbacks — dynamically replaced with scrollHeight/Width in _getKeyframes
+    'expand-vertical': [
+        {
+            maxHeight: '0px',
+            opacity: 0,
+            overflow: 'hidden'
+        },
+        {
+            maxHeight: '100vh',
+            opacity: 1,
+            overflow: 'hidden'
+        }
+    ],
+    'collapse-vertical': [
+        {
+            maxHeight: '100vh',
+            opacity: 1,
+            overflow: 'hidden'
+        },
+        {
+            maxHeight: '0px',
+            opacity: 0,
+            overflow: 'hidden'
+        }
+    ],
+    'expand-horizontal': [
+        {
+            maxWidth: '0px',
+            opacity: 0,
+            overflow: 'hidden'
+        },
+        {
+            maxWidth: '100vw',
+            opacity: 1,
+            overflow: 'hidden'
+        }
+    ],
+    'collapse-horizontal': [
+        {
+            maxWidth: '100vw',
+            opacity: 1,
+            overflow: 'hidden'
+        },
+        {
+            maxWidth: '0px',
+            opacity: 0,
+            overflow: 'hidden'
+        }
+    ],
+    'pulse': [
+        {
+            transform: 'scale3d(1, 1, 1)'
+        },
+        {
+            transform: 'scale3d(1.05, 1.05, 1.05)'
+        },
+        {
+            transform: 'scale3d(1, 1, 1)'
+        }
+    ],
+    'bounce': [
+        {
+            transform: 'translate3d(0, 0, 0)'
+        },
+        {
+            transform: 'translate3d(0, -12px, 0)'
+        },
+        {
+            transform: 'translate3d(0, 0, 0)'
+        },
+        {
+            transform: 'translate3d(0, -6px, 0)'
+        },
+        {
+            transform: 'translate3d(0, 0, 0)'
+        }
+    ],
+    'shake': [
+        {
+            transform: 'translate3d(0, 0, 0)'
+        },
+        {
+            transform: 'translate3d(-4px, 0, 0)'
+        },
+        {
+            transform: 'translate3d(4px, 0, 0)'
+        },
+        {
+            transform: 'translate3d(-4px, 0, 0)'
+        },
+        {
+            transform: 'translate3d(0, 0, 0)'
+        }
+    ],
+    'wobble': [
+        {
+            transform: 'translate3d(0, 0, 0) rotate(0deg)'
+        },
+        {
+            transform: 'translate3d(-15%, 0, 0) rotate(-4deg)'
+        },
+        {
+            transform: 'translate3d(12%, 0, 0) rotate(3deg)'
+        },
+        {
+            transform: 'translate3d(-9%, 0, 0) rotate(-2deg)'
+        },
+        {
+            transform: 'translate3d(6%, 0, 0) rotate(1deg)'
+        },
+        {
+            transform: 'translate3d(0, 0, 0) rotate(0deg)'
+        }
+    ],
+    'heartbeat': [
+        {
+            transform: 'scale(1)'
+        },
+        {
+            transform: 'scale(1.15)'
+        },
+        {
+            transform: 'scale(1)'
+        },
+        {
+            transform: 'scale(1.15)'
+        },
+        {
+            transform: 'scale(1)'
+        }
+    ],
+    'shimmer': [
+        {
+            backgroundPosition: '-200% 0'
+        },
+        {
+            backgroundPosition: '200% 0'
+        }
+    ]
+};
+const EXPAND_COLLAPSE_PRESETS = new Set([
+    'expand-vertical',
+    'collapse-vertical',
+    'expand-horizontal',
+    'collapse-horizontal'
+]);
+/** Shuffle indices using Fisher-Yates — no duplicate delay slots. */ function shuffleIndices(length) {
+    const arr = Array.from({
+        length
+    }, (_, i)=>i);
+    for(let i = arr.length - 1; i > 0; i--){
+        const j = Math.floor(Math.random() * (i + 1));
+        [arr[i], arr[j]] = [
+            arr[j],
+            arr[i]
+        ];
+    }
+    return arr;
+}
+let _ViAnimation;
+_dec = customElement('vi-animation'), _dec1 = property({
+    type: String,
+    reflect: true
+}), _dec2 = property({
+    type: String,
+    reflect: true
+}), _dec3 = property({
+    type: String,
+    reflect: true
+}), _dec4 = property({
+    type: Number,
+    reflect: true
+}), _dec5 = property({
+    type: Number,
+    reflect: true
+}), _dec6 = property({
+    type: String,
+    reflect: true
+}), _dec7 = property({
+    type: Number,
+    reflect: true
+}), _dec8 = property({
+    type: String,
+    reflect: true
+}), _dec9 = property({
+    type: String,
+    reflect: true
+}), _dec10 = property({
+    type: Boolean,
+    reflect: true
+}), _dec11 = property({
+    type: Boolean,
+    attribute: 'auto-play',
+    reflect: true
+}), _dec12 = property({
+    type: Boolean,
+    reflect: true
+}), _dec13 = property({
+    type: Number,
+    reflect: true
+}), _dec14 = property({
+    type: String,
+    attribute: 'stagger-selector',
+    reflect: true
+}), _dec15 = property({
+    type: String,
+    attribute: 'stagger-direction',
+    reflect: true
+}), _dec16 = property({
+    type: String,
+    attribute: 'reduced-motion',
+    reflect: true
+}), _dec17 = property({
+    attribute: false
+}), _dec18 = state();
+new class extends _identity {
+    constructor(){
+        super(_ViAnimation), _initClass();
+    }
+    static{
+        class ViAnimation extends (_ViElement = ViElement) {
+            static{
+                ({ e: [_init_name, _init_enter, _init_exit, _init_duration, _init_delay, _init_easing, _init_iterations, _init_direction, _init_fill, _init_open, _init_autoPlay, _init_cascade, _init_stagger, _init_staggerSelector, _init_staggerDirection, _init_reducedMotion, _init_keyframes, _init__isAnimating, _initProto], c: [_ViAnimation, _initClass] } = _apply_decs_2203_r(this, [
+                    [
+                        _dec1,
+                        1,
+                        "name"
+                    ],
+                    [
+                        _dec2,
+                        1,
+                        "enter"
+                    ],
+                    [
+                        _dec3,
+                        1,
+                        "exit"
+                    ],
+                    [
+                        _dec4,
+                        1,
+                        "duration"
+                    ],
+                    [
+                        _dec5,
+                        1,
+                        "delay"
+                    ],
+                    [
+                        _dec6,
+                        1,
+                        "easing"
+                    ],
+                    [
+                        _dec7,
+                        1,
+                        "iterations"
+                    ],
+                    [
+                        _dec8,
+                        1,
+                        "direction"
+                    ],
+                    [
+                        _dec9,
+                        1,
+                        "fill"
+                    ],
+                    [
+                        _dec10,
+                        1,
+                        "open"
+                    ],
+                    [
+                        _dec11,
+                        1,
+                        "autoPlay"
+                    ],
+                    [
+                        _dec12,
+                        1,
+                        "cascade"
+                    ],
+                    [
+                        _dec13,
+                        1,
+                        "stagger"
+                    ],
+                    [
+                        _dec14,
+                        1,
+                        "staggerSelector"
+                    ],
+                    [
+                        _dec15,
+                        1,
+                        "staggerDirection"
+                    ],
+                    [
+                        _dec16,
+                        1,
+                        "reducedMotion"
+                    ],
+                    [
+                        _dec17,
+                        1,
+                        "keyframes"
+                    ],
+                    [
+                        _dec18,
+                        1,
+                        "_isAnimating"
+                    ]
+                ], [
+                    _dec
+                ], _ViElement));
+            }
+            static styles = css`${unsafeCSS(animationStyles)}`;
+            #___private_name_1 = (_initProto(this), _init_name(this, 'fade-in'));
+            get name() {
+                return this.#___private_name_1;
+            }
+            set name(_v) {
+                this.#___private_name_1 = _v;
+            }
+            #___private_enter_2 = _init_enter(this, '');
+            get enter() {
+                return this.#___private_enter_2;
+            }
+            set enter(_v) {
+                this.#___private_enter_2 = _v;
+            }
+            #___private_exit_3 = _init_exit(this, '');
+            get exit() {
+                return this.#___private_exit_3;
+            }
+            set exit(_v) {
+                this.#___private_exit_3 = _v;
+            }
+            #___private_duration_4 = _init_duration(this, 300);
+            get duration() {
+                return this.#___private_duration_4;
+            }
+            set duration(_v) {
+                this.#___private_duration_4 = _v;
+            }
+            #___private_delay_5 = _init_delay(this, 0);
+            get delay() {
+                return this.#___private_delay_5;
+            }
+            set delay(_v) {
+                this.#___private_delay_5 = _v;
+            }
+            #___private_easing_6 = _init_easing(this, 'cubic-bezier(0.2, 0, 0, 1)');
+            get easing() {
+                return this.#___private_easing_6;
+            }
+            set easing(_v) {
+                this.#___private_easing_6 = _v;
+            }
+            #___private_iterations_7 = _init_iterations(this, 1);
+            get iterations() {
+                return this.#___private_iterations_7;
+            }
+            set iterations(_v) {
+                this.#___private_iterations_7 = _v;
+            }
+            #___private_direction_8 = _init_direction(this, 'normal');
+            get direction() {
+                return this.#___private_direction_8;
+            }
+            set direction(_v) {
+                this.#___private_direction_8 = _v;
+            }
+            #___private_fill_9 = _init_fill(this, 'forwards');
+            get fill() {
+                return this.#___private_fill_9;
+            }
+            set fill(_v) {
+                this.#___private_fill_9 = _v;
+            }
+            #___private_open_10 = _init_open(this, true);
+            get open() {
+                return this.#___private_open_10;
+            }
+            set open(_v) {
+                this.#___private_open_10 = _v;
+            }
+            #___private_autoPlay_11 = _init_autoPlay(this, true);
+            get autoPlay() {
+                return this.#___private_autoPlay_11;
+            }
+            set autoPlay(_v) {
+                this.#___private_autoPlay_11 = _v;
+            }
+            #___private_cascade_12 = _init_cascade(this, false);
+            get cascade() {
+                return this.#___private_cascade_12;
+            }
+            set cascade(_v) {
+                this.#___private_cascade_12 = _v;
+            }
+            #___private_stagger_13 = _init_stagger(this, 50);
+            get stagger() {
+                return this.#___private_stagger_13;
+            }
+            set stagger(_v) {
+                this.#___private_stagger_13 = _v;
+            }
+            #___private_staggerSelector_14 = _init_staggerSelector(this, ':scope > *');
+            get staggerSelector() {
+                return this.#___private_staggerSelector_14;
+            }
+            set staggerSelector(_v) {
+                this.#___private_staggerSelector_14 = _v;
+            }
+            #___private_staggerDirection_15 = _init_staggerDirection(this, 'normal');
+            get staggerDirection() {
+                return this.#___private_staggerDirection_15;
+            }
+            set staggerDirection(_v) {
+                this.#___private_staggerDirection_15 = _v;
+            }
+            #___private_reducedMotion_16 = _init_reducedMotion(this, 'auto');
+            get reducedMotion() {
+                return this.#___private_reducedMotion_16;
+            }
+            set reducedMotion(_v) {
+                this.#___private_reducedMotion_16 = _v;
+            }
+            #___private_keyframes_17 = _init_keyframes(this, null);
+            get keyframes() {
+                return this.#___private_keyframes_17;
+            }
+            set keyframes(_v) {
+                this.#___private_keyframes_17 = _v;
+            }
+            #___private__isAnimating_18 = _init__isAnimating(this, false);
+            get _isAnimating() {
+                return this.#___private__isAnimating_18;
+            }
+            set _isAnimating(_v) {
+                this.#___private__isAnimating_18 = _v;
+            }
+            _activeAnimations = [];
+            /**
+   * Monotonically incrementing sequence ID. Incremented on every new sequence
+   * start (via _cancelSilently). Async continuations check their captured ID
+   * against the current to detect stale callbacks.
+   */ _sequenceId = 0;
+            /**
+   * Prevents updated() from re-calling show()/hide() when the imperative API
+   * internally mutates this.open to keep it in sync with animation state.
+   */ _updateGuard = false;
+            /** Cached matchMedia object for prefers-reduced-motion. */ _reducedMotionMQ = null;
+            _reducedMotionListener = null;
+            // ─── Public getters ───────────────────────────────────────────────────────
+            /** Whether an animation sequence is currently running. */ get isAnimating() {
+                return this._isAnimating;
+            }
+            // ─── Lifecycle ────────────────────────────────────────────────────────────
+            connectedCallback() {
+                super.connectedCallback();
+                if (!this.open) {
+                    this.hidden = true;
+                } else if (this.autoPlay) {
+                    this.updateComplete.then(()=>this.play());
+                }
+                if (typeof window !== 'undefined') {
+                    this._reducedMotionMQ = window.matchMedia('(prefers-reduced-motion: reduce)');
+                    this._reducedMotionListener = ()=>this.requestUpdate();
+                    this._reducedMotionMQ.addEventListener('change', this._reducedMotionListener);
+                }
+            }
+            disconnectedCallback() {
+                super.disconnectedCallback();
+                // Cancel in-flight animations to release resources on detached nodes
+                this._cancelSilently();
+                if (this._reducedMotionMQ && this._reducedMotionListener) {
+                    this._reducedMotionMQ.removeEventListener('change', this._reducedMotionListener);
+                    this._reducedMotionMQ = null;
+                    this._reducedMotionListener = null;
+                }
+            }
+            updated(changedProperties) {
+                super.updated(changedProperties);
+                // _updateGuard prevents show()/hide() from being called again when the
+                // imperative API internally sets this.open to keep property state in sync
+                if (this._updateGuard) return;
+                if (changedProperties.has('open') && changedProperties.get('open') !== undefined) {
+                    if (this.open) {
+                        this.show();
+                    } else {
+                        this.hide();
+                    }
+                }
+            }
+            // ─── Imperative API ───────────────────────────────────────────────────────
+            /** Returns a snapshot of the currently running Animation objects. */ getAnimations() {
+                return [
+                    ...this._activeAnimations
+                ];
+            }
+            /**
+   * Animate element into view.
+   * Fires cancelable `vi-animation-before-show` — call preventDefault() to block.
+   */ async show() {
+                const allowed = this._dispatchCancelable('vi-animation-before-show', {
+                    name: this.enter || this.name,
+                    target: this,
+                    phase: 'enter'
+                });
+                if (!allowed) {
+                    // If show() was triggered by a declarative open=true change while still hidden,
+                    // revert to a consistent closed state.
+                    if (this.open && this.hidden) {
+                        this._withUpdateGuard(()=>{
+                            this.open = false;
+                            this.hidden = true;
+                        });
+                    }
+                    return;
+                }
+                this._withUpdateGuard(()=>{
+                    if (!this.open) this.open = true;
+                    this.hidden = false;
+                });
+                const animName = this.enter || this.name || 'fade-in';
+                await this._runAnimationSequence(animName, 'enter', false);
+            }
+            /**
+   * Animate element out of view.
+   * Fires cancelable `vi-animation-before-hide` — call preventDefault() to block.
+   */ async hide() {
+                const exitName = this.exit || EXIT_COUNTERPART[this.name] || 'fade-out';
+                const allowed = this._dispatchCancelable('vi-animation-before-hide', {
+                    name: exitName,
+                    target: this,
+                    phase: 'exit'
+                });
+                if (!allowed) {
+                    if (!this.open && !this.hidden) {
+                        this._withUpdateGuard(()=>{
+                            this.open = true;
+                            this.hidden = false;
+                        });
+                    }
+                    return;
+                }
+                await this._runAnimationSequence(exitName, 'exit', true);
+                this._withUpdateGuard(()=>{
+                    if (this.open) this.open = false;
+                    this.hidden = true;
+                });
+            }
+            /** Toggle between show() and hide(). */ async toggle() {
+                if (this.open) {
+                    await this.hide();
+                } else {
+                    await this.show();
+                }
+            }
+            /** Play the current `name` animation without changing visibility. */ async play() {
+                const phase = this.open ? 'enter' : 'custom';
+                await this._runAnimationSequence(this.name, phase, false);
+            }
+            pause() {
+                this._activeAnimations.forEach((a)=>a.pause());
+            }
+            resume() {
+                this._activeAnimations.forEach((a)=>a.play());
+            }
+            reverse() {
+                this._activeAnimations.forEach((a)=>a.reverse());
+            }
+            /**
+   * Cancel all running animations and fire `vi-animation-cancel`.
+   */ cancel() {
+                this._cancelSilently();
+                this._dispatch('vi-animation-cancel', {
+                    name: this.name,
+                    target: this,
+                    phase: 'custom'
+                });
+            }
+            /**
+   * Jump all running animations to their end state and fire `vi-animation-finish`.
+   */ finish() {
+                const anims = [
+                    ...this._activeAnimations
+                ];
+                // Clear state first so stale callbacks don't double-process
+                this._cancelSilently();
+                anims.forEach((a)=>{
+                    try {
+                        a.finish();
+                    } catch  {}
+                });
+                this._dispatch('vi-animation-finish', {
+                    name: this.name,
+                    target: this,
+                    phase: 'custom'
+                });
+            }
+            // ─── Private helpers ──────────────────────────────────────────────────────
+            /**
+   * Cancel all in-flight animations WITHOUT firing a public event.
+   * Used for: self-interruption when a new sequence starts, and for lifecycle cleanup.
+   */ _cancelSilently() {
+                this._sequenceId++; // invalidate any pending async continuations
+                this._activeAnimations.forEach((a)=>{
+                    try {
+                        a.cancel();
+                    } catch  {}
+                });
+                this._activeAnimations = [];
+                this._isAnimating = false;
+            }
+            /**
+   * Runs a function that mutates reactive properties without triggering
+   * the updated() -> show()/hide() feedback loop.
+   */ _withUpdateGuard(fn) {
+                this._updateGuard = true;
+                fn();
+                this.updateComplete.then(()=>{
+                    this._updateGuard = false;
+                });
+            }
+            _getTargetElements() {
+                const slot = this.shadowRoot?.querySelector('slot');
+                if (!slot) return [
+                    this
+                ];
+                const assignedNodes = slot.assignedElements({
+                    flatten: true
+                });
+                if (assignedNodes.length === 0) return [
+                    this
+                ];
+                if (!this.cascade) return assignedNodes;
+                const targetElements = [];
+                for (const node of assignedNodes){
+                    let matched = false;
+                    try {
+                        if (node.matches(this.staggerSelector)) {
+                            targetElements.push(node);
+                            matched = true;
+                        }
+                        const children = Array.from(node.querySelectorAll(this.staggerSelector));
+                        if (children.length > 0) {
+                            targetElements.push(...children);
+                            matched = true;
+                        }
+                    } catch  {
+                        return assignedNodes; // graceful fallback to all assigned nodes
+                    }
+                    if (!matched) targetElements.push(node);
+                }
+                return targetElements.length > 0 ? targetElements : assignedNodes;
+            }
+            /**
+   * Returns keyframes for a given animation name.
+   * - Consumer keyframes are passed through as-is (Keyframe[] or PropertyIndexedKeyframes).
+   * - Expand/collapse presets dynamically read scrollHeight/scrollWidth to avoid magic-number clipping.
+   * - Falls back to PRESET_KEYFRAMES, then 'fade-in' if unknown.
+   */ _getKeyframes(animName, phase, isReducedMotion, target) {
+                // Explicit consumer-supplied keyframes take highest priority
+                if (this.keyframes) return this.keyframes;
+                // For built-in presets under reduced motion, substitute with safe opacity fades
+                if (isReducedMotion) {
+                    return PRESET_KEYFRAMES[phase === 'exit' ? 'fade-out' : 'fade-in'];
+                }
+                // Dynamic expand/collapse using actual element dimensions
+                if (EXPAND_COLLAPSE_PRESETS.has(animName) && target) {
+                    const h = target.scrollHeight;
+                    const w = target.scrollWidth;
+                    switch(animName){
+                        case 'expand-vertical':
+                            return [
+                                {
+                                    maxHeight: '0px',
+                                    opacity: 0,
+                                    overflow: 'hidden'
+                                },
+                                {
+                                    maxHeight: `${h}px`,
+                                    opacity: 1,
+                                    overflow: 'hidden'
+                                }
+                            ];
+                        case 'collapse-vertical':
+                            return [
+                                {
+                                    maxHeight: `${h}px`,
+                                    opacity: 1,
+                                    overflow: 'hidden'
+                                },
+                                {
+                                    maxHeight: '0px',
+                                    opacity: 0,
+                                    overflow: 'hidden'
+                                }
+                            ];
+                        case 'expand-horizontal':
+                            return [
+                                {
+                                    maxWidth: '0px',
+                                    opacity: 0,
+                                    overflow: 'hidden'
+                                },
+                                {
+                                    maxWidth: `${w}px`,
+                                    opacity: 1,
+                                    overflow: 'hidden'
+                                }
+                            ];
+                        case 'collapse-horizontal':
+                            return [
+                                {
+                                    maxWidth: `${w}px`,
+                                    opacity: 1,
+                                    overflow: 'hidden'
+                                },
+                                {
+                                    maxWidth: '0px',
+                                    opacity: 0,
+                                    overflow: 'hidden'
+                                }
+                            ];
+                    }
+                }
+                return PRESET_KEYFRAMES[animName] ?? PRESET_KEYFRAMES['fade-in'];
+            }
+            _calculateStaggerDelay(index, total, shuffledOrder) {
+                if (!this.cascade || total <= 1) return this.delay;
+                let orderIndex = index;
+                if (this.staggerDirection === 'reverse') {
+                    orderIndex = total - 1 - index;
+                } else if (this.staggerDirection === 'center') {
+                    orderIndex = Math.abs((total - 1) / 2 - index);
+                } else if (this.staggerDirection === 'random' && shuffledOrder) {
+                    orderIndex = shuffledOrder[index];
+                }
+                return this.delay + orderIndex * this.stagger;
+            }
+            async _runAnimationSequence(animName, phase, isExitPhase) {
+                const isReduced = this._shouldReduceMotion();
+                const targets = this._getTargetElements();
+                if (targets.length === 0) return;
+                // Interrupt previous sequence silently (no vi-animation-cancel event)
+                this._cancelSilently();
+                const mySequenceId = this._sequenceId;
+                this._isAnimating = true;
+                // 'auto' mode: shorten duration AND substitute keyframes.
+                // 'fade-only' mode: substitute keyframes only, original duration is preserved.
+                const actualDuration = isReduced && this.reducedMotion !== 'fade-only' ? Math.min(this.duration, 100) : this.duration;
+                this._dispatch('vi-animation-start', {
+                    name: animName,
+                    target: this,
+                    phase,
+                    duration: actualDuration,
+                    delay: this.delay
+                });
+                // Pre-compute shuffled order so all elements get unique, non-repeating delay slots
+                const shuffledOrder = this.staggerDirection === 'random' ? shuffleIndices(targets.length) : undefined;
+                const animationPromises = targets.map((el, index)=>{
+                    const elementDelay = isReduced ? 0 : this._calculateStaggerDelay(index, targets.length, shuffledOrder);
+                    const kf = this._getKeyframes(animName, phase, isReduced, el);
+                    const anim = el.animate(kf, {
+                        duration: actualDuration,
+                        delay: elementDelay,
+                        easing: this.easing,
+                        iterations: this.iterations,
+                        direction: this.direction,
+                        fill: this.fill
+                    });
+                    this._activeAnimations.push(anim);
+                    return anim.finished.then(()=>{
+                        // For exit animations: commit the end-frame styles to element.style and
+                        // cancel the WAAPI fill so external CSS can take over later (avoids
+                        // invisible elements if the element is re-shown via show() or style).
+                        if (isExitPhase) {
+                            try {
+                                anim.commitStyles();
+                            } catch  {}
+                            try {
+                                anim.cancel();
+                            } catch  {}
+                        }
+                    }, ()=>null);
+                });
+                await Promise.all(animationPromises);
+                // Discard stale result if a newer sequence has already started
+                if (this._sequenceId !== mySequenceId) return;
+                this._isAnimating = false;
+                this._activeAnimations = [];
+                this._dispatch('vi-animation-end', {
+                    name: animName,
+                    target: this,
+                    phase,
+                    completed: true
+                });
+            }
+            /**
+   * Returns whether any reduced-motion adaptation should be applied.
+   *
+   * Both 'auto' and 'fade-only' gate on the OS/browser preference so that the attribute
+   * does not override what the user has configured at the system level. The distinction
+   * between them is captured in _runAnimationSequence:
+   *   - 'auto':      shorten duration (≤100 ms) + substitute with opacity fade.
+   *   - 'fade-only': substitute with opacity fade, but keep the original duration.
+   *   - 'disable':   ignore OS preference entirely — always play the full animation.
+   */ _shouldReduceMotion() {
+                if (this.reducedMotion === 'disable') return false;
+                // Gate on the OS/browser preference for both 'auto' and 'fade-only'.
+                return this._reducedMotionMQ?.matches ?? (typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+            }
+            _dispatch(eventName, detail) {
+                this.dispatchEvent(new CustomEvent(eventName, {
+                    detail,
+                    bubbles: true,
+                    composed: true
+                }));
+            }
+            /**
+   * Dispatch a cancelable event. Returns true if the animation should proceed
+   * (i.e. preventDefault() was NOT called), false if it should be blocked.
+   */ _dispatchCancelable(eventName, detail) {
+                const event = new CustomEvent(eventName, {
+                    detail,
+                    bubbles: true,
+                    composed: true,
+                    cancelable: true
+                });
+                this.dispatchEvent(event);
+                return !event.defaultPrevented;
+            }
+            render() {
+                return html`<slot></slot>`;
+            }
+        }
+    }
+}();
+
+export { _ViAlert as ViAlert, _ViAnimation as ViAnimation, _ViBadge as ViBadge, _ViChip as ViChip, _ViChipGroup as ViChipGroup, ViElement, registerIcons };