npm - @watermarkinsights/ripple - Versions diffs - 5.15.0-alpha.1 → 5.15.0-alpha.3 - Mend

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

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 (273) hide show

package/dist/collection/components/wm-tabs/wm-tab-item/wm-tab-item.css CHANGED Viewed

@@ -105,6 +105,19 @@
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,1L9,9L1,12L9,15L12,23L15,15L23,12L15,9L12,1Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,1L9,9L1,12L9,15L12,23L15,15L23,12L15,9L12,1Z'/%3E%3C/svg%3E%0A");
 }
+.svg-icon.svg-ai-sparkles:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+.svg-icon.svg-ai-sparkles:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M11.0834 0.583328L10.3484 2.18749L8.75004 2.91666L10.3484 3.65166L11.0834 5.25L11.8125 3.65166L13.4167 2.91666L11.8125 2.18749M5.25004 2.33333L3.79171 5.54166L0.583374 7L3.79171 8.45833L5.25004 11.6667L6.70837 8.45833L9.91671 7L6.70837 5.54166M11.0834 8.75L10.3484 10.3483L8.75004 11.0833L10.3484 11.8125L11.0834 13.4167L11.8125 11.8125L13.4167 11.0833L11.8125 10.3483'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M11.0834 0.583328L10.3484 2.18749L8.75004 2.91666L10.3484 3.65166L11.0834 5.25L11.8125 3.65166L13.4167 2.91666L11.8125 2.18749M5.25004 2.33333L3.79171 5.54166L0.583374 7L3.79171 8.45833L5.25004 11.6667L6.70837 8.45833L9.91671 7L6.70837 5.54166M11.0834 8.75L10.3484 10.3483L8.75004 11.0833L10.3484 11.8125L11.0834 13.4167L11.8125 11.8125L13.4167 11.0833L11.8125 10.3483'/%3E%3C/svg%3E%0A");
+}
 .svg-icon.svg-api-connected:before {
   content: "";
   display: block;

package/dist/collection/components/wm-tabs/wm-tab-list/wm-tab-list.css CHANGED Viewed

@@ -105,6 +105,19 @@
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,1L9,9L1,12L9,15L12,23L15,15L23,12L15,9L12,1Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,1L9,9L1,12L9,15L12,23L15,15L23,12L15,9L12,1Z'/%3E%3C/svg%3E%0A");
 }
+.svg-icon.svg-ai-sparkles:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+.svg-icon.svg-ai-sparkles:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M11.0834 0.583328L10.3484 2.18749L8.75004 2.91666L10.3484 3.65166L11.0834 5.25L11.8125 3.65166L13.4167 2.91666L11.8125 2.18749M5.25004 2.33333L3.79171 5.54166L0.583374 7L3.79171 8.45833L5.25004 11.6667L6.70837 8.45833L9.91671 7L6.70837 5.54166M11.0834 8.75L10.3484 10.3483L8.75004 11.0833L10.3484 11.8125L11.0834 13.4167L11.8125 11.8125L13.4167 11.0833L11.8125 10.3483'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M11.0834 0.583328L10.3484 2.18749L8.75004 2.91666L10.3484 3.65166L11.0834 5.25L11.8125 3.65166L13.4167 2.91666L11.8125 2.18749M5.25004 2.33333L3.79171 5.54166L0.583374 7L3.79171 8.45833L5.25004 11.6667L6.70837 8.45833L9.91671 7L6.70837 5.54166M11.0834 8.75L10.3484 10.3483L8.75004 11.0833L10.3484 11.8125L11.0834 13.4167L11.8125 11.8125L13.4167 11.0833L11.8125 10.3483'/%3E%3C/svg%3E%0A");
+}
 .svg-icon.svg-api-connected:before {
   content: "";
   display: block;

package/dist/collection/components/wm-tabs/wm-tab-panel/wm-tab-panel.css CHANGED Viewed

@@ -105,6 +105,19 @@
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,1L9,9L1,12L9,15L12,23L15,15L23,12L15,9L12,1Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,1L9,9L1,12L9,15L12,23L15,15L23,12L15,9L12,1Z'/%3E%3C/svg%3E%0A");
 }
