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

package/dist/collection/components/wm-button/wm-button.css

@@ -541,51 +541,51 @@
   background: var(--icon-fill, currentColor);
 }
 :host .wm-button.-primary.ai {
-  --gradient-start: var(--wmcolor-ai-interactive-gradientstart);
-  --gradient-end: var(--wmcolor-ai-interactive-gradientend);
-  --percent-1: 0%;
-  --percent-2: 70.19%;
-  --percent-3: 180%;
+  --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart);
+  --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend);
+  --wmbutton-percent-1: 0%;
+  --wmbutton-percent-2: 70.19%;
+  --wmbutton-percent-3: 180%;
   color: #fff;
   gap: 5px;
-  background-image: linear-gradient(-225deg, var(--gradient-start) var(--percent-1), var(--gradient-end) var(--percent-2), var(--gradient-start) var(--percent-3));
+  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));
   background-origin: border-box;
   background-clip: border-box;
   border: 2px solid transparent;
-  transition: --gradient-start, --gradient-end, --percent-1, --percent-2, --percent-3;
+  transition: --ai-gradient-start, --ai-gradient-end, --wmbutton-percent-1, --wmbutton-percent-2, --wmbutton-percent-3;
   transition-timing-function: ease-out;
 }
 :host .wm-button.-primary.ai:hover {
-  --gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
-  --gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
-  --percent-1: -50%;
-  --percent-2: 0%;
-  --percent-3: 89.81%;
+  --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
+  --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
+  --wmbutton-percent-1: -50%;
+  --wmbutton-percent-2: 0%;
+  --wmbutton-percent-3: 89.81%;
 }
 :host .wm-button.-secondary.ai, :host .wm-button.-icononly.ai {
-  --gradient-start: var(--wmcolor-ai-interactive-gradientstart);
-  --gradient-end: var(--wmcolor-ai-interactive-gradientend);
-  --percent-1: 0%;
-  --percent-2: 70.19%;
-  --percent-3: 180%;
+  --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart);
+  --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend);
+  --wmbutton-percent-1: 0%;
+  --wmbutton-percent-2: 70.19%;
+  --wmbutton-percent-3: 180%;
   --secondary-button-fill: #ffffff;
   border: 2px solid transparent;
   gap: 5px;
-  transition: --secondary-button-fill, --gradient-start, --gradient-end;
+  transition: --secondary-button-fill, --ai-gradient-start, --ai-gradient-end;
   transition-timing-function: ease-out;
   transition-duration: 100ms;
-  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;
+  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;
 }
 :host .wm-button.-secondary.ai .button-text, :host .wm-button.-icononly.ai .button-text {
   --icon-fill: linear-gradient(
     135deg,
-    var(--gradient-start) var(--percent-1),
-    var(--gradient-end) var(--percent-2)
+    var(--ai-gradient-start) var(--wmbutton-percent-1),
+    var(--ai-gradient-end) var(--wmbutton-percent-2)
   );
   display: flex;
   color: transparent;
   transition: color 100ms;
-  background: linear-gradient(135deg, var(--gradient-start) var(--percent-1), var(--gradient-end) var(--percent-2));
+  background: linear-gradient(135deg, var(--ai-gradient-start) var(--wmbutton-percent-1), var(--ai-gradient-end) var(--wmbutton-percent-2));
   background-clip: text;
   -webkit-background-clip: text;
   align-items: center;
@@ -593,14 +593,14 @@
 :host .wm-button.-secondary.ai .svg-ai-sparkles::before, :host .wm-button.-icononly.ai .svg-ai-sparkles::before {
   --icon-fill: linear-gradient(
     135deg,
-    var(--gradient-start) var(--percent-1),
-    var(--gradient-end) var(--percent-2)
+    var(--ai-gradient-start) var(--wmbutton-percent-1),
+    var(--ai-gradient-end) var(--wmbutton-percent-2)
   );
 }
 :host .wm-button.-secondary.ai:hover, :host .wm-button.-icononly.ai:hover {
   --secondary-button-fill: transparent;
-  --gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
-  --gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
+  --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
+  --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
   transition-timing-function: ease-in;
   transition-duration: 100ms;
 }
@@ -612,29 +612,29 @@
   --icon-fill: #fff;
 }
 :host .wm-button.-navigational.ai {
-  --gradient-start: var(--wmcolor-ai-interactive-gradientstart);
-  --gradient-end: var(--wmcolor-ai-interactive-gradientend);
-  --percent-1: 0%;
-  --percent-2: 70.19%;
-  --percent-3: 180%;
+  --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart);
+  --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend);
+  --wmbutton-percent-1: 0%;
+  --wmbutton-percent-2: 70.19%;
+  --wmbutton-percent-3: 180%;
   --icon-fill: linear-gradient(
     -225deg,
-    var(--gradient-start) var(--percent-1),
-    var(--gradient-end) var(--percent-2),
-    var(--gradient-start) var(--percent-3)
+    var(--ai-gradient-start) var(--wmbutton-percent-1),
+    var(--ai-gradient-end) var(--wmbutton-percent-2),
+    var(--ai-gradient-start) var(--wmbutton-percent-3)
   );
   color: #fff;
