npm - @empathyco/x-components - Versions diffs - 5.0.0-alpha.1 → 5.0.0-alpha.2 - Mend

@empathyco/x-components 5.0.0-alpha.1 → 5.0.0-alpha.2

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

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [5.0.0-alpha.2](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.1...@empathyco/x-components@5.0.0-alpha.2) (2024-05-01)
+### Documentation
+* fix typo (#1455) ([44eae35](https://github.com/empathyco/x/commit/44eae359b33f9642eb9af02701fd6a3295a2deb9))
 ## [5.0.0-alpha.1](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.0...@empathyco/x-components@5.0.0-alpha.1) (2024-04-29)

package/design-system/deprecated-full-theme.css CHANGED Viewed

@@ -1,4 +1,20 @@
+.x-uppercase {
+  text-transform: uppercase;
+}
+.x-lowercase {
+  text-transform: lowercase;
+}
+.x-capitalize {
+  text-transform: capitalize;
+}
+.x-normal-case {
+  text-transform: none;
+}
 .x-underline {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -478,7 +494,6 @@
 [dir="rtl"] .x-padding--left-20 {
   padding-right: var(--x-size-base-20) !important;
 }
 .x-margin--auto {
   margin: auto !important;
 }
@@ -964,15 +979,6 @@
 .x-line-height--loose {
   line-height: 2 !important;
 }
-.x-font-weight--light {
-  font-weight: var(--x-number-font-weight-base-light) !important;
-}
-.x-font-weight--regular {
-  font-weight: var(--x-number-font-weight-base-regular) !important;
-}
-.x-font-weight--bold {
-  font-weight: var(--x-number-font-weight-base-bold) !important;
-}
 .x-line-clamp--2 {
   overflow: hidden !important;
   display: -webkit-box !important;
@@ -1007,6 +1013,15 @@
   -webkit-box-orient: vertical !important;
   -webkit-line-clamp: 6 !important;
 }
+.x-font-weight--light {
+  font-weight: var(--x-number-font-weight-base-light) !important;
+}
+.x-font-weight--regular {
+  font-weight: var(--x-number-font-weight-base-regular) !important;
+}
+.x-font-weight--bold {
+  font-weight: var(--x-number-font-weight-base-bold) !important;
+}
 .x-font-size--01 {
   font-size: var(--x-size-base-01) !important;
   line-height: 1.5;
@@ -1763,49 +1778,6 @@
 .x-border-width--left-10 {
   border-style: solid !important;
 }
-.x-border-color--lead {
-  border-color: var(--x-color-base-lead) !important;
-}
-.x-border-color--auxiliary {
-  border-color: var(--x-color-base-auxiliary) !important;
-}
-.x-border-color--neutral-10 {
-  border-color: var(--x-color-base-neutral-10) !important;
-}
-.x-border-color--neutral-35 {
-  border-color: var(--x-color-base-neutral-35) !important;
-}
-.x-border-color--neutral-70 {
-  border-color: var(--x-color-base-neutral-70) !important;
-}
-.x-border-color--neutral-95 {
-  border-color: var(--x-color-base-neutral-95) !important;
-}
-.x-border-color--neutral-100 {
-  border-color: var(--x-color-base-neutral-100) !important;
-}
-.x-border-color--accent {
-  border-color: var(--x-color-base-accent) !important;
-}
-.x-border-color--enable {
-  border-color: var(--x-color-base-enable) !important;
-}
-.x-border-color--disable {
-  border-color: var(--x-color-base-disable) !important;
-}
-.x-border-color--transparent {
-  border-color: var(--x-color-base-transparent) !important;
-}
 .x-border-radius--00 {
   border-radius: 0 !important;
 }
@@ -3314,20 +3286,48 @@
 [dir="rtl"] .x-border-radius--bottom-right-20 {
   border-bottom-left-radius: var(--x-size-base-20) !important;
 }
-.x-text--stroke.x-text {
-  --x-string-text-decoration: line-through;
+.x-border-color--lead {
+  border-color: var(--x-color-base-lead) !important;
 }
-.x-text--stroke.x-title1 {
-  --x-string-text-decoration-title1: line-through;
+.x-border-color--auxiliary {
+  border-color: var(--x-color-base-auxiliary) !important;
 }
-.x-text--stroke.x-title2 {
-  --x-string-text-decoration-title2: line-through;
+.x-border-color--neutral-10 {
+  border-color: var(--x-color-base-neutral-10) !important;
 }
-.x-text--stroke.x-title3 {
-  --x-string-text-decoration-title3: line-through;
+.x-border-color--neutral-35 {
+  border-color: var(--x-color-base-neutral-35) !important;
 }
-.x-text--stroke.x-small {
-  --x-string-text-decoration-small: line-through;
+.x-border-color--neutral-70 {
+  border-color: var(--x-color-base-neutral-70) !important;
+}
+.x-border-color--neutral-95 {
+  border-color: var(--x-color-base-neutral-95) !important;
+}
+.x-border-color--neutral-100 {
+  border-color: var(--x-color-base-neutral-100) !important;
+}
+.x-border-color--accent {
+  border-color: var(--x-color-base-accent) !important;
+}
+.x-border-color--enable {
+  border-color: var(--x-color-base-enable) !important;
+}
+.x-border-color--disable {
+  border-color: var(--x-color-base-disable) !important;
+}
+.x-border-color--transparent {
+  border-color: var(--x-color-base-transparent) !important;
 }
 .x-background--lead {
   background-color: var(--x-color-base-lead) !important;
@@ -3372,6 +3372,21 @@
 .x-background--transparent {
   background-color: var(--x-color-base-transparent) !important;
 }
+.x-text--stroke.x-text {
+  --x-string-text-decoration: line-through;
+}
+.x-text--stroke.x-title1 {
+  --x-string-text-decoration-title1: line-through;
+}
+.x-text--stroke.x-title2 {
+  --x-string-text-decoration-title2: line-through;
+}
+.x-text--stroke.x-title3 {
+  --x-string-text-decoration-title3: line-through;
+}
+.x-text--stroke.x-small {
+  --x-string-text-decoration-small: line-through;
+}
 :root {
   --x-color-text-secondary: var(--x-color-base-neutral-35);
 }
@@ -3433,6 +3448,108 @@
   --x-size-line-height-small: var(--x-size-line-height-base-s);
   --x-string-text-decoration-small: none;
 }
+:root {
+  --x-font-family-base: "Montserrat", sans-serif;
+  --x-size-font-base-xs: 12px;
+  --x-size-font-base-s: 14px;
+  --x-size-font-base-m: 16px;
+  --x-size-font-base-l: 18px;
+  --x-size-font-base-xl: 32px;
+  --x-number-font-weight-base-light: 300;
+  --x-number-font-weight-base-regular: 400;
+  --x-number-font-weight-base-bold: 600;
+  --x-size-line-height-base-s: 16px;
+  --x-size-line-height-base-m: 24px;
+  --x-size-line-height-base-l: 32px;
+  --x-color-text-default: var(--x-color-base-neutral-10);
+  --x-font-family-text: var(--x-font-family-base);
+  --x-size-font-text: var(--x-size-font-base-s);
+  --x-number-font-weight-text: var(--x-number-font-weight-base-regular);
+  --x-size-line-height-text: var(--x-size-line-height-base-s);
+  --x-string-text-decoration-text: none;
+  --x-font-family-title1: var(--x-font-family-base);
+  --x-size-font-title1: var(--x-size-font-base-xl);
+  --x-number-font-weight-title1: var(--x-number-font-weight-base-regular);
+  --x-size-line-height-title1: var(--x-size-line-height-base-l);
+  --x-string-text-decoration-title1: none;
+  --x-font-family-title2: var(--x-font-family-base);
+  --x-size-font-title2: var(--x-size-font-base-l);
+  --x-number-font-weight-title2: var(--x-number-font-weight-base-regular);
+  --x-size-line-height-title2: var(--x-size-line-height-base-m);
+  --x-string-text-decoration-title2: none;
+  --x-font-family-title3: var(--x-font-family-base);
+  --x-size-font-title3: var(--x-size-font-base-m);
+  --x-number-font-weight-title3: var(--x-number-font-weight-base-regular);
+  --x-size-line-height-title3: var(--x-size-line-height-base-m);
+  --x-string-text-decoration-title3: none;
+  --x-font-family-small: var(--x-font-family-base);
+  --x-size-font-small: var(--x-size-font-base-xs);
+  --x-number-font-weight-small: var(--x-number-font-weight-base-regular);
+  --x-size-line-height-small: var(--x-size-line-height-base-s);
+  --x-string-text-decoration-small: none;
+}
+.x,
+.x-text {
+  font-family: var(--x-font-family-text);
+  font-size: var(--x-size-font-text);
+  font-weight: var(--x-number-font-weight-text);
+  line-height: var(--x-size-line-height-text);
+  -webkit-text-decoration: var(--x-string-text-decoration);
+          text-decoration: var(--x-string-text-decoration);
+  color: var(--x-color-text-default);
+  margin: 0;
+}
+.x-title1 {
+  font-family: var(--x-font-family-title1);
+  font-size: var(--x-size-font-title1);
+  font-weight: var(--x-number-font-weight-title1);
+  line-height: var(--x-size-line-height-title1);
+  -webkit-text-decoration: var(--x-string-text-decoration-title1);
+          text-decoration: var(--x-string-text-decoration-title1);
+  color: var(--x-color-text-default);
+  margin: 0;
+}
+.x-title2 {
+  font-family: var(--x-font-family-title2);
+  font-size: var(--x-size-font-title2);
+  font-weight: var(--x-number-font-weight-title2);
+  line-height: var(--x-size-line-height-title2);
+  -webkit-text-decoration: var(--x-string-text-decoration-title2);
+          text-decoration: var(--x-string-text-decoration-title2);
+  color: var(--x-color-text-default);
+  margin: 0;
+}
+.x-title3 {
+  font-family: var(--x-font-family-title3);
+  font-size: var(--x-size-font-title3);
+  font-weight: var(--x-number-font-weight-title3);
+  line-height: var(--x-size-line-height-title3);
+  -webkit-text-decoration: var(--x-string-text-decoration-title3);
+          text-decoration: var(--x-string-text-decoration-title3);
+  color: var(--x-color-text-default);
+  margin: 0;
+}
+.x-small {
+  font-family: var(--x-font-family-small);
+  font-size: var(--x-size-font-small);
+  font-weight: var(--x-number-font-weight-small);
+  line-height: var(--x-size-line-height-small);
+  -webkit-text-decoration: var(--x-string-text-decoration-small);
+          text-decoration: var(--x-string-text-decoration-small);
+  color: var(--x-color-text-default);
+  margin: 0;
+}
+.x-ellipsis {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
 .x-text--bold.x-text {
   --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
 }
@@ -3451,9 +3568,6 @@
 :root {
   --x-color-text-accent: var(--x-color-base-accent);
 }
-.x-text--accent {
-  --x-color-text-default: var(--x-color-text-accent);
-}
 :root {
   --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
   --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
@@ -3854,122 +3968,6 @@
   --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
   --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
 }
-:root {
-  --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
-  --x-color-text-suggestion-group-matching-part-default: var(
-    --x-color-text-suggestion-matching-part-default
-  );
-  --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
-  --x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
-  --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
-  --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
-  --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
-  --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
-  --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
-  --x-size-border-width-suggestion-group-default: 0;
-  --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
-  --x-size-border-width-right-suggestion-group-default: var(
-    --x-size-border-width-suggestion-default
-  );
-  --x-size-border-width-bottom-suggestion-group-default: var(
-    --x-size-border-width-suggestion-default
-  );
-  --x-size-border-width-left-suggestion-group-default: var(
-    --x-size-border-width-suggestion-default
-  );
-  --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-suggestion-group-default: var(
-    --x-size-border-radius-suggestion-default
-  );
-  --x-size-border-radius-top-right-suggestion-group-default: var(
-    --x-size-border-radius-suggestion-default
-  );
-  --x-size-border-radius-bottom-right-suggestion-group-default: var(
-    --x-size-border-radius-suggestion-default
-  );
-  --x-size-border-radius-bottom-left-suggestion-group-default: var(
-    --x-size-border-radius-suggestion-default
-  );
-  --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
-  --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
-  --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
-  --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
-}
-[dir="ltr"] .x-suggestion-group {
-  padding-left: var(--x-size-padding-left-suggestion-group-default);
-}
-[dir="rtl"] .x-suggestion-group {
-  padding-right: var(--x-size-padding-left-suggestion-group-default);
-}
-[dir="ltr"] .x-suggestion-group {
-  padding-right: var(--x-size-padding-right-suggestion-group-default);
-}
-[dir="rtl"] .x-suggestion-group {
-  padding-left: var(--x-size-padding-right-suggestion-group-default);
-}
-[dir="ltr"] .x-suggestion-group {
-  border-left-width: var(--x-size-border-width-left-suggestion-group-default);
-}
-[dir="rtl"] .x-suggestion-group {
-  border-right-width: var(--x-size-border-width-left-suggestion-group-default);
-}
-[dir="ltr"] .x-suggestion-group {
-  border-right-width: var(--x-size-border-width-right-suggestion-group-default);
-}
-[dir="rtl"] .x-suggestion-group {
-  border-left-width: var(--x-size-border-width-right-suggestion-group-default);
-}
-.x-suggestion-group {
-  display: flex;
-  flex-flow: row nowrap;
-  box-sizing: border-box;
-  background-color: var(--x-color-background-suggestion-group-default);
-  color: var(--x-color-text-suggestion-group-default);
-  border-color: var(--x-color-border-suggestion-group-default);
-  font-family: var(--x-font-family-suggestion-group-default);
-  font-size: var(--x-size-font-suggestion-group-default);
-  line-height: var(--x-size-line-height-suggestion-group-default);
-  font-weight: var(--x-number-font-weight-suggestion-group-default);
-  cursor: pointer;
-  padding-top: var(--x-size-padding-top-suggestion-group-default);
-  padding-bottom: var(--x-size-padding-bottom-suggestion-group-default);
-  gap: var(--x-size-gap-suggestion-group-default);
-  border-style: solid;
-  border-top-width: var(--x-size-border-width-top-suggestion-group-default);
-  border-bottom-width: var(--x-size-border-width-bottom-suggestion-group-default);
-  border-radius: var(--x-size-border-radius-top-left-suggestion-group-default) var(--x-size-border-radius-top-right-suggestion-group-default) var(--x-size-border-radius-bottom-right-suggestion-group-default) var(--x-size-border-radius-bottom-left-suggestion-group-default);
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-suggestion-group {
-    gap: 0;
-  }
-  .x-suggestion-group > *:not(:last-child) {
-    margin-right: var(--x-size-gap-suggestion-group-default);
-  }
-}
-.x-suggestion-group .x-suggestion {
-  padding: 0;
-  flex: 1 1 auto;
-  border: none;
-}
-.x-suggestion-group .x-button {
-  --x-color-background-button-default: transparent;
-  --x-color-border-button-default: transparent;
-  --x-color-text-button-default: var(--x-color-text-suggestion-group-default);
-  --x-size-height-button-default: var(--x-size-line-height-suggestion-group-default);
-  --x-size-padding-right-button-default: 0;
-  --x-size-padding-left-button-default: 0;
-  border: none;
-}
 :root {
   --x-string-align-items-suggestion-default: center;
   --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -4282,6 +4280,122 @@
     --x-color-text-suggestion-default-matching-curated
   );
 }
+:root {
+  --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
+  --x-color-text-suggestion-group-matching-part-default: var(
+    --x-color-text-suggestion-matching-part-default
+  );
+  --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
+  --x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
+  --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
+  --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
+  --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
+  --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
+  --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
+  --x-size-border-width-suggestion-group-default: 0;
+  --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-right-suggestion-group-default: var(
+    --x-size-border-width-suggestion-default
+  );
+  --x-size-border-width-bottom-suggestion-group-default: var(
+    --x-size-border-width-suggestion-default
+  );
+  --x-size-border-width-left-suggestion-group-default: var(
+    --x-size-border-width-suggestion-default
+  );
+  --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-suggestion-group-default: var(
+    --x-size-border-radius-suggestion-default
+  );
+  --x-size-border-radius-top-right-suggestion-group-default: var(
+    --x-size-border-radius-suggestion-default
+  );
+  --x-size-border-radius-bottom-right-suggestion-group-default: var(
+    --x-size-border-radius-suggestion-default
+  );
+  --x-size-border-radius-bottom-left-suggestion-group-default: var(
+    --x-size-border-radius-suggestion-default
+  );
+  --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
+  --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
+  --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
+}
+[dir="ltr"] .x-suggestion-group {
+  padding-left: var(--x-size-padding-left-suggestion-group-default);
+}
+[dir="rtl"] .x-suggestion-group {
+  padding-right: var(--x-size-padding-left-suggestion-group-default);
+}
+[dir="ltr"] .x-suggestion-group {
+  padding-right: var(--x-size-padding-right-suggestion-group-default);
+}
+[dir="rtl"] .x-suggestion-group {
+  padding-left: var(--x-size-padding-right-suggestion-group-default);
+}
+[dir="ltr"] .x-suggestion-group {
+  border-left-width: var(--x-size-border-width-left-suggestion-group-default);
+}
+[dir="rtl"] .x-suggestion-group {
+  border-right-width: var(--x-size-border-width-left-suggestion-group-default);
+}
+[dir="ltr"] .x-suggestion-group {
+  border-right-width: var(--x-size-border-width-right-suggestion-group-default);
+}
+[dir="rtl"] .x-suggestion-group {
+  border-left-width: var(--x-size-border-width-right-suggestion-group-default);
+}
+.x-suggestion-group {
+  display: flex;
+  flex-flow: row nowrap;
+  box-sizing: border-box;
+  background-color: var(--x-color-background-suggestion-group-default);
+  color: var(--x-color-text-suggestion-group-default);
+  border-color: var(--x-color-border-suggestion-group-default);
+  font-family: var(--x-font-family-suggestion-group-default);
+  font-size: var(--x-size-font-suggestion-group-default);
+  line-height: var(--x-size-line-height-suggestion-group-default);
+  font-weight: var(--x-number-font-weight-suggestion-group-default);
+  cursor: pointer;
+  padding-top: var(--x-size-padding-top-suggestion-group-default);
+  padding-bottom: var(--x-size-padding-bottom-suggestion-group-default);
+  gap: var(--x-size-gap-suggestion-group-default);
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-suggestion-group-default);
+  border-bottom-width: var(--x-size-border-width-bottom-suggestion-group-default);
+  border-radius: var(--x-size-border-radius-top-left-suggestion-group-default) var(--x-size-border-radius-top-right-suggestion-group-default) var(--x-size-border-radius-bottom-right-suggestion-group-default) var(--x-size-border-radius-bottom-left-suggestion-group-default);
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-suggestion-group {
+    gap: 0;
+  }
+  .x-suggestion-group > *:not(:last-child) {
+    margin-right: var(--x-size-gap-suggestion-group-default);
+  }
+}
+.x-suggestion-group .x-suggestion {
+  padding: 0;
+  flex: 1 1 auto;
+  border: none;
+}
+.x-suggestion-group .x-button {
+  --x-color-background-button-default: transparent;
+  --x-color-border-button-default: transparent;
+  --x-color-text-button-default: var(--x-color-text-suggestion-group-default);
+  --x-size-height-button-default: var(--x-size-line-height-suggestion-group-default);
+  --x-size-padding-right-button-default: 0;
+  --x-size-padding-left-button-default: 0;
+  border: none;
+}
 :root {
   --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
   --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
@@ -4795,6 +4909,21 @@
   --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
   --x-size-border-width-progress-bar-default: 0;
 }
+:root {
+  --x-number-zoom-scale-picture: 1.1;
+  --x-number-zoom-duration-picture: 0.3s;
+}
+:root {
+  --x-number-zoom-scale-picture: 1.1;
+  --x-number-zoom-duration-picture: 0.3s;
+}
+.x-picture--zoom .x-picture-image {
+  transition: transform var(--x-number-zoom-duration-picture) ease-out;
+}
+.x-picture--zoom .x-picture-image:hover {
+  transform: scale(var(--x-number-zoom-scale-picture));
+}
 :root {
   --x-size-height-progress-bar-line-default: var(--x-size-base-02);
   --x-size-width-progress-bar-line-default: var(--x-size-base-20);
@@ -4820,21 +4949,6 @@
   border-radius: var(--x-size-border-radius-progress-bar-default);
   background-color: var(--x-color-background-progress-bar-line-default);
 }
-:root {
-  --x-number-zoom-scale-picture: 1.1;
-  --x-number-zoom-duration-picture: 0.3s;
-}
-:root {
-  --x-number-zoom-scale-picture: 1.1;
-  --x-number-zoom-duration-picture: 0.3s;
-}
-.x-picture--zoom .x-picture-image {
-  transition: transform var(--x-number-zoom-duration-picture) ease-out;
-}
-.x-picture--zoom .x-picture-image:hover {
-  transform: scale(var(--x-number-zoom-scale-picture));
-}
 :root {
   --x-number-aspect-ratio-picture: 1;
 }
@@ -5071,6 +5185,51 @@
   --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
   --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
 }
+:root {
+  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
+  --x-color-text-option-list-button-bottom-selected-hover: var(
+    --x-color-text-option-list-button-bottom-selected
+  );
+  --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
+  --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
+  --x-color-border-option-list-item-bottom: transparent;
+  --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
+  --x-color-border-top-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
+  );
+  --x-color-border-right-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
+  );
+  --x-color-border-bottom-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom-selected
+  );
+  --x-color-border-left-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
+  );
+  --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
+  --x-size-border-width-top-option-list-item-bottom: 0;
+  --x-size-border-width-right-option-list-item-bottom: 0;
+  --x-size-border-width-bottom-option-list-item-bottom: var(
+    --x-size-border-width-option-list-item-bottom
+  );
+  --x-size-border-width-left-option-list-item-bottom: 0;
+  --x-size-border-width-top-option-list-item-bottom-selected: 0;
+  --x-size-border-width-right-option-list-item-bottom-selected: 0;
+  --x-size-border-width-bottom-option-list-item-bottom-selected: var(
+    --x-size-border-width-option-list-item-bottom
+  );
+  --x-size-border-width-left-option-list-item-bottom-selected: 0;
+  --x-size-font-option-list-button-bottom: var(--x-size-font-text);
+  --x-font-decoration-option-list-button-bottom-hover: none;
+  --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
+  --x-number-font-weight-option-list-button-bottom-selected: var(
+    --x-number-font-weight-base-regular
+  );
+}
 :root {
   --x-color-background-option-list-button-default: transparent;
   --x-color-border-option-list-button-default: transparent;
@@ -5308,51 +5467,6 @@
     --x-number-font-weight-base-regular
   );
 }
-:root {
-  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
-  --x-color-text-option-list-button-bottom-selected-hover: var(
-    --x-color-text-option-list-button-bottom-selected
-  );
-  --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
-  --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
-  --x-color-border-option-list-item-bottom: transparent;
-  --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
-  --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
-  --x-color-border-top-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom
-  );
-  --x-color-border-right-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom
-  );
-  --x-color-border-bottom-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom-selected
-  );
-  --x-color-border-left-option-list-item-bottom-selected: var(
-    --x-color-border-option-list-item-bottom
-  );
-  --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
-  --x-size-border-width-top-option-list-item-bottom: 0;
-  --x-size-border-width-right-option-list-item-bottom: 0;
-  --x-size-border-width-bottom-option-list-item-bottom: var(
-    --x-size-border-width-option-list-item-bottom
-  );
-  --x-size-border-width-left-option-list-item-bottom: 0;
-  --x-size-border-width-top-option-list-item-bottom-selected: 0;
-  --x-size-border-width-right-option-list-item-bottom-selected: 0;
-  --x-size-border-width-bottom-option-list-item-bottom-selected: var(
-    --x-size-border-width-option-list-item-bottom
-  );
-  --x-size-border-width-left-option-list-item-bottom-selected: 0;
-  --x-size-font-option-list-button-bottom: var(--x-size-font-text);
-  --x-font-decoration-option-list-button-bottom-hover: none;
-  --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
-  --x-number-font-weight-option-list-button-bottom-selected: var(
-    --x-number-font-weight-base-regular
-  );
-}
 .x-option-list--bottom.x-option-list,
 .x-option-list--bottom .x-option-list {
@@ -6597,18 +6711,9 @@
 .x-list > .x-list__item--11 {
   flex: 11 2 auto;
 }
-.x-list > .x-list__item--12 {
-  flex: 12 1 auto;
-}
-:root {
-  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-bottom-right-input-group-pill: var(
-    --x-size-border-radius-input-group-pill
-  );
-  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
-}
+.x-list > .x-list__item--12 {
+  flex: 12 1 auto;
+}
 :root {
   --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
   --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
@@ -6635,6 +6740,15 @@
     --x-size-border-radius-bottom-left-input-group-pill
   );
 }
