@watermarkinsights/ripple 5.15.0-alpha.3 → 5.15.0-alpha.4

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 (40) hide show
  1. package/dist/cjs/{app-globals-52a4cc43.js → app-globals-ac327e5e.js} +1 -1
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/ripple.cjs.js +1 -1
  4. package/dist/cjs/wm-button.cjs.entry.js +7 -7
  5. package/dist/cjs/wm-toggletip.cjs.entry.js +5 -5
  6. package/dist/cjs/wm-uploader.cjs.entry.js +1 -1
  7. package/dist/collection/components/wm-button/wm-button.css +63 -63
  8. package/dist/collection/components/wm-button/wm-button.js +6 -6
  9. package/dist/collection/components/wm-toggletip/wm-toggletip.css +6 -6
  10. package/dist/collection/components/wm-toggletip/wm-toggletip.js +4 -4
  11. package/dist/collection/components/wm-uploader/wm-uploader.css +63 -63
  12. package/dist/esm/{app-globals-7c68f770.js → app-globals-c670e9b4.js} +1 -1
  13. package/dist/esm/loader.js +1 -1
  14. package/dist/esm/ripple.js +1 -1
  15. package/dist/esm/wm-button.entry.js +7 -7
  16. package/dist/esm/wm-toggletip.entry.js +5 -5
  17. package/dist/esm/wm-uploader.entry.js +1 -1
  18. package/dist/esm-es5/{app-globals-7c68f770.js → app-globals-c670e9b4.js} +1 -1
  19. package/dist/esm-es5/loader.js +1 -1
  20. package/dist/esm-es5/ripple.js +1 -1
  21. package/dist/esm-es5/wm-button.entry.js +1 -1
  22. package/dist/esm-es5/wm-toggletip.entry.js +1 -1
  23. package/dist/esm-es5/wm-uploader.entry.js +1 -1
  24. package/dist/ripple/{p-c5b54b23.js → p-27bae047.js} +1 -1
  25. package/dist/ripple/p-2de38730.entry.js +1 -0
  26. package/dist/ripple/{p-249dc81a.system.js → p-33dc6883.system.js} +1 -1
  27. package/dist/ripple/{p-ac7eca83.system.js → p-50145994.system.js} +1 -1
  28. package/dist/ripple/{p-4f156fee.system.entry.js → p-53fef577.system.entry.js} +1 -1
  29. package/dist/ripple/p-cfcd001c.system.entry.js +1 -0
  30. package/dist/ripple/p-e08c4a29.system.entry.js +1 -0
  31. package/dist/ripple/p-ed23fd68.entry.js +1 -0
  32. package/dist/ripple/p-fe5059fe.entry.js +1 -0
  33. package/dist/ripple/ripple.esm.js +1 -1
  34. package/dist/ripple/ripple.js +1 -1
  35. package/package.json +2 -2
  36. package/dist/ripple/p-1dae4ab5.system.entry.js +0 -1
  37. package/dist/ripple/p-2bb27a7c.entry.js +0 -1
  38. package/dist/ripple/p-6ab4e970.entry.js +0 -1
  39. package/dist/ripple/p-8ae2c61e.entry.js +0 -1
  40. package/dist/ripple/p-ebd2dc97.system.entry.js +0 -1
package/dist/collection/components/wm-button/wm-button.css CHANGED
@@ -541,51 +541,51 @@
541
541
  background: var(--icon-fill, currentColor);
542
542
  }
543
543
  :host .wm-button.-primary.ai {
544
- --gradient-start: var(--wmcolor-ai-interactive-gradientstart);
545
- --gradient-end: var(--wmcolor-ai-interactive-gradientend);
546
- --percent-1: 0%;
547
- --percent-2: 70.19%;
548
- --percent-3: 180%;
544
+ --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart);
545
+ --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend);
546
+ --wmbutton-percent-1: 0%;
547
+ --wmbutton-percent-2: 70.19%;
548
+ --wmbutton-percent-3: 180%;
549
549
  color: #fff;
550
550
  gap: 5px;
551
- background-image: linear-gradient(-225deg, var(--gradient-start) var(--percent-1), var(--gradient-end) var(--percent-2), var(--gradient-start) var(--percent-3));
551
+ background-image: linear-gradient(-225deg, var(--ai-gradient-start) var(--wmbutton-percent-1), var(--ai-gradient-end) var(--wmbutton-percent-2), var(--ai-gradient-start) var(--wmbutton-percent-3));
552
552
  background-origin: border-box;
553
553
  background-clip: border-box;
554
554
  border: 2px solid transparent;
555
- transition: --gradient-start, --gradient-end, --percent-1, --percent-2, --percent-3;
555
+ transition: --ai-gradient-start, --ai-gradient-end, --wmbutton-percent-1, --wmbutton-percent-2, --wmbutton-percent-3;
556
556
  transition-timing-function: ease-out;