-  transition: --gradient-start, --gradient-end, --percent-1, --percent-2, --percent-3;
+  transition: --ai-gradient-start, --ai-gradient-end, --wmbutton-percent-1, --wmbutton-percent-2, --wmbutton-percent-3;
   transition-timing-function: ease-in;
   transition-delay: 0ms, 0ms, 150ms, 150ms, 150ms;
   transition-duration: 150ms;
 }
 :host .wm-button.-navigational.ai:hover {
-  --gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
-  --gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
-  --percent-1: -50%;
-  --percent-2: 0%;
-  --percent-3: 89.81%;
+  --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
+  --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
+  --wmbutton-percent-1: -50%;
+  --wmbutton-percent-2: 0%;
+  --wmbutton-percent-3: 89.81%;
   transition-timing-function: ease-in;
   transition-duration: 100ms;
 }
@@ -646,24 +646,24 @@
 }
 :host .wm-button.-textonly.ai {
   --secondary-button-fill: transparent;
-  --gradient-start: var(--wmcolor-ai-interactive-gradientstart);
-  --gradient-end: var(--wmcolor-ai-interactive-gradientend);
-  --percent-1: 0%;
-  --percent-2: 70.19%;
-  --percent-3: 180%;
+  --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart);
+  --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend);
+  --wmbutton-percent-1: 0%;
+  --wmbutton-percent-2: 70.19%;
+  --wmbutton-percent-3: 180%;
   --icon-fill: linear-gradient(
     135deg,
-    var(--gradient-start) var(--percent-1),
-    var(--gradient-end) var(--percent-2)
+    var(--ai-gradient-start) var(--wmbutton-percent-1),
+    var(--ai-gradient-end) var(--wmbutton-percent-2)
   );
   display: flex;
   color: transparent;
   gap: 5px;
-  transition: --gradient-start, --gradient-end, --percent-1, --percent-2, --percent-3, --secondary-button-fill;
+  transition: --ai-gradient-start, --ai-gradient-end, --wmbutton-percent-1, --wmbutton-percent-2, --wmbutton-percent-3, --secondary-button-fill;
   transition-timing-function: ease-out;
   transition-delay: 0ms, 100ms, 100ms, 100ms, 200ms, 0ms;
   transition-duration: 150ms;
-  background: linear-gradient(-225deg, var(--gradient-start) var(--percent-1), var(--gradient-end) var(--percent-2), var(--gradient-start) var(--percent-3));
+  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));
   background-clip: text;
   -webkit-background-clip: text;
   border: none;
