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

package/dist/collection/components/wm-uploader/wm-uploader.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/esm/{app-globals-abcc4b57.js → app-globals-c670e9b4.js}

@@ -1,6 +1,6 @@
 import './index-130e07bb.js';
 
-const version = "5.15.0-alpha.2";
+const version = "5.15.0-alpha.4";
 
 // 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-abcc4b57.js';
+import { g as globalScripts } from './app-globals-c670e9b4.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-abcc4b57.js';
+import { g as globalScripts } from './app-globals-c670e9b4.js';
 
 /*
  Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com