+.svg-icon.svg-ai-sparkles:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+.svg-icon.svg-ai-sparkles:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M11.0834 0.583328L10.3484 2.18749L8.75004 2.91666L10.3484 3.65166L11.0834 5.25L11.8125 3.65166L13.4167 2.91666L11.8125 2.18749M5.25004 2.33333L3.79171 5.54166L0.583374 7L3.79171 8.45833L5.25004 11.6667L6.70837 8.45833L9.91671 7L6.70837 5.54166M11.0834 8.75L10.3484 10.3483L8.75004 11.0833L10.3484 11.8125L11.0834 13.4167L11.8125 11.8125L13.4167 11.0833L11.8125 10.3483'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M11.0834 0.583328L10.3484 2.18749L8.75004 2.91666L10.3484 3.65166L11.0834 5.25L11.8125 3.65166L13.4167 2.91666L11.8125 2.18749M5.25004 2.33333L3.79171 5.54166L0.583374 7L3.79171 8.45833L5.25004 11.6667L6.70837 8.45833L9.91671 7L6.70837 5.54166M11.0834 8.75L10.3484 10.3483L8.75004 11.0833L10.3484 11.8125L11.0834 13.4167L11.8125 11.8125L13.4167 11.0833L11.8125 10.3483'/%3E%3C/svg%3E%0A");
+}
 .svg-icon.svg-api-connected:before {
   content: "";
   display: block;

package/dist/collection/components/wm-tag-input/wm-tag-input.css CHANGED Viewed

@@ -105,6 +105,19 @@
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,1L9,9L1,12L9,15L12,23L15,15L23,12L15,9L12,1Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,1L9,9L1,12L9,15L12,23L15,15L23,12L15,9L12,1Z'/%3E%3C/svg%3E%0A");
 }
+.svg-icon.svg-ai-sparkles:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+.svg-icon.svg-ai-sparkles:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M11.0834 0.583328L10.3484 2.18749L8.75004 2.91666L10.3484 3.65166L11.0834 5.25L11.8125 3.65166L13.4167 2.91666L11.8125 2.18749M5.25004 2.33333L3.79171 5.54166L0.583374 7L3.79171 8.45833L5.25004 11.6667L6.70837 8.45833L9.91671 7L6.70837 5.54166M11.0834 8.75L10.3484 10.3483L8.75004 11.0833L10.3484 11.8125L11.0834 13.4167L11.8125 11.8125L13.4167 11.0833L11.8125 10.3483'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M11.0834 0.583328L10.3484 2.18749L8.75004 2.91666L10.3484 3.65166L11.0834 5.25L11.8125 3.65166L13.4167 2.91666L11.8125 2.18749M5.25004 2.33333L3.79171 5.54166L0.583374 7L3.79171 8.45833L5.25004 11.6667L6.70837 8.45833L9.91671 7L6.70837 5.54166M11.0834 8.75L10.3484 10.3483L8.75004 11.0833L10.3484 11.8125L11.0834 13.4167L11.8125 11.8125L13.4167 11.0833L11.8125 10.3483'/%3E%3C/svg%3E%0A");
+}
 .svg-icon.svg-api-connected:before {
   content: "";
   display: block;

package/dist/collection/components/wm-textarea/wm-textarea.css CHANGED Viewed

@@ -105,6 +105,19 @@
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,1L9,9L1,12L9,15L12,23L15,15L23,12L15,9L12,1Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,1L9,9L1,12L9,15L12,23L15,15L23,12L15,9L12,1Z'/%3E%3C/svg%3E%0A");
 }
