@vialiq/web-components 0.12.0 → 0.14.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.
Files changed (26) hide show
  1. package/badge/vi-badge.d.ts +2 -2
  2. package/base/controllers/floating-controller.d.ts +69 -0
  3. package/base/controllers/floating-controller.d.ts.map +1 -0
  4. package/base/draggable-mixin.d.ts +33 -0
  5. package/base/draggable-mixin.d.ts.map +1 -0
  6. package/base/focus-trap-mixin.d.ts +4 -4
  7. package/base/focus-trap-mixin.d.ts.map +1 -1
  8. package/base/if-non-empty.d.ts +1 -1
  9. package/base/overlay-manager.d.ts +58 -0
  10. package/base/overlay-manager.d.ts.map +1 -0
  11. package/button/vi-button.d.ts +3 -3
  12. package/checkbox/vi-checkbox.d.ts +4 -4
  13. package/checkbox/vi-checkbox.js +1 -1
  14. package/icons/vi-icon.d.ts +2 -2
  15. package/icons/vi-icon.js +1 -1
  16. package/index.js +1216 -1219
  17. package/input/vi-input.d.ts +4 -4
  18. package/input/vi-input.js +1 -1
  19. package/package.json +3 -3
  20. package/radio/vi-radio-group.d.ts +5 -5
  21. package/radio/vi-radio-group.js +1 -1
  22. package/radio/vi-radio.d.ts +3 -3
  23. package/tooltip/vi-tooltip.d.ts +11 -3
  24. package/tooltip/vi-tooltip.d.ts.map +1 -1
  25. package/tooltip/vi-tooltip.js +131 -5
  26. package/{validity-mixin-H4aOFJEr.js → validity-mixin-DO0ycRH2.js} +1 -1
package/index.js CHANGED
@@ -13,8 +13,9 @@ 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
15
  import { customElement, property, state, queryAssignedElements } from 'lit/decorators.js';
16
+ import { checkCircleIcon, triangleWarningIcon, infoIcon, xIcon, lockIcon } from '@vialiq/icons';
16
17
  import { F as FocusableMixin } from './focusable-mixin-CmxOyPX5.js';
17
- import { V as ValidityMixin } from './validity-mixin-H4aOFJEr.js';
18
+ import { V as ValidityMixin } from './validity-mixin-DO0ycRH2.js';
18
19
 
19
20
  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}";
20
21
 
@@ -390,7 +391,7 @@ function applyDecs2203RFactory$4() {
390
391
  function _apply_decs_2203_r$4(targetClass, memberDecs, classDecs, parentClass) {
391
392
  return (_apply_decs_2203_r$4 = applyDecs2203RFactory$4())(targetClass, memberDecs, classDecs, parentClass);
392
393
  }
393
- function _identity$4(x) {
394
+ function _identity$3(x) {
394
395
  return x;
395
396
  }
396
397
  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;
@@ -420,7 +421,7 @@ _dec$4 = customElement('vi-badge'), _dec1$4 = property({
420
421
  type: Boolean,
421
422
  reflect: true
422
423
  }), _dec9$4 = state(), _dec10$4 = state();
423
- new class extends _identity$4 {
424
+ new class extends _identity$3 {
424
425
  constructor(){
425
426
  super(_ViBadge), _initClass$4();
426
427
  }
@@ -614,7 +615,7 @@ new class extends _identity$4 {
614
615
  }
615
616
  }();
616
617
 
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}";
618
+ 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, var(--vi-alert-floating-z-index, 1080));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}";
618
619
 