@@ -672,8 +672,8 @@
 }
 :host .wm-button.-textonly.ai:hover {
   --secondary-button-fill: var(--wmcolor-azurite-70);
-  --gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
-  --gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
+  --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
+  --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
   transition-duration: 100ms;
 }
 @media (prefers-reduced-motion: no-preference) {
@@ -687,23 +687,23 @@
     transition-duration: 100ms;
   }
   :host .wm-button.-secondary.ai, :host .wm-button.-icononly.ai {
-    transition: --secondary-button-fill, --gradient-start, --gradient-end, --percent-1, --percent-2, --percent-3;
+    transition: --secondary-button-fill, --ai-gradient-start, --ai-gradient-end, --wmbutton-percent-1, --wmbutton-percent-2, --wmbutton-percent-3;
     transition-timing-function: ease-out;
     transition-delay: 200ms, 0ms, 0ms, 100ms, 100ms, 100ms;
     transition-duration: 150ms;
   }
   :host .wm-button.-secondary.ai:hover, :host .wm-button.-icononly.ai:hover {
     --secondary-button-fill: transparent;
-    --gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
-    --gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
-    --percent-1: -50%;
-    --percent-2: 0%;
-    --percent-3: 89.81%;
+    --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
+    --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
+    --wmbutton-percent-1: -50%;
+    --wmbutton-percent-2: 0%;
+    --wmbutton-percent-3: 89.81%;
     transition-delay: 0ms, 100ms, 100ms, 200ms, 200ms, 200ms;
     transition-duration: 200ms, 200ms, 200ms, 200ms, 200ms, 200ms;
   }
   :host .wm-button.-textonly.ai {
-    transition: --gradient-start, --gradient-end, --percent-1, --percent-2, --percent-3, --secondary-button-fill;
+    transition: --ai-gradient-start, --ai-gradient-end, --wmbutton-percent-1, --wmbutton-percent-2, --wmbutton-percent-3, --secondary-button-fill;
     transition-timing-function: ease-out;
     transition-delay: 0ms, 100ms, 100ms, 100ms, 200ms, 0ms;
     transition-duration: 150ms;
@@ -711,11 +711,11 @@
   }
   :host .wm-button.-textonly.ai:hover {
     --secondary-button-fill: var(--wmcolor-azurite-70);
-    --gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
-    --gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
-    --percent-1: -50%;
-    --percent-2: 0%;
-    --percent-3: 89.81%;
+    --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
+    --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
+    --wmbutton-percent-1: -50%;
+    --wmbutton-percent-2: 0%;
+    --wmbutton-percent-3: 89.81%;
     transition-delay: 100ms, 100ms, 200ms, 200ms, 200ms, 0s;
     transition-duration: 200ms, 200ms, 200ms, 200ms, 200ms, 1s;
   }

package/dist/collection/components/wm-button/wm-button.js