+.svg-icon.svg-ai-sparkles:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+.svg-icon.svg-ai-sparkles:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M11.0834 0.583328L10.3484 2.18749L8.75004 2.91666L10.3484 3.65166L11.0834 5.25L11.8125 3.65166L13.4167 2.91666L11.8125 2.18749M5.25004 2.33333L3.79171 5.54166L0.583374 7L3.79171 8.45833L5.25004 11.6667L6.70837 8.45833L9.91671 7L6.70837 5.54166M11.0834 8.75L10.3484 10.3483L8.75004 11.0833L10.3484 11.8125L11.0834 13.4167L11.8125 11.8125L13.4167 11.0833L11.8125 10.3483'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M11.0834 0.583328L10.3484 2.18749L8.75004 2.91666L10.3484 3.65166L11.0834 5.25L11.8125 3.65166L13.4167 2.91666L11.8125 2.18749M5.25004 2.33333L3.79171 5.54166L0.583374 7L3.79171 8.45833L5.25004 11.6667L6.70837 8.45833L9.91671 7L6.70837 5.54166M11.0834 8.75L10.3484 10.3483L8.75004 11.0833L10.3484 11.8125L11.0834 13.4167L11.8125 11.8125L13.4167 11.0833L11.8125 10.3483'/%3E%3C/svg%3E%0A");
+}
 .svg-icon.svg-api-connected:before {
   content: "";
   display: block;

package/dist/collection/components/wm-timepicker/wm-timepicker.css CHANGED Viewed

@@ -105,6 +105,19 @@
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,1L9,9L1,12L9,15L12,23L15,15L23,12L15,9L12,1Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,1L9,9L1,12L9,15L12,23L15,15L23,12L15,9L12,1Z'/%3E%3C/svg%3E%0A");
 }
+.svg-icon.svg-ai-sparkles:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+.svg-icon.svg-ai-sparkles:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M11.0834 0.583328L10.3484 2.18749L8.75004 2.91666L10.3484 3.65166L11.0834 5.25L11.8125 3.65166L13.4167 2.91666L11.8125 2.18749M5.25004 2.33333L3.79171 5.54166L0.583374 7L3.79171 8.45833L5.25004 11.6667L6.70837 8.45833L9.91671 7L6.70837 5.54166M11.0834 8.75L10.3484 10.3483L8.75004 11.0833L10.3484 11.8125L11.0834 13.4167L11.8125 11.8125L13.4167 11.0833L11.8125 10.3483'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M11.0834 0.583328L10.3484 2.18749L8.75004 2.91666L10.3484 3.65166L11.0834 5.25L11.8125 3.65166L13.4167 2.91666L11.8125 2.18749M5.25004 2.33333L3.79171 5.54166L0.583374 7L3.79171 8.45833L5.25004 11.6667L6.70837 8.45833L9.91671 7L6.70837 5.54166M11.0834 8.75L10.3484 10.3483L8.75004 11.0833L10.3484 11.8125L11.0834 13.4167L11.8125 11.8125L13.4167 11.0833L11.8125 10.3483'/%3E%3C/svg%3E%0A");
+}
 .svg-icon.svg-api-connected:before {
   content: "";
   display: block;

package/dist/collection/components/wm-toggletip/wm-toggletip.css CHANGED Viewed

@@ -105,6 +105,19 @@
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,1L9,9L1,12L9,15L12,23L15,15L23,12L15,9L12,1Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,1L9,9L1,12L9,15L12,23L15,15L23,12L15,9L12,1Z'/%3E%3C/svg%3E%0A");
 }
+.svg-icon.svg-ai-sparkles:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+.svg-icon.svg-ai-sparkles:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M11.0834 0.583328L10.3484 2.18749L8.75004 2.91666L10.3484 3.65166L11.0834 5.25L11.8125 3.65166L13.4167 2.91666L11.8125 2.18749M5.25004 2.33333L3.79171 5.54166L0.583374 7L3.79171 8.45833L5.25004 11.6667L6.70837 8.45833L9.91671 7L6.70837 5.54166M11.0834 8.75L10.3484 10.3483L8.75004 11.0833L10.3484 11.8125L11.0834 13.4167L11.8125 11.8125L13.4167 11.0833L11.8125 10.3483'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M11.0834 0.583328L10.3484 2.18749L8.75004 2.91666L10.3484 3.65166L11.0834 5.25L11.8125 3.65166L13.4167 2.91666L11.8125 2.18749M5.25004 2.33333L3.79171 5.54166L0.583374 7L3.79171 8.45833L5.25004 11.6667L6.70837 8.45833L9.91671 7L6.70837 5.54166M11.0834 8.75L10.3484 10.3483L8.75004 11.0833L10.3484 11.8125L11.0834 13.4167L11.8125 11.8125L13.4167 11.0833L11.8125 10.3483'/%3E%3C/svg%3E%0A");
+}
 .svg-icon.svg-api-connected:before {
   content: "";
   display: block;
@@ -825,6 +838,8 @@
   --button-size: 16px;
   --offset-x: 0px;
   --offset-y: 0px;
+  --wmcolor-ai-accent-gradientstart-final: var(--wmcolor-azurite-50);
+  --wmcolor-ai-accent-gradientend-final: var(--wmcolor-amethyst-40);
 }
 :host(.size-small) {
@@ -875,6 +890,32 @@
   --icon-size: 1rem;
   background: radial-gradient(var(--wmcolor-toggletip-icon-text) 40%, transparent 0%);
 }
