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

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

@@ -191,9 +191,7 @@
 :host .wm-button:not(.-icononly):not(.-navigational) .mdi,
 :host .wm-button:not(.-icononly):not(.-navigational) .svg-icon {
   display: inline-block;
-  margin-inline-end: 0.375rem;
-  font-size: 0.875rem;
-  width: var(--icon-size, 14px);
+  font-size: var(--icon-size, 14px);
   height: var(--icon-size, 14px);
 }
 :host .wm-button.-primary:not(.-textonly) {
@@ -203,7 +201,7 @@
 :host .wm-button.-primary:not(.-textonly):not(:focus) {
   box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
 }
-:host .wm-button.-primary:not(.-textonly):hover:not(:disabled):not(.disabled) {
+:host .wm-button.-primary:not(.-textonly):hover:not(:disabled):not(.disabled):not(.ai) {
   background: var(--wmcolor-button-background-primary-hover);
 }
 :host .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled) {
@@ -218,7 +216,7 @@
   border: 2px solid var(--wmcolor-button-border-secondary);
   background: var(--wmcolor-button-background-secondary);
 }
-:host .wm-button.-secondary:hover:not(:disabled):not(.disabled) {
+:host .wm-button.-secondary:hover:not(:disabled):not(.disabled):not(.ai) {
   background: var(--wmcolor-button-background-secondary-hover);
   color: var(--wmcolor-button-text-secondary-hover);
   border-color: transparent;
@@ -312,7 +310,7 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-:host .wm-button.-icononly:hover:not(:disabled):not(.disabled) {
+:host .wm-button.-icononly:hover:not(:disabled):not(.disabled):not(.ai) {
   background: var(--wmcolor-button-background-icononly-hover);
   color: var(--wmcolor-button-icon-icononly-hover);
   border-color: transparent;
@@ -330,11 +328,9 @@
 :host .wm-button.-navigational {
   border: none !important;
   background-color: var(--wmcolor-button-background-navigational);
-}
-:host .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled) {
   color: var(--wmcolor-button-icon-navigational);
 }
-:host .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled):hover, :host .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled).selected {
+:host .wm-button.-navigational:hover, :host .wm-button.-navigational.selected {
   background-color: var(--wmcolor-button-background-navigational-hover);
 }
 :host .wm-button.-navigational:before {
@@ -346,14 +342,18 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-:host .wm-button.-navigational.dark:not(:disabled):not(.disabled) {
+:host .wm-button.-navigational.dark {
   color: var(--wmcolor-button-icon-navigational-ondark);
   background: var(--wmcolor-button-background-navigational-ondark);
 }
-:host .wm-button.-navigational.dark:not(:disabled):not(.disabled):hover {
+:host .wm-button.-navigational.dark:hover {
   color: var(--wmcolor-button-icon-navigational-hover-ondark);
   background: var(--wmcolor-button-background-navigational-hover-ondark);
 }
+:host .wm-button.-navigational:disabled:hover, :host .wm-button.-navigational.disabled:hover {
+  background-color: var(--wmcolor-button-background-navigational) !important;
+  color: var(--wmcolor-button-icon-navigational) !important;
+}
 :host .wm-button.-permanentlydelete:not(.-textonly) {
   background: var(--wmcolor-button-background-delete);
   border-color: var(--wmcolor-button-background-delete);
@@ -443,7 +443,7 @@
   background: var(--wmcolor-button-background-selectorprimary);
   color: var(--wmcolor-button-text-selectorprimary);
 }
-:host .wm-button.-selector-primary:hover:not(:disabled):not(.disabled) {
+:host .wm-button.-selector-primary:hover:not(:disabled):not(.disabled):not(.ai) {
   background: var(--wmcolor-button-background-selectorprimary-hover);
 }
 :host .wm-button.-selector-primary.dark:not(:disabled):not(.disabled) {
@@ -534,6 +534,192 @@
   background: var(--wmcolor-button-background-delete-disabled-ondark);
   color: var(--wmcolor-button-text-delete-disabled-ondark);
 }
+:host .wm-button .svg-ai-sparkles {
+  --icon-size: 0.875rem;
+}
+:host .wm-button .svg-ai-sparkles::before {
+  background: var(--icon-fill, currentColor);
+}
+:host .wm-button.-primary.ai {
+  --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(--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: --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 {
+  --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 {
+  --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, --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(--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(--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(--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;
+}
+:host .wm-button.-secondary.ai .svg-ai-sparkles::before, :host .wm-button.-icononly.ai .svg-ai-sparkles::before {
+  --icon-fill: linear-gradient(
+    135deg,
+    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;
+  --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;
+}
+:host .wm-button.-secondary.ai:hover .button-text, :host .wm-button.-icononly.ai:hover .button-text {
+  --icon-fill: #fff;
+  color: #fff;
+}
+:host .wm-button.-secondary.ai:hover .svg-ai-sparkles::before, :host .wm-button.-icononly.ai:hover .svg-ai-sparkles::before {
+  --icon-fill: #fff;
+}
+:host .wm-button.-navigational.ai {
+  --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(--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: --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 {
+  --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;
+}
+:host .wm-button.-icononly.ai {
+  border-width: 1px;
+}
+:host .wm-button.-navigational.ai .svg-ai-sparkles, :host .wm-button.-icononly.ai .svg-ai-sparkles {
+  --icon-size: 1.125rem;
+}
+:host .wm-button.-textonly.ai {
+  --secondary-button-fill: transparent;
+  --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(--ai-gradient-start) var(--wmbutton-percent-1),
+    var(--ai-gradient-end) var(--wmbutton-percent-2)
+  );
+  display: flex;
+  color: transparent;
+  gap: 5px;
+  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(--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;
+  border-bottom: 1px solid;
+  border-image: linear-gradient(var(--secondary-button-fill) 0 0) 1;
+}
+:host .wm-button.-textonly.ai:hover {
+  --secondary-button-fill: var(--wmcolor-azurite-70);
+  --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) {
+  :host .wm-button.-primary.ai {
+    transition-timing-function: ease-in;
+    transition-delay: 0ms, 0ms, 150ms, 150ms, 150ms;
+    transition-duration: 150ms;
+  }
+  :host .wm-button.-primary.ai:hover {
+    transition-timing-function: ease-in;
+    transition-duration: 100ms;
+  }
+  :host .wm-button.-secondary.ai, :host .wm-button.-icononly.ai {
+    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;
+    --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: --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;
+    border-image: linear-gradient(var(--secondary-button-fill) 0 0) 1;
+  }
+  :host .wm-button.-textonly.ai:hover {
+    --secondary-button-fill: var(--wmcolor-azurite-70);
+    --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;
+  }
+}
 :host a.wm-button,
 :host label.wm-button {
   height: auto;

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

@@ -29,12 +29,19 @@ export class Button {
     }
     get hasTooltip() {
         // tooltip is only rendered for icononly and navigational types, or if the button text is truncated
-        return ["icononly", "navigational"].includes(this.buttonType) || this.isTruncated;
+        return ["icononly", "navigational", "icononly-ai", "navigational-ai"].includes(this.buttonType) || this.isTruncated;
     }
     get buttonClasses() {
         let classes = "wm-button";
         classes += this.permanentlyDelete ? " -permanentlydelete" : "";
-        classes += this.buttonType ? " -" + this.buttonType : " -secondary";
+        // Handle AI variants by adding both base and ai classes
+        if (this.buttonType.endsWith("-ai")) {
+            const baseType = this.buttonType.replace("-ai", "");
+            classes += ` -${baseType} ai`;
+        }
+        else {
+            classes += this.buttonType ? ` -${this.buttonType}` : " -secondary";
+        }
         classes += this.textWrap ? "" : " nowrap";
         classes += this.isTabbing ? " user-is-tabbing" : "";
         classes += this.isTruncated ? " -truncated" : "";
@@ -64,6 +71,11 @@ export class Button {
             "selector-primary",
             "pairpositive",
             "pairnegative",
+            "primary-ai",
+            "secondary-ai",
+            "textonly-ai",
+            "icononly-ai",
+            "navigational-ai",
         ].includes(newValue);
         if (!valid) {
             this.buttonType = "secondary";
@@ -136,10 +148,64 @@ export class Button {
             showTooltip(this.tooltipPosition, ev.target, tooltipText);
         }
     }
+    /**
+     * 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: "--ai-gradient-start",
+                    syntax: "<color>",
+                    inherits: false,
+                    initialValue: "#2779C8"
+                });
+                CSS.registerProperty({
+                    name: "--ai-gradient-end",
+                    syntax: "<color>",
+                    inherits: false,
+                    initialValue: "#6259C4"
+                });
+                CSS.registerProperty({
+                    name: "--secondary-button-fill",
+                    syntax: "<color>",
+                    inherits: false,
+                    initialValue: "#FFFFFF"
+                });
+                CSS.registerProperty({
+                    name: "--wmbutton-percent-1",
+                    syntax: "<percentage>",
+                    inherits: false,
+                    initialValue: "0%"
+                });
+                CSS.registerProperty({
+                    name: "--wmbutton-percent-2",
+                    syntax: "<percentage>",
+                    inherits: false,
+                    initialValue: "70.19%"
+                });
+                CSS.registerProperty({
+                    name: "--wmbutton-percent-3",
+                    syntax: "<percentage>",
+                    inherits: false,
+                    initialValue: "-50%"
+                });
+            }
+            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();
+        if (this.buttonType.endsWith("-ai")) {
+            this.icon = "#ai-sparkles";
+        }
         this.validateType(this.buttonType);
         if (this.icon) {
-            this.icon = this.icon = getIconCodeFromName(this.icon);
+            this.icon = getIconCodeFromName(this.icon);
         }
         handleDisabledAttribute(this.el, this.isDisabled);
     }
@@ -151,7 +217,10 @@ export class Button {
         this.ariaPopup = !!this.el.getAttribute("aria-haspopup");
     }
     getAriaLabel() {
-        if (this.buttonType === "icononly" || this.buttonType === "navigational") {
+        if (this.buttonType === "icononly" ||
+            this.buttonType === "navigational" ||
+            this.buttonType === "icononly-ai" ||
+            this.buttonType === "navigational-ai") {
             return this.labelForIdenticalButtons || this.tooltip;
         }
         if (this.labelForIdenticalButtons) {
@@ -159,15 +228,12 @@ export class Button {
         }
     }
     renderIcon() {
-        const defaultIconSize = this.buttonType == "navigational" || this.buttonType == "icononly" ? "1.125rem" : "0.875rem";
+        this.iconSize && this.el.style.setProperty("--icon-size", this.iconSize);
         let transformStyle = "";
         transformStyle += this.iconRotate ? `rotate(${this.iconRotate}deg)` : "";
         transformStyle += this.iconFlip === "horizontal" ? `scaleX(-1)` : "";
         transformStyle += this.iconFlip === "vertical" ? `scaleY(-1)` : "";
-        const iconStyles = Object.assign({
-            fontSize: this.iconSize ? this.iconSize : defaultIconSize,
-            "--icon-size": this.iconSize ? this.iconSize : defaultIconSize,
-        }, ((this.iconRotate || this.iconFlip) && { transform: transformStyle }));
+        const iconStyles = Object.assign({}, ((this.iconRotate || this.iconFlip) && { transform: transformStyle }));
         if (this.icon.match(/^#/)) {
             // Icon ID
             return h("span", { class: `svg-icon svg-${this.icon.slice(1)}`, style: iconStyles });
@@ -183,7 +249,7 @@ export class Button {
         }
     }
     render() {
-        return (h(Host, { key: 'ae038ae6dddcd3220b1c3d027390d743e85ff3bc', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: 'e10a7276c46e73fc93b2e26b6f2f81b37625d08e', 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.renderIcon(), h("span", { key: '3dbdd426484b9265107fe994c160af6f2bbd6958', class: "button-text" }, h("slot", { key: 'f5e28ec3acb64b330185f9b65d0f221fd95f1399' })), (this.buttonType == "selector" || this.buttonType == "selector-primary") && (h("div", { key: 'c2b16a69daf975cf6996aa365756574d1f74920f', 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"; }
@@ -223,7 +289,7 @@ export class Button {
                 "mutable": true,
                 "complexType": {
                     "original": "validButtonTypes",
-                    "resolved": "\"icononly\" | \"navigational\" | \"pairnegative\" | \"pairpositive\" | \"primary\" | \"secondary\" | \"selector\" | \"selector-primary\" | \"textonly\"",
+                    "resolved": "\"icononly\" | \"icononly-ai\" | \"navigational\" | \"navigational-ai\" | \"pairnegative\" | \"pairpositive\" | \"primary\" | \"primary-ai\" | \"secondary\" | \"secondary-ai\" | \"selector\" | \"selector-primary\" | \"textonly\" | \"textonly-ai\"",
                     "references": {
                         "validButtonTypes": {
                             "location": "import",

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

@@ -898,9 +898,9 @@
   --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%);
+  --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 +1221,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"; }