+:root {
+  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-bottom-right-input-group-pill: var(
+    --x-size-border-radius-input-group-pill
+  );
+  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
+}
 :root {
   --x-size-padding-left-input-group-line: 0;
   --x-size-padding-right-input-group-line: 0;
@@ -7011,6 +7125,9 @@
   --x-size-border-width-bottom-input-default: var(--x-size-border-width-bottom-input-line);
   --x-size-border-width-left-input-default: var(--x-size-border-width-left-input-line);
 }
+.x-text--accent {
+  --x-color-text-default: var(--x-color-text-accent);
+}
 :root {
   --x-color-background-input-default: var(--x-color-base-neutral-100);
   --x-color-border-input-default: var(--x-color-base-neutral-70);
@@ -7178,15 +7295,15 @@
   --x-size-width-icon-xl: var(--x-size-base-07);
   --x-size-height-icon-xl: var(--x-size-base-07);
 }
-:root {
-  --x-size-width-icon-xl: var(--x-size-base-07);
-  --x-size-height-icon-xl: var(--x-size-base-07);
-}
 .x-icon--xl {
   --x-size-width-icon-default: var(--x-size-width-icon-xl);
   --x-size-height-icon-default: var(--x-size-height-icon-xl);
 }
+:root {
+  --x-size-width-icon-xl: var(--x-size-base-07);
+  --x-size-height-icon-xl: var(--x-size-base-07);
+}
 :root {
   --x-size-width-icon-s: var(--x-size-base-03);
   --x-size-height-icon-s: var(--x-size-base-03);
@@ -7235,6 +7352,11 @@
   --x-string-stroke-linejoin-icon-default: mitter;
   --x-size-stroke-width-icon-default: 1px;
 }