+:host .button #ai-icon {
+  position: relative;
+  transform-origin: left;
+  transform: translateX(0.4375rem);
+  scale: 0.8;
+  --icon-size: 28px;
+}
+:host .button #ai-icon .svg-ai-sparkles:before {
+  --wmtoggletip-gradient-start: var(--wmcolor-ai-accent-gradientstart);
+  --wmtoggletip-gradient-end: var(--wmcolor-ai-accent-gradientend);
+  background: linear-gradient(to bottom, var(--wmtoggletip-gradient-start) 30%, var(--wmtoggletip-gradient-end) 100%);
+}
+:host .button #ai-icon .main {
+  clip-path: polygon(0 0, 40% 0%, 70% 50%, 40% 100%, 0 100%);
+}
+:host .button #ai-icon .tiny {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+:host .button #ai-icon .tiny.top-star {
+  clip-path: polygon(40% 0, 100% 0, 100% 50%, 70% 40%);
+}
+:host .button #ai-icon .tiny.bottom-star {
+  clip-path: polygon(40% 100%, 100% 100%, 100% 50%, 70% 60%);
+}
 :host .button:focus-visible {
   outline: 3px solid var(--wmcolor-interactive-focus);
   outline-offset: -3px;
@@ -1162,4 +1203,40 @@
   :host .toggletip.top-left.small, :host .toggletip.top-left.large {
     translate: calc(-50% + 1.25rem + var(--offset-x)) calc(-50% - 1.25rem + var(--offset-y));
   }
+}
+@media (prefers-reduced-motion: no-preference) {
+  :host #ai-icon {
+    transition: scale 600ms ease-out;
+    transform-origin: center;
+  }
+  :host #ai-icon .tiny {
+    opacity: 0;
+    transition: opacity 100ms;
+    transition-delay: 0ms;
+  }
+  :host button:hover #ai-icon,
+  :host button:has(+ #toggletip:popover-open) #ai-icon {
+    scale: 0.5;
+    transition-timing-function: linear(0, -0.009 18.2%, -0.026 24.6%, -0.054 30.5%, -0.097 36.5%, -0.157 42.6%, -0.385 60.2%, -0.443 65.6%, -0.465 68.7%, -0.473 71.5%, -0.469 74.1%, -0.452 76.5%, -0.398 80.1%, -0.311 83.4%, -0.034 89.4%, 0.399 94.9%, 1);
+  }
+  :host button:hover #ai-icon .svg-ai-sparkles:before,
+  :host button:has(+ #toggletip:popover-open) #ai-icon .svg-ai-sparkles:before {
+    --wmtoggletip-gradient-start: var(--wmcolor-ai-accent-gradientstart-final);
+    --wmtoggletip-gradient-end: var(--wmcolor-ai-accent-gradientend-final);
+    transition: --wmtoggletip-gradient-start, --wmtoggletip-gradient-end;
+    transition-delay: 500ms;
+    transition-duration: 100ms;
+  }
+  :host button:hover #ai-icon .tiny,
+  :host button:has(+ #toggletip:popover-open) #ai-icon .tiny {
+    opacity: 1;
+  }
+  :host button:hover #ai-icon .tiny.bottom-star,
+  :host button:has(+ #toggletip:popover-open) #ai-icon .tiny.bottom-star {
+    transition-delay: 700ms;
+  }
+  :host button:hover #ai-icon .tiny.top-star,
+  :host button:has(+ #toggletip:popover-open) #ai-icon .tiny.top-star {
+    transition-delay: 300ms;
+  }
 }

package/dist/collection/components/wm-toggletip/wm-toggletip.js CHANGED Viewed