557
557
  }
558
558
  :host .wm-button.-primary.ai:hover {
559
- --gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
560
- --gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
561
- --percent-1: -50%;
562
- --percent-2: 0%;
563
- --percent-3: 89.81%;
559
+ --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
560
+ --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
561
+ --wmbutton-percent-1: -50%;
562
+ --wmbutton-percent-2: 0%;
563
+ --wmbutton-percent-3: 89.81%;
564
564
  }
565
565
  :host .wm-button.-secondary.ai, :host .wm-button.-icononly.ai {
566
- --gradient-start: var(--wmcolor-ai-interactive-gradientstart);
567
- --gradient-end: var(--wmcolor-ai-interactive-gradientend);
568
- --percent-1: 0%;
569
- --percent-2: 70.19%;
570
- --percent-3: 180%;
566
+ --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart);
567
+ --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend);
568
+ --wmbutton-percent-1: 0%;
569
+ --wmbutton-percent-2: 70.19%;
570
+ --wmbutton-percent-3: 180%;
571
571
  --secondary-button-fill: #ffffff;
572
572
  border: 2px solid transparent;
573
573
  gap: 5px;
574
- transition: --secondary-button-fill, --gradient-start, --gradient-end;
574
+ transition: --secondary-button-fill, --ai-gradient-start, --ai-gradient-end;
575
575
  transition-timing-function: ease-out;
576
576
  transition-duration: 100ms;
577
- background: linear-gradient(var(--secondary-button-fill) 0 0) padding-box, linear-gradient(-225deg, var(--gradient-start) var(--percent-1), var(--gradient-end) var(--percent-2), var(--gradient-start) var(--percent-3)) border-box;
577
+ background: linear-gradient(var(--secondary-button-fill) 0 0) padding-box, linear-gradient(-225deg, var(--ai-gradient-start) var(--wmbutton-percent-1), var(--ai-gradient-end) var(--wmbutton-percent-2), var(--ai-gradient-start) var(--wmbutton-percent-3)) border-box;
578
578
  }
579
579
  :host .wm-button.-secondary.ai .button-text, :host .wm-button.-icononly.ai .button-text {
580
580
  --icon-fill: linear-gradient(
581
581
  135deg,
582
- var(--gradient-start) var(--percent-1),
583
- var(--gradient-end) var(--percent-2)
582
+ var(--ai-gradient-start) var(--wmbutton-percent-1),
583
+ var(--ai-gradient-end) var(--wmbutton-percent-2)
584
584
  );
585
585
  display: flex;
586
586
  color: transparent;
587
587
  transition: color 100ms;
588
- background: linear-gradient(135deg, var(--gradient-start) var(--percent-1), var(--gradient-end) var(--percent-2));
588
+ background: linear-gradient(135deg, var(--ai-gradient-start) var(--wmbutton-percent-1), var(--ai-gradient-end) var(--wmbutton-percent-2));
589
589
  background-clip: text;
590
590
  -webkit-background-clip: text;
591
591
  align-items: center;
@@ -593,14 +593,14 @@
593
593
  :host .wm-button.-secondary.ai .svg-ai-sparkles::before, :host .wm-button.-icononly.ai .svg-ai-sparkles::before {
594
594
  --icon-fill: linear-gradient(
595
595
  135deg,
596
- var(--gradient-start) var(--percent-1),
597
- var(--gradient-end) var(--percent-2)
596
+ var(--ai-gradient-start) var(--wmbutton-percent-1),
597
+ var(--ai-gradient-end) var(--wmbutton-percent-2)
598
598
  );
599
599
  }
600
600
  :host .wm-button.-secondary.ai:hover, :host .wm-button.-icononly.ai:hover {
601
601
  --secondary-button-fill: transparent;
602
- --gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
603
- --gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
602
+ --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
603
+ --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
604
604
  transition-timing-function: ease-in;
605
605
  transition-duration: 100ms;
606
606
  }
@@ -612,29 +612,29 @@
612
612
  --icon-fill: #fff;
613
613
  }
614
614
  :host .wm-button.-navigational.ai {
615
- --gradient-start: var(--wmcolor-ai-interactive-gradientstart);
616
- --gradient-end: var(--wmcolor-ai-interactive-gradientend);
617
- --percent-1: 0%;
618
- --percent-2: 70.19%;
619
- --percent-3: 180%;
615
+ --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart);
616
+ --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend);
617
+ --wmbutton-percent-1: 0%;
618
+ --wmbutton-percent-2: 70.19%;
619
+ --wmbutton-percent-3: 180%;
620
620
  --icon-fill: linear-gradient(
621
621
  -225deg,
622
- var(--gradient-start) var(--percent-1),
623
- var(--gradient-end) var(--percent-2),
624
- var(--gradient-start) var(--percent-3)
622
+ var(--ai-gradient-start) var(--wmbutton-percent-1),
623
+ var(--ai-gradient-end) var(--wmbutton-percent-2),
624
+ var(--ai-gradient-start) var(--wmbutton-percent-3)
625
625
  );