+:root {
+  --x-size-padding-grid: 0;
+  --x-size-gap-grid: var(--x-size-base-03);
+  --x-size-min-width-grid-item: 150px;
+}
 :root {
   --x-color-stroke-icon-default: currentColor;
   --x-color-fill-icon-default: none;
@@ -7270,11 +7392,6 @@
   --x-size-gap-grid: var(--x-size-base-03);
   --x-size-min-width-grid-item: 150px;
 }
-:root {
-  --x-size-padding-grid: 0;
-  --x-size-gap-grid: var(--x-size-base-03);
-  --x-size-min-width-grid-item: 150px;
-}
 .x-grid-list {
   margin: 0;
@@ -7373,6 +7490,19 @@
   );
   --x-size-line-height-filter-default: var(--x-size-line-height-text);
 }
+:root {
+  --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
+  --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
+  --x-size-border-width-top-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-border-width-right-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-border-width-bottom-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-border-width-left-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-padding-facet-header-outlined: var(--x-size-base-03);
+  --x-size-padding-top-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+  --x-size-padding-right-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+  --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+  --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+}
 :root {
   --x-color-background-filter-default: transparent;
   --x-color-border-filter-default: var(--x-color-background-filter-default);
@@ -7499,19 +7629,6 @@
   --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
   --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
 }