@@ -156,13 +156,13 @@ export class Button {
         if (typeof CSS !== "undefined" && "registerProperty" in CSS) {
             try {
                 CSS.registerProperty({
-                    name: "--gradient-start",
+                    name: "--ai-gradient-start",
                     syntax: "<color>",
                     inherits: false,
                     initialValue: "#2779C8"
                 });
                 CSS.registerProperty({
-                    name: "--gradient-end",
+                    name: "--ai-gradient-end",
                     syntax: "<color>",
                     inherits: false,
                     initialValue: "#6259C4"
@@ -174,19 +174,19 @@ export class Button {
                     initialValue: "#FFFFFF"
                 });
                 CSS.registerProperty({
-                    name: "--percent-1",
+                    name: "--wmbutton-percent-1",
                     syntax: "<percentage>",
                     inherits: false,
                     initialValue: "0%"
                 });
                 CSS.registerProperty({
-                    name: "--percent-2",
+                    name: "--wmbutton-percent-2",
                     syntax: "<percentage>",
                     inherits: false,
                     initialValue: "70.19%"
                 });
                 CSS.registerProperty({
-                    name: "--percent-3",
+                    name: "--wmbutton-percent-3",
                     syntax: "<percentage>",
                     inherits: false,
                     initialValue: "-50%"
@@ -249,7 +249,7 @@ export class Button {
         }
     }
     render() {
-        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" })))));
+        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" })))));
     }
     static get is() { return "wm-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -896,11 +896,12 @@
   transform: translateX(0.4375rem);
   scale: 0.8;
   --icon-size: 28px;
+  pointer-events: none;
 }
 :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%);
+  --ai-gradient-start: var(--wmcolor-ai-accent-gradientstart);
+  --ai-gradient-end: var(--wmcolor-ai-accent-gradientend);
+  background: linear-gradient(to bottom, var(--ai-gradient-start) 30%, var(--ai-gradient-end) 100%);
 }
 :host .button #ai-icon .main {
   clip-path: polygon(0 0, 40% 0%, 70% 50%, 40% 100%, 0 100%);
@@ -1221,9 +1222,9 @@
   }
   :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;
+    --ai-gradient-start: var(--wmcolor-ai-accent-gradientstart-final);
+    --ai-gradient-end: var(--wmcolor-ai-accent-gradientend-final);
+    transition: --ai-gradient-start, --ai-gradient-end;
     transition-delay: 500ms;
     transition-duration: 100ms;
   }

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

@@ -89,13 +89,13 @@ export class Toggletip {
         if (typeof CSS !== "undefined" && "registerProperty" in CSS) {
             try {
                 CSS.registerProperty({
-                    name: "--wmtoggletip-gradient-start",
+                    name: "--ai-gradient-start",
                     syntax: "<color>",
                     inherits: false,
                     initialValue: "red", // Should always be overwritten. Technically optional, but needed to animate.
                 });
                 CSS.registerProperty({
-                    name: "--wmtoggletip-gradient-end",
+                    name: "--ai-gradient-end",
                     syntax: "<color>",
                     inherits: false,
                     initialValue: "blue", // Should always be overwritten. Technically optional, but needed to animate.
@@ -221,9 +221,9 @@ export class Toggletip {
         }
     }
     render() {
-        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(),
+        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(),
             // 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() }, 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" })));
+            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" })));
     }
     static get is() { return "wm-toggletip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-uploader/wm-uploader.css

@@ -541,51 +541,51 @@
   background: var(--icon-fill, currentColor);
 }
 :host .wm-button.-primary.ai {
-  --gradient-start: var(--wmcolor-ai-interactive-gradientstart);
-  --gradient-end: var(--wmcolor-ai-interactive-gradientend);
-  --percent-1: 0%;
-  --percent-2: 70.19%;
-  --percent-3: 180%;
+  --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart);
+  --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend);
+  --wmbutton-percent-1: 0%;
+  --wmbutton-percent-2: 70.19%;
+  --wmbutton-percent-3: 180%;
   color: #fff;
   gap: 5px;
-  background-image: linear-gradient(-225deg, var(--gradient-start) var(--percent-1), var(--gradient-end) var(--percent-2), var(--gradient-start) var(--percent-3));
+  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));
   background-origin: border-box;
   background-clip: border-box;
   border: 2px solid transparent;
-  transition: --gradient-start, --gradient-end, --percent-1, --percent-2, --percent-3;
+  transition: --ai-gradient-start, --ai-gradient-end, --wmbutton-percent-1, --wmbutton-percent-2, --wmbutton-percent-3;
   transition-timing-function: ease-out;
 }
 :host .wm-button.-primary.ai:hover {
-  --gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
-  --gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
-  --percent-1: -50%;
-  --percent-2: 0%;
-  --percent-3: 89.81%;
+  --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
+  --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
+  --wmbutton-percent-1: -50%;
+  --wmbutton-percent-2: 0%;
+  --wmbutton-percent-3: 89.81%;
 }
 :host .wm-button.-secondary.ai, :host .wm-button.-icononly.ai {
-  --gradient-start: var(--wmcolor-ai-interactive-gradientstart);
-  --gradient-end: var(--wmcolor-ai-interactive-gradientend);
-  --percent-1: 0%;
-  --percent-2: 70.19%;
-  --percent-3: 180%;
+  --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart);
+  --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend);
+  --wmbutton-percent-1: 0%;
+  --wmbutton-percent-2: 70.19%;
+  --wmbutton-percent-3: 180%;
   --secondary-button-fill: #ffffff;
   border: 2px solid transparent;
   gap: 5px;
-  transition: --secondary-button-fill, --gradient-start, --gradient-end;
+  transition: --secondary-button-fill, --ai-gradient-start, --ai-gradient-end;
   transition-timing-function: ease-out;
   transition-duration: 100ms;