626
626
  color: #fff;
627
- transition: --gradient-start, --gradient-end, --percent-1, --percent-2, --percent-3;
627
+ transition: --ai-gradient-start, --ai-gradient-end, --wmbutton-percent-1, --wmbutton-percent-2, --wmbutton-percent-3;
628
628
  transition-timing-function: ease-in;
629
629
  transition-delay: 0ms, 0ms, 150ms, 150ms, 150ms;
630
630
  transition-duration: 150ms;
631
631
  }
632
632
  :host .wm-button.-navigational.ai:hover {
633
- --gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
634
- --gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
635
- --percent-1: -50%;
636
- --percent-2: 0%;
637
- --percent-3: 89.81%;
633
+ --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
634
+ --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
635
+ --wmbutton-percent-1: -50%;
636
+ --wmbutton-percent-2: 0%;
637
+ --wmbutton-percent-3: 89.81%;
638
638
  transition-timing-function: ease-in;
639
639
  transition-duration: 100ms;
640
640
  }
@@ -646,24 +646,24 @@
646
646
  }
647
647
  :host .wm-button.-textonly.ai {
648
648
  --secondary-button-fill: transparent;
649
- --gradient-start: var(--wmcolor-ai-interactive-gradientstart);
650
- --gradient-end: var(--wmcolor-ai-interactive-gradientend);
651
- --percent-1: 0%;
652
- --percent-2: 70.19%;
653
- --percent-3: 180%;
649
+ --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart);
650
+ --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend);
651
+ --wmbutton-percent-1: 0%;
652
+ --wmbutton-percent-2: 70.19%;
653
+ --wmbutton-percent-3: 180%;
654
654
  --icon-fill: linear-gradient(
655
655
  135deg,
656
- var(--gradient-start) var(--percent-1),
657
- var(--gradient-end) var(--percent-2)
656
+ var(--ai-gradient-start) var(--wmbutton-percent-1),
657
+ var(--ai-gradient-end) var(--wmbutton-percent-2)
658
658
  );
659
659
  display: flex;
660
660
  color: transparent;
661
661
  gap: 5px;
662
- transition: --gradient-start, --gradient-end, --percent-1, --percent-2, --percent-3, --secondary-button-fill;
662
+ transition: --ai-gradient-start, --ai-gradient-end, --wmbutton-percent-1, --wmbutton-percent-2, --wmbutton-percent-3, --secondary-button-fill;
663
663
  transition-timing-function: ease-out;
664
664
  transition-delay: 0ms, 100ms, 100ms, 100ms, 200ms, 0ms;
665
665
  transition-duration: 150ms;
666
- background: linear-gradient(-225deg, var(--gradient-start) var(--percent-1), var(--gradient-end) var(--percent-2), var(--gradient-start) var(--percent-3));
666
+ background: linear-gradient(-225deg, var(--ai-gradient-start) var(--wmbutton-percent-1), var(--ai-gradient-end) var(--wmbutton-percent-2), var(--ai-gradient-start) var(--wmbutton-percent-3));
667
667
  background-clip: text;
668
668
  -webkit-background-clip: text;
669
669
  border: none;
@@ -672,8 +672,8 @@
672
672
  }
673
673
  :host .wm-button.-textonly.ai:hover {
674
674
  --secondary-button-fill: var(--wmcolor-azurite-70);
675
- --gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
676
- --gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
675
+ --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
676
+ --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
677
677
  transition-duration: 100ms;
678
678
  }
679
679
  @media (prefers-reduced-motion: no-preference) {
@@ -687,23 +687,23 @@
687
687
  transition-duration: 100ms;
688
688
  }
689
689
  :host .wm-button.-secondary.ai, :host .wm-button.-icononly.ai {
690
- transition: --secondary-button-fill, --gradient-start, --gradient-end, --percent-1, --percent-2, --percent-3;
690
+ transition: --secondary-button-fill, --ai-gradient-start, --ai-gradient-end, --wmbutton-percent-1, --wmbutton-percent-2, --wmbutton-percent-3;
691
691
  transition-timing-function: ease-out;
692
692
  transition-delay: 200ms, 0ms, 0ms, 100ms, 100ms, 100ms;
693
693
  transition-duration: 150ms;
694
694
  }
695
695
  :host .wm-button.-secondary.ai:hover, :host .wm-button.-icononly.ai:hover {
696
696
  --secondary-button-fill: transparent;
697
- --gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
698
- --gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
699
- --percent-1: -50%;
700
- --percent-2: 0%;
701
- --percent-3: 89.81%;
697
+ --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
698
+ --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
699
+ --wmbutton-percent-1: -50%;
700
+ --wmbutton-percent-2: 0%;
701
+ --wmbutton-percent-3: 89.81%;
702
702
  transition-delay: 0ms, 100ms, 100ms, 200ms, 200ms, 200ms;
703
703
  transition-duration: 200ms, 200ms, 200ms, 200ms, 200ms, 200ms;
704
704
  }
