@vialiq/web-components 0.9.0 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.js CHANGED
@@ -12,11 +12,13 @@ export { ViTextarea } from './textarea/vi-textarea.js';
12
12
  export { ViAccordion } from './accordion/vi-accordion.js';
13
13
  export { ViAccordionItem } from './accordion/vi-accordion-item.js';
14
14
  import { unsafeCSS, css, html } from 'lit';
15
- import { customElement, property, state } from 'lit/decorators.js';
15
+ import { customElement, property, state, queryAssignedElements } from 'lit/decorators.js';
16
+ import { F as FocusableMixin } from './focusable-mixin-CmxOyPX5.js';
17
+ import { V as ValidityMixin } from './validity-mixin-H4aOFJEr.js';
16
18
 
17
19
  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}";
18
20
 
19
- function applyDecs2203RFactory$1() {
21
+ function applyDecs2203RFactory$4() {
20
22
  function createAddInitializerMethod(initializers, decoratorFinishedRef) {
21
23
  return function addInitializer(initializer) {
22
24
  assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -385,110 +387,110 @@ function applyDecs2203RFactory$1() {
385
387
  };
386
388
  };
387
389
  }
388
- function _apply_decs_2203_r$1(targetClass, memberDecs, classDecs, parentClass) {
389
- return (_apply_decs_2203_r$1 = applyDecs2203RFactory$1())(targetClass, memberDecs, classDecs, parentClass);
390
+ function _apply_decs_2203_r$4(targetClass, memberDecs, classDecs, parentClass) {
391
+ return (_apply_decs_2203_r$4 = applyDecs2203RFactory$4())(targetClass, memberDecs, classDecs, parentClass);
390
392
  }
391
- function _identity$1(x) {
393
+ function _identity$4(x) {
392
394
  return x;
393
395
  }
394
- var _dec$1, _initClass$1, _ViElement$1, _dec1$1, _dec2$1, _dec3$1, _dec4$1, _dec5$1, _dec6$1, _dec7$1, _dec8$1, _dec9$1, _dec10$1, /** Colour semantic */ _init_variant$1, /** Size */ _init_size, /** 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, _init__hasDefaultSlot, _initProto$1;
396
+ 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;
395
397
  let _ViBadge;
396
- _dec$1 = customElement('vi-badge'), _dec1$1 = property({
398
+ _dec$4 = customElement('vi-badge'), _dec1$4 = property({
397
399
  type: String,
398
400
  reflect: true
399
- }), _dec2$1 = property({
401
+ }), _dec2$4 = property({
400
402
  type: String,
401
403
  reflect: true
402
- }), _dec3$1 = property({
404
+ }), _dec3$4 = property({
403
405
  type: Boolean,
404
406
  reflect: true
405
- }), _dec4$1 = property({
407
+ }), _dec4$4 = property({
406
408
  type: Boolean,
407
409
  reflect: true
408
- }), _dec5$1 = property({
410
+ }), _dec5$4 = property({
409
411
  type: Number,
410
412
  reflect: true
411
- }), _dec6$1 = property({
413
+ }), _dec6$4 = property({
412
414
  type: Boolean,
413
415
  reflect: true,
414
416
  attribute: 'show-zero'
415
- }), _dec7$1 = property({
417
+ }), _dec7$4 = property({
416
418
  type: Number
417
- }), _dec8$1 = property({
419
+ }), _dec8$4 = property({
418
420
  type: Boolean,
419
421
  reflect: true
420
- }), _dec9$1 = state(), _dec10$1 = state();
421
- new class extends _identity$1 {
422
+ }), _dec9$4 = state(), _dec10$4 = state();
423
+ new class extends _identity$4 {
422
424
  constructor(){
423
- super(_ViBadge), _initClass$1();
425
+ super(_ViBadge), _initClass$4();
424
426
  }
425
427
  static{
426
- class ViBadge extends (_ViElement$1 = ViElement) {
428
+ class ViBadge extends (_ViElement$2 = ViElement) {
427
429
  static{
428
- ({ e: [_init_variant$1, _init_size, _init_dot, _init_pill, _init_count, _init_showZero, _init_max, _init_outline, _init__hasIcon, _init__hasDefaultSlot, _initProto$1], c: [_ViBadge, _initClass$1] } = _apply_decs_2203_r$1(this, [
430
+ ({ 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, [
429
431
  [
430
- _dec1$1,
432
+ _dec1$4,
431
433
  1,
432
434
  "variant"
433
435
  ],
434
436
  [
435
- _dec2$1,
437
+ _dec2$4,
436
438
  1,
437
439
  "size"
438
440
  ],
439
441
  [
440
- _dec3$1,
442
+ _dec3$4,
441
443
  1,
442
444
  "dot"
443
445
  ],
444
446
  [
445
- _dec4$1,
447
+ _dec4$4,
446
448
  1,
447
449
  "pill"
448
450
  ],
449
451
  [
450
- _dec5$1,
452
+ _dec5$4,
451
453
  1,
452
454
  "count"
453
455
  ],
454
456
  [
455
- _dec6$1,
457
+ _dec6$4,
456
458
  1,
457
459
  "showZero"
458
460
  ],
459
461
  [
460
- _dec7$1,
462
+ _dec7$4,
461
463
  1,
462
464
  "max"
463
465
  ],
464
466
  [
465
- _dec8$1,
467
+ _dec8$4,
466
468
  1,
467
469
  "outline"
468
470
  ],
469
471
  [
470
- _dec9$1,
472
+ _dec9$4,
471
473
  1,
472
474
  "_hasIcon"
473
475
  ],
474
476
  [
475
- _dec10$1,
477
+ _dec10$4,
476
478
  1,
477
479
  "_hasDefaultSlot"
478
480
  ]
479
481
  ], [
480
- _dec$1
481
- ], _ViElement$1));
482
+ _dec$4
483
+ ], _ViElement$2));
482
484
  }
483
485
  static styles = css`${unsafeCSS(badgeStyles)}`;
484
- #___private_variant_1 = (_initProto$1(this), _init_variant$1(this, 'neutral'));
486
+ #___private_variant_1 = (_initProto$4(this), _init_variant$2(this, 'neutral'));
485
487
  get variant() {
486
488
  return this.#___private_variant_1;
487
489
  }
488
490
  set variant(_v) {
489
491
  this.#___private_variant_1 = _v;
490
492
  }
491
- #___private_size_2 = _init_size(this, 'md');
493
+ #___private_size_2 = _init_size$1(this, 'md');
492
494
  get size() {
493
495
  return this.#___private_size_2;
494
496
  }
@@ -537,7 +539,7 @@ new class extends _identity$1 {
537
539
  set outline(_v) {
538
540
  this.#___private_outline_8 = _v;
539
541
  }
540
- #___private__hasIcon_9 = _init__hasIcon(this, false);
542
+ #___private__hasIcon_9 = _init__hasIcon$1(this, false);
541
543
  get _hasIcon() {
542
544
  return this.#___private__hasIcon_9;
543
545
  }
@@ -614,7 +616,7 @@ new class extends _identity$1 {
614
616
 
615
617
  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}";
616
618
 
617
- function applyDecs2203RFactory() {
619
+ function applyDecs2203RFactory$3() {
618
620
  function createAddInitializerMethod(initializers, decoratorFinishedRef) {
619
621
  return function addInitializer(initializer) {
620
622
  assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -983,19 +985,19 @@ function applyDecs2203RFactory() {
983
985
  };
984
986
  };
985
987
  }
986
- function _apply_decs_2203_r(targetClass, memberDecs, classDecs, parentClass) {
987
- return (_apply_decs_2203_r = applyDecs2203RFactory())(targetClass, memberDecs, classDecs, parentClass);
988
+ function _apply_decs_2203_r$3(targetClass, memberDecs, classDecs, parentClass) {
989
+ return (_apply_decs_2203_r$3 = applyDecs2203RFactory$3())(targetClass, memberDecs, classDecs, parentClass);
988
990
  }
989
- function _identity(x) {
991
+ function _identity$3(x) {
990
992
  return x;
991
993
  }
992
- var _dec, _initClass, _ViElement, _dec1, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _dec8, _dec9, _dec10, _dec11, _dec12, _dec13, /** Colour, icon, ARIA role */ _init_variant, /** Bold headline (optional) */ _init_title, /** Show × dismiss button */ _init_dismissible, /** Accessible label for the dismiss button */ _init_dismissLabel, /**
994
+ 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, /**
993
995
  * Enables auto-hiding after a duration (default: 5000ms).
994
996
  * Note: Setting a positive `duration` or `auto-hide-duration` also implicitly enables auto-hiding.
995
- */ _init_autoHide, /** Auto hide duration in milliseconds (default: 5000ms) */ _init_autoHideDuration, /**
997
+ */ _init_autoHide, /** Auto hide duration in milliseconds (default: 5000ms) */ _init_autoHideDuration, /**
996
998
  * Alias for auto-hide-duration in milliseconds.
997
999
  * Setting a positive duration enables auto-hiding automatically.
998
- */ _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;
1000
+ */ _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;
999
1001
  const checkCircleIcon = {
1000
1002
  name: 'check-circle',
1001
1003
  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>`
@@ -1024,120 +1026,120 @@ registerIcons([
1024
1026
  lockIcon
1025
1027
  ]);
1026
1028
  let _ViAlert;
1027
- _dec = customElement('vi-alert'), _dec1 = property({
1029
+ _dec$3 = customElement('vi-alert'), _dec1$3 = property({
1028
1030
  type: String,
1029
1031
  reflect: true
1030
- }), _dec2 = property({
1032
+ }), _dec2$3 = property({
1031
1033
  type: String
1032
- }), _dec3 = property({
1034
+ }), _dec3$3 = property({
1033
1035
  type: Boolean,
1034
1036
  reflect: true
1035
- }), _dec4 = property({
1037
+ }), _dec4$3 = property({
1036
1038
  type: String,
1037
1039
  attribute: 'dismiss-label'
1038
- }), _dec5 = property({
1040
+ }), _dec5$3 = property({
1039
1041
  type: Boolean,
1040
1042
  attribute: 'auto-hide',
1041
1043
  reflect: true
1042
- }), _dec6 = property({
1044
+ }), _dec6$3 = property({
1043
1045
  type: Number,
1044
1046
  attribute: 'auto-hide-duration'
1045
- }), _dec7 = property({
1047
+ }), _dec7$3 = property({
1046
1048
  type: Number
1047
- }), _dec8 = property({
1049
+ }), _dec8$3 = property({
1048
1050
  type: String
1049
- }), _dec9 = property({
1051
+ }), _dec9$3 = property({
1050
1052
  type: Boolean,
1051
1053
  reflect: true
1052
- }), _dec10 = property({
1054
+ }), _dec10$3 = property({
1053
1055
  type: Boolean,
1054
1056
  reflect: true
1055
- }), _dec11 = property({
1057
+ }), _dec11$2 = property({
1056
1058
  type: Boolean,
1057
1059
  attribute: 'no-icon',
1058
1060
  reflect: true
1059
- }), _dec12 = state(), _dec13 = state();
1060
- new class extends _identity {
1061
+ }), _dec12$1 = state(), _dec13$1 = state();
1062
+ new class extends _identity$3 {
1061
1063
  constructor(){
1062
- super(_ViAlert), _initClass();
1064
+ super(_ViAlert), _initClass$3();
1063
1065
  }
1064
1066
  static{
1065
- class ViAlert extends (_ViElement = ViElement) {
1067
+ class ViAlert extends (_ViElement$1 = ViElement) {
1066
1068
  static{
1067
- ({ e: [_init_variant, _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], c: [_ViAlert, _initClass] } = _apply_decs_2203_r(this, [
1069
+ ({ 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, [
1068
1070
  [
1069
- _dec1,
1071
+ _dec1$3,
1070
1072
  1,
1071
1073
  "variant"
1072
1074
  ],
1073
1075
  [
1074
- _dec2,
1076
+ _dec2$3,
1075
1077
  1,
1076
1078
  "title"
1077
1079
  ],
1078
1080
  [
1079
- _dec3,
1081
+ _dec3$3,
1080
1082
  1,
1081
1083
  "dismissible"
1082
1084
  ],
1083
1085
  [
1084
- _dec4,
1086
+ _dec4$3,
1085
1087
  1,
1086
1088
  "dismissLabel"
1087
1089
  ],
1088
1090
  [
1089
- _dec5,
1091
+ _dec5$3,
1090
1092
  1,
1091
1093
  "autoHide"
1092
1094
  ],
1093
1095
  [
1094
- _dec6,
1096
+ _dec6$3,
1095
1097
  1,
1096
1098
  "autoHideDuration"
1097
1099
  ],
1098
1100
  [
1099
- _dec7,
1101
+ _dec7$3,
1100
1102
  1,
1101
1103
  "duration"
1102
1104
  ],
1103
1105
  [
1104
- _dec8,
1106
+ _dec8$3,
1105
1107
  1,
1106
1108
  "icon"
1107
1109
  ],
1108
1110
  [
1109
- _dec9,
1111
+ _dec9$3,
1110
1112
  1,
1111
1113
  "open"
1112
1114
  ],
1113
1115
  [
1114
- _dec10,
1116
+ _dec10$3,
1115
1117
  1,
1116
1118
  "floating"
1117
1119
  ],
1118
1120
  [
1119
- _dec11,
1121
+ _dec11$2,
1120
1122
  1,
1121
1123
  "noIcon"
1122
1124
  ],
1123
1125
  [
1124
- _dec12,
1126
+ _dec12$1,
1125
1127
  1,
1126
1128
  "_hasTitleSlot"
1127
1129
  ],
1128
1130
  [
1129
- _dec13,
1131
+ _dec13$1,
1130
1132
  1,
1131
1133
  "_hasActionsSlot"
1132
1134
  ]
1133
1135
  ], [
1134
- _dec
1135
- ], _ViElement));
1136
+ _dec$3
1137
+ ], _ViElement$1));
1136
1138
  }
1137
1139
  static styles = css`
1138
1140
  ${unsafeCSS(alertStyles)}
1139
1141
  `;
1140
- #___private_variant_1 = (_initProto(this), _init_variant(this, 'info'));
1142
+ #___private_variant_1 = (_initProto$3(this), _init_variant$1(this, 'info'));
1141
1143
  get variant() {
1142
1144
  return this.#___private_variant_1;
1143
1145
  }
@@ -1179,7 +1181,7 @@ new class extends _identity {
1179
1181
  set autoHideDuration(_v) {
1180
1182
  this.#___private_autoHideDuration_6 = _v;
1181
1183
  }
1182
- #___private_duration_7 = _init_duration(this, undefined);
1184
+ #___private_duration_7 = _init_duration$1(this, undefined);
1183
1185
  get duration() {
1184
1186
  return this.#___private_duration_7;
1185
1187
  }
@@ -1193,7 +1195,7 @@ new class extends _identity {
1193
1195
  set icon(_v) {
1194
1196
  this.#___private_icon_8 = _v;
1195
1197
  }
1196
- #___private_open_9 = _init_open(this, true);
1198
+ #___private_open_9 = _init_open$1(this, true);
1197
1199
  get open() {
1198
1200
  return this.#___private_open_9;
1199
1201
  }
@@ -1464,4 +1466,2975 @@ new class extends _identity {
1464
1466
  }
1465
1467
  }();
1466
1468
 
1467
- export { _ViAlert as ViAlert, _ViBadge as ViBadge, ViElement, registerIcons };
1469
+ 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}";
1470
+
1471
+ function applyDecs2203RFactory$2() {
1472
+ function createAddInitializerMethod(initializers, decoratorFinishedRef) {
1473
+ return function addInitializer(initializer) {
1474
+ assertNotFinished(decoratorFinishedRef, "addInitializer");
1475
+ assertCallable(initializer, "An initializer");
1476
+ initializers.push(initializer);
1477
+ };
1478
+ }
1479
+ function memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value) {
1480
+ var kindStr;
1481
+ switch(kind){
1482
+ case 1:
1483
+ kindStr = "accessor";
1484
+ break;
1485
+ case 2:
1486
+ kindStr = "method";
1487
+ break;
1488
+ case 3:
1489
+ kindStr = "getter";
1490
+ break;
1491
+ case 4:
1492
+ kindStr = "setter";
1493
+ break;
1494
+ default:
1495
+ kindStr = "field";
1496
+ }
1497
+ var ctx = {
1498
+ kind: kindStr,
1499
+ name: isPrivate ? "#" + name : name,
1500
+ static: isStatic,
1501
+ private: isPrivate,
1502
+ metadata: metadata
1503
+ };
1504
+ var decoratorFinishedRef = {
1505
+ v: false
1506
+ };
1507
+ ctx.addInitializer = createAddInitializerMethod(initializers, decoratorFinishedRef);
1508
+ var get, set;
1509
+ if (kind === 0) {
1510
+ if (isPrivate) {
1511
+ get = desc.get;
1512
+ set = desc.set;
1513
+ } else {
1514
+ get = function() {
1515
+ return this[name];
1516
+ };
1517
+ set = function(v) {
1518
+ this[name] = v;
1519
+ };
1520
+ }
1521
+ } else if (kind === 2) {
1522
+ get = function() {
1523
+ return desc.value;
1524
+ };
1525
+ } else {
1526
+ if (kind === 1 || kind === 3) {
1527
+ get = function() {
1528
+ return desc.get.call(this);
1529
+ };
1530
+ }
1531
+ if (kind === 1 || kind === 4) {
1532
+ set = function(v) {
1533
+ desc.set.call(this, v);
1534
+ };
1535
+ }
1536
+ }
1537
+ ctx.access = get && set ? {
1538
+ get: get,
1539
+ set: set
1540
+ } : get ? {
1541
+ get: get
1542
+ } : {
1543
+ set: set
1544
+ };
1545
+ try {
1546
+ return dec(value, ctx);
1547
+ } finally{
1548
+ decoratorFinishedRef.v = true;
1549
+ }
1550
+ }
1551
+ function assertNotFinished(decoratorFinishedRef, fnName) {
1552
+ if (decoratorFinishedRef.v) {
1553
+ throw new Error("attempted to call " + fnName + " after decoration was finished");
1554
+ }
1555
+ }
1556
+ function assertCallable(fn, hint) {
1557
+ if (typeof fn !== "function") {
1558
+ throw new TypeError(hint + " must be a function");
1559
+ }
1560
+ }
1561
+ function assertValidReturnValue(kind, value) {
1562
+ var type = typeof value;
1563
+ if (kind === 1) {
1564
+ if (type !== "object" || value === null) {
1565
+ throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
1566
+ }
1567
+ if (value.get !== undefined) {
1568
+ assertCallable(value.get, "accessor.get");
1569
+ }
1570
+ if (value.set !== undefined) {
1571
+ assertCallable(value.set, "accessor.set");
1572
+ }
1573
+ if (value.init !== undefined) {
1574
+ assertCallable(value.init, "accessor.init");
1575
+ }
1576
+ } else if (type !== "function") {
1577
+ var hint;
1578
+ if (kind === 0) {
1579
+ hint = "field";
1580
+ } else if (kind === 10) {
1581
+ hint = "class";
1582
+ } else {
1583
+ hint = "method";
1584
+ }
1585
+ throw new TypeError(hint + " decorators must return a function or void 0");
1586
+ }
1587
+ }
1588
+ function applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata) {
1589
+ var decs = decInfo[0];
1590
+ var desc, init, value;
1591
+ if (isPrivate) {
1592
+ if (kind === 0 || kind === 1) {
1593
+ desc = {
1594
+ get: decInfo[3],
1595
+ set: decInfo[4]
1596
+ };
1597
+ } else if (kind === 3) {
1598
+ desc = {
1599
+ get: decInfo[3]
1600
+ };
1601
+ } else if (kind === 4) {
1602
+ desc = {
1603
+ set: decInfo[3]
1604
+ };
1605
+ } else {
1606
+ desc = {
1607
+ value: decInfo[3]
1608
+ };
1609
+ }
1610
+ } else if (kind !== 0) {
1611
+ desc = Object.getOwnPropertyDescriptor(base, name);
1612
+ }
1613
+ if (kind === 1) {
1614
+ value = {
1615
+ get: desc.get,
1616
+ set: desc.set
1617
+ };
1618
+ } else if (kind === 2) {
1619
+ value = desc.value;
1620
+ } else if (kind === 3) {
1621
+ value = desc.get;
1622
+ } else if (kind === 4) {
1623
+ value = desc.set;
1624
+ }
1625
+ var newValue, get, set;
1626
+ if (typeof decs === "function") {
1627
+ newValue = memberDec(decs, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
1628
+ if (newValue !== void 0) {
1629
+ assertValidReturnValue(kind, newValue);
1630
+ if (kind === 0) {
1631
+ init = newValue;
1632
+ } else if (kind === 1) {
1633
+ init = newValue.init;
1634
+ get = newValue.get || value.get;
1635
+ set = newValue.set || value.set;
1636
+ value = {
1637
+ get: get,
1638
+ set: set
1639
+ };
1640
+ } else {
1641
+ value = newValue;
1642
+ }
1643
+ }
1644
+ } else {
1645
+ for(var i = decs.length - 1; i >= 0; i--){
1646
+ var dec = decs[i];
1647
+ newValue = memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
1648
+ if (newValue !== void 0) {
1649
+ assertValidReturnValue(kind, newValue);
1650
+ var newInit;
1651
+ if (kind === 0) {
1652
+ newInit = newValue;
1653
+ } else if (kind === 1) {
1654
+ newInit = newValue.init;
1655
+ get = newValue.get || value.get;
1656
+ set = newValue.set || value.set;
1657
+ value = {
1658
+ get: get,
1659
+ set: set
1660
+ };
1661
+ } else {
1662
+ value = newValue;
1663
+ }
1664
+ if (newInit !== void 0) {
1665
+ if (init === void 0) {
1666
+ init = newInit;
1667
+ } else if (typeof init === "function") {
1668
+ init = [
1669
+ init,
1670
+ newInit
1671
+ ];
1672
+ } else {
1673
+ init.push(newInit);
1674
+ }
1675
+ }
1676
+ }
1677
+ }
1678
+ }
1679
+ if (kind === 0 || kind === 1) {
1680
+ if (init === void 0) {
1681
+ init = function(instance, init) {
1682
+ return init;
1683
+ };
1684
+ } else if (typeof init !== "function") {
1685
+ var ownInitializers = init;
1686
+ init = function(instance, init) {
1687
+ var value = init;
1688
+ for(var i = 0; i < ownInitializers.length; i++){
1689
+ value = ownInitializers[i].call(instance, value);
1690
+ }
1691
+ return value;
1692
+ };
1693
+ } else {
1694
+ var originalInitializer = init;
1695
+ init = function(instance, init) {
1696
+ return originalInitializer.call(instance, init);
1697
+ };
1698
+ }
1699
+ ret.push(init);
1700
+ }
1701
+ if (kind !== 0) {
1702
+ if (kind === 1) {
1703
+ desc.get = value.get;
1704
+ desc.set = value.set;
1705
+ } else if (kind === 2) {
1706
+ desc.value = value;
1707
+ } else if (kind === 3) {
1708
+ desc.get = value;
1709
+ } else if (kind === 4) {
1710
+ desc.set = value;
1711
+ }
1712
+ if (isPrivate) {
1713
+ if (kind === 1) {
1714
+ ret.push(function(instance, args) {
1715
+ return value.get.call(instance, args);
1716
+ });
1717
+ ret.push(function(instance, args) {
1718
+ return value.set.call(instance, args);
1719
+ });
1720
+ } else if (kind === 2) {
1721
+ ret.push(value);
1722
+ } else {
1723
+ ret.push(function(instance, args) {
1724
+ return value.call(instance, args);
1725
+ });
1726
+ }
1727
+ } else {
1728
+ Object.defineProperty(base, name, desc);
1729
+ }
1730
+ }
1731
+ }
1732
+ function applyMemberDecs(Class, decInfos, metadata) {
1733
+ var ret = [];
1734
+ var protoInitializers;
1735
+ var staticInitializers;
1736
+ var existingProtoNonFields = new Map();
1737
+ var existingStaticNonFields = new Map();
1738
+ for(var i = 0; i < decInfos.length; i++){
1739
+ var decInfo = decInfos[i];
1740
+ if (!Array.isArray(decInfo)) continue;
1741
+ var kind = decInfo[1];
1742
+ var name = decInfo[2];
1743
+ var isPrivate = decInfo.length > 3;
1744
+ var isStatic = kind >= 5;
1745
+ var base;
1746
+ var initializers;
1747
+ if (isStatic) {
1748
+ base = Class;
1749
+ kind = kind - 5;
1750
+ staticInitializers = staticInitializers || [];
1751
+ initializers = staticInitializers;
1752
+ } else {
1753
+ base = Class.prototype;
1754
+ protoInitializers = protoInitializers || [];
1755
+ initializers = protoInitializers;
1756
+ }
1757
+ if (kind !== 0 && !isPrivate) {
1758
+ var existingNonFields = isStatic ? existingStaticNonFields : existingProtoNonFields;
1759
+ var existingKind = existingNonFields.get(name) || 0;
1760
+ if (existingKind === true || existingKind === 3 && kind !== 4 || existingKind === 4 && kind !== 3) {
1761
+ 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);
1762
+ } else if (!existingKind && kind > 2) {
1763
+ existingNonFields.set(name, kind);
1764
+ } else {
1765
+ existingNonFields.set(name, true);
1766
+ }
1767
+ }
1768
+ applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata);
1769
+ }
1770
+ pushInitializers(ret, protoInitializers);
1771
+ pushInitializers(ret, staticInitializers);
1772
+ return ret;
1773
+ }
1774
+ function pushInitializers(ret, initializers) {
1775
+ if (initializers) {
1776
+ ret.push(function(instance) {
1777
+ for(var i = 0; i < initializers.length; i++){
1778
+ initializers[i].call(instance);
1779
+ }
1780
+ return instance;
1781
+ });
1782
+ }
1783
+ }
1784
+ function applyClassDecs(targetClass, classDecs, metadata) {
1785
+ if (classDecs.length > 0) {
1786
+ var initializers = [];
1787
+ var newClass = targetClass;
1788
+ var name = targetClass.name;
1789
+ for(var i = classDecs.length - 1; i >= 0; i--){
1790
+ var decoratorFinishedRef = {
1791
+ v: false
1792
+ };
1793
+ try {
1794
+ var nextNewClass = classDecs[i](newClass, {
1795
+ kind: "class",
1796
+ name: name,
1797
+ addInitializer: createAddInitializerMethod(initializers, decoratorFinishedRef),
1798
+ metadata
1799
+ });
1800
+ } finally{
1801
+ decoratorFinishedRef.v = true;
1802
+ }
1803
+ if (nextNewClass !== undefined) {
1804
+ assertValidReturnValue(10, nextNewClass);
1805
+ newClass = nextNewClass;
1806
+ }
1807
+ }
1808
+ return [
1809
+ defineMetadata(newClass, metadata),
1810
+ function() {
1811
+ for(var i = 0; i < initializers.length; i++){
1812
+ initializers[i].call(newClass);
1813
+ }
1814
+ }
1815
+ ];
1816
+ }
1817
+ }
1818
+ function defineMetadata(Class, metadata) {
1819
+ return Object.defineProperty(Class, Symbol.metadata || Symbol.for("Symbol.metadata"), {
1820
+ configurable: true,
1821
+ enumerable: true,
1822
+ value: metadata
1823
+ });
1824
+ }
1825
+ return function applyDecs2203R(targetClass, memberDecs, classDecs, parentClass) {
1826
+ if (parentClass !== void 0) {
1827
+ var parentMetadata = parentClass[Symbol.metadata || Symbol.for("Symbol.metadata")];
1828
+ }
1829
+ var metadata = Object.create(parentMetadata === void 0 ? null : parentMetadata);
1830
+ var e = applyMemberDecs(targetClass, memberDecs, metadata);
1831
+ if (!classDecs.length) defineMetadata(targetClass, metadata);
1832
+ return {
1833
+ e: e,
1834
+ get c () {
1835
+ return applyClassDecs(targetClass, classDecs, metadata);
1836
+ }
1837
+ };
1838
+ };
1839
+ }
1840
+ function _apply_decs_2203_r$2(targetClass, memberDecs, classDecs, parentClass) {
1841
+ return (_apply_decs_2203_r$2 = applyDecs2203RFactory$2())(targetClass, memberDecs, classDecs, parentClass);
1842
+ }
1843
+ function _identity$2(x) {
1844
+ return x;
1845
+ }
1846
+ 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;
1847
+ let _ViChip;
1848
+ _dec$2 = customElement('vi-chip'), _dec1$2 = property({
1849
+ type: String,
1850
+ reflect: true
1851
+ }), _dec2$2 = property({
1852
+ type: Boolean,
1853
+ reflect: true
1854
+ }), _dec3$2 = property({
1855
+ type: Boolean,
1856
+ reflect: true
1857
+ }), _dec4$2 = property({
1858
+ type: Boolean,
1859
+ reflect: true
1860
+ }), _dec5$2 = property({
1861
+ type: String,
1862
+ attribute: 'remove-aria-label'
1863
+ }), _dec6$2 = property({
1864
+ type: String,
1865
+ reflect: true
1866
+ }), _dec7$2 = property({
1867
+ type: String,
1868
+ reflect: true
1869
+ }), _dec8$2 = state(), _dec9$2 = state(), _dec10$2 = state(), _dec11$1 = state();
1870
+ new class extends _identity$2 {
1871
+ constructor(){
1872
+ super(_ViChip), _initClass$2();
1873
+ }
1874
+ static{
1875
+ class ViChip extends (_FocusableMixin = FocusableMixin(ViElement)) {
1876
+ static{
1877
+ ({ 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, [
1878
+ [
1879
+ _dec1$2,
1880
+ 1,
1881
+ "value"
1882
+ ],
1883
+ [
1884
+ _dec2$2,
1885
+ 1,
1886
+ "selected"
1887
+ ],
1888
+ [
1889
+ _dec3$2,
1890
+ 1,
1891
+ "disabled"
1892
+ ],
1893
+ [
1894
+ _dec4$2,
1895
+ 1,
1896
+ "removable"
1897
+ ],
1898
+ [
1899
+ _dec5$2,
1900
+ 1,
1901
+ "removeAriaLabel"
1902
+ ],
1903
+ [
1904
+ _dec6$2,
1905
+ 1,
1906
+ "variant"
1907
+ ],
1908
+ [
1909
+ _dec7$2,
1910
+ 1,
1911
+ "size"
1912
+ ],
1913
+ [
1914
+ _dec8$2,
1915
+ 1,
1916
+ "_inGroup"
1917
+ ],
1918
+ [
1919
+ _dec9$2,
1920
+ 1,
1921
+ "_hasAvatar"
1922
+ ],
1923
+ [
1924
+ _dec10$2,
1925
+ 1,
1926
+ "_hasIcon"
1927
+ ],
1928
+ [
1929
+ _dec11$1,
1930
+ 1,
1931
+ "_hasTrailingIcon"
1932
+ ]
1933
+ ], [
1934
+ _dec$2
1935
+ ], _FocusableMixin));
1936
+ }
1937
+ static styles = css`${unsafeCSS(chipStyles)}`;
1938
+ get _focusableElement() {
1939
+ return this.shadowRoot?.querySelector('button') ?? null;
1940
+ }
1941
+ #___private_value_1 = (_initProto$2(this), _init_value$1(this, ''));
1942
+ get value() {
1943
+ return this.#___private_value_1;
1944
+ }
1945
+ set value(_v) {
1946
+ this.#___private_value_1 = _v;
1947
+ }
1948
+ #___private_selected_2 = _init_selected(this, false);
1949
+ get selected() {
1950
+ return this.#___private_selected_2;
1951
+ }
1952
+ set selected(_v) {
1953
+ this.#___private_selected_2 = _v;
1954
+ }
1955
+ #___private_disabled_3 = _init_disabled$1(this, false);
1956
+ get disabled() {
1957
+ return this.#___private_disabled_3;
1958
+ }
1959
+ set disabled(_v) {
1960
+ this.#___private_disabled_3 = _v;
1961
+ }
1962
+ #___private_removable_4 = _init_removable(this, false);
1963
+ get removable() {
1964
+ return this.#___private_removable_4;
1965
+ }
1966
+ set removable(_v) {
1967
+ this.#___private_removable_4 = _v;
1968
+ }
1969
+ #___private_removeAriaLabel_5 = _init_removeAriaLabel(this, 'Remove');
1970
+ get removeAriaLabel() {
1971
+ return this.#___private_removeAriaLabel_5;
1972
+ }
1973
+ set removeAriaLabel(_v) {
1974
+ this.#___private_removeAriaLabel_5 = _v;
1975
+ }
1976
+ #___private_variant_6 = _init_variant(this, 'neutral');
1977
+ get variant() {
1978
+ return this.#___private_variant_6;
1979
+ }
1980
+ set variant(_v) {
1981
+ this.#___private_variant_6 = _v;
1982
+ }
1983
+ #___private_size_7 = _init_size(this, 'md');
1984
+ get size() {
1985
+ return this.#___private_size_7;
1986
+ }
1987
+ set size(_v) {
1988
+ this.#___private_size_7 = _v;
1989
+ }
1990
+ #___private__inGroup_8 = _init__inGroup(this, false);
1991
+ get _inGroup() {
1992
+ return this.#___private__inGroup_8;
1993
+ }
1994
+ set _inGroup(_v) {
1995
+ this.#___private__inGroup_8 = _v;
1996
+ }
1997
+ #___private__hasAvatar_9 = _init__hasAvatar(this, false);
1998
+ get _hasAvatar() {
1999
+ return this.#___private__hasAvatar_9;
2000
+ }
2001
+ set _hasAvatar(_v) {
2002
+ this.#___private__hasAvatar_9 = _v;
2003
+ }
2004
+ #___private__hasIcon_10 = _init__hasIcon(this, false);
2005
+ get _hasIcon() {
2006
+ return this.#___private__hasIcon_10;
2007
+ }
2008
+ set _hasIcon(_v) {
2009
+ this.#___private__hasIcon_10 = _v;
2010
+ }
2011
+ #___private__hasTrailingIcon_11 = _init__hasTrailingIcon(this, false);
2012
+ get _hasTrailingIcon() {
2013
+ return this.#___private__hasTrailingIcon_11;
2014
+ }
2015
+ set _hasTrailingIcon(_v) {
2016
+ this.#___private__hasTrailingIcon_11 = _v;
2017
+ }
2018
+ connectedCallback() {
2019
+ super.connectedCallback();
2020
+ this._inGroup = this.closest('vi-chip-group') !== null;
2021
+ this._syncSlotsFromLightDom();
2022
+ }
2023
+ firstUpdated(changed) {
2024
+ super.firstUpdated(changed);
2025
+ this._syncSlots();
2026
+ }
2027
+ updated(changed) {
2028
+ super.updated(changed);
2029
+ if (changed.has('disabled')) {
2030
+ if (this.disabled) {
2031
+ this._setHostFocusable(false);
2032
+ } else if (changed.get('disabled') !== undefined) {
2033
+ this._setHostFocusable(true);
2034
+ }
2035
+ }
2036
+ }
2037
+ _syncSlotsFromLightDom() {
2038
+ if (this.querySelector('[slot="avatar"]')) this._hasAvatar = true;
2039
+ if (this.querySelector('[slot="icon"]')) this._hasIcon = true;
2040
+ if (this.querySelector('[slot="trailing-icon"]')) this._hasTrailingIcon = true;
2041
+ }
2042
+ _syncSlots() {
2043
+ const avatarSlot = this.shadowRoot?.querySelector('slot[name="avatar"]');
2044
+ const iconSlot = this.shadowRoot?.querySelector('slot[name="icon"]');
2045
+ const trailingSlot = this.shadowRoot?.querySelector('slot[name="trailing-icon"]');
2046
+ if (avatarSlot) {
2047
+ this._hasAvatar = avatarSlot.assignedElements({
2048
+ flatten: true
2049
+ }).length > 0;
2050
+ }
2051
+ if (iconSlot) {
2052
+ this._hasIcon = iconSlot.assignedElements({
2053
+ flatten: true
2054
+ }).length > 0;
2055
+ }
2056
+ if (trailingSlot) {
2057
+ this._hasTrailingIcon = trailingSlot.assignedElements({
2058
+ flatten: true
2059
+ }).length > 0;
2060
+ }
2061
+ }
2062
+ onAvatarSlotChange(e) {
2063
+ const slot = e.target;
2064
+ this._hasAvatar = slot.assignedElements({
2065
+ flatten: true
2066
+ }).length > 0;
2067
+ }
2068
+ onIconSlotChange(e) {
2069
+ const slot = e.target;
2070
+ this._hasIcon = slot.assignedElements({
2071
+ flatten: true
2072
+ }).length > 0;
2073
+ }
2074
+ onTrailingIconSlotChange(e) {
2075
+ const slot = e.target;
2076
+ this._hasTrailingIcon = slot.assignedElements({
2077
+ flatten: true
2078
+ }).length > 0;
2079
+ }
2080
+ _handleSelect(e) {
2081
+ if (this.disabled) {
2082
+ e.preventDefault();
2083
+ e.stopImmediatePropagation();
2084
+ return;
2085
+ }
2086
+ this.dispatchEvent(new CustomEvent('vialiq-select', {
2087
+ detail: {
2088
+ value: this.value,
2089
+ selected: !this.selected
2090
+ },
2091
+ bubbles: true,
2092
+ composed: true
2093
+ }));
2094
+ }
2095
+ _handleRemove(e) {
2096
+ if (this.disabled) {
2097
+ e.preventDefault();
2098
+ e.stopImmediatePropagation();
2099
+ return;
2100
+ }
2101
+ e.stopPropagation();
2102
+ this.dispatchEvent(new CustomEvent('vialiq-remove', {
2103
+ detail: {
2104
+ value: this.value
2105
+ },
2106
+ bubbles: true,
2107
+ composed: true
2108
+ }));
2109
+ }
2110
+ _handleKeyDown(e) {
2111
+ if (this.disabled) return;
2112
+ if (e.key === 'Enter' || e.key === ' ') {
2113
+ e.preventDefault();
2114
+ this._handleSelect(e);
2115
+ } else if (this.removable && (e.key === 'Backspace' || e.key === 'Delete')) {
2116
+ e.preventDefault();
2117
+ this._handleRemove(e);
2118
+ }
2119
+ }
2120
+ render() {
2121
+ const role = this._inGroup ? 'option' : 'button';
2122
+ const ariaSelected = this._inGroup ? this.selected ? 'true' : 'false' : null;
2123
+ const ariaPressed = !this._inGroup ? this.selected ? 'true' : 'false' : null;
2124
+ return html`
2125
+ <button
2126
+ part="chip"
2127
+ type="button"
2128
+ role=${role}
2129
+ aria-selected=${ariaSelected ?? undefined}
2130
+ aria-pressed=${ariaPressed ?? undefined}
2131
+ aria-disabled=${this.disabled ? 'true' : 'false'}
2132
+ tabindex=${this.disabled ? -1 : 0}
2133
+ @click=${this._handleSelect}
2134
+ @keydown=${this._handleKeyDown}
2135
+ >
2136
+ <slot name="avatar" class="chip-avatar" @slotchange=${this.onAvatarSlotChange} ?hidden=${!this._hasAvatar}></slot>
2137
+ <slot name="icon" class="chip-icon" @slotchange=${this.onIconSlotChange} ?hidden=${this._hasAvatar || !this._hasIcon}></slot>
2138
+
2139
+ ${this.selected ? html`<vi-icon part="check-icon" name="check" size="12"></vi-icon>` : ''}
2140
+
2141
+ <span part="label" class="chip-label">
2142
+ <slot></slot>
2143
+ </span>
2144
+
2145
+ <slot name="trailing-icon" @slotchange=${this.onTrailingIconSlotChange} ?hidden=${!this._hasTrailingIcon}></slot>
2146
+
2147
+ ${this.removable ? html`
2148
+ <vi-button
2149
+ part="remove-btn"
2150
+ variant="ghost"
2151
+ size="xs"
2152
+ icon-only
2153
+ aria-label=${this.removeAriaLabel || 'Remove'}
2154
+ @click=${this._handleRemove}
2155
+ tabindex=${this.disabled ? -1 : 0}
2156
+ >
2157
+ <vi-icon name="x" size="12" slot="icon"></vi-icon>
2158
+ </vi-button>
2159
+ ` : ''}
2160
+ </button>
2161
+ `;
2162
+ }
2163
+ }
2164
+ }
2165
+ }();
2166
+
2167
+ const groupStyles = ":host{display:block}:host([hidden]){display:none!important}[part=group]{display:flex;align-items:center}";
2168
+
2169
+ function applyDecs2203RFactory$1() {
2170
+ function createAddInitializerMethod(initializers, decoratorFinishedRef) {
2171
+ return function addInitializer(initializer) {
2172
+ assertNotFinished(decoratorFinishedRef, "addInitializer");
2173
+ assertCallable(initializer, "An initializer");
2174
+ initializers.push(initializer);
2175
+ };
2176
+ }
2177
+ function memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value) {
2178
+ var kindStr;
2179
+ switch(kind){
2180
+ case 1:
2181
+ kindStr = "accessor";
2182
+ break;
2183
+ case 2:
2184
+ kindStr = "method";
2185
+ break;
2186
+ case 3:
2187
+ kindStr = "getter";
2188
+ break;
2189
+ case 4:
2190
+ kindStr = "setter";
2191
+ break;
2192
+ default:
2193
+ kindStr = "field";
2194
+ }
2195
+ var ctx = {
2196
+ kind: kindStr,
2197
+ name: isPrivate ? "#" + name : name,
2198
+ static: isStatic,
2199
+ private: isPrivate,
2200
+ metadata: metadata
2201
+ };
2202
+ var decoratorFinishedRef = {
2203
+ v: false
2204
+ };
2205
+ ctx.addInitializer = createAddInitializerMethod(initializers, decoratorFinishedRef);
2206
+ var get, set;
2207
+ if (kind === 0) {
2208
+ if (isPrivate) {
2209
+ get = desc.get;
2210
+ set = desc.set;
2211
+ } else {
2212
+ get = function() {
2213
+ return this[name];
2214
+ };
2215
+ set = function(v) {
2216
+ this[name] = v;
2217
+ };
2218
+ }
2219
+ } else if (kind === 2) {
2220
+ get = function() {
2221
+ return desc.value;
2222
+ };
2223
+ } else {
2224
+ if (kind === 1 || kind === 3) {
2225
+ get = function() {
2226
+ return desc.get.call(this);
2227
+ };
2228
+ }
2229
+ if (kind === 1 || kind === 4) {
2230
+ set = function(v) {
2231
+ desc.set.call(this, v);
2232
+ };
2233
+ }
2234
+ }
2235
+ ctx.access = get && set ? {
2236
+ get: get,
2237
+ set: set
2238
+ } : get ? {
2239
+ get: get
2240
+ } : {
2241
+ set: set
2242
+ };
2243
+ try {
2244
+ return dec(value, ctx);
2245
+ } finally{
2246
+ decoratorFinishedRef.v = true;
2247
+ }
2248
+ }
2249
+ function assertNotFinished(decoratorFinishedRef, fnName) {
2250
+ if (decoratorFinishedRef.v) {
2251
+ throw new Error("attempted to call " + fnName + " after decoration was finished");
2252
+ }
2253
+ }
2254
+ function assertCallable(fn, hint) {
2255
+ if (typeof fn !== "function") {
2256
+ throw new TypeError(hint + " must be a function");
2257
+ }
2258
+ }
2259
+ function assertValidReturnValue(kind, value) {
2260
+ var type = typeof value;
2261
+ if (kind === 1) {
2262
+ if (type !== "object" || value === null) {
2263
+ throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
2264
+ }
2265
+ if (value.get !== undefined) {
2266
+ assertCallable(value.get, "accessor.get");
2267
+ }
2268
+ if (value.set !== undefined) {
2269
+ assertCallable(value.set, "accessor.set");
2270
+ }
2271
+ if (value.init !== undefined) {
2272
+ assertCallable(value.init, "accessor.init");
2273
+ }
2274
+ } else if (type !== "function") {
2275
+ var hint;
2276
+ if (kind === 0) {
2277
+ hint = "field";
2278
+ } else if (kind === 10) {
2279
+ hint = "class";
2280
+ } else {
2281
+ hint = "method";
2282
+ }
2283
+ throw new TypeError(hint + " decorators must return a function or void 0");
2284
+ }
2285
+ }
2286
+ function applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata) {
2287
+ var decs = decInfo[0];
2288
+ var desc, init, value;
2289
+ if (isPrivate) {
2290
+ if (kind === 0 || kind === 1) {
2291
+ desc = {
2292
+ get: decInfo[3],
2293
+ set: decInfo[4]
2294
+ };
2295
+ } else if (kind === 3) {
2296
+ desc = {
2297
+ get: decInfo[3]
2298
+ };
2299
+ } else if (kind === 4) {
2300
+ desc = {
2301
+ set: decInfo[3]
2302
+ };
2303
+ } else {
2304
+ desc = {
2305
+ value: decInfo[3]
2306
+ };
2307
+ }
2308
+ } else if (kind !== 0) {
2309
+ desc = Object.getOwnPropertyDescriptor(base, name);
2310
+ }
2311
+ if (kind === 1) {
2312
+ value = {
2313
+ get: desc.get,
2314
+ set: desc.set
2315
+ };
2316
+ } else if (kind === 2) {
2317
+ value = desc.value;
2318
+ } else if (kind === 3) {
2319
+ value = desc.get;
2320
+ } else if (kind === 4) {
2321
+ value = desc.set;
2322
+ }
2323
+ var newValue, get, set;
2324
+ if (typeof decs === "function") {
2325
+ newValue = memberDec(decs, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
2326
+ if (newValue !== void 0) {
2327
+ assertValidReturnValue(kind, newValue);
2328
+ if (kind === 0) {
2329
+ init = newValue;
2330
+ } else if (kind === 1) {
2331
+ init = newValue.init;
2332
+ get = newValue.get || value.get;
2333
+ set = newValue.set || value.set;
2334
+ value = {
2335
+ get: get,
2336
+ set: set
2337
+ };
2338
+ } else {
2339
+ value = newValue;
2340
+ }
2341
+ }
2342
+ } else {
2343
+ for(var i = decs.length - 1; i >= 0; i--){
2344
+ var dec = decs[i];
2345
+ newValue = memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
2346
+ if (newValue !== void 0) {
2347
+ assertValidReturnValue(kind, newValue);
2348
+ var newInit;
2349
+ if (kind === 0) {
2350
+ newInit = newValue;
2351
+ } else if (kind === 1) {
2352
+ newInit = newValue.init;
2353
+ get = newValue.get || value.get;
2354
+ set = newValue.set || value.set;
2355
+ value = {
2356
+ get: get,
2357
+ set: set
2358
+ };
2359
+ } else {
2360
+ value = newValue;
2361
+ }
2362
+ if (newInit !== void 0) {
2363
+ if (init === void 0) {
2364
+ init = newInit;
2365
+ } else if (typeof init === "function") {
2366
+ init = [
2367
+ init,
2368
+ newInit
2369
+ ];
2370
+ } else {
2371
+ init.push(newInit);
2372
+ }
2373
+ }
2374
+ }
2375
+ }
2376
+ }
2377
+ if (kind === 0 || kind === 1) {
2378
+ if (init === void 0) {
2379
+ init = function(instance, init) {
2380
+ return init;
2381
+ };
2382
+ } else if (typeof init !== "function") {
2383
+ var ownInitializers = init;
2384
+ init = function(instance, init) {
2385
+ var value = init;
2386
+ for(var i = 0; i < ownInitializers.length; i++){
2387
+ value = ownInitializers[i].call(instance, value);
2388
+ }
2389
+ return value;
2390
+ };
2391
+ } else {
2392
+ var originalInitializer = init;
2393
+ init = function(instance, init) {
2394
+ return originalInitializer.call(instance, init);
2395
+ };
2396
+ }
2397
+ ret.push(init);
2398
+ }
2399
+ if (kind !== 0) {
2400
+ if (kind === 1) {
2401
+ desc.get = value.get;
2402
+ desc.set = value.set;
2403
+ } else if (kind === 2) {
2404
+ desc.value = value;
2405
+ } else if (kind === 3) {
2406
+ desc.get = value;
2407
+ } else if (kind === 4) {
2408
+ desc.set = value;
2409
+ }
2410
+ if (isPrivate) {
2411
+ if (kind === 1) {
2412
+ ret.push(function(instance, args) {
2413
+ return value.get.call(instance, args);
2414
+ });
2415
+ ret.push(function(instance, args) {
2416
+ return value.set.call(instance, args);
2417
+ });
2418
+ } else if (kind === 2) {
2419
+ ret.push(value);
2420
+ } else {
2421
+ ret.push(function(instance, args) {
2422
+ return value.call(instance, args);
2423
+ });
2424
+ }
2425
+ } else {
2426
+ Object.defineProperty(base, name, desc);
2427
+ }
2428
+ }
2429
+ }
2430
+ function applyMemberDecs(Class, decInfos, metadata) {
2431
+ var ret = [];
2432
+ var protoInitializers;
2433
+ var staticInitializers;
2434
+ var existingProtoNonFields = new Map();
2435
+ var existingStaticNonFields = new Map();
2436
+ for(var i = 0; i < decInfos.length; i++){
2437
+ var decInfo = decInfos[i];
2438
+ if (!Array.isArray(decInfo)) continue;
2439
+ var kind = decInfo[1];
2440
+ var name = decInfo[2];
2441
+ var isPrivate = decInfo.length > 3;
2442
+ var isStatic = kind >= 5;
2443
+ var base;
2444
+ var initializers;
2445
+ if (isStatic) {
2446
+ base = Class;
2447
+ kind = kind - 5;
2448
+ staticInitializers = staticInitializers || [];
2449
+ initializers = staticInitializers;
2450
+ } else {
2451
+ base = Class.prototype;
2452
+ protoInitializers = protoInitializers || [];
2453
+ initializers = protoInitializers;
2454
+ }
2455
+ if (kind !== 0 && !isPrivate) {
2456
+ var existingNonFields = isStatic ? existingStaticNonFields : existingProtoNonFields;
2457
+ var existingKind = existingNonFields.get(name) || 0;
2458
+ if (existingKind === true || existingKind === 3 && kind !== 4 || existingKind === 4 && kind !== 3) {
2459
+ 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);
2460
+ } else if (!existingKind && kind > 2) {
2461
+ existingNonFields.set(name, kind);
2462
+ } else {
2463
+ existingNonFields.set(name, true);
2464
+ }
2465
+ }
2466
+ applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata);
2467
+ }
2468
+ pushInitializers(ret, protoInitializers);
2469
+ pushInitializers(ret, staticInitializers);
2470
+ return ret;
2471
+ }
2472
+ function pushInitializers(ret, initializers) {
2473
+ if (initializers) {
2474
+ ret.push(function(instance) {
2475
+ for(var i = 0; i < initializers.length; i++){
2476
+ initializers[i].call(instance);
2477
+ }
2478
+ return instance;
2479
+ });
2480
+ }
2481
+ }
2482
+ function applyClassDecs(targetClass, classDecs, metadata) {
2483
+ if (classDecs.length > 0) {
2484
+ var initializers = [];
2485
+ var newClass = targetClass;
2486
+ var name = targetClass.name;
2487
+ for(var i = classDecs.length - 1; i >= 0; i--){
2488
+ var decoratorFinishedRef = {
2489
+ v: false
2490
+ };
2491
+ try {
2492
+ var nextNewClass = classDecs[i](newClass, {
2493
+ kind: "class",
2494
+ name: name,
2495
+ addInitializer: createAddInitializerMethod(initializers, decoratorFinishedRef),
2496
+ metadata
2497
+ });
2498
+ } finally{
2499
+ decoratorFinishedRef.v = true;
2500
+ }
2501
+ if (nextNewClass !== undefined) {
2502
+ assertValidReturnValue(10, nextNewClass);
2503
+ newClass = nextNewClass;
2504
+ }
2505
+ }
2506
+ return [
2507
+ defineMetadata(newClass, metadata),
2508
+ function() {
2509
+ for(var i = 0; i < initializers.length; i++){
2510
+ initializers[i].call(newClass);
2511
+ }
2512
+ }
2513
+ ];
2514
+ }
2515
+ }
2516
+ function defineMetadata(Class, metadata) {
2517
+ return Object.defineProperty(Class, Symbol.metadata || Symbol.for("Symbol.metadata"), {
2518
+ configurable: true,
2519
+ enumerable: true,
2520
+ value: metadata
2521
+ });
2522
+ }
2523
+ return function applyDecs2203R(targetClass, memberDecs, classDecs, parentClass) {
2524
+ if (parentClass !== void 0) {
2525
+ var parentMetadata = parentClass[Symbol.metadata || Symbol.for("Symbol.metadata")];
2526
+ }
2527
+ var metadata = Object.create(parentMetadata === void 0 ? null : parentMetadata);
2528
+ var e = applyMemberDecs(targetClass, memberDecs, metadata);
2529
+ if (!classDecs.length) defineMetadata(targetClass, metadata);
2530
+ return {
2531
+ e: e,
2532
+ get c () {
2533
+ return applyClassDecs(targetClass, classDecs, metadata);
2534
+ }
2535
+ };
2536
+ };
2537
+ }
2538
+ function _apply_decs_2203_r$1(targetClass, memberDecs, classDecs, parentClass) {
2539
+ return (_apply_decs_2203_r$1 = applyDecs2203RFactory$1())(targetClass, memberDecs, classDecs, parentClass);
2540
+ }
2541
+ function _identity$1(x) {
2542
+ return x;
2543
+ }
2544
+ 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
2545
+ _init_status, _init_validityMessage, _init__chips, _initProto$1;
2546
+ let _ViChipGroup;
2547
+ _dec$1 = customElement('vi-chip-group'), _dec1$1 = property({
2548
+ type: Array
2549
+ }), _dec2$1 = property({
2550
+ type: Boolean
2551
+ }), _dec3$1 = property({
2552
+ type: String
2553
+ }), _dec4$1 = property({
2554
+ type: Boolean,
2555
+ reflect: true
2556
+ }), _dec5$1 = property({
2557
+ type: Boolean,
2558
+ reflect: true
2559
+ }), _dec6$1 = property({
2560
+ type: Boolean
2561
+ }), _dec7$1 = property({
2562
+ type: String
2563
+ }), _dec8$1 = property({
2564
+ reflect: true
2565
+ }), _dec9$1 = property(), _dec10$1 = queryAssignedElements({
2566
+ selector: 'vi-chip'
2567
+ });
2568
+ new class extends _identity$1 {
2569
+ constructor(){
2570
+ super(_ViChipGroup), _initClass$1();
2571
+ }
2572
+ static{
2573
+ class ViChipGroup extends (_ValidityMixin = ValidityMixin(ViElement)) {
2574
+ static{
2575
+ ({ 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, [
2576
+ [
2577
+ _dec1$1,
2578
+ 1,
2579
+ "value"
2580
+ ],
2581
+ [
2582
+ _dec2$1,
2583
+ 1,
2584
+ "multi"
2585
+ ],
2586
+ [
2587
+ _dec3$1,
2588
+ 1,
2589
+ "name"
2590
+ ],
2591
+ [
2592
+ _dec4$1,
2593
+ 1,
2594
+ "required"
2595
+ ],
2596
+ [
2597
+ _dec5$1,
2598
+ 1,
2599
+ "disabled"
2600
+ ],
2601
+ [
2602
+ _dec6$1,
2603
+ 1,
2604
+ "wrap"
2605
+ ],
2606
+ [
2607
+ _dec7$1,
2608
+ 1,
2609
+ "gap"
2610
+ ],
2611
+ [
2612
+ _dec8$1,
2613
+ 1,
2614
+ "status"
2615
+ ],
2616
+ [
2617
+ _dec9$1,
2618
+ 1,
2619
+ "validityMessage"
2620
+ ],
2621
+ [
2622
+ _dec10$1,
2623
+ 1,
2624
+ "_chips"
2625
+ ]
2626
+ ], [
2627
+ _dec$1
2628
+ ], _ValidityMixin));
2629
+ }
2630
+ static styles = css`${unsafeCSS(groupStyles)}`;
2631
+ #___private_value_1 = (_initProto$1(this), _init_value(this, []));
2632
+ get value() {
2633
+ return this.#___private_value_1;
2634
+ }
2635
+ set value(_v) {
2636
+ this.#___private_value_1 = _v;
2637
+ }
2638
+ #___private_multi_2 = _init_multi(this, true);
2639
+ get multi() {
2640
+ return this.#___private_multi_2;
2641
+ }
2642
+ set multi(_v) {
2643
+ this.#___private_multi_2 = _v;
2644
+ }
2645
+ #___private_name_3 = _init_name$1(this, '');
2646
+ get name() {
2647
+ return this.#___private_name_3;
2648
+ }
2649
+ set name(_v) {
2650
+ this.#___private_name_3 = _v;
2651
+ }
2652
+ #___private_required_4 = _init_required(this, false);
2653
+ get required() {
2654
+ return this.#___private_required_4;
2655
+ }
2656
+ set required(_v) {
2657
+ this.#___private_required_4 = _v;
2658
+ }
2659
+ #___private_disabled_5 = _init_disabled(this, false);
2660
+ get disabled() {
2661
+ return this.#___private_disabled_5;
2662
+ }
2663
+ set disabled(_v) {
2664
+ this.#___private_disabled_5 = _v;
2665
+ }
2666
+ #___private_wrap_6 = _init_wrap(this, true);
2667
+ get wrap() {
2668
+ return this.#___private_wrap_6;
2669
+ }
2670
+ set wrap(_v) {
2671
+ this.#___private_wrap_6 = _v;
2672
+ }
2673
+ #___private_gap_7 = _init_gap(this, '8px');
2674
+ get gap() {
2675
+ return this.#___private_gap_7;
2676
+ }
2677
+ set gap(_v) {
2678
+ this.#___private_gap_7 = _v;
2679
+ }
2680
+ #___private_status_8 = _init_status(this, 'default');
2681
+ get status() {
2682
+ return this.#___private_status_8;
2683
+ }
2684
+ set status(_v) {
2685
+ this.#___private_status_8 = _v;
2686
+ }
2687
+ #___private_validityMessage_9 = _init_validityMessage(this, '');
2688
+ get validityMessage() {
2689
+ return this.#___private_validityMessage_9;
2690
+ }
2691
+ set validityMessage(_v) {
2692
+ this.#___private_validityMessage_9 = _v;
2693
+ }
2694
+ #___private__chips_10 = _init__chips(this);
2695
+ get _chips() {
2696
+ return this.#___private__chips_10;
2697
+ }
2698
+ set _chips(_v) {
2699
+ this.#___private__chips_10 = _v;
2700
+ }
2701
+ _mutationObserver;
2702
+ constructor(){
2703
+ super();
2704
+ this._mutationObserver = new MutationObserver(()=>this._syncChips());
2705
+ this.addEventListener('vialiq-select', this._handleChipSelect);
2706
+ }
2707
+ connectedCallback() {
2708
+ super.connectedCallback();
2709
+ this._syncInternals();
2710
+ }
2711
+ disconnectedCallback() {
2712
+ super.disconnectedCallback();
2713
+ this._mutationObserver.disconnect();
2714
+ }
2715
+ updated(changed) {
2716
+ super.updated(changed);
2717
+ if (changed.has('value')) {
2718
+ this._syncInternals();
2719
+ this._syncChips();
2720
+ }
2721
+ if (changed.has('disabled')) {
2722
+ this._syncChips();
2723
+ }
2724
+ }
2725
+ formResetCallback() {
2726
+ this.value = [];
2727
+ this.status = 'default';
2728
+ this.validityMessage = '';
2729
+ }
2730
+ formDisabledCallback(disabled) {
2731
+ this.disabled = disabled;
2732
+ }
2733
+ _testValidity() {
2734
+ if (this.required && this.value.length === 0) {
2735
+ return {
2736
+ valueMissing: true
2737
+ };
2738
+ }
2739
+ return {};
2740
+ }
2741
+ /** Selects all available child chips (if multi is true) */ selectAll() {
2742
+ if (!this.multi) return;
2743
+ this.value = this._chips.map((chip)=>chip.value).filter((val)=>val !== undefined);
2744
+ this.dispatchEvent(new CustomEvent('vialiq-change', {
2745
+ detail: {
2746
+ value: this.value
2747
+ },
2748
+ bubbles: true,
2749
+ composed: true
2750
+ }));
2751
+ }
2752
+ /** Deselects all child chips */ clearAll() {
2753
+ this.value = [];
2754
+ this.dispatchEvent(new CustomEvent('vialiq-change', {
2755
+ detail: {
2756
+ value: this.value
2757
+ },
2758
+ bubbles: true,
2759
+ composed: true
2760
+ }));
2761
+ }
2762
+ _syncInternals() {
2763
+ const formData = new FormData();
2764
+ this.value.forEach((val)=>formData.append(this.name, val));
2765
+ this._internals.setFormValue(formData);
2766
+ }
2767
+ _syncChips() {
2768
+ if (!this._chips) return;
2769
+ let hasFocusable = false;
2770
+ this._chips.forEach((chip)=>{
2771
+ chip.selected = this.value.includes(chip.value);
2772
+ if (this.disabled) {
2773
+ chip.disabled = true;
2774
+ } else {
2775
+ chip.disabled = chip.hasAttribute('disabled');
2776
+ }
2777
+ // Roving tabindex: Only the first selected chip (or the first chip if none selected) is focusable
2778
+ if (!chip.disabled && (chip.selected || !hasFocusable && this.value.length === 0)) {
2779
+ chip.tabIndex = 0;
2780
+ hasFocusable = true;
2781
+ } else {
2782
+ chip.tabIndex = -1;
2783
+ }
2784
+ });
2785
+ // If no chip was focusable yet (e.g. none selected), make the first non-disabled chip focusable
2786
+ if (!hasFocusable && this._chips.length > 0) {
2787
+ const firstEnabled = this._chips.find((c)=>!c.disabled);
2788
+ if (firstEnabled) firstEnabled.tabIndex = 0;
2789
+ }
2790
+ }
2791
+ _handleSlotChange() {
2792
+ this._syncChips();
2793
+ // Disconnect old, connect new observers for child mutations
2794
+ this._mutationObserver.disconnect();
2795
+ this._chips.forEach((chip)=>{
2796
+ this._mutationObserver.observe(chip, {
2797
+ attributes: true,
2798
+ attributeFilter: [
2799
+ 'value',
2800
+ 'disabled'
2801
+ ]
2802
+ });
2803
+ });
2804
+ }
2805
+ _handleChipSelect(e) {
2806
+ e.stopPropagation(); // Stop the inner event
2807
+ const { value, selected } = e.detail;
2808
+ let newValue = [
2809
+ ...this.value
2810
+ ];
2811
+ if (this.multi) {
2812
+ if (selected) {
2813
+ if (!newValue.includes(value)) newValue.push(value);
2814
+ } else {
2815
+ newValue = newValue.filter((v)=>v !== value);
2816
+ }
2817
+ } else {
2818
+ if (selected) {
2819
+ newValue = [
2820
+ value
2821
+ ];
2822
+ } else {
2823
+ // In single select, clicking a selected chip could deselect it depending on requirements.
2824
+ // Assuming it toggles.
2825
+ newValue = [];
2826
+ }
2827
+ }
2828
+ this.value = newValue;
2829
+ this.dispatchEvent(new CustomEvent('vialiq-change', {
2830
+ detail: {
2831
+ value: this.value
2832
+ },
2833
+ bubbles: true,
2834
+ composed: true
2835
+ }));
2836
+ }
2837
+ _handleKeyDown(e) {
2838
+ const focusableChips = this._chips.filter((c)=>!c.disabled);
2839
+ if (focusableChips.length === 0) return;
2840
+ const currentIndex = focusableChips.findIndex((c)=>c === document.activeElement || c.shadowRoot?.activeElement);
2841
+ if (currentIndex === -1) return;
2842
+ let nextIndex = currentIndex;
2843
+ switch(e.key){
2844
+ case 'ArrowRight':
2845
+ case 'ArrowDown':
2846
+ e.preventDefault();
2847
+ nextIndex = (currentIndex + 1) % focusableChips.length;
2848
+ break;
2849
+ case 'ArrowLeft':
2850
+ case 'ArrowUp':
2851
+ e.preventDefault();
2852
+ nextIndex = (currentIndex - 1 + focusableChips.length) % focusableChips.length;
2853
+ break;
2854
+ case 'Home':
2855
+ e.preventDefault();
2856
+ nextIndex = 0;
2857
+ break;
2858
+ case 'End':
2859
+ e.preventDefault();
2860
+ nextIndex = focusableChips.length - 1;
2861
+ break;
2862
+ default:
2863
+ return; // Let other keys do their thing
2864
+ }
2865
+ this._chips.forEach((c)=>c.tabIndex = -1);
2866
+ const nextChip = focusableChips[nextIndex];
2867
+ nextChip.tabIndex = 0;
2868
+ nextChip.focus();
2869
+ }
2870
+ render() {
2871
+ const style = `gap: ${this.gap}; flex-wrap: ${this.wrap ? 'wrap' : 'nowrap'};`;
2872
+ return html`
2873
+ <div
2874
+ part="group"
2875
+ role="listbox"
2876
+ aria-multiselectable=${this.multi ? 'true' : 'false'}
2877
+ aria-required=${this.required ? 'true' : 'false'}
2878
+ aria-disabled=${this.disabled ? 'true' : 'false'}
2879
+ style=${style}
2880
+ @keydown=${this._handleKeyDown}
2881
+ >
2882
+ <slot @slotchange=${this._handleSlotChange}></slot>
2883
+ </div>
2884
+ `;
2885
+ }
2886
+ }
2887
+ }
2888
+ }();
2889
+
2890
+ 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}";
2891
+
2892
+ function applyDecs2203RFactory() {
2893
+ function createAddInitializerMethod(initializers, decoratorFinishedRef) {
2894
+ return function addInitializer(initializer) {
2895
+ assertNotFinished(decoratorFinishedRef, "addInitializer");
2896
+ assertCallable(initializer, "An initializer");
2897
+ initializers.push(initializer);
2898
+ };
2899
+ }
2900
+ function memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value) {
2901
+ var kindStr;
2902
+ switch(kind){
2903
+ case 1:
2904
+ kindStr = "accessor";
2905
+ break;
2906
+ case 2:
2907
+ kindStr = "method";
2908
+ break;
2909
+ case 3:
2910
+ kindStr = "getter";
2911
+ break;
2912
+ case 4:
2913
+ kindStr = "setter";
2914
+ break;
2915
+ default:
2916
+ kindStr = "field";
2917
+ }
2918
+ var ctx = {
2919
+ kind: kindStr,
2920
+ name: isPrivate ? "#" + name : name,
2921
+ static: isStatic,
2922
+ private: isPrivate,
2923
+ metadata: metadata
2924
+ };
2925
+ var decoratorFinishedRef = {
2926
+ v: false
2927
+ };
2928
+ ctx.addInitializer = createAddInitializerMethod(initializers, decoratorFinishedRef);
2929
+ var get, set;
2930
+ if (kind === 0) {
2931
+ if (isPrivate) {
2932
+ get = desc.get;
2933
+ set = desc.set;
2934
+ } else {
2935
+ get = function() {
2936
+ return this[name];
2937
+ };
2938
+ set = function(v) {
2939
+ this[name] = v;
2940
+ };
2941
+ }
2942
+ } else if (kind === 2) {
2943
+ get = function() {
2944
+ return desc.value;
2945
+ };
2946
+ } else {
2947
+ if (kind === 1 || kind === 3) {
2948
+ get = function() {
2949
+ return desc.get.call(this);
2950
+ };
2951
+ }
2952
+ if (kind === 1 || kind === 4) {
2953
+ set = function(v) {
2954
+ desc.set.call(this, v);
2955
+ };
2956
+ }
2957
+ }
2958
+ ctx.access = get && set ? {
2959
+ get: get,
2960
+ set: set
2961
+ } : get ? {
2962
+ get: get
2963
+ } : {
2964
+ set: set
2965
+ };
2966
+ try {
2967
+ return dec(value, ctx);
2968
+ } finally{
2969
+ decoratorFinishedRef.v = true;
2970
+ }
2971
+ }
2972
+ function assertNotFinished(decoratorFinishedRef, fnName) {
2973
+ if (decoratorFinishedRef.v) {
2974
+ throw new Error("attempted to call " + fnName + " after decoration was finished");
2975
+ }
2976
+ }
2977
+ function assertCallable(fn, hint) {
2978
+ if (typeof fn !== "function") {
2979
+ throw new TypeError(hint + " must be a function");
2980
+ }
2981
+ }
2982
+ function assertValidReturnValue(kind, value) {
2983
+ var type = typeof value;
2984
+ if (kind === 1) {
2985
+ if (type !== "object" || value === null) {
2986
+ throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
2987
+ }
2988
+ if (value.get !== undefined) {
2989
+ assertCallable(value.get, "accessor.get");
2990
+ }
2991
+ if (value.set !== undefined) {
2992
+ assertCallable(value.set, "accessor.set");
2993
+ }
2994
+ if (value.init !== undefined) {
2995
+ assertCallable(value.init, "accessor.init");
2996
+ }
2997
+ } else if (type !== "function") {
2998
+ var hint;
2999
+ if (kind === 0) {
3000
+ hint = "field";
3001
+ } else if (kind === 10) {
3002
+ hint = "class";
3003
+ } else {
3004
+ hint = "method";
3005
+ }
3006
+ throw new TypeError(hint + " decorators must return a function or void 0");
3007
+ }
3008
+ }
3009
+ function applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata) {
3010
+ var decs = decInfo[0];
3011
+ var desc, init, value;
3012
+ if (isPrivate) {
3013
+ if (kind === 0 || kind === 1) {
3014
+ desc = {
3015
+ get: decInfo[3],
3016
+ set: decInfo[4]
3017
+ };
3018
+ } else if (kind === 3) {
3019
+ desc = {
3020
+ get: decInfo[3]
3021
+ };
3022
+ } else if (kind === 4) {
3023
+ desc = {
3024
+ set: decInfo[3]
3025
+ };
3026
+ } else {
3027
+ desc = {
3028
+ value: decInfo[3]
3029
+ };
3030
+ }
3031
+ } else if (kind !== 0) {
3032
+ desc = Object.getOwnPropertyDescriptor(base, name);
3033
+ }
3034
+ if (kind === 1) {
3035
+ value = {
3036
+ get: desc.get,
3037
+ set: desc.set
3038
+ };
3039
+ } else if (kind === 2) {
3040
+ value = desc.value;
3041
+ } else if (kind === 3) {
3042
+ value = desc.get;
3043
+ } else if (kind === 4) {
3044
+ value = desc.set;
3045
+ }
3046
+ var newValue, get, set;
3047
+ if (typeof decs === "function") {
3048
+ newValue = memberDec(decs, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
3049
+ if (newValue !== void 0) {
3050
+ assertValidReturnValue(kind, newValue);
3051
+ if (kind === 0) {
3052
+ init = newValue;
3053
+ } else if (kind === 1) {
3054
+ init = newValue.init;
3055
+ get = newValue.get || value.get;
3056
+ set = newValue.set || value.set;
3057
+ value = {
3058
+ get: get,
3059
+ set: set
3060
+ };
3061
+ } else {
3062
+ value = newValue;
3063
+ }
3064
+ }
3065
+ } else {
3066
+ for(var i = decs.length - 1; i >= 0; i--){
3067
+ var dec = decs[i];
3068
+ newValue = memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
3069
+ if (newValue !== void 0) {
3070
+ assertValidReturnValue(kind, newValue);
3071
+ var newInit;
3072
+ if (kind === 0) {
3073
+ newInit = newValue;
3074
+ } else if (kind === 1) {
3075
+ newInit = newValue.init;
3076
+ get = newValue.get || value.get;
3077
+ set = newValue.set || value.set;
3078
+ value = {
3079
+ get: get,
3080
+ set: set
3081
+ };
3082
+ } else {
3083
+ value = newValue;
3084
+ }
3085
+ if (newInit !== void 0) {
3086
+ if (init === void 0) {
3087
+ init = newInit;
3088
+ } else if (typeof init === "function") {
3089
+ init = [
3090
+ init,
3091
+ newInit
3092
+ ];
3093
+ } else {
3094
+ init.push(newInit);
3095
+ }
3096
+ }
3097
+ }
3098
+ }
3099
+ }
3100
+ if (kind === 0 || kind === 1) {
3101
+ if (init === void 0) {
3102
+ init = function(instance, init) {
3103
+ return init;
3104
+ };
3105
+ } else if (typeof init !== "function") {
3106
+ var ownInitializers = init;
3107
+ init = function(instance, init) {
3108
+ var value = init;
3109
+ for(var i = 0; i < ownInitializers.length; i++){
3110
+ value = ownInitializers[i].call(instance, value);
3111
+ }
3112
+ return value;
3113
+ };
3114
+ } else {
3115
+ var originalInitializer = init;
3116
+ init = function(instance, init) {
3117
+ return originalInitializer.call(instance, init);
3118
+ };
3119
+ }
3120
+ ret.push(init);
3121
+ }
3122
+ if (kind !== 0) {
3123
+ if (kind === 1) {
3124
+ desc.get = value.get;
3125
+ desc.set = value.set;
3126
+ } else if (kind === 2) {
3127
+ desc.value = value;
3128
+ } else if (kind === 3) {
3129
+ desc.get = value;
3130
+ } else if (kind === 4) {
3131
+ desc.set = value;
3132
+ }
3133
+ if (isPrivate) {
3134
+ if (kind === 1) {
3135
+ ret.push(function(instance, args) {
3136
+ return value.get.call(instance, args);
3137
+ });
3138
+ ret.push(function(instance, args) {
3139
+ return value.set.call(instance, args);
3140
+ });
3141
+ } else if (kind === 2) {
3142
+ ret.push(value);
3143
+ } else {
3144
+ ret.push(function(instance, args) {
3145
+ return value.call(instance, args);
3146
+ });
3147
+ }
3148
+ } else {
3149
+ Object.defineProperty(base, name, desc);
3150
+ }
3151
+ }
3152
+ }
3153
+ function applyMemberDecs(Class, decInfos, metadata) {
3154
+ var ret = [];
3155
+ var protoInitializers;
3156
+ var staticInitializers;
3157
+ var existingProtoNonFields = new Map();
3158
+ var existingStaticNonFields = new Map();
3159
+ for(var i = 0; i < decInfos.length; i++){
3160
+ var decInfo = decInfos[i];
3161
+ if (!Array.isArray(decInfo)) continue;
3162
+ var kind = decInfo[1];
3163
+ var name = decInfo[2];
3164
+ var isPrivate = decInfo.length > 3;
3165
+ var isStatic = kind >= 5;
3166
+ var base;
3167
+ var initializers;
3168
+ if (isStatic) {
3169
+ base = Class;
3170
+ kind = kind - 5;
3171
+ staticInitializers = staticInitializers || [];
3172
+ initializers = staticInitializers;
3173
+ } else {
3174
+ base = Class.prototype;
3175
+ protoInitializers = protoInitializers || [];
3176
+ initializers = protoInitializers;
3177
+ }
3178
+ if (kind !== 0 && !isPrivate) {
3179
+ var existingNonFields = isStatic ? existingStaticNonFields : existingProtoNonFields;
3180
+ var existingKind = existingNonFields.get(name) || 0;
3181
+ if (existingKind === true || existingKind === 3 && kind !== 4 || existingKind === 4 && kind !== 3) {
3182
+ 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);
3183
+ } else if (!existingKind && kind > 2) {
3184
+ existingNonFields.set(name, kind);
3185
+ } else {
3186
+ existingNonFields.set(name, true);
3187
+ }
3188
+ }
3189
+ applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata);
3190
+ }
3191
+ pushInitializers(ret, protoInitializers);
3192
+ pushInitializers(ret, staticInitializers);
3193
+ return ret;
3194
+ }
3195
+ function pushInitializers(ret, initializers) {
3196
+ if (initializers) {
3197
+ ret.push(function(instance) {
3198
+ for(var i = 0; i < initializers.length; i++){
3199
+ initializers[i].call(instance);
3200
+ }
3201
+ return instance;
3202
+ });
3203
+ }
3204
+ }
3205
+ function applyClassDecs(targetClass, classDecs, metadata) {
3206
+ if (classDecs.length > 0) {
3207
+ var initializers = [];
3208
+ var newClass = targetClass;
3209
+ var name = targetClass.name;
3210
+ for(var i = classDecs.length - 1; i >= 0; i--){
3211
+ var decoratorFinishedRef = {
3212
+ v: false
3213
+ };
3214
+ try {
3215
+ var nextNewClass = classDecs[i](newClass, {
3216
+ kind: "class",
3217
+ name: name,
3218
+ addInitializer: createAddInitializerMethod(initializers, decoratorFinishedRef),
3219
+ metadata
3220
+ });
3221
+ } finally{
3222
+ decoratorFinishedRef.v = true;
3223
+ }
3224
+ if (nextNewClass !== undefined) {
3225
+ assertValidReturnValue(10, nextNewClass);
3226
+ newClass = nextNewClass;
3227
+ }
3228
+ }
3229
+ return [
3230
+ defineMetadata(newClass, metadata),
3231
+ function() {
3232
+ for(var i = 0; i < initializers.length; i++){
3233
+ initializers[i].call(newClass);
3234
+ }
3235
+ }
3236
+ ];
3237
+ }
3238
+ }
3239
+ function defineMetadata(Class, metadata) {
3240
+ return Object.defineProperty(Class, Symbol.metadata || Symbol.for("Symbol.metadata"), {
3241
+ configurable: true,
3242
+ enumerable: true,
3243
+ value: metadata
3244
+ });
3245
+ }
3246
+ return function applyDecs2203R(targetClass, memberDecs, classDecs, parentClass) {
3247
+ if (parentClass !== void 0) {
3248
+ var parentMetadata = parentClass[Symbol.metadata || Symbol.for("Symbol.metadata")];
3249
+ }
3250
+ var metadata = Object.create(parentMetadata === void 0 ? null : parentMetadata);
3251
+ var e = applyMemberDecs(targetClass, memberDecs, metadata);
3252
+ if (!classDecs.length) defineMetadata(targetClass, metadata);
3253
+ return {
3254
+ e: e,
3255
+ get c () {
3256
+ return applyClassDecs(targetClass, classDecs, metadata);
3257
+ }
3258
+ };
3259
+ };
3260
+ }
3261
+ function _apply_decs_2203_r(targetClass, memberDecs, classDecs, parentClass) {
3262
+ return (_apply_decs_2203_r = applyDecs2203RFactory())(targetClass, memberDecs, classDecs, parentClass);
3263
+ }
3264
+ function _identity(x) {
3265
+ return x;
3266
+ }
3267
+ 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;
3268
+ /**
3269
+ * Explicit exit counterpart map.
3270
+ * Replaces fragile string.replace('in','out') which corrupted strings like 'spin' -> 'spout'.
3271
+ */ const EXIT_COUNTERPART = {
3272
+ 'fade-in': 'fade-out',
3273
+ 'fade-in-up': 'fade-out-down',
3274
+ 'fade-in-down': 'fade-out-up',
3275
+ 'fade-in-left': 'fade-out-right',
3276
+ 'fade-in-right': 'fade-out-left',
3277
+ 'zoom-in': 'zoom-out',
3278
+ 'scale-up': 'scale-down',
3279
+ 'bounce-in': 'bounce-out',
3280
+ 'pop-in': 'pop-out',
3281
+ 'slide-in-top': 'slide-out-top',
3282
+ 'slide-in-bottom': 'slide-out-bottom',
3283
+ 'slide-in-left': 'slide-out-left',
3284
+ 'slide-in-right': 'slide-out-right',
3285
+ 'flip-x': 'fade-out',
3286
+ 'flip-y': 'fade-out',
3287
+ 'perspective-pop': 'fade-out',
3288
+ 'expand-vertical': 'collapse-vertical',
3289
+ 'expand-horizontal': 'collapse-horizontal'
3290
+ };
3291
+ /**
3292
+ * WAAPI (Web Animations API) keyframe definitions — used by this component's imperative
3293
+ * runtime path via `element.animate()`. These are the canonical source for adding or
3294
+ * changing a preset. When you add a preset here you MUST also add the matching
3295
+ * `@keyframes vi-<name>` rule in `libs/flux-ui/components/_animation.scss`, which serves
3296
+ * the parallel CSS-only consumer path (`animation: vi-fade-in 300ms ...`).
3297
+ * The two representations cannot share a runtime source without a build-time code-gen step.
3298
+ */ const PRESET_KEYFRAMES = {
3299
+ 'fade-in': [
3300
+ {
3301
+ opacity: 0
3302
+ },
3303
+ {
3304
+ opacity: 1
3305
+ }
3306
+ ],
3307
+ 'fade-out': [
3308
+ {
3309
+ opacity: 1
3310
+ },
3311
+ {
3312
+ opacity: 0
3313
+ }
3314
+ ],
3315
+ 'fade-in-up': [
3316
+ {
3317
+ opacity: 0,
3318
+ transform: 'translate3d(0, 1rem, 0)'
3319
+ },
3320
+ {
3321
+ opacity: 1,
3322
+ transform: 'translate3d(0, 0, 0)'
3323
+ }
3324
+ ],
3325
+ 'fade-in-down': [
3326
+ {
3327
+ opacity: 0,
3328
+ transform: 'translate3d(0, -1rem, 0)'
3329
+ },
3330
+ {
3331
+ opacity: 1,
3332
+ transform: 'translate3d(0, 0, 0)'
3333
+ }
3334
+ ],
3335
+ 'fade-in-left': [
3336
+ {
3337
+ opacity: 0,
3338
+ transform: 'translate3d(-1rem, 0, 0)'
3339
+ },
3340
+ {
3341
+ opacity: 1,
3342
+ transform: 'translate3d(0, 0, 0)'
3343
+ }
3344
+ ],
3345
+ 'fade-in-right': [
3346
+ {
3347
+ opacity: 0,
3348
+ transform: 'translate3d(1rem, 0, 0)'
3349
+ },
3350
+ {
3351
+ opacity: 1,
3352
+ transform: 'translate3d(0, 0, 0)'
3353
+ }
3354
+ ],
3355
+ 'fade-out-up': [
3356
+ {
3357
+ opacity: 1,
3358
+ transform: 'translate3d(0, 0, 0)'
3359
+ },
3360
+ {
3361
+ opacity: 0,
3362
+ transform: 'translate3d(0, -1rem, 0)'
3363
+ }
3364
+ ],
3365
+ 'fade-out-down': [
3366
+ {
3367
+ opacity: 1,
3368
+ transform: 'translate3d(0, 0, 0)'
3369
+ },
3370
+ {
3371
+ opacity: 0,
3372
+ transform: 'translate3d(0, 1rem, 0)'
3373
+ }
3374
+ ],
3375
+ 'fade-out-left': [
3376
+ {
3377
+ opacity: 1,
3378
+ transform: 'translate3d(0, 0, 0)'
3379
+ },
3380
+ {
3381
+ opacity: 0,
3382
+ transform: 'translate3d(-1rem, 0, 0)'
3383
+ }
3384
+ ],
3385
+ 'fade-out-right': [
3386
+ {
3387
+ opacity: 1,
3388
+ transform: 'translate3d(0, 0, 0)'
3389
+ },
3390
+ {
3391
+ opacity: 0,
3392
+ transform: 'translate3d(1rem, 0, 0)'
3393
+ }
3394
+ ],
3395
+ 'zoom-in': [
3396
+ {
3397
+ opacity: 0,
3398
+ transform: 'scale3d(0.92, 0.92, 0.92)'
3399
+ },
3400
+ {
3401
+ opacity: 1,
3402
+ transform: 'scale3d(1, 1, 1)'
3403
+ }
3404
+ ],
3405
+ 'zoom-out': [
3406
+ {
3407
+ opacity: 1,
3408
+ transform: 'scale3d(1, 1, 1)'
3409
+ },
3410
+ {
3411
+ opacity: 0,
3412
+ transform: 'scale3d(0.92, 0.92, 0.92)'
3413
+ }
3414
+ ],
3415
+ 'scale-up': [
3416
+ {
3417
+ transform: 'scale3d(0.8, 0.8, 0.8)'
3418
+ },
3419
+ {
3420
+ transform: 'scale3d(1, 1, 1)'
3421
+ }
3422
+ ],
3423
+ 'scale-down': [
3424
+ {
3425
+ transform: 'scale3d(1.2, 1.2, 1.2)'
3426
+ },
3427
+ {
3428
+ transform: 'scale3d(1, 1, 1)'
3429
+ }
3430
+ ],
3431
+ 'bounce-in': [
3432
+ {
3433
+ opacity: 0,
3434
+ transform: 'scale3d(0.3, 0.3, 0.3)',
3435
+ offset: 0
3436
+ },
3437
+ {
3438
+ opacity: 0.9,
3439
+ transform: 'scale3d(1.08, 1.08, 1.08)',
3440
+ offset: 0.5
3441
+ },
3442
+ {
3443
+ opacity: 1,
3444
+ transform: 'scale3d(0.95, 0.95, 0.95)',
3445
+ offset: 0.75
3446
+ },
3447
+ {
3448
+ opacity: 1,
3449
+ transform: 'scale3d(1, 1, 1)',
3450
+ offset: 1
3451
+ }
3452
+ ],
3453
+ 'bounce-out': [
3454
+ {
3455
+ opacity: 1,
3456
+ transform: 'scale3d(1, 1, 1)',
3457
+ offset: 0
3458
+ },
3459
+ {
3460
+ opacity: 1,
3461
+ transform: 'scale3d(0.9, 0.9, 0.9)',
3462
+ offset: 0.2
3463
+ },
3464
+ {
3465
+ opacity: 1,
3466
+ transform: 'scale3d(1.1, 1.1, 1.1)',
3467
+ offset: 0.5
3468
+ },
3469
+ {
3470
+ opacity: 0,
3471
+ transform: 'scale3d(0.3, 0.3, 0.3)',
3472
+ offset: 1
3473
+ }
3474
+ ],
3475
+ 'pop-in': [
3476
+ {
3477
+ opacity: 0,
3478
+ transform: 'scale3d(0.8, 0.8, 1)',
3479
+ offset: 0
3480
+ },
3481
+ {
3482
+ opacity: 1,
3483
+ transform: 'scale3d(1.05, 1.05, 1)',
3484
+ offset: 0.7
3485
+ },
3486
+ {
3487
+ opacity: 1,
3488
+ transform: 'scale3d(1, 1, 1)',
3489
+ offset: 1
3490
+ }
3491
+ ],
3492
+ 'pop-out': [
3493
+ {
3494
+ opacity: 1,
3495
+ transform: 'scale3d(1, 1, 1)'
3496
+ },
3497
+ {
3498
+ opacity: 0,
3499
+ transform: 'scale3d(0.8, 0.8, 1)'
3500
+ }
3501
+ ],
3502
+ 'slide-in-top': [
3503
+ {
3504
+ transform: 'translate3d(0, -100%, 0)'
3505
+ },
3506
+ {
3507
+ transform: 'translate3d(0, 0, 0)'
3508
+ }
3509
+ ],
3510
+ 'slide-in-bottom': [
3511
+ {
3512
+ transform: 'translate3d(0, 100%, 0)'
3513
+ },
3514
+ {
3515
+ transform: 'translate3d(0, 0, 0)'
3516
+ }
3517
+ ],
3518
+ 'slide-in-left': [
3519
+ {
3520
+ transform: 'translate3d(-100%, 0, 0)'
3521
+ },
3522
+ {
3523
+ transform: 'translate3d(0, 0, 0)'
3524
+ }
3525
+ ],
3526
+ 'slide-in-right': [
3527
+ {
3528
+ transform: 'translate3d(100%, 0, 0)'
3529
+ },
3530
+ {
3531
+ transform: 'translate3d(0, 0, 0)'
3532
+ }
3533
+ ],
3534
+ 'slide-out-top': [
3535
+ {
3536
+ transform: 'translate3d(0, 0, 0)'
3537
+ },
3538
+ {
3539
+ transform: 'translate3d(0, -100%, 0)'
3540
+ }
3541
+ ],
3542
+ 'slide-out-bottom': [
3543
+ {
3544
+ transform: 'translate3d(0, 0, 0)'
3545
+ },
3546
+ {
3547
+ transform: 'translate3d(0, 100%, 0)'
3548
+ }
3549
+ ],
3550
+ 'slide-out-left': [
3551
+ {
3552
+ transform: 'translate3d(0, 0, 0)'
3553
+ },
3554
+ {
3555
+ transform: 'translate3d(-100%, 0, 0)'
3556
+ }
3557
+ ],
3558
+ 'slide-out-right': [
3559
+ {
3560
+ transform: 'translate3d(0, 0, 0)'
3561
+ },
3562
+ {
3563
+ transform: 'translate3d(100%, 0, 0)'
3564
+ }
3565
+ ],
3566
+ 'flip-x': [
3567
+ {
3568
+ transform: 'perspective(400px) rotate3d(1, 0, 0, 90deg)',
3569
+ opacity: 0
3570
+ },
3571
+ {
3572
+ transform: 'perspective(400px) rotate3d(1, 0, 0, 0deg)',
3573
+ opacity: 1
3574
+ }
3575
+ ],
3576
+ 'flip-y': [
3577
+ {
3578
+ transform: 'perspective(400px) rotate3d(0, 1, 0, 90deg)',
3579
+ opacity: 0
3580
+ },
3581
+ {
3582
+ transform: 'perspective(400px) rotate3d(0, 1, 0, 0deg)',
3583
+ opacity: 1
3584
+ }
3585
+ ],
3586
+ 'perspective-pop': [
3587
+ {
3588
+ transform: 'perspective(600px) translateZ(-100px)',
3589
+ opacity: 0
3590
+ },
3591
+ {
3592
+ transform: 'perspective(600px) translateZ(0)',
3593
+ opacity: 1
3594
+ }
3595
+ ],
3596
+ // Fallbacks — dynamically replaced with scrollHeight/Width in _getKeyframes
3597
+ 'expand-vertical': [
3598
+ {
3599
+ maxHeight: '0px',
3600
+ opacity: 0,
3601
+ overflow: 'hidden'
3602
+ },
3603
+ {
3604
+ maxHeight: '100vh',
3605
+ opacity: 1,
3606
+ overflow: 'hidden'
3607
+ }
3608
+ ],
3609
+ 'collapse-vertical': [
3610
+ {
3611
+ maxHeight: '100vh',
3612
+ opacity: 1,
3613
+ overflow: 'hidden'
3614
+ },
3615
+ {
3616
+ maxHeight: '0px',
3617
+ opacity: 0,
3618
+ overflow: 'hidden'
3619
+ }
3620
+ ],
3621
+ 'expand-horizontal': [
3622
+ {
3623
+ maxWidth: '0px',
3624
+ opacity: 0,
3625
+ overflow: 'hidden'
3626
+ },
3627
+ {
3628
+ maxWidth: '100vw',
3629
+ opacity: 1,
3630
+ overflow: 'hidden'
3631
+ }
3632
+ ],
3633
+ 'collapse-horizontal': [
3634
+ {
3635
+ maxWidth: '100vw',
3636
+ opacity: 1,
3637
+ overflow: 'hidden'
3638
+ },
3639
+ {
3640
+ maxWidth: '0px',
3641
+ opacity: 0,
3642
+ overflow: 'hidden'
3643
+ }
3644
+ ],
3645
+ 'pulse': [
3646
+ {
3647
+ transform: 'scale3d(1, 1, 1)'
3648
+ },
3649
+ {
3650
+ transform: 'scale3d(1.05, 1.05, 1.05)'
3651
+ },
3652
+ {
3653
+ transform: 'scale3d(1, 1, 1)'
3654
+ }
3655
+ ],
3656
+ 'bounce': [
3657
+ {
3658
+ transform: 'translate3d(0, 0, 0)'
3659
+ },
3660
+ {
3661
+ transform: 'translate3d(0, -12px, 0)'
3662
+ },
3663
+ {
3664
+ transform: 'translate3d(0, 0, 0)'
3665
+ },
3666
+ {
3667
+ transform: 'translate3d(0, -6px, 0)'
3668
+ },
3669
+ {
3670
+ transform: 'translate3d(0, 0, 0)'
3671
+ }
3672
+ ],
3673
+ 'shake': [
3674
+ {
3675
+ transform: 'translate3d(0, 0, 0)'
3676
+ },
3677
+ {
3678
+ transform: 'translate3d(-4px, 0, 0)'
3679
+ },
3680
+ {
3681
+ transform: 'translate3d(4px, 0, 0)'
3682
+ },
3683
+ {
3684
+ transform: 'translate3d(-4px, 0, 0)'
3685
+ },
3686
+ {
3687
+ transform: 'translate3d(0, 0, 0)'
3688
+ }
3689
+ ],
3690
+ 'wobble': [
3691
+ {
3692
+ transform: 'translate3d(0, 0, 0) rotate(0deg)'
3693
+ },
3694
+ {
3695
+ transform: 'translate3d(-15%, 0, 0) rotate(-4deg)'
3696
+ },
3697
+ {
3698
+ transform: 'translate3d(12%, 0, 0) rotate(3deg)'
3699
+ },
3700
+ {
3701
+ transform: 'translate3d(-9%, 0, 0) rotate(-2deg)'
3702
+ },
3703
+ {
3704
+ transform: 'translate3d(6%, 0, 0) rotate(1deg)'
3705
+ },
3706
+ {
3707
+ transform: 'translate3d(0, 0, 0) rotate(0deg)'
3708
+ }
3709
+ ],
3710
+ 'heartbeat': [
3711
+ {
3712
+ transform: 'scale(1)'
3713
+ },
3714
+ {
3715
+ transform: 'scale(1.15)'
3716
+ },
3717
+ {
3718
+ transform: 'scale(1)'
3719
+ },
3720
+ {
3721
+ transform: 'scale(1.15)'
3722
+ },
3723
+ {
3724
+ transform: 'scale(1)'
3725
+ }
3726
+ ],
3727
+ 'shimmer': [
3728
+ {
3729
+ backgroundPosition: '-200% 0'
3730
+ },
3731
+ {
3732
+ backgroundPosition: '200% 0'
3733
+ }
3734
+ ]
3735
+ };
3736
+ const EXPAND_COLLAPSE_PRESETS = new Set([
3737
+ 'expand-vertical',
3738
+ 'collapse-vertical',
3739
+ 'expand-horizontal',
3740
+ 'collapse-horizontal'
3741
+ ]);
3742
+ /** Shuffle indices using Fisher-Yates — no duplicate delay slots. */ function shuffleIndices(length) {
3743
+ const arr = Array.from({
3744
+ length
3745
+ }, (_, i)=>i);
3746
+ for(let i = arr.length - 1; i > 0; i--){
3747
+ const j = Math.floor(Math.random() * (i + 1));
3748
+ [arr[i], arr[j]] = [
3749
+ arr[j],
3750
+ arr[i]
3751
+ ];
3752
+ }
3753
+ return arr;
3754
+ }
3755
+ let _ViAnimation;
3756
+ _dec = customElement('vi-animation'), _dec1 = property({
3757
+ type: String,
3758
+ reflect: true
3759
+ }), _dec2 = property({
3760
+ type: String,
3761
+ reflect: true
3762
+ }), _dec3 = property({
3763
+ type: String,
3764
+ reflect: true
3765
+ }), _dec4 = property({
3766
+ type: Number,
3767
+ reflect: true
3768
+ }), _dec5 = property({
3769
+ type: Number,
3770
+ reflect: true
3771
+ }), _dec6 = property({
3772
+ type: String,
3773
+ reflect: true
3774
+ }), _dec7 = property({
3775
+ type: Number,
3776
+ reflect: true
3777
+ }), _dec8 = property({
3778
+ type: String,
3779
+ reflect: true
3780
+ }), _dec9 = property({
3781
+ type: String,
3782
+ reflect: true
3783
+ }), _dec10 = property({
3784
+ type: Boolean,
3785
+ reflect: true
3786
+ }), _dec11 = property({
3787
+ type: Boolean,
3788
+ attribute: 'auto-play',
3789
+ reflect: true
3790
+ }), _dec12 = property({
3791
+ type: Boolean,
3792
+ reflect: true
3793
+ }), _dec13 = property({
3794
+ type: Number,
3795
+ reflect: true
3796
+ }), _dec14 = property({
3797
+ type: String,
3798
+ attribute: 'stagger-selector',
3799
+ reflect: true
3800
+ }), _dec15 = property({
3801
+ type: String,
3802
+ attribute: 'stagger-direction',
3803
+ reflect: true
3804
+ }), _dec16 = property({
3805
+ type: String,
3806
+ attribute: 'reduced-motion',
3807
+ reflect: true
3808
+ }), _dec17 = property({
3809
+ attribute: false
3810
+ }), _dec18 = state();
3811
+ new class extends _identity {
3812
+ constructor(){
3813
+ super(_ViAnimation), _initClass();
3814
+ }
3815
+ static{
3816
+ class ViAnimation extends (_ViElement = ViElement) {
3817
+ static{
3818
+ ({ 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, [
3819
+ [
3820
+ _dec1,
3821
+ 1,
3822
+ "name"
3823
+ ],
3824
+ [
3825
+ _dec2,
3826
+ 1,
3827
+ "enter"
3828
+ ],
3829
+ [
3830
+ _dec3,
3831
+ 1,
3832
+ "exit"
3833
+ ],
3834
+ [
3835
+ _dec4,
3836
+ 1,
3837
+ "duration"
3838
+ ],
3839
+ [
3840
+ _dec5,
3841
+ 1,
3842
+ "delay"
3843
+ ],
3844
+ [
3845
+ _dec6,
3846
+ 1,
3847
+ "easing"
3848
+ ],
3849
+ [
3850
+ _dec7,
3851
+ 1,
3852
+ "iterations"
3853
+ ],
3854
+ [
3855
+ _dec8,
3856
+ 1,
3857
+ "direction"
3858
+ ],
3859
+ [
3860
+ _dec9,
3861
+ 1,
3862
+ "fill"
3863
+ ],
3864
+ [
3865
+ _dec10,
3866
+ 1,
3867
+ "open"
3868
+ ],
3869
+ [
3870
+ _dec11,
3871
+ 1,
3872
+ "autoPlay"
3873
+ ],
3874
+ [
3875
+ _dec12,
3876
+ 1,
3877
+ "cascade"
3878
+ ],
3879
+ [
3880
+ _dec13,
3881
+ 1,
3882
+ "stagger"
3883
+ ],
3884
+ [
3885
+ _dec14,
3886
+ 1,
3887
+ "staggerSelector"
3888
+ ],
3889
+ [
3890
+ _dec15,
3891
+ 1,
3892
+ "staggerDirection"
3893
+ ],
3894
+ [
3895
+ _dec16,
3896
+ 1,
3897
+ "reducedMotion"
3898
+ ],
3899
+ [
3900
+ _dec17,
3901
+ 1,
3902
+ "keyframes"
3903
+ ],
3904
+ [
3905
+ _dec18,
3906
+ 1,
3907
+ "_isAnimating"
3908
+ ]
3909
+ ], [
3910
+ _dec
3911
+ ], _ViElement));
3912
+ }
3913
+ static styles = css`${unsafeCSS(animationStyles)}`;
3914
+ #___private_name_1 = (_initProto(this), _init_name(this, 'fade-in'));
3915
+ get name() {
3916
+ return this.#___private_name_1;
3917
+ }
3918
+ set name(_v) {
3919
+ this.#___private_name_1 = _v;
3920
+ }
3921
+ #___private_enter_2 = _init_enter(this, '');
3922
+ get enter() {
3923
+ return this.#___private_enter_2;
3924
+ }
3925
+ set enter(_v) {
3926
+ this.#___private_enter_2 = _v;
3927
+ }
3928
+ #___private_exit_3 = _init_exit(this, '');
3929
+ get exit() {
3930
+ return this.#___private_exit_3;
3931
+ }
3932
+ set exit(_v) {
3933
+ this.#___private_exit_3 = _v;
3934
+ }
3935
+ #___private_duration_4 = _init_duration(this, 300);
3936
+ get duration() {
3937
+ return this.#___private_duration_4;
3938
+ }
3939
+ set duration(_v) {
3940
+ this.#___private_duration_4 = _v;
3941
+ }
3942
+ #___private_delay_5 = _init_delay(this, 0);
3943
+ get delay() {
3944
+ return this.#___private_delay_5;
3945
+ }
3946
+ set delay(_v) {
3947
+ this.#___private_delay_5 = _v;
3948
+ }
3949
+ #___private_easing_6 = _init_easing(this, 'cubic-bezier(0.2, 0, 0, 1)');
3950
+ get easing() {
3951
+ return this.#___private_easing_6;
3952
+ }
3953
+ set easing(_v) {
3954
+ this.#___private_easing_6 = _v;
3955
+ }
3956
+ #___private_iterations_7 = _init_iterations(this, 1);
3957
+ get iterations() {
3958
+ return this.#___private_iterations_7;
3959
+ }
3960
+ set iterations(_v) {
3961
+ this.#___private_iterations_7 = _v;
3962
+ }
3963
+ #___private_direction_8 = _init_direction(this, 'normal');
3964
+ get direction() {
3965
+ return this.#___private_direction_8;
3966
+ }
3967
+ set direction(_v) {
3968
+ this.#___private_direction_8 = _v;
3969
+ }
3970
+ #___private_fill_9 = _init_fill(this, 'forwards');
3971
+ get fill() {
3972
+ return this.#___private_fill_9;
3973
+ }
3974
+ set fill(_v) {
3975
+ this.#___private_fill_9 = _v;
3976
+ }
3977
+ #___private_open_10 = _init_open(this, true);
3978
+ get open() {
3979
+ return this.#___private_open_10;
3980
+ }
3981
+ set open(_v) {
3982
+ this.#___private_open_10 = _v;
3983
+ }
3984
+ #___private_autoPlay_11 = _init_autoPlay(this, true);
3985
+ get autoPlay() {
3986
+ return this.#___private_autoPlay_11;
3987
+ }
3988
+ set autoPlay(_v) {
3989
+ this.#___private_autoPlay_11 = _v;
3990
+ }
3991
+ #___private_cascade_12 = _init_cascade(this, false);
3992
+ get cascade() {
3993
+ return this.#___private_cascade_12;
3994
+ }
3995
+ set cascade(_v) {
3996
+ this.#___private_cascade_12 = _v;
3997
+ }
3998
+ #___private_stagger_13 = _init_stagger(this, 50);
3999
+ get stagger() {
4000
+ return this.#___private_stagger_13;
4001
+ }
4002
+ set stagger(_v) {
4003
+ this.#___private_stagger_13 = _v;
4004
+ }
4005
+ #___private_staggerSelector_14 = _init_staggerSelector(this, ':scope > *');
4006
+ get staggerSelector() {
4007
+ return this.#___private_staggerSelector_14;
4008
+ }
4009
+ set staggerSelector(_v) {
4010
+ this.#___private_staggerSelector_14 = _v;
4011
+ }
4012
+ #___private_staggerDirection_15 = _init_staggerDirection(this, 'normal');
4013
+ get staggerDirection() {
4014
+ return this.#___private_staggerDirection_15;
4015
+ }
4016
+ set staggerDirection(_v) {
4017
+ this.#___private_staggerDirection_15 = _v;
4018
+ }
4019
+ #___private_reducedMotion_16 = _init_reducedMotion(this, 'auto');
4020
+ get reducedMotion() {
4021
+ return this.#___private_reducedMotion_16;
4022
+ }
4023
+ set reducedMotion(_v) {
4024
+ this.#___private_reducedMotion_16 = _v;
4025
+ }
4026
+ #___private_keyframes_17 = _init_keyframes(this, null);
4027
+ get keyframes() {
4028
+ return this.#___private_keyframes_17;
4029
+ }
4030
+ set keyframes(_v) {
4031
+ this.#___private_keyframes_17 = _v;
4032
+ }
4033
+ #___private__isAnimating_18 = _init__isAnimating(this, false);
4034
+ get _isAnimating() {
4035
+ return this.#___private__isAnimating_18;
4036
+ }
4037
+ set _isAnimating(_v) {
4038
+ this.#___private__isAnimating_18 = _v;
4039
+ }
4040
+ _activeAnimations = [];
4041
+ /**
4042
+ * Monotonically incrementing sequence ID. Incremented on every new sequence
4043
+ * start (via _cancelSilently). Async continuations check their captured ID
4044
+ * against the current to detect stale callbacks.
4045
+ */ _sequenceId = 0;
4046
+ /**
4047
+ * Prevents updated() from re-calling show()/hide() when the imperative API
4048
+ * internally mutates this.open to keep it in sync with animation state.
4049
+ */ _updateGuard = false;
4050
+ /** Cached matchMedia object for prefers-reduced-motion. */ _reducedMotionMQ = null;
4051
+ _reducedMotionListener = null;
4052
+ // ─── Public getters ───────────────────────────────────────────────────────
4053
+ /** Whether an animation sequence is currently running. */ get isAnimating() {
4054
+ return this._isAnimating;
4055
+ }
4056
+ // ─── Lifecycle ────────────────────────────────────────────────────────────
4057
+ connectedCallback() {
4058
+ super.connectedCallback();
4059
+ if (!this.open) {
4060
+ this.hidden = true;
4061
+ } else if (this.autoPlay) {
4062
+ this.updateComplete.then(()=>this.play());
4063
+ }
4064
+ if (typeof window !== 'undefined') {
4065
+ this._reducedMotionMQ = window.matchMedia('(prefers-reduced-motion: reduce)');
4066
+ this._reducedMotionListener = ()=>this.requestUpdate();
4067
+ this._reducedMotionMQ.addEventListener('change', this._reducedMotionListener);
4068
+ }
4069
+ }
4070
+ disconnectedCallback() {
4071
+ super.disconnectedCallback();
4072
+ // Cancel in-flight animations to release resources on detached nodes
4073
+ this._cancelSilently();
4074
+ if (this._reducedMotionMQ && this._reducedMotionListener) {
4075
+ this._reducedMotionMQ.removeEventListener('change', this._reducedMotionListener);
4076
+ this._reducedMotionMQ = null;
4077
+ this._reducedMotionListener = null;
4078
+ }
4079
+ }
4080
+ updated(changedProperties) {
4081
+ super.updated(changedProperties);
4082
+ // _updateGuard prevents show()/hide() from being called again when the
4083
+ // imperative API internally sets this.open to keep property state in sync
4084
+ if (this._updateGuard) return;
4085
+ if (changedProperties.has('open') && changedProperties.get('open') !== undefined) {
4086
+ if (this.open) {
4087
+ this.show();
4088
+ } else {
4089
+ this.hide();
4090
+ }
4091
+ }
4092
+ }
4093
+ // ─── Imperative API ───────────────────────────────────────────────────────
4094
+ /** Returns a snapshot of the currently running Animation objects. */ getAnimations() {
4095
+ return [
4096
+ ...this._activeAnimations
4097
+ ];
4098
+ }
4099
+ /**
4100
+ * Animate element into view.
4101
+ * Fires cancelable `vi-animation-before-show` — call preventDefault() to block.
4102
+ */ async show() {
4103
+ const allowed = this._dispatchCancelable('vi-animation-before-show', {
4104
+ name: this.enter || this.name,
4105
+ target: this,
4106
+ phase: 'enter'
4107
+ });
4108
+ if (!allowed) {
4109
+ // If show() was triggered by a declarative open=true change while still hidden,
4110
+ // revert to a consistent closed state.
4111
+ if (this.open && this.hidden) {
4112
+ this._withUpdateGuard(()=>{
4113
+ this.open = false;
4114
+ this.hidden = true;
4115
+ });
4116
+ }
4117
+ return;
4118
+ }
4119
+ this._withUpdateGuard(()=>{
4120
+ if (!this.open) this.open = true;
4121
+ this.hidden = false;
4122
+ });
4123
+ const animName = this.enter || this.name || 'fade-in';
4124
+ await this._runAnimationSequence(animName, 'enter', false);
4125
+ }
4126
+ /**
4127
+ * Animate element out of view.
4128
+ * Fires cancelable `vi-animation-before-hide` — call preventDefault() to block.
4129
+ */ async hide() {
4130
+ const exitName = this.exit || EXIT_COUNTERPART[this.name] || 'fade-out';
4131
+ const allowed = this._dispatchCancelable('vi-animation-before-hide', {
4132
+ name: exitName,
4133
+ target: this,
4134
+ phase: 'exit'
4135
+ });
4136
+ if (!allowed) {
4137
+ if (!this.open && !this.hidden) {
4138
+ this._withUpdateGuard(()=>{
4139
+ this.open = true;
4140
+ this.hidden = false;
4141
+ });
4142
+ }
4143
+ return;
4144
+ }
4145
+ await this._runAnimationSequence(exitName, 'exit', true);
4146
+ this._withUpdateGuard(()=>{
4147
+ if (this.open) this.open = false;
4148
+ this.hidden = true;
4149
+ });
4150
+ }
4151
+ /** Toggle between show() and hide(). */ async toggle() {
4152
+ if (this.open) {
4153
+ await this.hide();
4154
+ } else {
4155
+ await this.show();
4156
+ }
4157
+ }
4158
+ /** Play the current `name` animation without changing visibility. */ async play() {
4159
+ const phase = this.open ? 'enter' : 'custom';
4160
+ await this._runAnimationSequence(this.name, phase, false);
4161
+ }
4162
+ pause() {
4163
+ this._activeAnimations.forEach((a)=>a.pause());
4164
+ }
4165
+ resume() {
4166
+ this._activeAnimations.forEach((a)=>a.play());
4167
+ }
4168
+ reverse() {
4169
+ this._activeAnimations.forEach((a)=>a.reverse());
4170
+ }
4171
+ /**
4172
+ * Cancel all running animations and fire `vi-animation-cancel`.
4173
+ */ cancel() {
4174
+ this._cancelSilently();
4175
+ this._dispatch('vi-animation-cancel', {
4176
+ name: this.name,
4177
+ target: this,
4178
+ phase: 'custom'
4179
+ });
4180
+ }
4181
+ /**
4182
+ * Jump all running animations to their end state and fire `vi-animation-finish`.
4183
+ */ finish() {
4184
+ const anims = [
4185
+ ...this._activeAnimations
4186
+ ];
4187
+ // Clear state first so stale callbacks don't double-process
4188
+ this._cancelSilently();
4189
+ anims.forEach((a)=>{
4190
+ try {
4191
+ a.finish();
4192
+ } catch {}
4193
+ });
4194
+ this._dispatch('vi-animation-finish', {
4195
+ name: this.name,
4196
+ target: this,
4197
+ phase: 'custom'
4198
+ });
4199
+ }
4200
+ // ─── Private helpers ──────────────────────────────────────────────────────
4201
+ /**
4202
+ * Cancel all in-flight animations WITHOUT firing a public event.
4203
+ * Used for: self-interruption when a new sequence starts, and for lifecycle cleanup.
4204
+ */ _cancelSilently() {
4205
+ this._sequenceId++; // invalidate any pending async continuations
4206
+ this._activeAnimations.forEach((a)=>{
4207
+ try {
4208
+ a.cancel();
4209
+ } catch {}
4210
+ });
4211
+ this._activeAnimations = [];
4212
+ this._isAnimating = false;
4213
+ }
4214
+ /**
4215
+ * Runs a function that mutates reactive properties without triggering
4216
+ * the updated() -> show()/hide() feedback loop.
4217
+ */ _withUpdateGuard(fn) {
4218
+ this._updateGuard = true;
4219
+ fn();
4220
+ this.updateComplete.then(()=>{
4221
+ this._updateGuard = false;
4222
+ });
4223
+ }
4224
+ _getTargetElements() {
4225
+ const slot = this.shadowRoot?.querySelector('slot');
4226
+ if (!slot) return [
4227
+ this
4228
+ ];
4229
+ const assignedNodes = slot.assignedElements({
4230
+ flatten: true
4231
+ });
4232
+ if (assignedNodes.length === 0) return [
4233
+ this
4234
+ ];
4235
+ if (!this.cascade) return assignedNodes;
4236
+ const targetElements = [];
4237
+ for (const node of assignedNodes){
4238
+ let matched = false;
4239
+ try {
4240
+ if (node.matches(this.staggerSelector)) {
4241
+ targetElements.push(node);
4242
+ matched = true;
4243
+ }
4244
+ const children = Array.from(node.querySelectorAll(this.staggerSelector));
4245
+ if (children.length > 0) {
4246
+ targetElements.push(...children);
4247
+ matched = true;
4248
+ }
4249
+ } catch {
4250
+ return assignedNodes; // graceful fallback to all assigned nodes
4251
+ }
4252
+ if (!matched) targetElements.push(node);
4253
+ }
4254
+ return targetElements.length > 0 ? targetElements : assignedNodes;
4255
+ }
4256
+ /**
4257
+ * Returns keyframes for a given animation name.
4258
+ * - Consumer keyframes are passed through as-is (Keyframe[] or PropertyIndexedKeyframes).
4259
+ * - Expand/collapse presets dynamically read scrollHeight/scrollWidth to avoid magic-number clipping.
4260
+ * - Falls back to PRESET_KEYFRAMES, then 'fade-in' if unknown.
4261
+ */ _getKeyframes(animName, phase, isReducedMotion, target) {
4262
+ // Explicit consumer-supplied keyframes take highest priority
4263
+ if (this.keyframes) return this.keyframes;
4264
+ // For built-in presets under reduced motion, substitute with safe opacity fades
4265
+ if (isReducedMotion) {
4266
+ return PRESET_KEYFRAMES[phase === 'exit' ? 'fade-out' : 'fade-in'];
4267
+ }
4268
+ // Dynamic expand/collapse using actual element dimensions
4269
+ if (EXPAND_COLLAPSE_PRESETS.has(animName) && target) {
4270
+ const h = target.scrollHeight;
4271
+ const w = target.scrollWidth;
4272
+ switch(animName){
4273
+ case 'expand-vertical':
4274
+ return [
4275
+ {
4276
+ maxHeight: '0px',
4277
+ opacity: 0,
4278
+ overflow: 'hidden'
4279
+ },
4280
+ {
4281
+ maxHeight: `${h}px`,
4282
+ opacity: 1,
4283
+ overflow: 'hidden'
4284
+ }
4285
+ ];
4286
+ case 'collapse-vertical':
4287
+ return [
4288
+ {
4289
+ maxHeight: `${h}px`,
4290
+ opacity: 1,
4291
+ overflow: 'hidden'
4292
+ },
4293
+ {
4294
+ maxHeight: '0px',
4295
+ opacity: 0,
4296
+ overflow: 'hidden'
4297
+ }
4298
+ ];
4299
+ case 'expand-horizontal':
4300
+ return [
4301
+ {
4302
+ maxWidth: '0px',
4303
+ opacity: 0,
4304
+ overflow: 'hidden'
4305
+ },
4306
+ {
4307
+ maxWidth: `${w}px`,
4308
+ opacity: 1,
4309
+ overflow: 'hidden'
4310
+ }
4311
+ ];
4312
+ case 'collapse-horizontal':
4313
+ return [
4314
+ {
4315
+ maxWidth: `${w}px`,
4316
+ opacity: 1,
4317
+ overflow: 'hidden'
4318
+ },
4319
+ {
4320
+ maxWidth: '0px',
4321
+ opacity: 0,
4322
+ overflow: 'hidden'
4323
+ }
4324
+ ];
4325
+ }
4326
+ }
4327
+ return PRESET_KEYFRAMES[animName] ?? PRESET_KEYFRAMES['fade-in'];
4328
+ }
4329
+ _calculateStaggerDelay(index, total, shuffledOrder) {
4330
+ if (!this.cascade || total <= 1) return this.delay;
4331
+ let orderIndex = index;
4332
+ if (this.staggerDirection === 'reverse') {
4333
+ orderIndex = total - 1 - index;
4334
+ } else if (this.staggerDirection === 'center') {
4335
+ orderIndex = Math.abs((total - 1) / 2 - index);
4336
+ } else if (this.staggerDirection === 'random' && shuffledOrder) {
4337
+ orderIndex = shuffledOrder[index];
4338
+ }
4339
+ return this.delay + orderIndex * this.stagger;
4340
+ }
4341
+ async _runAnimationSequence(animName, phase, isExitPhase) {
4342
+ const isReduced = this._shouldReduceMotion();
4343
+ const targets = this._getTargetElements();
4344
+ if (targets.length === 0) return;
4345
+ // Interrupt previous sequence silently (no vi-animation-cancel event)
4346
+ this._cancelSilently();
4347
+ const mySequenceId = this._sequenceId;
4348
+ this._isAnimating = true;
4349
+ // 'auto' mode: shorten duration AND substitute keyframes.
4350
+ // 'fade-only' mode: substitute keyframes only, original duration is preserved.
4351
+ const actualDuration = isReduced && this.reducedMotion !== 'fade-only' ? Math.min(this.duration, 100) : this.duration;
4352
+ this._dispatch('vi-animation-start', {
4353
+ name: animName,
4354
+ target: this,
4355
+ phase,
4356
+ duration: actualDuration,
4357
+ delay: this.delay
4358
+ });
4359
+ // Pre-compute shuffled order so all elements get unique, non-repeating delay slots
4360
+ const shuffledOrder = this.staggerDirection === 'random' ? shuffleIndices(targets.length) : undefined;
4361
+ const animationPromises = targets.map((el, index)=>{
4362
+ const elementDelay = isReduced ? 0 : this._calculateStaggerDelay(index, targets.length, shuffledOrder);
4363
+ const kf = this._getKeyframes(animName, phase, isReduced, el);
4364
+ const anim = el.animate(kf, {
4365
+ duration: actualDuration,
4366
+ delay: elementDelay,
4367
+ easing: this.easing,
4368
+ iterations: this.iterations,
4369
+ direction: this.direction,
4370
+ fill: this.fill
4371
+ });
4372
+ this._activeAnimations.push(anim);
4373
+ return anim.finished.then(()=>{
4374
+ // For exit animations: commit the end-frame styles to element.style and
4375
+ // cancel the WAAPI fill so external CSS can take over later (avoids
4376
+ // invisible elements if the element is re-shown via show() or style).
4377
+ if (isExitPhase) {
4378
+ try {
4379
+ anim.commitStyles();
4380
+ } catch {}
4381
+ try {
4382
+ anim.cancel();
4383
+ } catch {}
4384
+ }
4385
+ }, ()=>null);
4386
+ });
4387
+ await Promise.all(animationPromises);
4388
+ // Discard stale result if a newer sequence has already started
4389
+ if (this._sequenceId !== mySequenceId) return;
4390
+ this._isAnimating = false;
4391
+ this._activeAnimations = [];
4392
+ this._dispatch('vi-animation-end', {
4393
+ name: animName,
4394
+ target: this,
4395
+ phase,
4396
+ completed: true
4397
+ });
4398
+ }
4399
+ /**
4400
+ * Returns whether any reduced-motion adaptation should be applied.
4401
+ *
4402
+ * Both 'auto' and 'fade-only' gate on the OS/browser preference so that the attribute
4403
+ * does not override what the user has configured at the system level. The distinction
4404
+ * between them is captured in _runAnimationSequence:
4405
+ * - 'auto': shorten duration (≤100 ms) + substitute with opacity fade.
4406
+ * - 'fade-only': substitute with opacity fade, but keep the original duration.
4407
+ * - 'disable': ignore OS preference entirely — always play the full animation.
4408
+ */ _shouldReduceMotion() {
4409
+ if (this.reducedMotion === 'disable') return false;
4410
+ // Gate on the OS/browser preference for both 'auto' and 'fade-only'.
4411
+ return this._reducedMotionMQ?.matches ?? (typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
4412
+ }
4413
+ _dispatch(eventName, detail) {
4414
+ this.dispatchEvent(new CustomEvent(eventName, {
4415
+ detail,
4416
+ bubbles: true,
4417
+ composed: true
4418
+ }));
4419
+ }
4420
+ /**
4421
+ * Dispatch a cancelable event. Returns true if the animation should proceed
4422
+ * (i.e. preventDefault() was NOT called), false if it should be blocked.
4423
+ */ _dispatchCancelable(eventName, detail) {
4424
+ const event = new CustomEvent(eventName, {
4425
+ detail,
4426
+ bubbles: true,
4427
+ composed: true,
4428
+ cancelable: true
4429
+ });
4430
+ this.dispatchEvent(event);
4431
+ return !event.defaultPrevented;
4432
+ }
4433
+ render() {
4434
+ return html`<slot></slot>`;
4435
+ }
4436
+ }
4437
+ }
4438
+ }();
4439
+
4440
+ export { _ViAlert as ViAlert, _ViAnimation as ViAnimation, _ViBadge as ViBadge, _ViChip as ViChip, _ViChipGroup as ViChipGroup, ViElement, registerIcons };