619
620
  function applyDecs2203RFactory$3() {
620
621
  function createAddInitializerMethod(initializers, decoratorFinishedRef) {
@@ -988,7 +989,7 @@ function applyDecs2203RFactory$3() {
988
989
  function _apply_decs_2203_r$3(targetClass, memberDecs, classDecs, parentClass) {
989
990
  return (_apply_decs_2203_r$3 = applyDecs2203RFactory$3())(targetClass, memberDecs, classDecs, parentClass);
990
991
  }
991
- function _identity$3(x) {
992
+ function _identity$2(x) {
992
993
  return x;
993
994
  }
994
995
  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, /**
@@ -998,29 +999,9 @@ var _dec$3, _initClass$3, _ViElement$1, _dec1$3, _dec2$3, _dec3$3, _dec4$3, _dec
998
999
  * Alias for auto-hide-duration in milliseconds.
999
1000
  * Setting a positive duration enables auto-hiding automatically.
1000
1001
  */ _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;
1001
- const checkCircleIcon = {
1002
- name: 'check-circle',
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>`
1004
- };
1005
- const alertTriangleIcon = {
1006
- name: 'alert-triangle',
1007
- 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="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>`
1008
- };
1009
- const infoIcon = {
1010
- name: 'info',
1011
- 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"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>`
1012
- };
1013
- const xIcon = {
1014
- name: 'x',
1015
- 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"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`
1016
- };
1017
- const lockIcon = {
1018
- name: 'lock',
1019
- 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"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>`
1020
- };
1021
1002
  registerIcons([
1022
1003
  checkCircleIcon,
1023
- alertTriangleIcon,
1004
+ triangleWarningIcon,
1024
1005
  infoIcon,
1025
1006
  xIcon,
1026
1007
  lockIcon
@@ -1059,7 +1040,7 @@ _dec$3 = customElement('vi-alert'), _dec1$3 = property({
1059
1040
  attribute: 'no-icon',
1060
1041
  reflect: true
1061
1042
  }), _dec12$1 = state(), _dec13$1 = state();
1062
- new class extends _identity$3 {
1043
+ new class extends _identity$2 {
1063
1044
  constructor(){
1064
1045
  super(_ViAlert), _initClass$3();
1065
1046
  }
@@ -1289,7 +1270,7 @@ new class extends _identity$3 {
1289
1270
  return 'check-circle';
1290
1271
  case 'warning':
1291
1272
  case 'danger':
1292
- return 'alert-triangle';
1273
+ return 'triangle-warning';
1293
1274
  case 'info':
1294
1275
  default:
1295
1276
  return 'info';
@@ -1840,7 +1821,7 @@ function applyDecs2203RFactory$2() {
1840
1821
  function _apply_decs_2203_r$2(targetClass, memberDecs, classDecs, parentClass) {
1841
1822
  return (_apply_decs_2203_r$2 = applyDecs2203RFactory$2())(targetClass, memberDecs, classDecs, parentClass);
1842
1823
  }
1843
- function _identity$2(x) {
1824
+ function _identity$1(x) {
1844
1825
  return x;
1845
1826
  }
1846
1827
  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;
@@ -1867,7 +1848,7 @@ _dec$2 = customElement('vi-chip'), _dec1$2 = property({
1867
1848
  type: String,
1868
1849
  reflect: true
1869
1850
  }), _dec8$2 = state(), _dec9$2 = state(), _dec10$2 = state(), _dec11$1 = state();
1870
- new class extends _identity$2 {
1851
+ new class extends _identity$1 {
1871
1852
  constructor(){
1872
1853
  super(_ViChip), _initClass$2();
1873
1854
  }
@@ -2538,7 +2519,7 @@ function applyDecs2203RFactory$1() {
2538
2519
  function _apply_decs_2203_r$1(targetClass, memberDecs, classDecs, parentClass) {
2539
2520
  return (_apply_decs_2203_r$1 = applyDecs2203RFactory$1())(targetClass, memberDecs, classDecs, parentClass);
2540
2521
  }
2541
- function _identity$1(x) {
2522
+ function _identity(x) {
2542
2523
  return x;
2543
2524
  }
2544
2525
  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
@@ -2565,7 +2546,7 @@ _dec$1 = customElement('vi-chip-group'), _dec1$1 = property({
2565
2546
  }), _dec9$1 = property(), _dec10$1 = queryAssignedElements({
2566
2547
  selector: 'vi-chip'
2567
2548
  });
2568
- new class extends _identity$1 {
2549
+ new class extends _identity {
2569
2550
  constructor(){
2570
2551
  super(_ViChipGroup), _initClass$1();
2571
2552
  }
@@ -2723,10 +2704,41 @@ new class extends _identity$1 {
2723
2704
  }
2724
2705
  }
2725
2706
  formResetCallback() {
2726
- this.value = [];
2707
+ const initialValue = this.getAttribute('value');
2708
+ if (initialValue) {
2709
+ try {
2710
+ const parsed = JSON.parse(initialValue);
2711
+ this.value = Array.isArray(parsed) ? parsed : [
2712
+ initialValue
2713
+ ];
2714
+ } catch {
2715
+ this.value = [
2716
+ initialValue
2717
+ ];
2718
+ }
2719
+ } else {
2720
+ this.value = [];
2721
+ }
2727
2722
  this.status = 'default';
2728
2723
  this.validityMessage = '';
2729
2724
  }
2725
+ formStateRestoreCallback(state, _mode) {
2726
+ if (typeof state === 'string') {
2727
+ try {
2728
+ const parsed = JSON.parse(state);
2729
+ this.value = Array.isArray(parsed) ? parsed : [
2730
+ state
2731
+ ];
2732
+ } catch {
2733
+ this.value = [
2734
+ state
2735
+ ];
2736
+ }
2737
+ } else if (state instanceof FormData) {
2738
+ const values = state.getAll(this.name);
2739
+ this.value = values.map((v)=>v.toString());
2740
+ }
2741
+ }
2730
2742
  formDisabledCallback(disabled) {
2731
2743
  this.disabled = disabled;
2732
2744
  }
@@ -2887,537 +2899,159 @@ new class extends _identity$1 {
2887
2899
  }
2888
2900
  }();
2889
2901
 
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
- }
2902
+ /**
2903
+ * Explicit exit counterpart map.
2904
+ * Replaces fragile string.replace('in','out') which corrupted strings like 'spin' -> 'spout'.
2905
+ */ const EXIT_COUNTERPART = {
2906
+ 'fade-in': 'fade-out',
2907
+ 'fade-in-up': 'fade-out-down',
2908
+ 'fade-in-down': 'fade-out-up',
2909
+ 'fade-in-left': 'fade-out-right',
2910
+ 'fade-in-right': 'fade-out-left',
2911
+ 'zoom-in': 'zoom-out',
2912
+ 'scale-up': 'scale-down',
2913
+ 'bounce-in': 'bounce-out',
2914
+ 'pop-in': 'pop-out',
2915
+ 'slide-in-top': 'slide-out-top',
2916
+ 'slide-in-bottom': 'slide-out-bottom',
2917
+ 'slide-in-left': 'slide-out-left',
2918
+ 'slide-in-right': 'slide-out-right',
2919
+ 'flip-x': 'fade-out',
2920
+ 'flip-y': 'fade-out',
2921
+ 'perspective-pop': 'fade-out',
2922
+ 'expand-vertical': 'collapse-vertical',
2923
+ 'expand-horizontal': 'collapse-horizontal'
2924
+ };
2925
+ /**
2926
+ * WAAPI (Web Animations API) keyframe definitions — used by this component's imperative
2927
+ * runtime path via `element.animate()`. These are the canonical source for adding or
2928
+ * changing a preset. When you add a preset here you MUST also add the matching
2929
+ * `@keyframes vi-<name>` rule in `libs/flux-ui/components/_animation.scss`, which serves
2930
+ * the parallel CSS-only consumer path (\`animation: vi-fade-in 300ms ...\`).
2931
+ * The two representations cannot share a runtime source without a build-time code-gen step.
2932
+ */ const PRESET_KEYFRAMES = {
2933
+ 'fade-in': [
2934
+ {
2935
+ opacity: 0
2936
+ },
2937
+ {
2938
+ opacity: 1
2957
2939
  }
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;
2940
+ ],
2941
+ 'fade-out': [
2942
+ {
2943
+ opacity: 1
2944
+ },
2945
+ {
2946
+ opacity: 0
2970
2947
  }
2971
- }
2972
- function assertNotFinished(decoratorFinishedRef, fnName) {
2973
- if (decoratorFinishedRef.v) {
2974
- throw new Error("attempted to call " + fnName + " after decoration was finished");
2948
+ ],
2949
+ 'fade-in-up': [
2950
+ {
2951
+ opacity: 0,
2952
+ transform: 'translate3d(0, 1rem, 0)'
2953
+ },
2954
+ {
2955
+ opacity: 1,
2956
+ transform: 'translate3d(0, 0, 0)'
2975
2957
  }
2976
- }
2977
- function assertCallable(fn, hint) {
2978
- if (typeof fn !== "function") {
2979
- throw new TypeError(hint + " must be a function");
2958
+ ],
2959
+ 'fade-in-down': [
2960
+ {
2961
+ opacity: 0,
2962
+ transform: 'translate3d(0, -1rem, 0)'
2963
+ },
2964
+ {
2965
+ opacity: 1,
2966
+ transform: 'translate3d(0, 0, 0)'
2980
2967
  }
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");
2968
+ ],
2969
+ 'fade-in-left': [
2970
+ {
2971
+ opacity: 0,
2972
+ transform: 'translate3d(-1rem, 0, 0)'
2973
+ },
2974
+ {
2975
+ opacity: 1,
2976
+ transform: 'translate3d(0, 0, 0)'
3007
2977
  }
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);
2978
+ ],
2979
+ 'fade-in-right': [
2980
+ {
2981
+ opacity: 0,
2982
+ transform: 'translate3d(1rem, 0, 0)'
2983
+ },
2984
+ {
2985
+ opacity: 1,
2986
+ transform: 'translate3d(0, 0, 0)'
3033
2987
  }
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;
2988
+ ],
2989
+ 'fade-out-up': [
2990
+ {
2991
+ opacity: 1,
2992
+ transform: 'translate3d(0, 0, 0)'
2993
+ },
2994
+ {
2995
+ opacity: 0,
2996
+ transform: 'translate3d(0, -1rem, 0)'
3045
2997
  }
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
- }
2998
+ ],
2999
+ 'fade-out-down': [
3000
+ {
3001
+ opacity: 1,
3002
+ transform: 'translate3d(0, 0, 0)'
3003
+ },
3004
+ {
3005
+ opacity: 0,
3006
+ transform: 'translate3d(0, 1rem, 0)'
3099
3007
  }
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);
3008
+ ],
3009
+ 'fade-out-left': [
3010
+ {
3011
+ opacity: 1,
3012
+ transform: 'translate3d(0, 0, 0)'
3013
+ },
3014
+ {
3015
+ opacity: 0,
3016
+ transform: 'translate3d(-1rem, 0, 0)'
3121
3017
  }
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
- }
3018
+ ],
3019
+ 'fade-out-right': [
3020
+ {
3021
+ opacity: 1,
3022
+ transform: 'translate3d(0, 0, 0)'
3023
+ },
3024
+ {
3025
+ opacity: 0,
3026
+ transform: 'translate3d(1rem, 0, 0)'
3151
3027
  }
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);
3028
+ ],
3029
+ 'zoom-in': [
3030
+ {
3031
+ opacity: 0,
3032
+ transform: 'scale3d(0.92, 0.92, 0.92)'
3033
+ },
3034
+ {
3035
+ opacity: 1,
3036
+ transform: 'scale3d(1, 1, 1)'
3190
3037
  }
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
- });
3038
+ ],
3039
+ 'zoom-out': [
3040
+ {
3041
+ opacity: 1,
3042
+ transform: 'scale3d(1, 1, 1)'
3043
+ },
3044
+ {
3045
+ opacity: 0,
3046
+ transform: 'scale3d(0.92, 0.92, 0.92)'
3203
3047
  }
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)'
3048
+ ],
3049
+ 'scale-up': [
3050
+ {
3051
+ transform: 'scale3d(0.8, 0.8, 0.8)'
3052
+ },
3053
+ {
3054
+ transform: 'scale3d(1, 1, 1)'
3421
3055
  }
3422
3056
  ],
3423
3057
  'scale-down': [
@@ -3706,39 +3340,413 @@ var _dec, _initClass, _ViElement, _dec1, _dec2, _dec3, _dec4, _dec5, _dec6, _dec
3706
3340
  {
3707
3341
  transform: 'translate3d(0, 0, 0) rotate(0deg)'
3708
3342
  }
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)'
3343
+ ],
3344
+ 'heartbeat': [
3345
+ {
3346
+ transform: 'scale(1)'
3347
+ },
3348
+ {
3349
+ transform: 'scale(1.15)'
3350
+ },
3351
+ {
3352
+ transform: 'scale(1)'
3353
+ },
3354
+ {
3355
+ transform: 'scale(1.15)'
3356
+ },
3357
+ {
3358
+ transform: 'scale(1)'
3359
+ }
3360
+ ],
3361
+ 'shimmer': [
3362
+ {
3363
+ backgroundPosition: '-200% 0'
3364
+ },
3365
+ {
3366
+ backgroundPosition: '200% 0'
3367
+ }
3368
+ ]
3369
+ };
3370
+ const EXPAND_COLLAPSE_PRESETS = new Set([
3371
+ 'expand-vertical',
3372
+ 'collapse-vertical',
3373
+ 'expand-horizontal',
3374
+ 'collapse-horizontal'
3375
+ ]);
3376
+
3377
+ function applyDecs2203RFactory() {
3378
+ function createAddInitializerMethod(initializers, decoratorFinishedRef) {
3379
+ return function addInitializer(initializer) {
3380
+ assertNotFinished(decoratorFinishedRef, "addInitializer");
3381
+ assertCallable(initializer, "An initializer");
3382
+ initializers.push(initializer);
3383
+ };
3384
+ }
3385
+ function memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value) {
3386
+ var kindStr;
3387
+ switch(kind){
3388
+ case 1:
3389
+ kindStr = "accessor";
3390
+ break;
3391
+ case 2:
3392
+ kindStr = "method";
3393
+ break;
3394
+ case 3:
3395
+ kindStr = "getter";
3396
+ break;
3397
+ case 4:
3398
+ kindStr = "setter";
3399
+ break;
3400
+ default:
3401
+ kindStr = "field";
3402
+ }
3403
+ var ctx = {
3404
+ kind: kindStr,
3405
+ name: isPrivate ? "#" + name : name,
3406
+ static: isStatic,
3407
+ private: isPrivate,
3408
+ metadata: metadata
3409
+ };
3410
+ var decoratorFinishedRef = {
3411
+ v: false
3412
+ };
3413
+ ctx.addInitializer = createAddInitializerMethod(initializers, decoratorFinishedRef);
3414
+ var get, set;
3415
+ if (kind === 0) {
3416
+ if (isPrivate) {
3417
+ get = desc.get;
3418
+ set = desc.set;
3419
+ } else {
3420
+ get = function() {
3421
+ return this[name];
3422
+ };
3423
+ set = function(v) {
3424
+ this[name] = v;
3425
+ };
3426
+ }
3427
+ } else if (kind === 2) {
3428
+ get = function() {
3429
+ return desc.value;
3430
+ };
3431
+ } else {
3432
+ if (kind === 1 || kind === 3) {
3433
+ get = function() {
3434
+ return desc.get.call(this);
3435
+ };
3436
+ }
3437
+ if (kind === 1 || kind === 4) {
3438
+ set = function(v) {
3439
+ desc.set.call(this, v);
3440
+ };
3441
+ }
3442
+ }
3443
+ ctx.access = get && set ? {
3444
+ get: get,
3445
+ set: set
3446
+ } : get ? {
3447
+ get: get
3448
+ } : {
3449
+ set: set
3450
+ };
3451
+ try {
3452
+ return dec(value, ctx);
3453
+ } finally{
3454
+ decoratorFinishedRef.v = true;
3455
+ }
3456
+ }
3457
+ function assertNotFinished(decoratorFinishedRef, fnName) {
3458
+ if (decoratorFinishedRef.v) {
3459
+ throw new Error("attempted to call " + fnName + " after decoration was finished");
3460
+ }
3461
+ }
3462
+ function assertCallable(fn, hint) {
3463
+ if (typeof fn !== "function") {
3464
+ throw new TypeError(hint + " must be a function");
3465
+ }
3466
+ }
3467
+ function assertValidReturnValue(kind, value) {
3468
+ var type = typeof value;
3469
+ if (kind === 1) {
3470
+ if (type !== "object" || value === null) {
3471
+ throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
3472
+ }
3473
+ if (value.get !== undefined) {
3474
+ assertCallable(value.get, "accessor.get");
3475
+ }
3476
+ if (value.set !== undefined) {
3477
+ assertCallable(value.set, "accessor.set");
3478
+ }
3479
+ if (value.init !== undefined) {
3480
+ assertCallable(value.init, "accessor.init");
3481
+ }
3482
+ } else if (type !== "function") {
3483
+ var hint;
3484
+ if (kind === 0) {
3485
+ hint = "field";
3486
+ } else if (kind === 10) {
3487
+ hint = "class";
3488
+ } else {
3489
+ hint = "method";
3490
+ }
3491
+ throw new TypeError(hint + " decorators must return a function or void 0");
3492
+ }
3493
+ }
3494
+ function applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata) {
3495
+ var decs = decInfo[0];
3496
+ var desc, init, value;
3497
+ if (isPrivate) {
3498
+ if (kind === 0 || kind === 1) {
3499
+ desc = {
3500
+ get: decInfo[3],
3501
+ set: decInfo[4]
3502
+ };
3503
+ } else if (kind === 3) {
3504
+ desc = {
3505
+ get: decInfo[3]
3506
+ };
3507
+ } else if (kind === 4) {
3508
+ desc = {
3509
+ set: decInfo[3]
3510
+ };
3511
+ } else {
3512
+ desc = {
3513
+ value: decInfo[3]
3514
+ };
3515
+ }
3516
+ } else if (kind !== 0) {
3517
+ desc = Object.getOwnPropertyDescriptor(base, name);
3518
+ }
3519
+ if (kind === 1) {
3520
+ value = {
3521
+ get: desc.get,
3522
+ set: desc.set
3523
+ };
3524
+ } else if (kind === 2) {
3525
+ value = desc.value;
3526
+ } else if (kind === 3) {
3527
+ value = desc.get;
3528
+ } else if (kind === 4) {
3529
+ value = desc.set;
3530
+ }
3531
+ var newValue, get, set;
3532
+ if (typeof decs === "function") {
3533
+ newValue = memberDec(decs, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
3534
+ if (newValue !== void 0) {
3535
+ assertValidReturnValue(kind, newValue);
3536
+ if (kind === 0) {
3537
+ init = newValue;
3538
+ } else if (kind === 1) {
3539
+ init = newValue.init;
3540
+ get = newValue.get || value.get;
3541
+ set = newValue.set || value.set;
3542
+ value = {
3543
+ get: get,
3544
+ set: set
3545
+ };
3546
+ } else {
3547
+ value = newValue;
3548
+ }
3549
+ }
3550
+ } else {
3551
+ for(var i = decs.length - 1; i >= 0; i--){
3552
+ var dec = decs[i];
3553
+ newValue = memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
3554
+ if (newValue !== void 0) {
3555
+ assertValidReturnValue(kind, newValue);
3556
+ var newInit;
3557
+ if (kind === 0) {
3558
+ newInit = newValue;
3559
+ } else if (kind === 1) {
3560
+ newInit = newValue.init;
3561
+ get = newValue.get || value.get;
3562
+ set = newValue.set || value.set;
3563
+ value = {
3564
+ get: get,
3565
+ set: set
3566
+ };
3567
+ } else {
3568
+ value = newValue;
3569
+ }
3570
+ if (newInit !== void 0) {
3571
+ if (init === void 0) {
3572
+ init = newInit;
3573
+ } else if (typeof init === "function") {
3574
+ init = [
3575
+ init,
3576
+ newInit
3577
+ ];
3578
+ } else {
3579
+ init.push(newInit);
3580
+ }
3581
+ }
3582
+ }
3583
+ }
3584
+ }
3585
+ if (kind === 0 || kind === 1) {
3586
+ if (init === void 0) {
3587
+ init = function(instance, init) {
3588
+ return init;
3589
+ };
3590
+ } else if (typeof init !== "function") {
3591
+ var ownInitializers = init;
3592
+ init = function(instance, init) {
3593
+ var value = init;
3594
+ for(var i = 0; i < ownInitializers.length; i++){
3595
+ value = ownInitializers[i].call(instance, value);
3596
+ }
3597
+ return value;
3598
+ };
3599
+ } else {
3600
+ var originalInitializer = init;
3601
+ init = function(instance, init) {
3602
+ return originalInitializer.call(instance, init);
3603
+ };
3604
+ }
3605
+ ret.push(init);
3606
+ }
3607
+ if (kind !== 0) {
3608
+ if (kind === 1) {
3609
+ desc.get = value.get;
3610
+ desc.set = value.set;
3611
+ } else if (kind === 2) {
3612
+ desc.value = value;
3613
+ } else if (kind === 3) {
3614
+ desc.get = value;
3615
+ } else if (kind === 4) {
3616
+ desc.set = value;
3617
+ }
3618
+ if (isPrivate) {
3619
+ if (kind === 1) {
3620
+ ret.push(function(instance, args) {
3621
+ return value.get.call(instance, args);
3622
+ });
3623
+ ret.push(function(instance, args) {
3624
+ return value.set.call(instance, args);
3625
+ });
3626
+ } else if (kind === 2) {
3627
+ ret.push(value);
3628
+ } else {
3629
+ ret.push(function(instance, args) {
3630
+ return value.call(instance, args);
3631
+ });
3632
+ }
3633
+ } else {
3634
+ Object.defineProperty(base, name, desc);
3635
+ }
3636
+ }
3637
+ }
3638
+ function applyMemberDecs(Class, decInfos, metadata) {
3639
+ var ret = [];
3640
+ var protoInitializers;
3641
+ var staticInitializers;
3642
+ var existingProtoNonFields = new Map();
3643
+ var existingStaticNonFields = new Map();
3644
+ for(var i = 0; i < decInfos.length; i++){
3645
+ var decInfo = decInfos[i];
3646
+ if (!Array.isArray(decInfo)) continue;
3647
+ var kind = decInfo[1];
3648
+ var name = decInfo[2];
3649
+ var isPrivate = decInfo.length > 3;
3650
+ var isStatic = kind >= 5;
3651
+ var base;
3652
+ var initializers;
3653
+ if (isStatic) {
3654
+ base = Class;
3655
+ kind = kind - 5;
3656
+ staticInitializers = staticInitializers || [];
3657
+ initializers = staticInitializers;
3658
+ } else {
3659
+ base = Class.prototype;
3660
+ protoInitializers = protoInitializers || [];
3661
+ initializers = protoInitializers;
3662
+ }
3663
+ if (kind !== 0 && !isPrivate) {
3664
+ var existingNonFields = isStatic ? existingStaticNonFields : existingProtoNonFields;
3665
+ var existingKind = existingNonFields.get(name) || 0;
3666
+ if (existingKind === true || existingKind === 3 && kind !== 4 || existingKind === 4 && kind !== 3) {
3667
+ 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);
3668
+ } else if (!existingKind && kind > 2) {
3669
+ existingNonFields.set(name, kind);
3670
+ } else {
3671
+ existingNonFields.set(name, true);
3672
+ }
3673
+ }
3674
+ applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata);
3675
+ }
3676
+ pushInitializers(ret, protoInitializers);
3677
+ pushInitializers(ret, staticInitializers);
3678
+ return ret;
3679
+ }
3680
+ function pushInitializers(ret, initializers) {
3681
+ if (initializers) {
3682
+ ret.push(function(instance) {
3683
+ for(var i = 0; i < initializers.length; i++){
3684
+ initializers[i].call(instance);
3685
+ }
3686
+ return instance;
3687
+ });
3688
+ }
3689
+ }
3690
+ function applyClassDecs(targetClass, classDecs, metadata) {
3691
+ if (classDecs.length > 0) {
3692
+ var initializers = [];
3693
+ var newClass = targetClass;
3694
+ var name = targetClass.name;
3695
+ for(var i = classDecs.length - 1; i >= 0; i--){
3696
+ var decoratorFinishedRef = {
3697
+ v: false
3698
+ };
3699
+ try {
3700
+ var nextNewClass = classDecs[i](newClass, {
3701
+ kind: "class",
3702
+ name: name,
3703
+ addInitializer: createAddInitializerMethod(initializers, decoratorFinishedRef),
3704
+ metadata
3705
+ });
3706
+ } finally{
3707
+ decoratorFinishedRef.v = true;
3708
+ }
3709
+ if (nextNewClass !== undefined) {
3710
+ assertValidReturnValue(10, nextNewClass);
3711
+ newClass = nextNewClass;
3712
+ }
3713
+ }
3714
+ return [
3715
+ defineMetadata(newClass, metadata),
3716
+ function() {
3717
+ for(var i = 0; i < initializers.length; i++){
3718
+ initializers[i].call(newClass);
3719
+ }
3720
+ }
3721
+ ];
3725
3722
  }
3726
- ],
3727
- 'shimmer': [
3728
- {
3729
- backgroundPosition: '-200% 0'
3730
- },
3731
- {
3732
- backgroundPosition: '200% 0'
3723
+ }
3724
+ function defineMetadata(Class, metadata) {
3725
+ return Object.defineProperty(Class, Symbol.metadata || Symbol.for("Symbol.metadata"), {
3726
+ configurable: true,
3727
+ enumerable: true,
3728
+ value: metadata
3729
+ });
3730
+ }
3731
+ return function applyDecs2203R(targetClass, memberDecs, classDecs, parentClass) {
3732
+ if (parentClass !== void 0) {
3733
+ var parentMetadata = parentClass[Symbol.metadata || Symbol.for("Symbol.metadata")];
3733
3734
  }
3734
- ]
3735
- };
3736
- const EXPAND_COLLAPSE_PRESETS = new Set([
3737
- 'expand-vertical',
3738
- 'collapse-vertical',
3739
- 'expand-horizontal',
3740
- 'collapse-horizontal'
3741
- ]);
3735
+ var metadata = Object.create(parentMetadata === void 0 ? null : parentMetadata);
3736
+ var e = applyMemberDecs(targetClass, memberDecs, metadata);
3737
+ if (!classDecs.length) defineMetadata(targetClass, metadata);
3738
+ return {
3739
+ e: e,
3740
+ get c () {
3741
+ return applyClassDecs(targetClass, classDecs, metadata);
3742
+ }
3743
+ };
3744
+ };
3745
+ }
3746
+ function _apply_decs_2203_r(targetClass, memberDecs, classDecs, parentClass) {
3747
+ return (_apply_decs_2203_r = applyDecs2203RFactory())(targetClass, memberDecs, classDecs, parentClass);
3748
+ }
3749
+ 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;
3742
3750
  /** Shuffle indices using Fisher-Yates — no duplicate delay slots. */ function shuffleIndices(length) {
3743
3751
  const arr = Array.from({
3744
3752
  length
@@ -3748,655 +3756,646 @@ const EXPAND_COLLAPSE_PRESETS = new Set([
3748
3756
  [arr[i], arr[j]] = [
3749
3757
  arr[j],
3750
3758
  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
- /**
3759
+ ];
3760
+ }
3761
+ return arr;
3762
+ }
3763
+ let _ViAnimation;
3764
+ _dec = customElement('vi-animation'), _dec1 = property({
3765
+ type: String,
3766
+ reflect: true
3767
+ }), _dec2 = property({
3768
+ type: String,
3769
+ reflect: true
3770
+ }), _dec3 = property({
3771
+ type: String,
3772
+ reflect: true
3773
+ }), _dec4 = property({
3774
+ type: Number,
3775
+ reflect: true
3776
+ }), _dec5 = property({
3777
+ type: Number,
3778
+ reflect: true
3779
+ }), _dec6 = property({
3780
+ type: String,
3781
+ reflect: true
3782
+ }), _dec7 = property({
3783
+ type: Number,
3784
+ reflect: true
3785
+ }), _dec8 = property({
3786
+ type: String,
3787
+ reflect: true
3788
+ }), _dec9 = property({
3789
+ type: String,
3790
+ reflect: true
3791
+ }), _dec10 = property({
3792
+ type: Boolean,
3793
+ reflect: true
3794
+ }), _dec11 = property({
3795
+ type: Boolean,
3796
+ attribute: 'auto-play',
3797
+ reflect: true
3798
+ }), _dec12 = property({
3799
+ type: Boolean,
3800
+ reflect: true
3801
+ }), _dec13 = property({
3802
+ type: Number,
3803
+ reflect: true
3804
+ }), _dec14 = property({
3805
+ type: String,
3806
+ attribute: 'stagger-selector',
3807
+ reflect: true
3808
+ }), _dec15 = property({
3809
+ type: String,
3810
+ attribute: 'stagger-direction',
3811
+ reflect: true
3812
+ }), _dec16 = property({
3813
+ type: String,
3814
+ attribute: 'reduced-motion',
3815
+ reflect: true
3816
+ }), _dec17 = property({
3817
+ attribute: false
3818
+ }), _dec18 = state();
3819
+ class ViAnimation extends (_ViElement = ViElement) {
3820
+ static{
3821
+ ({ 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, [
3822
+ [
3823
+ _dec1,
3824
+ 1,
3825
+ "name"
3826
+ ],
3827
+ [
3828
+ _dec2,
3829
+ 1,
3830
+ "enter"
3831
+ ],
3832
+ [
3833
+ _dec3,
3834
+ 1,
3835
+ "exit"
3836
+ ],
3837
+ [
3838
+ _dec4,
3839
+ 1,
3840
+ "duration"
3841
+ ],
3842
+ [
3843
+ _dec5,
3844
+ 1,
3845
+ "delay"
3846
+ ],
3847
+ [
3848
+ _dec6,
3849
+ 1,
3850
+ "easing"
3851
+ ],
3852
+ [
3853
+ _dec7,
3854
+ 1,
3855
+ "iterations"
3856
+ ],
3857
+ [
3858
+ _dec8,
3859
+ 1,
3860
+ "direction"
3861
+ ],
3862
+ [
3863
+ _dec9,
3864
+ 1,
3865
+ "fill"
3866
+ ],
3867
+ [
3868
+ _dec10,
3869
+ 1,
3870
+ "open"
3871
+ ],
3872
+ [
3873
+ _dec11,
3874
+ 1,
3875
+ "autoPlay"
3876
+ ],
3877
+ [
3878
+ _dec12,
3879
+ 1,
3880
+ "cascade"
3881
+ ],
3882
+ [
3883
+ _dec13,
3884
+ 1,
3885
+ "stagger"
3886
+ ],
3887
+ [
3888
+ _dec14,
3889
+ 1,
3890
+ "staggerSelector"
3891
+ ],
3892
+ [
3893
+ _dec15,
3894
+ 1,
3895
+ "staggerDirection"
3896
+ ],
3897
+ [
3898
+ _dec16,
3899
+ 1,
3900
+ "reducedMotion"
3901
+ ],
3902
+ [
3903
+ _dec17,
3904
+ 1,
3905
+ "keyframes"
3906
+ ],
3907
+ [
3908
+ _dec18,
3909
+ 1,
3910
+ "_isAnimating"
3911
+ ]
3912
+ ], [
3913
+ _dec
3914
+ ], _ViElement));
3915
+ }
3916
+ createRenderRoot() {
3917
+ return this;
3918
+ }
3919
+ #___private_name_1 = (_initProto(this), _init_name(this, 'fade-in'));
3920
+ get name() {
3921
+ return this.#___private_name_1;
3922
+ }
3923
+ set name(_v) {
3924
+ this.#___private_name_1 = _v;
3925
+ }
3926
+ #___private_enter_2 = _init_enter(this, '');
3927
+ get enter() {
3928
+ return this.#___private_enter_2;
3929
+ }
3930
+ set enter(_v) {
3931
+ this.#___private_enter_2 = _v;
3932
+ }
3933
+ #___private_exit_3 = _init_exit(this, '');
3934
+ get exit() {
3935
+ return this.#___private_exit_3;
3936
+ }
3937
+ set exit(_v) {
3938
+ this.#___private_exit_3 = _v;
3939
+ }
3940
+ #___private_duration_4 = _init_duration(this, 300);
3941
+ get duration() {
3942
+ return this.#___private_duration_4;
3943
+ }
3944
+ set duration(_v) {
3945
+ this.#___private_duration_4 = _v;
3946
+ }
3947
+ #___private_delay_5 = _init_delay(this, 0);
3948
+ get delay() {
3949
+ return this.#___private_delay_5;
3950
+ }
3951
+ set delay(_v) {
3952
+ this.#___private_delay_5 = _v;
3953
+ }
3954
+ #___private_easing_6 = _init_easing(this, 'cubic-bezier(0.2, 0, 0, 1)');
3955
+ get easing() {
3956
+ return this.#___private_easing_6;
3957
+ }
3958
+ set easing(_v) {
3959
+ this.#___private_easing_6 = _v;
3960
+ }
3961
+ #___private_iterations_7 = _init_iterations(this, 1);
3962
+ get iterations() {
3963
+ return this.#___private_iterations_7;
3964
+ }
3965
+ set iterations(_v) {
3966
+ this.#___private_iterations_7 = _v;
3967
+ }
3968
+ #___private_direction_8 = _init_direction(this, 'normal');
3969
+ get direction() {
3970
+ return this.#___private_direction_8;
3971
+ }
3972
+ set direction(_v) {
3973
+ this.#___private_direction_8 = _v;
3974
+ }
3975
+ #___private_fill_9 = _init_fill(this, 'forwards');
3976
+ get fill() {
3977
+ return this.#___private_fill_9;
3978
+ }
3979
+ set fill(_v) {
3980
+ this.#___private_fill_9 = _v;
3981
+ }
3982
+ #___private_open_10 = _init_open(this, true);
3983
+ get open() {
3984
+ return this.#___private_open_10;
3985
+ }
3986
+ set open(_v) {
3987
+ this.#___private_open_10 = _v;
3988
+ }
3989
+ #___private_autoPlay_11 = _init_autoPlay(this, true);
3990
+ get autoPlay() {
3991
+ return this.#___private_autoPlay_11;
3992
+ }
3993
+ set autoPlay(_v) {
3994
+ this.#___private_autoPlay_11 = _v;
3995
+ }
3996
+ #___private_cascade_12 = _init_cascade(this, false);
3997
+ get cascade() {
3998
+ return this.#___private_cascade_12;
3999
+ }
4000
+ set cascade(_v) {
4001
+ this.#___private_cascade_12 = _v;
4002
+ }
4003
+ #___private_stagger_13 = _init_stagger(this, 50);
4004
+ get stagger() {
4005
+ return this.#___private_stagger_13;
4006
+ }
4007
+ set stagger(_v) {
4008
+ this.#___private_stagger_13 = _v;
4009
+ }
4010
+ #___private_staggerSelector_14 = _init_staggerSelector(this, ':scope > *');
4011
+ get staggerSelector() {
4012
+ return this.#___private_staggerSelector_14;
4013
+ }
4014
+ set staggerSelector(_v) {
4015
+ this.#___private_staggerSelector_14 = _v;
4016
+ }
4017
+ #___private_staggerDirection_15 = _init_staggerDirection(this, 'normal');
4018
+ get staggerDirection() {
4019
+ return this.#___private_staggerDirection_15;
4020
+ }
4021
+ set staggerDirection(_v) {
4022
+ this.#___private_staggerDirection_15 = _v;
4023
+ }
4024
+ #___private_reducedMotion_16 = _init_reducedMotion(this, 'auto');
4025
+ get reducedMotion() {
4026
+ return this.#___private_reducedMotion_16;
4027
+ }
4028
+ set reducedMotion(_v) {
4029
+ this.#___private_reducedMotion_16 = _v;
4030
+ }
4031
+ #___private_keyframes_17 = _init_keyframes(this, null);
4032
+ get keyframes() {
4033
+ return this.#___private_keyframes_17;
4034
+ }
4035
+ set keyframes(_v) {
4036
+ this.#___private_keyframes_17 = _v;
4037
+ }
4038
+ #___private__isAnimating_18 = _init__isAnimating(this, false);
4039
+ get _isAnimating() {
4040
+ return this.#___private__isAnimating_18;
4041
+ }
4042
+ set _isAnimating(_v) {
4043
+ this.#___private__isAnimating_18 = _v;
4044
+ }
4045
+ _activeAnimations = [];
4046
+ /**
4042
4047
  * Monotonically incrementing sequence ID. Incremented on every new sequence
4043
4048
  * start (via _cancelSilently). Async continuations check their captured ID
4044
4049
  * against the current to detect stale callbacks.
4045
4050
  */ _sequenceId = 0;
4046
- /**
4051
+ /**
4047
4052
  * Prevents updated() from re-calling show()/hide() when the imperative API
4048
4053
  * internally mutates this.open to keep it in sync with animation state.
4049
4054
  */ _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
- ];
4055
+ /** Cached matchMedia object for prefers-reduced-motion. */ _reducedMotionMQ = null;
4056
+ _reducedMotionListener = null;
4057
+ // ─── Public getters ───────────────────────────────────────────────────────
4058
+ /** Whether an animation sequence is currently running. */ get isAnimating() {
4059
+ return this._isAnimating;
4060
+ }
4061
+ // ─── Lifecycle ────────────────────────────────────────────────────────────
4062
+ connectedCallback() {
4063
+ super.connectedCallback();
4064
+ if (!this.open) {
4065
+ this.hidden = true;
4066
+ } else if (this.autoPlay) {
4067
+ this.updateComplete.then(()=>this.play());
4068
+ }
4069
+ if (typeof window !== 'undefined') {
4070
+ this._reducedMotionMQ = window.matchMedia('(prefers-reduced-motion: reduce)');
4071
+ this._reducedMotionListener = ()=>this.requestUpdate();
4072
+ this._reducedMotionMQ.addEventListener('change', this._reducedMotionListener);
4073
+ }
4074
+ }
4075
+ disconnectedCallback() {
4076
+ super.disconnectedCallback();
4077
+ // Cancel in-flight animations to release resources on detached nodes
4078
+ this._cancelSilently();
4079
+ if (this._reducedMotionMQ && this._reducedMotionListener) {
4080
+ this._reducedMotionMQ.removeEventListener('change', this._reducedMotionListener);
4081
+ this._reducedMotionMQ = null;
4082
+ this._reducedMotionListener = null;
4083
+ }
4084
+ }
4085
+ updated(changedProperties) {
4086
+ super.updated(changedProperties);
4087
+ // _updateGuard prevents show()/hide() from being called again when the
4088
+ // imperative API internally sets this.open to keep property state in sync
4089
+ if (this._updateGuard) return;
4090
+ if (changedProperties.has('open') && changedProperties.get('open') !== undefined) {
4091
+ if (this.open) {
4092
+ this.show();
4093
+ } else {
4094
+ this.hide();
4098
4095
  }
4099
- /**
4096
+ }
4097
+ }
4098
+ // ─── Imperative API ───────────────────────────────────────────────────────
4099
+ /** Returns a snapshot of the currently running Animation objects. */ getAnimations() {
4100
+ return [
4101
+ ...this._activeAnimations
4102
+ ];
4103
+ }
4104
+ /**
4100
4105
  * Animate element into view.
4101
4106
  * Fires cancelable `vi-animation-before-show` — call preventDefault() to block.
4102
4107
  */ 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
- }
4108
+ const allowed = this._dispatchCancelable('vi-animation-before-show', {
4109
+ name: this.enter || this.name,
4110
+ target: this,
4111
+ phase: 'enter'
4112
+ });
4113
+ if (!allowed) {
4114
+ // If show() was triggered by a declarative open=true change while still hidden,
4115
+ // revert to a consistent closed state.
4116
+ if (this.open && this.hidden) {
4119
4117
  this._withUpdateGuard(()=>{
4120
- if (!this.open) this.open = true;
4121
- this.hidden = false;
4118
+ this.open = false;
4119
+ this.hidden = true;
4122
4120
  });
4123
- const animName = this.enter || this.name || 'fade-in';
4124
- await this._runAnimationSequence(animName, 'enter', false);
4125
4121
  }
4126
- /**
4122
+ return;
4123
+ }
4124
+ this._withUpdateGuard(()=>{
4125
+ if (!this.open) this.open = true;
4126
+ this.hidden = false;
4127
+ });
4128
+ const animName = this.enter || this.name || 'fade-in';
4129
+ await this._runAnimationSequence(animName, 'enter', false);
4130
+ }
4131
+ /**
4127
4132
  * Animate element out of view.
4128
4133
  * Fires cancelable `vi-animation-before-hide` — call preventDefault() to block.
4129
4134
  */ 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);
4135
+ const exitName = this.exit || EXIT_COUNTERPART[this.name] || 'fade-out';
4136
+ const allowed = this._dispatchCancelable('vi-animation-before-hide', {
4137
+ name: exitName,
4138
+ target: this,
4139
+ phase: 'exit'
4140
+ });
4141
+ if (!allowed) {
4142
+ if (!this.open && !this.hidden) {
4146
4143
  this._withUpdateGuard(()=>{
4147
- if (this.open) this.open = false;
4148
- this.hidden = true;
4144
+ this.open = true;
4145
+ this.hidden = false;
4149
4146
  });
4150
4147
  }
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
- /**
4148
+ return;
4149
+ }
4150
+ await this._runAnimationSequence(exitName, 'exit', true);
4151
+ this._withUpdateGuard(()=>{
4152
+ if (this.open) this.open = false;
4153
+ this.hidden = true;
4154
+ });
4155
+ }
4156
+ /** Toggle between show() and hide(). */ async toggle() {
4157
+ if (this.open) {
4158
+ await this.hide();
4159
+ } else {
4160
+ await this.show();
4161
+ }
4162
+ }
4163
+ /** Play the current `name` animation without changing visibility. */ async play() {
4164
+ const phase = this.open ? 'enter' : 'custom';
4165
+ await this._runAnimationSequence(this.name, phase, false);
4166
+ }
4167
+ pause() {
4168
+ this._activeAnimations.forEach((a)=>a.pause());
4169
+ }
4170
+ resume() {
4171
+ this._activeAnimations.forEach((a)=>a.play());
4172
+ }
4173
+ reverse() {
4174
+ this._activeAnimations.forEach((a)=>a.reverse());
4175
+ }
4176
+ /**
4172
4177
  * Cancel all running animations and fire `vi-animation-cancel`.
4173
4178
  */ cancel() {
4174
- this._cancelSilently();
4175
- this._dispatch('vi-animation-cancel', {
4176
- name: this.name,
4177
- target: this,
4178
- phase: 'custom'
4179
- });
4180
- }
4181
- /**
4179
+ this._cancelSilently();
4180
+ this._dispatch('vi-animation-cancel', {
4181
+ name: this.name,
4182
+ target: this,
4183
+ phase: 'custom'
4184
+ });
4185
+ }
4186
+ /**
4182
4187
  * Jump all running animations to their end state and fire `vi-animation-finish`.
4183
4188
  */ 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
- /**
4189
+ const anims = [
4190
+ ...this._activeAnimations
4191
+ ];
4192
+ // Clear state first so stale callbacks don't double-process
4193
+ this._cancelSilently();
4194
+ anims.forEach((a)=>{
4195
+ try {
4196
+ a.finish();
4197
+ } catch {}
4198
+ });
4199
+ this._dispatch('vi-animation-finish', {
4200
+ name: this.name,
4201
+ target: this,
4202
+ phase: 'custom'
4203
+ });
4204
+ }
4205
+ // ─── Private helpers ──────────────────────────────────────────────────────
4206
+ /**
4202
4207
  * Cancel all in-flight animations WITHOUT firing a public event.
4203
4208
  * Used for: self-interruption when a new sequence starts, and for lifecycle cleanup.
4204
4209
  */ _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
- /**
4210
+ this._sequenceId++; // invalidate any pending async continuations
4211
+ this._activeAnimations.forEach((a)=>{
4212
+ try {
4213
+ a.cancel();
4214
+ } catch {}
4215
+ });
4216
+ this._activeAnimations = [];
4217
+ this._isAnimating = false;
4218
+ }
4219
+ /**
4215
4220
  * Runs a function that mutates reactive properties without triggering
4216
4221
  * the updated() -> show()/hide() feedback loop.
4217
4222
  */ _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);
4223
+ this._updateGuard = true;
4224
+ fn();
4225
+ this.updateComplete.then(()=>{
4226
+ this._updateGuard = false;
4227
+ });
4228
+ }
4229
+ _getTargetElements() {
4230
+ const childNodes = Array.from(this.children);
4231
+ if (childNodes.length === 0) return [
4232
+ this
4233
+ ];
4234
+ if (!this.cascade) return childNodes;
4235
+ const targetElements = [];
4236
+ for (const node of childNodes){
4237
+ let matched = false;
4238
+ try {
4239
+ if (node.matches(this.staggerSelector)) {
4240
+ targetElements.push(node);
4241
+ matched = true;
4253
4242
  }
4254
- return targetElements.length > 0 ? targetElements : assignedNodes;
4243
+ const children = Array.from(node.querySelectorAll(this.staggerSelector));
4244
+ if (children.length > 0) {
4245
+ targetElements.push(...children);
4246
+ matched = true;
4247
+ }
4248
+ } catch {
4249
+ return childNodes; // graceful fallback to all child nodes
4255
4250
  }
4256
- /**
4251
+ if (!matched) targetElements.push(node);
4252
+ }
4253
+ return targetElements.length > 0 ? targetElements : childNodes;
4254
+ }
4255
+ /**
4257
4256
  * Returns keyframes for a given animation name.
4258
4257
  * - Consumer keyframes are passed through as-is (Keyframe[] or PropertyIndexedKeyframes).
4259
4258
  * - Expand/collapse presets dynamically read scrollHeight/scrollWidth to avoid magic-number clipping.
4260
4259
  * - Falls back to PRESET_KEYFRAMES, then 'fade-in' if unknown.
4261
4260
  */ _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 {}
4261
+ // Explicit consumer-supplied keyframes take highest priority
4262
+ if (this.keyframes) return this.keyframes;
4263
+ // For built-in presets under reduced motion, substitute with safe opacity fades
4264
+ if (isReducedMotion) {
4265
+ return PRESET_KEYFRAMES[phase === 'exit' ? 'fade-out' : 'fade-in'];
4266
+ }
4267
+ // Dynamic expand/collapse using actual element dimensions
4268
+ if (EXPAND_COLLAPSE_PRESETS.has(animName) && target) {
4269
+ const h = target.scrollHeight;
4270
+ const w = target.scrollWidth;
4271
+ switch(animName){
4272
+ case 'expand-vertical':
4273
+ return [
4274
+ {
4275
+ maxHeight: '0px',
4276
+ opacity: 0,
4277
+ overflow: 'hidden'
4278
+ },
4279
+ {
4280
+ maxHeight: `${h}px`,
4281
+ opacity: 1,
4282
+ overflow: 'hidden'
4384
4283
  }
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
- });
4284
+ ];
4285
+ case 'collapse-vertical':
4286
+ return [
4287
+ {
4288
+ maxHeight: `${h}px`,
4289
+ opacity: 1,
4290
+ overflow: 'hidden'
4291
+ },
4292
+ {
4293
+ maxHeight: '0px',
4294
+ opacity: 0,
4295
+ overflow: 'hidden'
4296
+ }
4297
+ ];
4298
+ case 'expand-horizontal':
4299
+ return [
4300
+ {
4301
+ maxWidth: '0px',
4302
+ opacity: 0,
4303
+ overflow: 'hidden'
4304
+ },
4305
+ {
4306
+ maxWidth: `${w}px`,
4307
+ opacity: 1,
4308
+ overflow: 'hidden'
4309
+ }
4310
+ ];
4311
+ case 'collapse-horizontal':
4312
+ return [
4313
+ {
4314
+ maxWidth: `${w}px`,
4315
+ opacity: 1,
4316
+ overflow: 'hidden'
4317
+ },
4318
+ {
4319
+ maxWidth: '0px',
4320
+ opacity: 0,
4321
+ overflow: 'hidden'
4322
+ }
4323
+ ];
4398
4324
  }
4399
- /**
4325
+ }
4326
+ return PRESET_KEYFRAMES[animName] ?? PRESET_KEYFRAMES['fade-in'];
4327
+ }
4328
+ _calculateStaggerDelay(index, total, shuffledOrder) {
4329
+ if (!this.cascade || total <= 1) return this.delay;
4330
+ let orderIndex = index;
4331
+ if (this.staggerDirection === 'reverse') {
4332
+ orderIndex = total - 1 - index;
4333
+ } else if (this.staggerDirection === 'center') {
4334
+ orderIndex = Math.abs((total - 1) / 2 - index);
4335
+ } else if (this.staggerDirection === 'random' && shuffledOrder) {
4336
+ orderIndex = shuffledOrder[index];
4337
+ }
4338
+ return this.delay + orderIndex * this.stagger;
4339
+ }
4340
+ async _runAnimationSequence(animName, phase, isExitPhase) {
4341
+ const isReduced = this._shouldReduceMotion();
4342
+ const targets = this._getTargetElements();
4343
+ if (targets.length === 0) return;
4344
+ // Interrupt previous sequence silently (no vi-animation-cancel event)
4345
+ this._cancelSilently();
4346
+ const mySequenceId = this._sequenceId;
4347
+ this._isAnimating = true;
4348
+ // 'auto' mode: shorten duration AND substitute keyframes.
4349
+ // 'fade-only' mode: substitute keyframes only, original duration is preserved.
4350
+ const actualDuration = isReduced && this.reducedMotion !== 'fade-only' ? Math.min(this.duration, 100) : this.duration;
4351
+ this._dispatch('vi-animation-start', {
4352
+ name: animName,
4353
+ target: this,
4354
+ phase,
4355
+ duration: actualDuration,
4356
+ delay: this.delay
4357
+ });
4358
+ // Pre-compute shuffled order so all elements get unique, non-repeating delay slots
4359
+ const shuffledOrder = this.staggerDirection === 'random' ? shuffleIndices(targets.length) : undefined;
4360
+ const animationPromises = targets.map((el, index)=>{
4361
+ const elementDelay = isReduced ? 0 : this._calculateStaggerDelay(index, targets.length, shuffledOrder);
4362
+ const kf = this._getKeyframes(animName, phase, isReduced, el);
4363
+ const anim = el.animate(kf, {
4364
+ duration: actualDuration,
4365
+ delay: elementDelay,
4366
+ easing: this.easing,
4367
+ iterations: this.iterations,
4368
+ direction: this.direction,
4369
+ fill: this.fill
4370
+ });
4371
+ this._activeAnimations.push(anim);
4372
+ return anim.finished.then(()=>{
4373
+ // For exit animations: commit the end-frame styles to element.style and
4374
+ // cancel the WAAPI fill so external CSS can take over later (avoids
4375
+ // invisible elements if the element is re-shown via show() or style).
4376
+ if (isExitPhase) {
4377
+ try {
4378
+ anim.commitStyles();
4379
+ } catch {}
4380
+ try {
4381
+ anim.cancel();
4382
+ } catch {}
4383
+ }
4384
+ }, ()=>null);
4385
+ });
4386
+ await Promise.all(animationPromises);
4387
+ // Discard stale result if a newer sequence has already started
4388
+ if (this._sequenceId !== mySequenceId) return;
4389
+ this._isAnimating = false;
4390
+ this._activeAnimations = [];
4391
+ this._dispatch('vi-animation-end', {
4392
+ name: animName,
4393
+ target: this,
4394
+ phase,
4395
+ completed: true
4396
+ });
4397
+ }
4398
+ /**
4400
4399
  * Returns whether any reduced-motion adaptation should be applied.
4401
4400
  *
4402
4401
  * Both 'auto' and 'fade-only' gate on the OS/browser preference so that the attribute
@@ -4406,35 +4405,33 @@ new class extends _identity {
4406
4405
  * - 'fade-only': substitute with opacity fade, but keep the original duration.
4407
4406
  * - 'disable': ignore OS preference entirely — always play the full animation.
4408
4407
  */ _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
- /**
4408
+ if (this.reducedMotion === 'disable') return false;
4409
+ // Gate on the OS/browser preference for both 'auto' and 'fade-only'.
4410
+ return this._reducedMotionMQ?.matches ?? (typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
4411
+ }
4412
+ _dispatch(eventName, detail) {
4413
+ this.dispatchEvent(new CustomEvent(eventName, {
4414
+ detail,
4415
+ bubbles: true,
4416
+ composed: true
4417
+ }));
4418
+ }
4419
+ /**
4421
4420
  * Dispatch a cancelable event. Returns true if the animation should proceed
4422
4421
  * (i.e. preventDefault() was NOT called), false if it should be blocked.
4423
4422
  */ _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
- }
4423
+ const event = new CustomEvent(eventName, {
4424
+ detail,
4425
+ bubbles: true,
4426
+ composed: true,
4427
+ cancelable: true
4428
+ });
4429
+ this.dispatchEvent(event);
4430
+ return !event.defaultPrevented;
4437
4431
  }
4438
- }();
4432
+ static{
4433
+ _initClass();
4434
+ }
4435
+ }
4439
4436
 
4440
4437
  export { _ViAlert as ViAlert, _ViAnimation as ViAnimation, _ViBadge as ViBadge, _ViChip as ViChip, _ViChipGroup as ViChipGroup, ViElement, registerIcons };