@@ -3,10 +3,14 @@ import { showTooltip, hideTooltip, shouldOpenUp, shouldOpenDown, shouldShiftLeft
 export class Toggletip {
     constructor() {
         this.scrollableParents = [];
-        this.tooltipMessage = intl.formatMessage({
+        this.tooltipInfoMessage = intl.formatMessage({
             id: "toggletip.moreInformation",
             defaultMessage: "More information",
         });
+        this.tooltipAITooltip = intl.formatMessage({
+            id: "toggletip.aiTooltip",
+            defaultMessage: "Powered by AI",
+        });
         this.debouncedReveal = debounce(() => {
             const { x, y } = getCumulativeScrollOffset(this.el);
             this.el.style.setProperty("--offset-x", "-" + x + "px");
@@ -20,11 +24,22 @@ export class Toggletip {
         this.tooltip = undefined;
         this.tooltipPosition = "bottom-right";
         this.targetSize = "small";
+        this.toggletipType = "info";
         this.isHidden = true;
     }
     get isOpen() {
         return this.toggletipEl.matches(":popover-open");
     }
+    get tooltipMessage() {
+        switch (this.toggletipType) {
+            case "ai":
+                return this.tooltipAITooltip;
+            case "info":
+                return this.tooltipInfoMessage;
+            default:
+                return this.tooltipInfoMessage;
+        }
+    }
     get toggletipPosition() {
         // prop tooltipPosition is unfortunately named. It's the position of the toggletip.
         // it needs to be adjusted when too close to the edge of the screen, hence this getter
@@ -66,7 +81,34 @@ export class Toggletip {
         }
         return position;
     }
+    /**
+     * Register CSS custom properties for AI gradient animations
+     * These need to be registered in JS since @property doesn't work in shadow DOM
+     */
+    registerCSSProperties() {
+        if (typeof CSS !== "undefined" && "registerProperty" in CSS) {
+            try {
+                CSS.registerProperty({
+                    name: "--wmtoggletip-gradient-start",
+                    syntax: "<color>",
+                    inherits: false,
+                    initialValue: "red", // Should always be overwritten. Technically optional, but needed to animate.
+                });
+                CSS.registerProperty({
+                    name: "--wmtoggletip-gradient-end",
+                    syntax: "<color>",
+                    inherits: false,
+                    initialValue: "blue", // Should always be overwritten. Technically optional, but needed to animate.
+                });
+            }
+            catch (e) {
+                // Properties might already be registered, or CSS.registerProperty might not be supported
+                // This is fine, the animations will still work but might be less smooth
+            }
+        }
+    }
     componentWillLoad() {
+        this.registerCSSProperties();
         const validTooltipPlacement = [
             "top",
             "right",
@@ -168,10 +210,20 @@ export class Toggletip {
             this.liveRegionEl.innerHTML = this.tooltip;
         }, 10);
     }
+    renderIcon() {
+        switch (this.toggletipType) {
+            case "info":
+                return h("div", { class: "svg-icon svg-info" });
+            case "ai":
+                return (h("div", { id: "ai-icon" }, h("div", { class: "svg-icon svg-ai-sparkles main" }), h("div", { class: "svg-icon svg-ai-sparkles tiny top-star" }), h("div", { class: "svg-icon svg-ai-sparkles tiny bottom-star" })));
+            default:
+                return null;
+        }
+    }
     render() {
-        return (h(Host, { key: '6a2b36208fc17e94a311cca925416fd977e4bb30', class: `size-${this.targetSize}` }, h("button", { key: '78e8dfa77e41e50866fcc0c6416f9b9a5873bf63', class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => this.open(),
+        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(),
             // In order to position the tooltip identically to the toggletip, its presence is determined by these four events
-            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() }, h("div", { key: '9e9bd942beea62fa8c3c2dc7b61f2cdbd530ab5a', class: "svg-icon svg-info" })), h("div", { key: '50b2d72f79a8c50d18cab1d80dde4fc8b452f2ef', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip" }, this.tooltip), h("div", { key: 'baae4b8692be51f00ca3ceb166955c2c8a504ae5', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
+            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" })));
     }
     static get is() { return "wm-toggletip"; }
     static get encapsulation() { return "shadow"; }
@@ -263,6 +315,24 @@ export class Toggletip {
                 "attribute": "target-size",
                 "reflect": false,
                 "defaultValue": "\"small\""
+            },
+            "toggletipType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"info\" | \"ai\"",
+                    "resolved": "\"ai\" | \"info\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "toggletip-type",
+                "reflect": false,
+                "defaultValue": "\"info\""
             }
         };
     }