@social-mail/social-mail-client 1.7.2 → 1.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-client",
-  "version": "1.7.2",
+  "version": "1.7.4",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/site-editor/properties/groups/AnimateGroupEditor.tsx

@@ -33,5 +33,20 @@ export default function AnimateGroupEditor() {
                 attributeName="styler-on-enter-duration"
                 />
         </div>
+
+        <DropDownProperty
+            label="On Scroll"
+            attributeName="styler-on-scroll"
+            />
+        <div style-display={BindEditor.oneWay((s) => s.selection.element.matches("[styler-on-scroll]"))}>
+            <DropDownProperty
+                label="Effect 1"
+                attributeName="styler-on-scroll-effect-1"
+                />
+            <DropDownProperty
+                label="Effect 2"
+                attributeName="styler-on-scroll-effect-2"
+                />
+        </div>
     </ExpanderPropertyEditor>;
 }

package/src/site-editor/properties/groups/AttributeEditor.tsx

@@ -32,7 +32,7 @@ const da = AtomControl.registerProperty<any>("data-attributes", "values", (c, e,
                     <DropDownProperty
                         label={a.display ?? a.name}
                         attributeName={a.name}
-                        values={a.values}
+                        values={a.values.map((value) => ({ label: value, value }))}
                         />
                 </div>, e, c);
                 break;

package/styler/styler.css

@@ -15784,7 +15784,8 @@ body[editing] [styler-background-clip=text]:empty:before {
 [styler-font=fantasy-smaller-oblique] {
   font: smaller oblique var(--font-fantasy);
 }
-[styler-revealed][styler-on-enter=fade-in] {
+[styler-revealed]:not(animated-text)[styler-on-enter=fade-in],
+[styler-revealed]animated-text[styler-on-enter=fade-in] > * {
   animation-name: fade-in, var(--styler-on-enter-effect-1, none), var(--styler-on-enter-effect-2, none);
   animation-duration: var(--styler-on-enter-duration, 1s), var(--styler-on-enter-effect-1-duration, 1s), var(--styler-on-enter-effect-2-duration, 1s);
   animation-direction: var(--styler-on-enter-direction, unset), var(--styler-on-enter-effect-1-direction, unset), var(--styler-on-enter-effect-2-direction, unset);
@@ -15792,7 +15793,8 @@ body[editing] [styler-background-clip=text]:empty:before {
   animation-timing-function: var(--styler-on-enter-timing-function, ease), var(--styler-on-enter-effect-1-timing-function, ease), var(--styler-on-enter-effect-2-timing-function, ease);
   animation-delay: var(--styler-on-enter-delay, unset), var(--styler-on-enter-effect-1-delay, unset), var(--styler-on-enter-effect-2-delay, unset);
 }
-[styler-on-click=fade-in] {
+[styler-clicked]:not(animated-text)[styler-on-click=fade-in],
+[styler-clicked]animated-text[styler-on-click=fade-in] > * {
   animation-name: fade-in, var(--styler-on-click-effect-1, none), var(--styler-on-click-effect-2, none);
   animation-duration: var(--styler-on-click-duration, 1s), var(--styler-on-click-effect-1-duration, 1s), var(--styler-on-click-effect-2-duration, 1s);
   animation-direction: var(--styler-on-click-direction, unset), var(--styler-on-click-effect-1-direction, unset), var(--styler-on-click-effect-2-direction, unset);
@@ -15800,7 +15802,8 @@ body[editing] [styler-background-clip=text]:empty:before {
   animation-timing-function: var(--styler-on-click-timing-function, ease), var(--styler-on-click-effect-1-timing-function, ease), var(--styler-on-click-effect-2-timing-function, ease);
   animation-delay: var(--styler-on-click-delay, unset), var(--styler-on-click-effect-1-delay, unset), var(--styler-on-click-effect-2-delay, unset);
 }
-[styler-on-hover=fade-in]:hover {
+:not(animated-text)[styler-on-hover=fade-in]:hover,
+animated-text[styler-on-hover=fade-in]:hover > * {
   animation-name: fade-in, var(--styler-on-hover-effect-1, none), var(--styler-on-hover-effect-2, none);
   animation-duration: var(--styler-on-hover-duration, 1s), var(--styler-on-hover-effect-1-duration, 1s), var(--styler-on-hover-effect-2-duration, 1s);
   animation-direction: var(--styler-on-hover-direction, alternate), var(--styler-on-hover-effect-1-direction, alternate), var(--styler-on-hover-effect-2-direction, alternate);
@@ -15808,7 +15811,8 @@ body[editing] [styler-background-clip=text]:empty:before {
   animation-timing-function: var(--styler-on-hover-timing-function, ease), var(--styler-on-hover-effect-1-timing-function, ease), var(--styler-on-hover-effect-2-timing-function, ease);
   animation-delay: var(--styler-on-hover-delay, unset), var(--styler-on-hover-effect-1-delay, unset), var(--styler-on-hover-effect-2-delay, unset);
 }
-[styler-on-leave=fade-in] {
+[styler-left]:not(animated-text)[styler-on-leave=fade-in],
+[styler-left]animated-text[styler-on-leave=fade-in] > * {
   animation-name: fade-in, var(--styler-on-leave-effect-1, none), var(--styler-on-leave-effect-2, none);
   animation-duration: var(--styler-on-leave-duration, 1s), var(--styler-on-leave-effect-1-duration, 1s), var(--styler-on-leave-effect-2-duration, 1s);
   animation-direction: var(--styler-on-leave-direction, unset), var(--styler-on-leave-effect-1-direction, unset), var(--styler-on-leave-effect-2-direction, unset);
@@ -15816,7 +15820,8 @@ body[editing] [styler-background-clip=text]:empty:before {
   animation-timing-function: var(--styler-on-leave-timing-function, ease), var(--styler-on-leave-effect-1-timing-function, ease), var(--styler-on-leave-effect-2-timing-function, ease);
   animation-delay: var(--styler-on-leave-delay, unset), var(--styler-on-leave-effect-1-delay, unset), var(--styler-on-leave-effect-2-delay, unset);
 }
-[styler-revealed][styler-on-enter=fade-out] {
+[styler-revealed]:not(animated-text)[styler-on-enter=fade-out],
+[styler-revealed]animated-text[styler-on-enter=fade-out] > * {
   animation-name: fade-out, var(--styler-on-enter-effect-1, none), var(--styler-on-enter-effect-2, none);
   animation-duration: var(--styler-on-enter-duration, 1s), var(--styler-on-enter-effect-1-duration, 1s), var(--styler-on-enter-effect-2-duration, 1s);
   animation-direction: var(--styler-on-enter-direction, unset), var(--styler-on-enter-effect-1-direction, unset), var(--styler-on-enter-effect-2-direction, unset);
@@ -15824,7 +15829,8 @@ body[editing] [styler-background-clip=text]:empty:before {
   animation-timing-function: var(--styler-on-enter-timing-function, ease), var(--styler-on-enter-effect-1-timing-function, ease), var(--styler-on-enter-effect-2-timing-function, ease);
   animation-delay: var(--styler-on-enter-delay, unset), var(--styler-on-enter-effect-1-delay, unset), var(--styler-on-enter-effect-2-delay, unset);
 }
-[styler-on-click=fade-out] {
+[styler-clicked]:not(animated-text)[styler-on-click=fade-out],
+[styler-clicked]animated-text[styler-on-click=fade-out] > * {
   animation-name: fade-out, var(--styler-on-click-effect-1, none), var(--styler-on-click-effect-2, none);
   animation-duration: var(--styler-on-click-duration, 1s), var(--styler-on-click-effect-1-duration, 1s), var(--styler-on-click-effect-2-duration, 1s);
   animation-direction: var(--styler-on-click-direction, unset), var(--styler-on-click-effect-1-direction, unset), var(--styler-on-click-effect-2-direction, unset);
@@ -15832,7 +15838,8 @@ body[editing] [styler-background-clip=text]:empty:before {
   animation-timing-function: var(--styler-on-click-timing-function, ease), var(--styler-on-click-effect-1-timing-function, ease), var(--styler-on-click-effect-2-timing-function, ease);
   animation-delay: var(--styler-on-click-delay, unset), var(--styler-on-click-effect-1-delay, unset), var(--styler-on-click-effect-2-delay, unset);
 }
-[styler-on-hover=fade-out]:hover {
+:not(animated-text)[styler-on-hover=fade-out]:hover,
+animated-text[styler-on-hover=fade-out]:hover > * {
   animation-name: fade-out, var(--styler-on-hover-effect-1, none), var(--styler-on-hover-effect-2, none);
   animation-duration: var(--styler-on-hover-duration, 1s), var(--styler-on-hover-effect-1-duration, 1s), var(--styler-on-hover-effect-2-duration, 1s);
   animation-direction: var(--styler-on-hover-direction, alternate), var(--styler-on-hover-effect-1-direction, alternate), var(--styler-on-hover-effect-2-direction, alternate);
@@ -15840,7 +15847,8 @@ body[editing] [styler-background-clip=text]:empty:before {
   animation-timing-function: var(--styler-on-hover-timing-function, ease), var(--styler-on-hover-effect-1-timing-function, ease), var(--styler-on-hover-effect-2-timing-function, ease);
   animation-delay: var(--styler-on-hover-delay, unset), var(--styler-on-hover-effect-1-delay, unset), var(--styler-on-hover-effect-2-delay, unset);
 }
-[styler-on-leave=fade-out] {
+[styler-left]:not(animated-text)[styler-on-leave=fade-out],
+[styler-left]animated-text[styler-on-leave=fade-out] > * {
   animation-name: fade-out, var(--styler-on-leave-effect-1, none), var(--styler-on-leave-effect-2, none);
   animation-duration: var(--styler-on-leave-duration, 1s), var(--styler-on-leave-effect-1-duration, 1s), var(--styler-on-leave-effect-2-duration, 1s);
   animation-direction: var(--styler-on-leave-direction, unset), var(--styler-on-leave-effect-1-direction, unset), var(--styler-on-leave-effect-2-direction, unset);
@@ -15848,7 +15856,8 @@ body[editing] [styler-background-clip=text]:empty:before {
   animation-timing-function: var(--styler-on-leave-timing-function, ease), var(--styler-on-leave-effect-1-timing-function, ease), var(--styler-on-leave-effect-2-timing-function, ease);
   animation-delay: var(--styler-on-leave-delay, unset), var(--styler-on-leave-effect-1-delay, unset), var(--styler-on-leave-effect-2-delay, unset);
 }
-[styler-revealed][styler-on-enter=zoom-in] {
+[styler-revealed]:not(animated-text)[styler-on-enter=zoom-in],
+[styler-revealed]animated-text[styler-on-enter=zoom-in] > * {
   animation-name: zoom-in, var(--styler-on-enter-effect-1, none), var(--styler-on-enter-effect-2, none);
   animation-duration: var(--styler-on-enter-duration, 1s), var(--styler-on-enter-effect-1-duration, 1s), var(--styler-on-enter-effect-2-duration, 1s);
   animation-direction: var(--styler-on-enter-direction, unset), var(--styler-on-enter-effect-1-direction, unset), var(--styler-on-enter-effect-2-direction, unset);
@@ -15856,7 +15865,8 @@ body[editing] [styler-background-clip=text]:empty:before {
   animation-timing-function: var(--styler-on-enter-timing-function, ease), var(--styler-on-enter-effect-1-timing-function, ease), var(--styler-on-enter-effect-2-timing-function, ease);
   animation-delay: var(--styler-on-enter-delay, unset), var(--styler-on-enter-effect-1-delay, unset), var(--styler-on-enter-effect-2-delay, unset);
 }
-[styler-on-click=zoom-in] {
+[styler-clicked]:not(animated-text)[styler-on-click=zoom-in],
+[styler-clicked]animated-text[styler-on-click=zoom-in] > * {
   animation-name: zoom-in, var(--styler-on-click-effect-1, none), var(--styler-on-click-effect-2, none);
   animation-duration: var(--styler-on-click-duration, 1s), var(--styler-on-click-effect-1-duration, 1s), var(--styler-on-click-effect-2-duration, 1s);
   animation-direction: var(--styler-on-click-direction, unset), var(--styler-on-click-effect-1-direction, unset), var(--styler-on-click-effect-2-direction, unset);
@@ -15864,7 +15874,8 @@ body[editing] [styler-background-clip=text]:empty:before {
   animation-timing-function: var(--styler-on-click-timing-function, ease), var(--styler-on-click-effect-1-timing-function, ease), var(--styler-on-click-effect-2-timing-function, ease);
   animation-delay: var(--styler-on-click-delay, unset), var(--styler-on-click-effect-1-delay, unset), var(--styler-on-click-effect-2-delay, unset);
 }
-[styler-on-hover=zoom-in]:hover {
+:not(animated-text)[styler-on-hover=zoom-in]:hover,
+animated-text[styler-on-hover=zoom-in]:hover > * {
   animation-name: zoom-in, var(--styler-on-hover-effect-1, none), var(--styler-on-hover-effect-2, none);
   animation-duration: var(--styler-on-hover-duration, 1s), var(--styler-on-hover-effect-1-duration, 1s), var(--styler-on-hover-effect-2-duration, 1s);
   animation-direction: var(--styler-on-hover-direction, alternate), var(--styler-on-hover-effect-1-direction, alternate), var(--styler-on-hover-effect-2-direction, alternate);
@@ -15872,7 +15883,8 @@ body[editing] [styler-background-clip=text]:empty:before {
   animation-timing-function: var(--styler-on-hover-timing-function, ease), var(--styler-on-hover-effect-1-timing-function, ease), var(--styler-on-hover-effect-2-timing-function, ease);
   animation-delay: var(--styler-on-hover-delay, unset), var(--styler-on-hover-effect-1-delay, unset), var(--styler-on-hover-effect-2-delay, unset);
 }
-[styler-on-leave=zoom-in] {
+[styler-left]:not(animated-text)[styler-on-leave=zoom-in],
+[styler-left]animated-text[styler-on-leave=zoom-in] > * {
   animation-name: zoom-in, var(--styler-on-leave-effect-1, none), var(--styler-on-leave-effect-2, none);
   animation-duration: var(--styler-on-leave-duration, 1s), var(--styler-on-leave-effect-1-duration, 1s), var(--styler-on-leave-effect-2-duration, 1s);
   animation-direction: var(--styler-on-leave-direction, unset), var(--styler-on-leave-effect-1-direction, unset), var(--styler-on-leave-effect-2-direction, unset);
@@ -15880,7 +15892,8 @@ body[editing] [styler-background-clip=text]:empty:before {
   animation-timing-function: var(--styler-on-leave-timing-function, ease), var(--styler-on-leave-effect-1-timing-function, ease), var(--styler-on-leave-effect-2-timing-function, ease);
   animation-delay: var(--styler-on-leave-delay, unset), var(--styler-on-leave-effect-1-delay, unset), var(--styler-on-leave-effect-2-delay, unset);
 }
-[styler-revealed][styler-on-enter=zoom-out] {
+[styler-revealed]:not(animated-text)[styler-on-enter=zoom-out],
+[styler-revealed]animated-text[styler-on-enter=zoom-out] > * {
   animation-name: zoom-out, var(--styler-on-enter-effect-1, none), var(--styler-on-enter-effect-2, none);
   animation-duration: var(--styler-on-enter-duration, 1s), var(--styler-on-enter-effect-1-duration, 1s), var(--styler-on-enter-effect-2-duration, 1s);
   animation-direction: var(--styler-on-enter-direction, unset), var(--styler-on-enter-effect-1-direction, unset), var(--styler-on-enter-effect-2-direction, unset);
@@ -15888,7 +15901,8 @@ body[editing] [styler-background-clip=text]:empty:before {
   animation-timing-function: var(--styler-on-enter-timing-function, ease), var(--styler-on-enter-effect-1-timing-function, ease), var(--styler-on-enter-effect-2-timing-function, ease);
   animation-delay: var(--styler-on-enter-delay, unset), var(--styler-on-enter-effect-1-delay, unset), var(--styler-on-enter-effect-2-delay, unset);
 }
-[styler-on-click=zoom-out] {
+[styler-clicked]:not(animated-text)[styler-on-click=zoom-out],
+[styler-clicked]animated-text[styler-on-click=zoom-out] > * {
   animation-name: zoom-out, var(--styler-on-click-effect-1, none), var(--styler-on-click-effect-2, none);
   animation-duration: var(--styler-on-click-duration, 1s), var(--styler-on-click-effect-1-duration, 1s), var(--styler-on-click-effect-2-duration, 1s);
   animation-direction: var(--styler-on-click-direction, unset), var(--styler-on-click-effect-1-direction, unset), var(--styler-on-click-effect-2-direction, unset);
@@ -15896,7 +15910,8 @@ body[editing] [styler-background-clip=text]:empty:before {
   animation-timing-function: var(--styler-on-click-timing-function, ease), var(--styler-on-click-effect-1-timing-function, ease), var(--styler-on-click-effect-2-timing-function, ease);
   animation-delay: var(--styler-on-click-delay, unset), var(--styler-on-click-effect-1-delay, unset), var(--styler-on-click-effect-2-delay, unset);
 }
-[styler-on-hover=zoom-out]:hover {
+:not(animated-text)[styler-on-hover=zoom-out]:hover,
+animated-text[styler-on-hover=zoom-out]:hover > * {
   animation-name: zoom-out, var(--styler-on-hover-effect-1, none), var(--styler-on-hover-effect-2, none);
   animation-duration: var(--styler-on-hover-duration, 1s), var(--styler-on-hover-effect-1-duration, 1s), var(--styler-on-hover-effect-2-duration, 1s);
   animation-direction: var(--styler-on-hover-direction, alternate), var(--styler-on-hover-effect-1-direction, alternate), var(--styler-on-hover-effect-2-direction, alternate);
@@ -15904,7 +15919,8 @@ body[editing] [styler-background-clip=text]:empty:before {
   animation-timing-function: var(--styler-on-hover-timing-function, ease), var(--styler-on-hover-effect-1-timing-function, ease), var(--styler-on-hover-effect-2-timing-function, ease);
   animation-delay: var(--styler-on-hover-delay, unset), var(--styler-on-hover-effect-1-delay, unset), var(--styler-on-hover-effect-2-delay, unset);
 }
-[styler-on-leave=zoom-out] {
+[styler-left]:not(animated-text)[styler-on-leave=zoom-out],
+[styler-left]animated-text[styler-on-leave=zoom-out] > * {
   animation-name: zoom-out, var(--styler-on-leave-effect-1, none), var(--styler-on-leave-effect-2, none);
   animation-duration: var(--styler-on-leave-duration, 1s), var(--styler-on-leave-effect-1-duration, 1s), var(--styler-on-leave-effect-2-duration, 1s);
   animation-direction: var(--styler-on-leave-direction, unset), var(--styler-on-leave-effect-1-direction, unset), var(--styler-on-leave-effect-2-direction, unset);
@@ -18733,6 +18749,29 @@ body[editing] [styler-background-clip=text]:empty:before {
 [styler-on-hover-effect-2-delay=10s] {
   --styler-on-hover-effect-2-delay: 10s;
 }
+[styler-on-scroll] {
+  position: relative;
+}
+[styler-on-scroll] > * {
+  transition: all var(--styler-on-scroll-delay, 0.1s) ease-in-out;
+}
+[above-body][styler-on-scroll=move-away] > * {
+  transform: translateY(calc(var(--above-body-ratio) * 100%)) scale(clamp(0.2, var(--body-ratio), 1), clamp(-0.2, var(--body-ratio), 1));
+}
+[above-body][styler-on-scroll-effect-1=fade-out] > * {
+  opacity: clamp(0.5, var(--body-ratio), 1);
+}
+[above-body][styler-on-scroll-effect-2=blur]::after {
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  content: "";
+  pointer-events: none;
+  backdrop-filter: blur(clamp(1px, calc(var(--above-body-ratio) * 10px), 10px));
+}
 body {
   font-family: var(--font-default, --default-fonts);
 }