705
705
  :host .wm-button.-textonly.ai {
706
- transition: --gradient-start, --gradient-end, --percent-1, --percent-2, --percent-3, --secondary-button-fill;
706
+ transition: --ai-gradient-start, --ai-gradient-end, --wmbutton-percent-1, --wmbutton-percent-2, --wmbutton-percent-3, --secondary-button-fill;
707
707
  transition-timing-function: ease-out;
708
708
  transition-delay: 0ms, 100ms, 100ms, 100ms, 200ms, 0ms;
709
709
  transition-duration: 150ms;
@@ -711,11 +711,11 @@
711
711
  }
712
712
  :host .wm-button.-textonly.ai:hover {
713
713
  --secondary-button-fill: var(--wmcolor-azurite-70);
714
- --gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
715
- --gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
716
- --percent-1: -50%;
717
- --percent-2: 0%;
718
- --percent-3: 89.81%;
714
+ --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
715
+ --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
716
+ --wmbutton-percent-1: -50%;
717
+ --wmbutton-percent-2: 0%;
718
+ --wmbutton-percent-3: 89.81%;
719
719
  transition-delay: 100ms, 100ms, 200ms, 200ms, 200ms, 0s;
720
720
  transition-duration: 200ms, 200ms, 200ms, 200ms, 200ms, 1s;
721
721
  }
package/dist/collection/components/wm-button/wm-button.js CHANGED
@@ -156,13 +156,13 @@ export class Button {
156
156
  if (typeof CSS !== "undefined" && "registerProperty" in CSS) {
157
157
  try {
158
158
  CSS.registerProperty({
159
- name: "--gradient-start",
159
+ name: "--ai-gradient-start",
160
160
  syntax: "<color>",
161
161
  inherits: false,
162
162
  initialValue: "#2779C8"
163
163
  });
164
164
  CSS.registerProperty({
165
- name: "--gradient-end",
165
+ name: "--ai-gradient-end",
166
166
  syntax: "<color>",
167
167
  inherits: false,
168
168
  initialValue: "#6259C4"
@@ -174,19 +174,19 @@ export class Button {
174
174
  initialValue: "#FFFFFF"
175
175
  });
176
176
  CSS.registerProperty({
177
- name: "--percent-1",
177
+ name: "--wmbutton-percent-1",
178
178
  syntax: "<percentage>",
179
179
  inherits: false,
180
180
  initialValue: "0%"
181
181
  });
182
182
  CSS.registerProperty({
183
- name: "--percent-2",
183
+ name: "--wmbutton-percent-2",
184
184
  syntax: "<percentage>",
185
185
  inherits: false,
186
186
  initialValue: "70.19%"
187
187
  });
188
188
  CSS.registerProperty({
189
- name: "--percent-3",
189
+ name: "--wmbutton-percent-3",
190
190
  syntax: "<percentage>",
191
191
  inherits: false,
192
192
  initialValue: "-50%"
@@ -249,7 +249,7 @@ export class Button {
249
249
  }
250
250
  }
251
251
  render() {
252
- return (h(Host, { key: 'ad8242424eadd86fc5c92f43c0d8aedf0e74d920', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: '39416daed310c0f00a2ad8ed7a98682b4f0993ec', id: this.id, class: `${this.buttonClasses}`, disabled: this.isDisabled, ref: (el) => (this.buttonEl = el), "aria-label": this.getAriaLabel(), "aria-hasPopup": this.ariaPopup ? "menu" : null, onMouseEnter: (ev) => this.handleMouseEnter(ev), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.handleFocus(ev), onBlur: () => hideTooltip(), onClick: () => hideTooltip() }, (this.icon || this.buttonType.endsWith("-ai")) && this.renderIcon(), (!this.buttonType.startsWith("navigational") && !this.buttonType.startsWith("icononly")) && (h("span", { key: '947491021ce814067ff365cf80b8f46518da46fe', class: "button-text" }, h("slot", { key: '5f28c90f9964c13407316efb615b2c4b8a6ddd95' }))), (this.buttonType == "selector" || this.buttonType == "selector-primary") && (h("div", { key: '11d47ad8b6079c9159ea1750834a69184ac49caa', class: "selector-icon svg-icon svg-expand-more" })))));
252
+ return (h(Host, { key: 'ed44edc43c12cbbc088b6a2872e1e26d816c1cba', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: '0b94c327dd29d98e981a72fe38b122cc06313aa1', id: this.id, class: `${this.buttonClasses}`, disabled: this.isDisabled, ref: (el) => (this.buttonEl = el), "aria-label": this.getAriaLabel(), "aria-hasPopup": this.ariaPopup ? "menu" : null, onMouseEnter: (ev) => this.handleMouseEnter(ev), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.handleFocus(ev), onBlur: () => hideTooltip(), onClick: () => hideTooltip() }, (this.icon || this.buttonType.endsWith("-ai")) && this.renderIcon(), (!this.buttonType.startsWith("navigational") && !this.buttonType.startsWith("icononly")) && (h("span", { key: 'c31ae6ac51a1aee66734f3501e49cf9cde1bfc7a', class: "button-text" }, h("slot", { key: 'd75aa45be52f340e755bd96ea029bd51fdd69150' }))), (this.buttonType == "selector" || this.buttonType == "selector-primary") && (h("div", { key: '8d510ff0af0bdbd882214d09b41a26d344591b55', class: "selector-icon svg-icon svg-expand-more" })))));
253
253
  }
254
254
  static get is() { return "wm-button"; }
255
255
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/wm-toggletip/wm-toggletip.css CHANGED
@@ -898,9 +898,9 @@
898
898
  --icon-size: 28px;
899
899
  }
900
900
  :host .button #ai-icon .svg-ai-sparkles:before {
901
- --wmtoggletip-gradient-start: var(--wmcolor-ai-accent-gradientstart);
902
- --wmtoggletip-gradient-end: var(--wmcolor-ai-accent-gradientend);
903
- background: linear-gradient(to bottom, var(--wmtoggletip-gradient-start) 30%, var(--wmtoggletip-gradient-end) 100%);
901
+ --ai-gradient-start: var(--wmcolor-ai-accent-gradientstart);
902
+ --ai-gradient-end: var(--wmcolor-ai-accent-gradientend);
903
+ background: linear-gradient(to bottom, var(--ai-gradient-start) 30%, var(--ai-gradient-end) 100%);
904
904
  }
905
905
  :host .button #ai-icon .main {
906
906
  clip-path: polygon(0 0, 40% 0%, 70% 50%, 40% 100%, 0 100%);
@@ -1221,9 +1221,9 @@
1221
1221
  }