-  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;
+  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;
 }
 :host .wm-button.-secondary.ai .button-text, :host .wm-button.-icononly.ai .button-text {
   --icon-fill: linear-gradient(
     135deg,
-    var(--gradient-start) var(--percent-1),
-    var(--gradient-end) var(--percent-2)
+    var(--ai-gradient-start) var(--wmbutton-percent-1),
+    var(--ai-gradient-end) var(--wmbutton-percent-2)
   );
   display: flex;
   color: transparent;
   transition: color 100ms;
-  background: linear-gradient(135deg, var(--gradient-start) var(--percent-1), var(--gradient-end) var(--percent-2));
+  background: linear-gradient(135deg, var(--ai-gradient-start) var(--wmbutton-percent-1), var(--ai-gradient-end) var(--wmbutton-percent-2));
   background-clip: text;
   -webkit-background-clip: text;
   align-items: center;
@@ -593,14 +593,14 @@
 :host .wm-button.-secondary.ai .svg-ai-sparkles::before, :host .wm-button.-icononly.ai .svg-ai-sparkles::before {
   --icon-fill: linear-gradient(
     135deg,
-    var(--gradient-start) var(--percent-1),
-    var(--gradient-end) var(--percent-2)
+    var(--ai-gradient-start) var(--wmbutton-percent-1),
+    var(--ai-gradient-end) var(--wmbutton-percent-2)
   );
 }
 :host .wm-button.-secondary.ai:hover, :host .wm-button.-icononly.ai:hover {
   --secondary-button-fill: transparent;
-  --gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
-  --gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
+  --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
+  --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
   transition-timing-function: ease-in;
   transition-duration: 100ms;
 }
@@ -612,29 +612,29 @@
   --icon-fill: #fff;
 }
 :host .wm-button.-navigational.ai {
-  --gradient-start: var(--wmcolor-ai-interactive-gradientstart);
-  --gradient-end: var(--wmcolor-ai-interactive-gradientend);
-  --percent-1: 0%;
-  --percent-2: 70.19%;
-  --percent-3: 180%;
+  --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart);
+  --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend);
+  --wmbutton-percent-1: 0%;
+  --wmbutton-percent-2: 70.19%;
+  --wmbutton-percent-3: 180%;
   --icon-fill: linear-gradient(
     -225deg,
-    var(--gradient-start) var(--percent-1),
-    var(--gradient-end) var(--percent-2),
-    var(--gradient-start) var(--percent-3)
+    var(--ai-gradient-start) var(--wmbutton-percent-1),
+    var(--ai-gradient-end) var(--wmbutton-percent-2),
+    var(--ai-gradient-start) var(--wmbutton-percent-3)
   );
   color: #fff;
-  transition: --gradient-start, --gradient-end, --percent-1, --percent-2, --percent-3;
+  transition: --ai-gradient-start, --ai-gradient-end, --wmbutton-percent-1, --wmbutton-percent-2, --wmbutton-percent-3;
   transition-timing-function: ease-in;
   transition-delay: 0ms, 0ms, 150ms, 150ms, 150ms;
   transition-duration: 150ms;
 }
 :host .wm-button.-navigational.ai:hover {
-  --gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
-  --gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
-  --percent-1: -50%;
-  --percent-2: 0%;
-  --percent-3: 89.81%;
+  --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
+  --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
+  --wmbutton-percent-1: -50%;
+  --wmbutton-percent-2: 0%;
+  --wmbutton-percent-3: 89.81%;
   transition-timing-function: ease-in;
   transition-duration: 100ms;
 }
@@ -646,24 +646,24 @@
 }
 :host .wm-button.-textonly.ai {
   --secondary-button-fill: transparent;
-  --gradient-start: var(--wmcolor-ai-interactive-gradientstart);
-  --gradient-end: var(--wmcolor-ai-interactive-gradientend);
-  --percent-1: 0%;
-  --percent-2: 70.19%;
-  --percent-3: 180%;
+  --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart);
+  --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend);
+  --wmbutton-percent-1: 0%;
+  --wmbutton-percent-2: 70.19%;
+  --wmbutton-percent-3: 180%;
   --icon-fill: linear-gradient(
     135deg,
-    var(--gradient-start) var(--percent-1),
-    var(--gradient-end) var(--percent-2)
+    var(--ai-gradient-start) var(--wmbutton-percent-1),
+    var(--ai-gradient-end) var(--wmbutton-percent-2)
   );
   display: flex;
   color: transparent;
   gap: 5px;
-  transition: --gradient-start, --gradient-end, --percent-1, --percent-2, --percent-3, --secondary-button-fill;
+  transition: --ai-gradient-start, --ai-gradient-end, --wmbutton-percent-1, --wmbutton-percent-2, --wmbutton-percent-3, --secondary-button-fill;
   transition-timing-function: ease-out;
   transition-delay: 0ms, 100ms, 100ms, 100ms, 200ms, 0ms;
   transition-duration: 150ms;