-:root {
-  --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
-  --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
-  --x-size-border-width-top-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-border-width-right-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-border-width-bottom-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-border-width-left-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-padding-facet-header-outlined: var(--x-size-base-03);
-  --x-size-padding-top-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-  --x-size-padding-right-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-  --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-  --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-}
 .x-facet--outlined.x-facet,
 .x-facet--outlined .x-facet {
@@ -7831,13 +7948,6 @@
 :root {
   --x-size-width-dropdown-m: 130px;
 }
-:root {
-  --x-size-width-dropdown-m: 130px;
-}
-.x-dropdown.x-dropdown--m {
-  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
-}
 :root {
   --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
   --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
@@ -7928,6 +8038,13 @@
 :root {
   --x-size-width-dropdown-l: 202px;
 }
+:root {
+  --x-size-width-dropdown-m: 130px;
+}
+.x-dropdown.x-dropdown--m {
+  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
+}
 :root {
   --x-size-width-dropdown-l: 202px;
 }
@@ -8263,6 +8380,16 @@
   --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
   --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
 }
+:root {
+  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
+  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
+  --x-color-text-button-tertiary: var(--x-color-text-default);
+  --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
+}
 :root {
   --x-size-gap-dropdown-card: var(--x-size-base-03);
   --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
@@ -8316,16 +8443,6 @@
   --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
   --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
 }
-:root {
-  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
-  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
-  --x-color-text-button-tertiary: var(--x-color-text-default);
-  --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
-  --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
-  --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
-  --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
-  --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
-}
 .x-button--tertiary.x-button,
 .x-button--tertiary .x-button {
@@ -8347,16 +8464,6 @@
   --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
   --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
 }
-:root {
-  --x-color-background-button-secondary: transparent;
-  --x-color-border-button-secondary: var(--x-color-border-button-default);
-  --x-color-text-button-secondary: var(--x-color-border-button-default);
-  --x-size-border-width-button-secondary: var(--x-size-border-width-base);
-  --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
-  --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
-  --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
-  --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
-}
 .x-button--secondary.x-button,
 .x-button--secondary .x-button {
@@ -8375,6 +8482,16 @@
   --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
   --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
 }
+:root {
+  --x-color-background-button-secondary: transparent;
+  --x-color-border-button-secondary: var(--x-color-border-button-default);
+  --x-color-text-button-secondary: var(--x-color-border-button-default);
+  --x-size-border-width-button-secondary: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
+  --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
+  --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
+  --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
+}
 :root {
   --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
   --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
@@ -8683,6 +8800,19 @@
 .x-badge-container {
   position: relative;
 }
+:root {
+  --x-color-base-lead: #243d48;
+  --x-color-base-auxiliary: #bfe1ec;
+  --x-color-base-neutral-10: #1a1a1a;
+  --x-color-base-neutral-35: #595959;
+  --x-color-base-neutral-70: #b3b3b3;
+  --x-color-base-neutral-95: #f2f2f2;
+  --x-color-base-neutral-100: #ffffff;
+  --x-color-base-accent: #0086b2;
+  --x-color-base-enable: #00705c;
+  --x-color-base-disable: #e11f26;
+  --x-color-base-transparent: transparent;
+}
 :root {
   --x-size-base-01: 2px;
   --x-size-base-02: 4px;
@@ -8705,140 +8835,10 @@
   --x-size-base-19: 280px;
   --x-size-base-20: 344px;
 }
-:root {
-  --x-color-base-lead: #243d48;
-  --x-color-base-auxiliary: #bfe1ec;
-  --x-color-base-neutral-10: #1a1a1a;
-  --x-color-base-neutral-35: #595959;
-  --x-color-base-neutral-70: #b3b3b3;
-  --x-color-base-neutral-95: #f2f2f2;
-  --x-color-base-neutral-100: #ffffff;
-  --x-color-base-accent: #0086b2;
-  --x-color-base-enable: #00705c;
-  --x-color-base-disable: #e11f26;
-  --x-color-base-transparent: transparent;
-}
 :root {
   --x-size-border-radius-base-none: 0;
   --x-size-border-radius-base-s: var(--x-size-base-02);
   --x-size-border-radius-base-m: var(--x-size-base-06);
   --x-size-border-radius-base-pill: 99999px;
   --x-size-border-width-base: 1px;
-}
-.x-uppercase {
-  text-transform: uppercase;
-}
-.x-lowercase {
-  text-transform: lowercase;
-}
-.x-capitalize {
-  text-transform: capitalize;
-}
-.x-normal-case {
-  text-transform: none;
-}
-:root {
-  --x-font-family-base: "Montserrat", sans-serif;
-  --x-size-font-base-xs: 12px;
-  --x-size-font-base-s: 14px;
-  --x-size-font-base-m: 16px;
-  --x-size-font-base-l: 18px;
-  --x-size-font-base-xl: 32px;
-  --x-number-font-weight-base-light: 300;
-  --x-number-font-weight-base-regular: 400;
-  --x-number-font-weight-base-bold: 600;
-  --x-size-line-height-base-s: 16px;
-  --x-size-line-height-base-m: 24px;
-  --x-size-line-height-base-l: 32px;
-  --x-color-text-default: var(--x-color-base-neutral-10);
-  --x-font-family-text: var(--x-font-family-base);
-  --x-size-font-text: var(--x-size-font-base-s);
-  --x-number-font-weight-text: var(--x-number-font-weight-base-regular);
-  --x-size-line-height-text: var(--x-size-line-height-base-s);
-  --x-string-text-decoration-text: none;
-  --x-font-family-title1: var(--x-font-family-base);
-  --x-size-font-title1: var(--x-size-font-base-xl);
-  --x-number-font-weight-title1: var(--x-number-font-weight-base-regular);
-  --x-size-line-height-title1: var(--x-size-line-height-base-l);
-  --x-string-text-decoration-title1: none;
-  --x-font-family-title2: var(--x-font-family-base);
-  --x-size-font-title2: var(--x-size-font-base-l);
-  --x-number-font-weight-title2: var(--x-number-font-weight-base-regular);
-  --x-size-line-height-title2: var(--x-size-line-height-base-m);
-  --x-string-text-decoration-title2: none;
-  --x-font-family-title3: var(--x-font-family-base);
-  --x-size-font-title3: var(--x-size-font-base-m);
-  --x-number-font-weight-title3: var(--x-number-font-weight-base-regular);
-  --x-size-line-height-title3: var(--x-size-line-height-base-m);
-  --x-string-text-decoration-title3: none;
-  --x-font-family-small: var(--x-font-family-base);
-  --x-size-font-small: var(--x-size-font-base-xs);
-  --x-number-font-weight-small: var(--x-number-font-weight-base-regular);
-  --x-size-line-height-small: var(--x-size-line-height-base-s);
-  --x-string-text-decoration-small: none;
-}
-.x,
-.x-text {
-  font-family: var(--x-font-family-text);
-  font-size: var(--x-size-font-text);
-  font-weight: var(--x-number-font-weight-text);
-  line-height: var(--x-size-line-height-text);
-  -webkit-text-decoration: var(--x-string-text-decoration);
-          text-decoration: var(--x-string-text-decoration);
-  color: var(--x-color-text-default);
-  margin: 0;
-}
-.x-title1 {
-  font-family: var(--x-font-family-title1);
-  font-size: var(--x-size-font-title1);
-  font-weight: var(--x-number-font-weight-title1);
-  line-height: var(--x-size-line-height-title1);
-  -webkit-text-decoration: var(--x-string-text-decoration-title1);
-          text-decoration: var(--x-string-text-decoration-title1);
-  color: var(--x-color-text-default);
-  margin: 0;
-}
-.x-title2 {
-  font-family: var(--x-font-family-title2);
-  font-size: var(--x-size-font-title2);
-  font-weight: var(--x-number-font-weight-title2);
-  line-height: var(--x-size-line-height-title2);
-  -webkit-text-decoration: var(--x-string-text-decoration-title2);
-          text-decoration: var(--x-string-text-decoration-title2);
-  color: var(--x-color-text-default);
-  margin: 0;
-}
-.x-title3 {
-  font-family: var(--x-font-family-title3);
-  font-size: var(--x-size-font-title3);
-  font-weight: var(--x-number-font-weight-title3);
-  line-height: var(--x-size-line-height-title3);
-  -webkit-text-decoration: var(--x-string-text-decoration-title3);
-          text-decoration: var(--x-string-text-decoration-title3);
-  color: var(--x-color-text-default);
-  margin: 0;
-}
-.x-small {
-  font-family: var(--x-font-family-small);
-  font-size: var(--x-size-font-small);
-  font-weight: var(--x-number-font-weight-small);
-  line-height: var(--x-size-line-height-small);
-  -webkit-text-decoration: var(--x-string-text-decoration-small);
-          text-decoration: var(--x-string-text-decoration-small);
-  color: var(--x-color-text-default);
-  margin: 0;
-}
-.x-ellipsis {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
 }

package/docs/API-reference/components/common/animations/x-components.staggering-transition-group.md CHANGED Viewed

@@ -23,11 +23,11 @@ animations.
 ### Basic example
 Apart from all the props and events that the classic transition group has, the staggering transition
-group also exposes a new `stagger` property, which allows to configure the delay for each one of the
-nodes when animating.
+group also exposes a new `staggering` property, which allows to configure the delay for each one of
+the nodes when animating.
 ```vue
-<staggering-transition-group appear :stagger="50" name="staggered-fade-slide-">
+<staggering-transition-group appear :staggering="50" name="staggered-fade-slide-">
   <!-- @slot (Required) Transition-group content -->
   <slot />
 </staggering-transition-group>

package/js/components/animations/staggering-transition-group.vue.js CHANGED Viewed

@@ -9,7 +9,7 @@ const __vue_script__ = script;
   /* style */
   const __vue_inject_styles__ = undefined;
   /* scoped */
-  const __vue_scope_id__ = "data-v-2fdd74eb";
+  const __vue_scope_id__ = "data-v-61b49289";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

package/js/components/animations/staggering-transition-group.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"staggering-transition-group.vue.js","sources":["../../../../src/components/animations/staggering-transition-group.vue"],"sourcesContent":["<script lang=\"ts\">\n import Vue, { CreateElement, VNode } from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { noOp } from '../../utils';\n\n /* eslint-disable @typescript-eslint/unbound-method /\n /\n A replacement component for Vue's transition-group, that also adds the option to stagger\n * the animations.\n \n @public\n /\n @Component\n export default class StaggeringTransitionGroup extends Vue {\n /\n The name of the transition. Used to generate the CSS classes.\n \n @public\n /\n @Prop({ default: 'v' })\n public name!: string;\n\n /\n The CSS move class name.\n \n @public\n /\n @Prop()\n public moveClass!: string;\n\n /\n The tag of the node to render to the DOM.\n \n @public\n /\n @Prop({ default: 'div' })\n public tag!: string;\n\n /\n The time in ms to stagger each item.\n \n @public\n /\n @Prop({ default: 25 })\n public staggering!: number;\n\n /\n The CSS class for the moving transitions.\n \n @returns The move transition name.\n * @internal\n /\n protected get moveClassName(): string {\n return this.moveClass ?? `${this.name}-move`;\n }\n\n /\n The transition data contains the needed events and props to perform a transition using Vue\n * virtual node's API.\n \n The `beforeLeave` hook is extended to also restore the previous position of the element using\n * the position absolute.\n * The `afterEnter` and `afterLeave` hooks are extended to also clean the transition delay\n * applied by the stagger.\n \n @returns The transition data for Vue virtual nodes.\n * @internal\n /\n protected get transitionData(): TransitionData {\n const transitionData: TransitionData = { ...this.$props, ...this.$attrs, ...this.$listeners };\n\n transitionData.beforeLeave = this.addRestorePositionHook(transitionData.beforeLeave);\n transitionData.afterEnter = this.addClearStaggeringCall(transitionData.afterEnter);\n transitionData.afterLeave = this.addClearStaggeringCall(transitionData.afterLeave);\n\n return transitionData;\n }\n\n /\n The list of old virtual nodes, generated by the previous called render method.\n \n @internal\n /\n protected oldChildren!: TransitionVNode[];\n /\n The list of new virtual nodes, generated by the last called render method.\n \n @internal\n /\n protected newChildren!: TransitionVNode[];\n /\n A map containing the previous positions relative to the container, for each item\n * rendered inside the slot of this component.\n * This is used together with the `newPositions` to calculate the move transition.\n \n @internal\n /\n protected oldPositions!: WeakMap<Element, Bounds>;\n /\n A map containing the new positions relative to the container, for each item\n * rendered inside the slot of this component.\n * This is used together with the `newPositions` to calculate the move transition.\n \n @internal\n /\n protected newPositions!: WeakMap<Element, Bounds>;\n /\n A map containing the move cleanup functions pending to have been called. When invoked\n * this functions remove all the styles and classes associated to the move transition.\n \n @internal\n /\n protected pendingCleanupMoveCallbacks!: WeakMap<Element, () => void>;\n /\n The counter for the stagger, used to calculate the delay for the transition of each child\n * element. It is reset every time the render method is triggered.\n \n @internal\n /\n protected staggerCounter!: number;\n /\n The bounds of the container rendered using the `tag` prop. This is used to calculate the\n * relative positions of each leaving child, which are then applied with the position absolute.\n \n @internal\n /\n protected wrapperBounds!: DOMRect;\n\n beforeCreate(): void {\n // Initialize properties here to avoid making them reactive, which would cause infinite loops.\n this.oldChildren = [];\n this.newChildren = [];\n this.oldPositions = new WeakMap();\n this.newPositions = new WeakMap();\n this.pendingCleanupMoveCallbacks = new WeakMap<Element, () => void>();\n this.staggerCounter = 0;\n }\n\n render(createElement: CreateElement): VNode {\n this.staggerCounter = 0;\n // New children are now the old ones\n this.oldChildren = this.newChildren;\n // Only vnodes with a tag (i.e. no HTML comments) and with a `key` property are valid.\n this.newChildren = (this.$slots.default ?? []).filter(this.isTransitionValidVNode);\n\n // Apply transition data to both new and old nodes & store the position of the old nodes.\n this.newChildren.forEach(this.addTransitionData);\n this.oldChildren.forEach(this.syncOldNodes);\n\n return createElement(\n this.tag,\n { staticClass: 'x-staggering-transition-group' },\n this.newChildren\n );\n }\n\n mounted(): void {\n this.newChildren.forEach(this.applyStagger);\n }\n\n beforeUpdate(): void {\n this.wrapperBounds = this.$el.getBoundingClientRect();\n }\n\n updated(): void {\n this.wrapperBounds = this.$el.getBoundingClientRect();\n this.newChildren.forEach(this.recordNewPosition);\n const { leavingNodes, stayingNodes, enteringNodes } = this.getNodesByTransitionType();\n\n leavingNodes.forEach(vNode => {\n this.applyStagger(vNode);\n this.disableClickingEvents(vNode);\n });\n const movedChildren = stayingNodes.filter(this.applyTranslation);\n const movedStagger = movedChildren.map(this.getNextTransitionDelay);\n enteringNodes.forEach(this.applyStagger);\n\n // force reflow to put everything in position\n document.body.getBoundingClientRect();\n\n movedChildren.forEach(this.startMoveAnimation(movedStagger));\n }\n\n /\n Extends the provided leave transition hook restoring the position of the element with an\n * absolute position.\n * Additionally, it removes the element position from the maps of positions.\n \n @param transitionHook - The leave transition hook to extend.\n * @returns The new leave transition hook extended.\n * @internal\n /\n protected addRestorePositionHook(transitionHook: TransitionHook = noOp): TransitionHook {\n return element => {\n const { top, left, width, height } = this.oldPositions.get(element)!;\n const { marginTop, marginLeft } = window.getComputedStyle(element);\n const style = element.style;\n style.position = 'absolute';\n style.top = `${top - parseFloat(marginTop)}px`;\n style.left = `${left - parseFloat(marginLeft)}px`;\n style.width = `${width}px`;\n style.height = `${height}px`;\n this.newPositions.delete(element);\n this.oldPositions.delete(element);\n const pendingCallback = this.pendingCleanupMoveCallbacks.get(element);\n pendingCallback?.();\n transitionHook(element);\n };\n }\n\n /\n Extends the provided transition hook clearing the transition delay.\n \n @param transitionHook - The transition hook to extend.\n * @returns The new transition hook, that also clears the transitionDelay from the element.\n * @internal\n /\n protected addClearStaggeringCall(transitionHook: TransitionHook = noOp): TransitionHook {\n return element => {\n element.style.transitionDelay = '';\n transitionHook(element);\n };\n }\n\n /\n Returns if the vNode contains a non empty key, and a non empty tag.\n \n @param vNode - The VNode to check if it is a valid transition node, containing a `tag` and a\n * `key` property.\n * @returns True when the vNode contains a non empty key and a non empty tag. False otherwise.\n * @internal\n /\n protected isTransitionValidVNode(vNode: VNode): vNode is TransitionVNode {\n // TODO Add warning with logger: <staggering-transition-group> children must be keyed.\n return !!vNode.key && !!vNode.tag;\n }\n\n /\n Adds the generated transition data to the vNode, creating the `data` property if necessary.\n \n @param vNode - The VNode to add the transition data to.\n * @internal\n /\n protected addTransitionData(vNode: TransitionVNode): void {\n if (!vNode.data) {\n vNode.data = {};\n }\n vNode.data.transition = this.transitionData;\n }\n\n /\n Re-applies the transition data to an old node, just in case it changed from the previous\n * render call. It also records the position of the node, to then calculate the move\n * transitions.\n \n @param vNode - The vNode to add the transition data to, and record his current position as\n * old.\n * @internal\n /\n protected syncOldNodes(vNode: TransitionVNode): void {\n // Synchronize transition data, in case it changed in the last frame.\n // We can trust data to be defined because each new node has the transition applied\n vNode.data!.transition = this.transitionData;\n this.recordOldPosition(vNode);\n }\n\n /\n Saves the position of the vNode in the map of old positions.\n \n @param vNode - The node to store its position.\n * @internal\n /\n protected recordOldPosition(vNode: TransitionVNode): void {\n this.oldPositions.set(vNode.elm, this.createRelativeBounds(vNode));\n }\n\n /\n Saves the position of the vNode in the map of new positions.\n \n @param vNode - The node to store its position.\n * @internal\n /\n protected recordNewPosition(vNode: TransitionVNode): void {\n this.newPositions.set(vNode.elm, this.createRelativeBounds(vNode));\n }\n\n /\n Creates an object containing the position of the vNode relative to its container.\n \n @param vNode - The virtual node to store its relative position.\n * @returns The relative bounds of the provided virtual node.\n * @internal\n /\n protected createRelativeBounds(vNode: TransitionVNode): Bounds {\n const { left, top, width, height } = vNode.elm.getBoundingClientRect();\n const { left: wrapperLeft, top: wrapperTop } = this.wrapperBounds;\n return {\n left: left - wrapperLeft,\n top: top - wrapperTop,\n width,\n height\n };\n }\n\n /\n Splits the children of the component into three groups:\n * - Nodes that are leaving.\n * - Nodes that are entering.\n * - Nodes that stay.\n \n This is then used to apply the stagger in the correct order: leave -\\> move -\\> enter.\n \n @returns The children nodes, divided in different groups depending on if they are leaving,\n * staying or entering.\n * @internal\n /\n protected getNodesByTransitionType(): TransitionTypeNodes {\n const leave = this.oldChildren.filter(child => !this.newPositions.has(child.elm));\n const enter = this.newChildren.filter(child => !this.oldPositions.has(child.elm));\n const stay = this.oldChildren.filter(child => this.newPositions.has(child.elm));\n return {\n leavingNodes: leave,\n enteringNodes: enter,\n stayingNodes: stay\n };\n }\n\n /\n Applies an incremental delay to the virtual node element.\n \n @param vNode - The virtual node to apply the stagger to.\n * @internal\n /\n protected applyStagger(vNode: TransitionVNode): void {\n vNode.elm.style.transitionDelay = this.getNextTransitionDelay();\n }\n\n /\n Disables listening to click events in a virtual node element.\n \n @remarks This is done to avoid letting the user click elements that are performing the moving\n * animation to leave the DOM but are still rendered.\n \n @param vNode - The virtual node to disable listening to click events.\n * @internal\n /\n protected disableClickingEvents(vNode: TransitionVNode): void {\n vNode.elm.style.pointerEvents = 'none';\n }\n\n /\n Calculates the next transition delay property, incrementing the `staggerCounter` property\n * each time it is called.\n \n @returns The value for the next element `style.transitionDelay` property.\n * @internal\n /\n protected getNextTransitionDelay(): string {\n return `${this.staggerCounter++ this.staggering}ms`;\n }\n\n /*\n Calculates if the virtual node should have a move transition. If its has it, then it\n * applies it immediately using the `style.transform`.\n \n @param vNode - The virtual node to calculate if it should have a move transition.\n * @returns True when a move transition was applied to the virtual node.\n * @internal\n /\n protected applyTranslation(vNode: TransitionVNode): boolean {\n const oldPosition = this.oldPositions.get(vNode.elm as Element)!;\n const newPosition = this.newPositions.get(vNode.elm as Element)!;\n const dx = oldPosition.left - newPosition.left;\n const dy = oldPosition.top - newPosition.top;\n if (dx !== 0 \|\| dy !== 0) {\n const style = vNode.elm.style;\n style.transform = `translate3d(${dx}px,${dy}px,0)`;\n style.transitionDuration = '0s';\n return true;\n }\n return false;\n }\n\n /\n Generates a function to start the moving animations to each node that it needs them with the\n * provided stagger.\n \n @param moveStagger - A list containing the delay to add to each node.\n * @returns A function that starts the moving animation with the provided stagger to a single\n * virtual node.\n * @internal\n /\n protected startMoveAnimation(\n moveStagger: string[]\n ): (vNode: TransitionVNode, index: number) => void {\n return (vNode, index) => {\n const element = vNode.elm;\n const style = element.style;\n element.classList.add(this.moveClassName);\n style.transform = style.transitionDuration = '';\n style.transitionDelay = moveStagger[index];\n const cleanMoveTransition = (event?: TransitionEvent): void => {\n if (!event \|\| (event.target === element && /transform$/.test(event.propertyName))) {\n element.removeEventListener('transitionend', cleanMoveTransition);\n element.style.transitionDelay = '';\n element.classList.remove(this.moveClassName);\n this.pendingCleanupMoveCallbacks.delete(element);\n }\n };\n this.pendingCleanupMoveCallbacks.set(element, cleanMoveTransition);\n element.addEventListener('transitionend', cleanMoveTransition);\n };\n }\n }\n\n /\n Contains arrays of nodes, splitted by the action they should have.\n /\n interface TransitionTypeNodes {\n leavingNodes: TransitionVNode[];\n stayingNodes: TransitionVNode[];\n enteringNodes: TransitionVNode[];\n }\n\n /\n Safe transition version of the VNode type, with the required non optional properties.\n /\n interface TransitionVNode extends VNode {\n elm: HTMLElement;\n tag: string;\n key: string;\n }\n\n /\n Vue's VNode {@link https://vuejs.org/v2/api/#transition} data props and events.\n /\n interface TransitionData {\n name?: string;\n appear?: boolean;\n css?: boolean;\n type?: 'transition' \| 'animation'; // Unused\n mode?: 'out-in' \| 'in-out'; // Unused\n duration?: number;\n enterClass?: string;\n leaveClass?: string;\n appearClass?: string;\n enterToClass?: string;\n leaveToClass?: string;\n appearToClass?: string;\n enterActiveClass?: string;\n leaveActiveClass?: string;\n appearActiveClass?: string;\n beforeEnter?: TransitionHook;\n enter?: TransitionHook;\n afterEnter?: TransitionHook;\n beforeLeave?: TransitionHook;\n leave?: TransitionHook;\n afterLeave?: TransitionHook;\n }\n\n /\n A function that receives an HTMLElement. Used to perform actions when the different phases\n * of Vue transitions happens.\n /\n type TransitionHook = (element: HTMLElement) => void;\n\n /\n Represents the dimensions and positions of an element.\n */\n interface Bounds {\n top: number;\n left: number;\n width: number;\n height: number;\n }\n</script>\n\n<style lang=\"scss\" scoped>\n .x-staggering-transition-group {\n position: relative;\n }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nApart from all the props and events that the classic transition group has, the staggering transition\ngroup also exposes a new `stagger` property, which allows to configure the delay for each one of the\nnodes when animating.\n\n```vue\n<staggering-transition-group appear :stagger=\"50\" name=\"staggered-fade-slide-\">\n <!-- @slot (Required) Transition-group content -->\n <slot />\n</staggering-transition-group>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"staggering-transition-group.vue.js","sources":["../../../../src/components/animations/staggering-transition-group.vue"],"sourcesContent":["<script lang=\"ts\">\n import Vue, { CreateElement, VNode } from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { noOp } from '../../utils';\n\n /* eslint-disable @typescript-eslint/unbound-method /\n /\n A replacement component for Vue's transition-group, that also adds the option to stagger\n * the animations.\n \n @public\n /\n @Component\n export default class StaggeringTransitionGroup extends Vue {\n /\n The name of the transition. Used to generate the CSS classes.\n \n @public\n /\n @Prop({ default: 'v' })\n public name!: string;\n\n /\n The CSS move class name.\n \n @public\n /\n @Prop()\n public moveClass!: string;\n\n /\n The tag of the node to render to the DOM.\n \n @public\n /\n @Prop({ default: 'div' })\n public tag!: string;\n\n /\n The time in ms to stagger each item.\n \n @public\n /\n @Prop({ default: 25 })\n public staggering!: number;\n\n /\n The CSS class for the moving transitions.\n \n @returns The move transition name.\n * @internal\n /\n protected get moveClassName(): string {\n return this.moveClass ?? `${this.name}-move`;\n }\n\n /\n The transition data contains the needed events and props to perform a transition using Vue\n * virtual node's API.\n \n The `beforeLeave` hook is extended to also restore the previous position of the element using\n * the position absolute.\n * The `afterEnter` and `afterLeave` hooks are extended to also clean the transition delay\n * applied by the stagger.\n \n @returns The transition data for Vue virtual nodes.\n * @internal\n /\n protected get transitionData(): TransitionData {\n const transitionData: TransitionData = { ...this.$props, ...this.$attrs, ...this.$listeners };\n\n transitionData.beforeLeave = this.addRestorePositionHook(transitionData.beforeLeave);\n transitionData.afterEnter = this.addClearStaggeringCall(transitionData.afterEnter);\n transitionData.afterLeave = this.addClearStaggeringCall(transitionData.afterLeave);\n\n return transitionData;\n }\n\n /\n The list of old virtual nodes, generated by the previous called render method.\n \n @internal\n /\n protected oldChildren!: TransitionVNode[];\n /\n The list of new virtual nodes, generated by the last called render method.\n \n @internal\n /\n protected newChildren!: TransitionVNode[];\n /\n A map containing the previous positions relative to the container, for each item\n * rendered inside the slot of this component.\n * This is used together with the `newPositions` to calculate the move transition.\n \n @internal\n /\n protected oldPositions!: WeakMap<Element, Bounds>;\n /\n A map containing the new positions relative to the container, for each item\n * rendered inside the slot of this component.\n * This is used together with the `newPositions` to calculate the move transition.\n \n @internal\n /\n protected newPositions!: WeakMap<Element, Bounds>;\n /\n A map containing the move cleanup functions pending to have been called. When invoked\n * this functions remove all the styles and classes associated to the move transition.\n \n @internal\n /\n protected pendingCleanupMoveCallbacks!: WeakMap<Element, () => void>;\n /\n The counter for the stagger, used to calculate the delay for the transition of each child\n * element. It is reset every time the render method is triggered.\n \n @internal\n /\n protected staggerCounter!: number;\n /\n The bounds of the container rendered using the `tag` prop. This is used to calculate the\n * relative positions of each leaving child, which are then applied with the position absolute.\n \n @internal\n /\n protected wrapperBounds!: DOMRect;\n\n beforeCreate(): void {\n // Initialize properties here to avoid making them reactive, which would cause infinite loops.\n this.oldChildren = [];\n this.newChildren = [];\n this.oldPositions = new WeakMap();\n this.newPositions = new WeakMap();\n this.pendingCleanupMoveCallbacks = new WeakMap<Element, () => void>();\n this.staggerCounter = 0;\n }\n\n render(createElement: CreateElement): VNode {\n this.staggerCounter = 0;\n // New children are now the old ones\n this.oldChildren = this.newChildren;\n // Only vnodes with a tag (i.e. no HTML comments) and with a `key` property are valid.\n this.newChildren = (this.$slots.default ?? []).filter(this.isTransitionValidVNode);\n\n // Apply transition data to both new and old nodes & store the position of the old nodes.\n this.newChildren.forEach(this.addTransitionData);\n this.oldChildren.forEach(this.syncOldNodes);\n\n return createElement(\n this.tag,\n { staticClass: 'x-staggering-transition-group' },\n this.newChildren\n );\n }\n\n mounted(): void {\n this.newChildren.forEach(this.applyStagger);\n }\n\n beforeUpdate(): void {\n this.wrapperBounds = this.$el.getBoundingClientRect();\n }\n\n updated(): void {\n this.wrapperBounds = this.$el.getBoundingClientRect();\n this.newChildren.forEach(this.recordNewPosition);\n const { leavingNodes, stayingNodes, enteringNodes } = this.getNodesByTransitionType();\n\n leavingNodes.forEach(vNode => {\n this.applyStagger(vNode);\n this.disableClickingEvents(vNode);\n });\n const movedChildren = stayingNodes.filter(this.applyTranslation);\n const movedStagger = movedChildren.map(this.getNextTransitionDelay);\n enteringNodes.forEach(this.applyStagger);\n\n // force reflow to put everything in position\n document.body.getBoundingClientRect();\n\n movedChildren.forEach(this.startMoveAnimation(movedStagger));\n }\n\n /\n Extends the provided leave transition hook restoring the position of the element with an\n * absolute position.\n * Additionally, it removes the element position from the maps of positions.\n \n @param transitionHook - The leave transition hook to extend.\n * @returns The new leave transition hook extended.\n * @internal\n /\n protected addRestorePositionHook(transitionHook: TransitionHook = noOp): TransitionHook {\n return element => {\n const { top, left, width, height } = this.oldPositions.get(element)!;\n const { marginTop, marginLeft } = window.getComputedStyle(element);\n const style = element.style;\n style.position = 'absolute';\n style.top = `${top - parseFloat(marginTop)}px`;\n style.left = `${left - parseFloat(marginLeft)}px`;\n style.width = `${width}px`;\n style.height = `${height}px`;\n this.newPositions.delete(element);\n this.oldPositions.delete(element);\n const pendingCallback = this.pendingCleanupMoveCallbacks.get(element);\n pendingCallback?.();\n transitionHook(element);\n };\n }\n\n /\n Extends the provided transition hook clearing the transition delay.\n \n @param transitionHook - The transition hook to extend.\n * @returns The new transition hook, that also clears the transitionDelay from the element.\n * @internal\n /\n protected addClearStaggeringCall(transitionHook: TransitionHook = noOp): TransitionHook {\n return element => {\n element.style.transitionDelay = '';\n transitionHook(element);\n };\n }\n\n /\n Returns if the vNode contains a non empty key, and a non empty tag.\n \n @param vNode - The VNode to check if it is a valid transition node, containing a `tag` and a\n * `key` property.\n * @returns True when the vNode contains a non empty key and a non empty tag. False otherwise.\n * @internal\n /\n protected isTransitionValidVNode(vNode: VNode): vNode is TransitionVNode {\n // TODO Add warning with logger: <staggering-transition-group> children must be keyed.\n return !!vNode.key && !!vNode.tag;\n }\n\n /\n Adds the generated transition data to the vNode, creating the `data` property if necessary.\n \n @param vNode - The VNode to add the transition data to.\n * @internal\n /\n protected addTransitionData(vNode: TransitionVNode): void {\n if (!vNode.data) {\n vNode.data = {};\n }\n vNode.data.transition = this.transitionData;\n }\n\n /\n Re-applies the transition data to an old node, just in case it changed from the previous\n * render call. It also records the position of the node, to then calculate the move\n * transitions.\n \n @param vNode - The vNode to add the transition data to, and record his current position as\n * old.\n * @internal\n /\n protected syncOldNodes(vNode: TransitionVNode): void {\n // Synchronize transition data, in case it changed in the last frame.\n // We can trust data to be defined because each new node has the transition applied\n vNode.data!.transition = this.transitionData;\n this.recordOldPosition(vNode);\n }\n\n /\n Saves the position of the vNode in the map of old positions.\n \n @param vNode - The node to store its position.\n * @internal\n /\n protected recordOldPosition(vNode: TransitionVNode): void {\n this.oldPositions.set(vNode.elm, this.createRelativeBounds(vNode));\n }\n\n /\n Saves the position of the vNode in the map of new positions.\n \n @param vNode - The node to store its position.\n * @internal\n /\n protected recordNewPosition(vNode: TransitionVNode): void {\n this.newPositions.set(vNode.elm, this.createRelativeBounds(vNode));\n }\n\n /\n Creates an object containing the position of the vNode relative to its container.\n \n @param vNode - The virtual node to store its relative position.\n * @returns The relative bounds of the provided virtual node.\n * @internal\n /\n protected createRelativeBounds(vNode: TransitionVNode): Bounds {\n const { left, top, width, height } = vNode.elm.getBoundingClientRect();\n const { left: wrapperLeft, top: wrapperTop } = this.wrapperBounds;\n return {\n left: left - wrapperLeft,\n top: top - wrapperTop,\n width,\n height\n };\n }\n\n /\n Splits the children of the component into three groups:\n * - Nodes that are leaving.\n * - Nodes that are entering.\n * - Nodes that stay.\n \n This is then used to apply the stagger in the correct order: leave -\\> move -\\> enter.\n \n @returns The children nodes, divided in different groups depending on if they are leaving,\n * staying or entering.\n * @internal\n /\n protected getNodesByTransitionType(): TransitionTypeNodes {\n const leave = this.oldChildren.filter(child => !this.newPositions.has(child.elm));\n const enter = this.newChildren.filter(child => !this.oldPositions.has(child.elm));\n const stay = this.oldChildren.filter(child => this.newPositions.has(child.elm));\n return {\n leavingNodes: leave,\n enteringNodes: enter,\n stayingNodes: stay\n };\n }\n\n /\n Applies an incremental delay to the virtual node element.\n \n @param vNode - The virtual node to apply the stagger to.\n * @internal\n /\n protected applyStagger(vNode: TransitionVNode): void {\n vNode.elm.style.transitionDelay = this.getNextTransitionDelay();\n }\n\n /\n Disables listening to click events in a virtual node element.\n \n @remarks This is done to avoid letting the user click elements that are performing the moving\n * animation to leave the DOM but are still rendered.\n \n @param vNode - The virtual node to disable listening to click events.\n * @internal\n /\n protected disableClickingEvents(vNode: TransitionVNode): void {\n vNode.elm.style.pointerEvents = 'none';\n }\n\n /\n Calculates the next transition delay property, incrementing the `staggerCounter` property\n * each time it is called.\n \n @returns The value for the next element `style.transitionDelay` property.\n * @internal\n /\n protected getNextTransitionDelay(): string {\n return `${this.staggerCounter++ this.staggering}ms`;\n }\n\n /*\n Calculates if the virtual node should have a move transition. If its has it, then it\n * applies it immediately using the `style.transform`.\n \n @param vNode - The virtual node to calculate if it should have a move transition.\n * @returns True when a move transition was applied to the virtual node.\n * @internal\n /\n protected applyTranslation(vNode: TransitionVNode): boolean {\n const oldPosition = this.oldPositions.get(vNode.elm as Element)!;\n const newPosition = this.newPositions.get(vNode.elm as Element)!;\n const dx = oldPosition.left - newPosition.left;\n const dy = oldPosition.top - newPosition.top;\n if (dx !== 0 \|\| dy !== 0) {\n const style = vNode.elm.style;\n style.transform = `translate3d(${dx}px,${dy}px,0)`;\n style.transitionDuration = '0s';\n return true;\n }\n return false;\n }\n\n /\n Generates a function to start the moving animations to each node that it needs them with the\n * provided stagger.\n \n @param moveStagger - A list containing the delay to add to each node.\n * @returns A function that starts the moving animation with the provided stagger to a single\n * virtual node.\n * @internal\n /\n protected startMoveAnimation(\n moveStagger: string[]\n ): (vNode: TransitionVNode, index: number) => void {\n return (vNode, index) => {\n const element = vNode.elm;\n const style = element.style;\n element.classList.add(this.moveClassName);\n style.transform = style.transitionDuration = '';\n style.transitionDelay = moveStagger[index];\n const cleanMoveTransition = (event?: TransitionEvent): void => {\n if (!event \|\| (event.target === element && /transform$/.test(event.propertyName))) {\n element.removeEventListener('transitionend', cleanMoveTransition);\n element.style.transitionDelay = '';\n element.classList.remove(this.moveClassName);\n this.pendingCleanupMoveCallbacks.delete(element);\n }\n };\n this.pendingCleanupMoveCallbacks.set(element, cleanMoveTransition);\n element.addEventListener('transitionend', cleanMoveTransition);\n };\n }\n }\n\n /\n Contains arrays of nodes, splitted by the action they should have.\n /\n interface TransitionTypeNodes {\n leavingNodes: TransitionVNode[];\n stayingNodes: TransitionVNode[];\n enteringNodes: TransitionVNode[];\n }\n\n /\n Safe transition version of the VNode type, with the required non optional properties.\n /\n interface TransitionVNode extends VNode {\n elm: HTMLElement;\n tag: string;\n key: string;\n }\n\n /\n Vue's VNode {@link https://vuejs.org/v2/api/#transition} data props and events.\n /\n interface TransitionData {\n name?: string;\n appear?: boolean;\n css?: boolean;\n type?: 'transition' \| 'animation'; // Unused\n mode?: 'out-in' \| 'in-out'; // Unused\n duration?: number;\n enterClass?: string;\n leaveClass?: string;\n appearClass?: string;\n enterToClass?: string;\n leaveToClass?: string;\n appearToClass?: string;\n enterActiveClass?: string;\n leaveActiveClass?: string;\n appearActiveClass?: string;\n beforeEnter?: TransitionHook;\n enter?: TransitionHook;\n afterEnter?: TransitionHook;\n beforeLeave?: TransitionHook;\n leave?: TransitionHook;\n afterLeave?: TransitionHook;\n }\n\n /\n A function that receives an HTMLElement. Used to perform actions when the different phases\n * of Vue transitions happens.\n /\n type TransitionHook = (element: HTMLElement) => void;\n\n /\n Represents the dimensions and positions of an element.\n */\n interface Bounds {\n top: number;\n left: number;\n width: number;\n height: number;\n }\n</script>\n\n<style lang=\"scss\" scoped>\n .x-staggering-transition-group {\n position: relative;\n }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nApart from all the props and events that the classic transition group has, the staggering transition\ngroup also exposes a new `staggering` property, which allows to configure the delay for each one of\nthe nodes when animating.\n\n```vue\n<staggering-transition-group appear :staggering=\"50\" name=\"staggered-fade-slide-\">\n <!-- @slot (Required) Transition-group content -->\n <slot />\n</staggering-transition-group>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/animations/staggering-transition-group.vue3.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
-var css = ".x-staggering-transition-group[data-v-2fdd74eb] {\n  position: relative;\n}";
+var css = ".x-staggering-transition-group[data-v-61b49289] {\n  position: relative;\n}";
            const isBrowser = /*#__PURE__*/ (function () {
              return (
                 Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "5.0.0-alpha.1",
+  "version": "5.0.0-alpha.2",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -143,5 +143,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "fcd417f3140f21f7b454e3bed19ba8587e1bf430"
+  "gitHead": "b109d83a233670bee11ba7d29a8e81b5bb2a801c"
 }