1222
1222
  :host button:hover #ai-icon .svg-ai-sparkles:before,
1223
1223
  :host button:has(+ #toggletip:popover-open) #ai-icon .svg-ai-sparkles:before {
1224
- --wmtoggletip-gradient-start: var(--wmcolor-ai-accent-gradientstart-final);
1225
- --wmtoggletip-gradient-end: var(--wmcolor-ai-accent-gradientend-final);
1226
- transition: --wmtoggletip-gradient-start, --wmtoggletip-gradient-end;
1224
+ --ai-gradient-start: var(--wmcolor-ai-accent-gradientstart-final);
1225
+ --ai-gradient-end: var(--wmcolor-ai-accent-gradientend-final);
1226
+ transition: --ai-gradient-start, --ai-gradient-end;
1227
1227
  transition-delay: 500ms;
1228
1228
  transition-duration: 100ms;
1229
1229
  }
package/dist/collection/components/wm-toggletip/wm-toggletip.js CHANGED
@@ -89,13 +89,13 @@ export class Toggletip {
89
89
  if (typeof CSS !== "undefined" && "registerProperty" in CSS) {
90
90
  try {
91
91
  CSS.registerProperty({
92
- name: "--wmtoggletip-gradient-start",
92
+ name: "--ai-gradient-start",
93
93
  syntax: "<color>",
94
94
  inherits: false,
95
95
  initialValue: "red", // Should always be overwritten. Technically optional, but needed to animate.
96
96
  });
97
97
  CSS.registerProperty({
98
- name: "--wmtoggletip-gradient-end",
98
+ name: "--ai-gradient-end",
99
99
  syntax: "<color>",
100
100
  inherits: false,
101
101
  initialValue: "blue", // Should always be overwritten. Technically optional, but needed to animate.
@@ -221,9 +221,9 @@ export class Toggletip {
221
221
  }
222
222
  }
223
223
  render() {
224
- return (h(Host, { key: '23c655fbd06928e78f57394712b1606d22c88b39', class: `size-${this.targetSize}` }, h("button", { key: 'd49cd7cc1d6be596dbf4a6e502f56b0db2e0539f', class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => this.open(),
224
+ return (h(Host, { key: '5d8d7bd25f7ed0e9626944a09f18c7a534b35181', class: `size-${this.targetSize}` }, h("button", { key: '414f8f09f3a1d20b9e8641cab03632ccd91f8f71', class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => this.open(),
225
225
  // In order to position the tooltip identically to the toggletip, its presence is determined by these four events
226
- onMouseEnter: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), h("div", { key: 'bf103153e3cde30d3d62758c1d07a317a251e0ca', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip" }, this.tooltip), h("div", { key: 'f1c7446c29fda3df845331c4b7713179bd929bb2', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
226
+ onMouseEnter: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), h("div", { key: '8d032e897502ded7631b494314f201d35dd3acb3', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip" }, this.tooltip), h("div", { key: '4cc15a0db02fb19faa8d8ac7e9253c29e74e7ac5', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
227
227
  }
228
228
  static get is() { return "wm-toggletip"; }
229
229
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/wm-uploader/wm-uploader.css CHANGED
@@ -541,51 +541,51 @@
541
541
  background: var(--icon-fill, currentColor);
542
542
  }
543
543
  :host .wm-button.-primary.ai {
544
- --gradient-start: var(--wmcolor-ai-interactive-gradientstart);
545
- --gradient-end: var(--wmcolor-ai-interactive-gradientend);
546
- --percent-1: 0%;
547
- --percent-2: 70.19%;
548
- --percent-3: 180%;
544
+ --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart);
545
+ --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend);
546
+ --wmbutton-percent-1: 0%;
547
+ --wmbutton-percent-2: 70.19%;
548
+ --wmbutton-percent-3: 180%;
549
549
  color: #fff;
550
550
  gap: 5px;
551
- background-image: linear-gradient(-225deg, var(--gradient-start) var(--percent-1), var(--gradient-end) var(--percent-2), var(--gradient-start) var(--percent-3));
551
+ background-image: linear-gradient(-225deg, var(--ai-gradient-start) var(--wmbutton-percent-1), var(--ai-gradient-end) var(--wmbutton-percent-2), var(--ai-gradient-start) var(--wmbutton-percent-3));
552
552
  background-origin: border-box;
553
553
  background-clip: border-box;
554
554
  border: 2px solid transparent;
555
- transition: --gradient-start, --gradient-end, --percent-1, --percent-2, --percent-3;
555
+ transition: --ai-gradient-start, --ai-gradient-end, --wmbutton-percent-1, --wmbutton-percent-2, --wmbutton-percent-3;
556
556
  transition-timing-function: ease-out;
557
557
  }
558
558
  :host .wm-button.-primary.ai:hover {
559
- --gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
560
- --gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
561
- --percent-1: -50%;
562
- --percent-2: 0%;
563
- --percent-3: 89.81%;
559
+ --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
560
+ --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
561
+ --wmbutton-percent-1: -50%;
562
+ --wmbutton-percent-2: 0%;
563
+ --wmbutton-percent-3: 89.81%;
564
564
  }
565
565
  :host .wm-button.-secondary.ai, :host .wm-button.-icononly.ai {
566
- --gradient-start: var(--wmcolor-ai-interactive-gradientstart);
567
- --gradient-end: var(--wmcolor-ai-interactive-gradientend);
568
- --percent-1: 0%;
569
- --percent-2: 70.19%;
570
- --percent-3: 180%;
566
+ --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart);
567
+ --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend);
568
+ --wmbutton-percent-1: 0%;
569
+ --wmbutton-percent-2: 70.19%;
570
+ --wmbutton-percent-3: 180%;
571
571
  --secondary-button-fill: #ffffff;
572
572
  border: 2px solid transparent;
573
573
  gap: 5px;
574
- transition: --secondary-button-fill, --gradient-start, --gradient-end;
574
+ transition: --secondary-button-fill, --ai-gradient-start, --ai-gradient-end;
575
575
  transition-timing-function: ease-out;
576
576
  transition-duration: 100ms;
577
- background: linear-gradient(var(--secondary-button-fill) 0 0) padding-box, linear-gradient(-225deg, var(--gradient-start) var(--percent-1), var(--gradient-end) var(--percent-2), var(--gradient-start) var(--percent-3)) border-box;
577
+ background: linear-gradient(var(--secondary-button-fill) 0 0) padding-box, linear-gradient(-225deg, var(--ai-gradient-start) var(--wmbutton-percent-1), var(--ai-gradient-end) var(--wmbutton-percent-2), var(--ai-gradient-start) var(--wmbutton-percent-3)) border-box;
578
578
  }
579
579
  :host .wm-button.-secondary.ai .button-text, :host .wm-button.-icononly.ai .button-text {
580
580
  --icon-fill: linear-gradient(
581
581
  135deg,
582
- var(--gradient-start) var(--percent-1),
583
- var(--gradient-end) var(--percent-2)
582
+ var(--ai-gradient-start) var(--wmbutton-percent-1),
583
+ var(--ai-gradient-end) var(--wmbutton-percent-2)
584
584
  );
585
585
  display: flex;
586
586
  color: transparent;
587
587
  transition: color 100ms;
588
- background: linear-gradient(135deg, var(--gradient-start) var(--percent-1), var(--gradient-end) var(--percent-2));
588
+ background: linear-gradient(135deg, var(--ai-gradient-start) var(--wmbutton-percent-1), var(--ai-gradient-end) var(--wmbutton-percent-2));
589
589
  background-clip: text;
590
590
  -webkit-background-clip: text;
591
591
  align-items: center;
@@ -593,14 +593,14 @@
593
593
  :host .wm-button.-secondary.ai .svg-ai-sparkles::before, :host .wm-button.-icononly.ai .svg-ai-sparkles::before {
594
594
  --icon-fill: linear-gradient(
595
595
  135deg,
596
- var(--gradient-start) var(--percent-1),
597
- var(--gradient-end) var(--percent-2)
596
+ var(--ai-gradient-start) var(--wmbutton-percent-1),
597
+ var(--ai-gradient-end) var(--wmbutton-percent-2)
598
598
  );
599
599
  }
600
600
  :host .wm-button.-secondary.ai:hover, :host .wm-button.-icononly.ai:hover {
601
601
  --secondary-button-fill: transparent;
602
- --gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
603
- --gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
602
+ --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
603
+ --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
604
604
  transition-timing-function: ease-in;
605
605
  transition-duration: 100ms;
606
606
  }
@@ -612,29 +612,29 @@
612
612
  --icon-fill: #fff;
613
613
  }
614
614
  :host .wm-button.-navigational.ai {
615
- --gradient-start: var(--wmcolor-ai-interactive-gradientstart);
616
- --gradient-end: var(--wmcolor-ai-interactive-gradientend);
617
- --percent-1: 0%;
618
- --percent-2: 70.19%;
619
- --percent-3: 180%;
615
+ --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart);
616
+ --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend);
617
+ --wmbutton-percent-1: 0%;
618
+ --wmbutton-percent-2: 70.19%;
619
+ --wmbutton-percent-3: 180%;
620
620
  --icon-fill: linear-gradient(
621
621
  -225deg,
622
- var(--gradient-start) var(--percent-1),
623
- var(--gradient-end) var(--percent-2),
624
- var(--gradient-start) var(--percent-3)
622
+ var(--ai-gradient-start) var(--wmbutton-percent-1),
623
+ var(--ai-gradient-end) var(--wmbutton-percent-2),
624
+ var(--ai-gradient-start) var(--wmbutton-percent-3)
625
625
  );
626
626
  color: #fff;
627
- transition: --gradient-start, --gradient-end, --percent-1, --percent-2, --percent-3;
627
+ transition: --ai-gradient-start, --ai-gradient-end, --wmbutton-percent-1, --wmbutton-percent-2, --wmbutton-percent-3;
628
628
  transition-timing-function: ease-in;
629
629
  transition-delay: 0ms, 0ms, 150ms, 150ms, 150ms;
630
630
  transition-duration: 150ms;
631
631
  }
632
632
  :host .wm-button.-navigational.ai:hover {
633
- --gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
634
- --gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
635
- --percent-1: -50%;
636
- --percent-2: 0%;
637
- --percent-3: 89.81%;
633
+ --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
634
+ --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
635
+ --wmbutton-percent-1: -50%;
636
+ --wmbutton-percent-2: 0%;
637
+ --wmbutton-percent-3: 89.81%;
638
638
  transition-timing-function: ease-in;
639
639
  transition-duration: 100ms;
640
640
  }
@@ -646,24 +646,24 @@
646
646
  }
647
647
  :host .wm-button.-textonly.ai {
648
648
  --secondary-button-fill: transparent;
649
- --gradient-start: var(--wmcolor-ai-interactive-gradientstart);
650
- --gradient-end: var(--wmcolor-ai-interactive-gradientend);
651
- --percent-1: 0%;
652
- --percent-2: 70.19%;
653
- --percent-3: 180%;
649
+ --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart);
650
+ --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend);
651
+ --wmbutton-percent-1: 0%;
652
+ --wmbutton-percent-2: 70.19%;
653
+ --wmbutton-percent-3: 180%;
654
654
  --icon-fill: linear-gradient(
655
655
  135deg,
656
- var(--gradient-start) var(--percent-1),
657
- var(--gradient-end) var(--percent-2)
656
+ var(--ai-gradient-start) var(--wmbutton-percent-1),
657
+ var(--ai-gradient-end) var(--wmbutton-percent-2)
658
658
  );
659
659
  display: flex;
660
660
  color: transparent;
661
661
  gap: 5px;
662
- transition: --gradient-start, --gradient-end, --percent-1, --percent-2, --percent-3, --secondary-button-fill;
662
+ transition: --ai-gradient-start, --ai-gradient-end, --wmbutton-percent-1, --wmbutton-percent-2, --wmbutton-percent-3, --secondary-button-fill;
663
663
  transition-timing-function: ease-out;
664
664
  transition-delay: 0ms, 100ms, 100ms, 100ms, 200ms, 0ms;
665
665
  transition-duration: 150ms;
666
- background: linear-gradient(-225deg, var(--gradient-start) var(--percent-1), var(--gradient-end) var(--percent-2), var(--gradient-start) var(--percent-3));
666
+ background: linear-gradient(-225deg, var(--ai-gradient-start) var(--wmbutton-percent-1), var(--ai-gradient-end) var(--wmbutton-percent-2), var(--ai-gradient-start) var(--wmbutton-percent-3));
667
667
  background-clip: text;
668
668
  -webkit-background-clip: text;
669
669
  border: none;
@@ -672,8 +672,8 @@
672
672
  }
673
673
  :host .wm-button.-textonly.ai:hover {
674
674
  --secondary-button-fill: var(--wmcolor-azurite-70);
675
- --gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
676
- --gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
675
+ --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
676
+ --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
677
677
  transition-duration: 100ms;
678
678
  }
679
679
  @media (prefers-reduced-motion: no-preference) {
@@ -687,23 +687,23 @@
687
687
  transition-duration: 100ms;
688
688
  }
689
689
  :host .wm-button.-secondary.ai, :host .wm-button.-icononly.ai {
690
- transition: --secondary-button-fill, --gradient-start, --gradient-end, --percent-1, --percent-2, --percent-3;
690
+ transition: --secondary-button-fill, --ai-gradient-start, --ai-gradient-end, --wmbutton-percent-1, --wmbutton-percent-2, --wmbutton-percent-3;
691
691
  transition-timing-function: ease-out;
692
692
  transition-delay: 200ms, 0ms, 0ms, 100ms, 100ms, 100ms;
693
693
  transition-duration: 150ms;
694
694
  }
695
695
  :host .wm-button.-secondary.ai:hover, :host .wm-button.-icononly.ai:hover {
696
696
  --secondary-button-fill: transparent;
697
- --gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
698
- --gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
699
- --percent-1: -50%;
700
- --percent-2: 0%;
701
- --percent-3: 89.81%;
697
+ --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
698
+ --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
699
+ --wmbutton-percent-1: -50%;
700
+ --wmbutton-percent-2: 0%;
701
+ --wmbutton-percent-3: 89.81%;
702
702
  transition-delay: 0ms, 100ms, 100ms, 200ms, 200ms, 200ms;
703
703
  transition-duration: 200ms, 200ms, 200ms, 200ms, 200ms, 200ms;
704
704
  }
705
705
  :host .wm-button.-textonly.ai {
706
- transition: --gradient-start, --gradient-end, --percent-1, --percent-2, --percent-3, --secondary-button-fill;
706
+ transition: --ai-gradient-start, --ai-gradient-end, --wmbutton-percent-1, --wmbutton-percent-2, --wmbutton-percent-3, --secondary-button-fill;
707
707
  transition-timing-function: ease-out;
708
708
  transition-delay: 0ms, 100ms, 100ms, 100ms, 200ms, 0ms;
709
709
  transition-duration: 150ms;
@@ -711,11 +711,11 @@
711
711
  }
712
712
  :host .wm-button.-textonly.ai:hover {
713
713
  --secondary-button-fill: var(--wmcolor-azurite-70);
714
- --gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
715
- --gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
716
- --percent-1: -50%;
717
- --percent-2: 0%;
718
- --percent-3: 89.81%;
714
+ --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
715
+ --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
716
+ --wmbutton-percent-1: -50%;
717
+ --wmbutton-percent-2: 0%;
718
+ --wmbutton-percent-3: 89.81%;
719
719
  transition-delay: 100ms, 100ms, 200ms, 200ms, 200ms, 0s;
720
720
  transition-duration: 200ms, 200ms, 200ms, 200ms, 200ms, 1s;
721
721
  }
package/dist/esm/{app-globals-7c68f770.js → app-globals-c670e9b4.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  import './index-130e07bb.js';
2
2
 
3
- const version = "5.15.0-alpha.3";
3
+ const version = "5.15.0-alpha.4";
4
4
 
5
5
  // PRINT RIPPLE VERSION IN CONSOLE
6
6
  // test envs return 0 for plugin.length
package/dist/esm/loader.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { b as bootstrapLazy } from './index-130e07bb.js';
2
2
  export { s as setNonce } from './index-130e07bb.js';
3
- import { g as globalScripts } from './app-globals-7c68f770.js';
3
+ import { g as globalScripts } from './app-globals-c670e9b4.js';
4
4
 
5
5
  const defineCustomElements = async (win, options) => {
6
6
  if (typeof window === 'undefined') return undefined;
package/dist/esm/ripple.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { p as promiseResolve, b as bootstrapLazy } from './index-130e07bb.js';
2
2
  export { s as setNonce } from './index-130e07bb.js';
3
- import { g as globalScripts } from './app-globals-7c68f770.js';
3
+ import { g as globalScripts } from './app-globals-c670e9b4.js';
4
4
 
5
5
  /*
6
6
  Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com