-  background: linear-gradient(-225deg, var(--gradient-start) var(--percent-1), var(--gradient-end) var(--percent-2), var(--gradient-start) var(--percent-3));
+  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));
   background-clip: text;
   -webkit-background-clip: text;
   border: none;
@@ -672,8 +672,8 @@
 }
 :host .wm-button.-textonly.ai:hover {
   --secondary-button-fill: var(--wmcolor-azurite-70);
-  --gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
-  --gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
+  --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
+  --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
   transition-duration: 100ms;
 }
 @media (prefers-reduced-motion: no-preference) {
@@ -687,23 +687,23 @@
     transition-duration: 100ms;
   }
   :host .wm-button.-secondary.ai, :host .wm-button.-icononly.ai {
-    transition: --secondary-button-fill, --gradient-start, --gradient-end, --percent-1, --percent-2, --percent-3;
+    transition: --secondary-button-fill, --ai-gradient-start, --ai-gradient-end, --wmbutton-percent-1, --wmbutton-percent-2, --wmbutton-percent-3;
     transition-timing-function: ease-out;
     transition-delay: 200ms, 0ms, 0ms, 100ms, 100ms, 100ms;
     transition-duration: 150ms;
   }
   :host .wm-button.-secondary.ai:hover, :host .wm-button.-icononly.ai:hover {
     --secondary-button-fill: transparent;
-    --gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
-    --gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
-    --percent-1: -50%;
-    --percent-2: 0%;
-    --percent-3: 89.81%;
+    --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
+    --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
+    --wmbutton-percent-1: -50%;
+    --wmbutton-percent-2: 0%;
+    --wmbutton-percent-3: 89.81%;
     transition-delay: 0ms, 100ms, 100ms, 200ms, 200ms, 200ms;
     transition-duration: 200ms, 200ms, 200ms, 200ms, 200ms, 200ms;
   }
   :host .wm-button.-textonly.ai {
-    transition: --gradient-start, --gradient-end, --percent-1, --percent-2, --percent-3, --secondary-button-fill;
+    transition: --ai-gradient-start, --ai-gradient-end, --wmbutton-percent-1, --wmbutton-percent-2, --wmbutton-percent-3, --secondary-button-fill;
     transition-timing-function: ease-out;
     transition-delay: 0ms, 100ms, 100ms, 100ms, 200ms, 0ms;
     transition-duration: 150ms;
@@ -711,11 +711,11 @@
   }
   :host .wm-button.-textonly.ai:hover {
     --secondary-button-fill: var(--wmcolor-azurite-70);
-    --gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
-    --gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
-    --percent-1: -50%;
-    --percent-2: 0%;
-    --percent-3: 89.81%;
+    --ai-gradient-start: var(--wmcolor-ai-interactive-gradientstart-hover);
+    --ai-gradient-end: var(--wmcolor-ai-interactive-gradientend-hover);
+    --wmbutton-percent-1: -50%;
+    --wmbutton-percent-2: 0%;
+    --wmbutton-percent-3: 89.81%;
     transition-delay: 100ms, 100ms, 200ms, 200ms, 200ms, 0s;
     transition-duration: 200ms, 200ms, 200ms, 200ms, 200ms, 1s;
   }

package/dist/esm/{app-globals-7c68f770.js → app-globals-023fc777.js}

@@ -1,6 +1,6 @@
 import './index-130e07bb.js';
 
-const version = "5.15.0-alpha.3";
+const version = "5.15.0-alpha.5";
 
 // PRINT RIPPLE VERSION IN CONSOLE
 // test envs return 0 for plugin.length

package/dist/esm/loader.js

@@ -1,6 +1,6 @@
 import { b as bootstrapLazy } from './index-130e07bb.js';
 export { s as setNonce } from './index-130e07bb.js';
-import { g as globalScripts } from './app-globals-7c68f770.js';
+import { g as globalScripts } from './app-globals-023fc777.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/esm/ripple.js

@@ -1,6 +1,6 @@
 import { p as promiseResolve, b as bootstrapLazy } from './index-130e07bb.js';
 export { s as setNonce } from './index-130e07bb.js';
-import { g as globalScripts } from './app-globals-7c68f770.js';
+import { g as globalScripts } from './app-globals-023fc777.js';
 
 /*
  Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com