@empathyco/x-components 4.0.0-alpha.0 → 4.0.0-alpha.1

package/CHANGELOG.md

@@ -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.
 
+## [4.0.0-alpha.1](https://github.com/empathyco/x/compare/@empathyco/x-components@4.0.0-alpha.0...@empathyco/x-components@4.0.0-alpha.1) (2023-11-20)
+
+
+### Bug Fixes
+
+* use `cypress run` for headless testing (#1357) ([bc88050](https://github.com/empathyco/x/commit/bc88050a6c525e65d8b0e2d1adacf5d823df9137))
+
+
+
 ## [4.0.0-alpha.0](https://github.com/empathyco/x/compare/@empathyco/x-components@3.1.0-alpha.3...@empathyco/x-components@4.0.0-alpha.0) (2023-11-16)
 
 

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

@@ -978,7 +978,6 @@
 .x-line-height--loose {
   line-height: 2 !important;
 }
-
 .x-line-clamp--2 {
   overflow: hidden !important;
   display: -webkit-box !important;
@@ -1145,49 +1144,6 @@
 .x-font-color--transparent {
   color: var(--x-color-base-transparent) !important;
 }
-.x-fill--lead {
-  fill: var(--x-color-base-lead) !important;
-}
-
-.x-fill--auxiliary {
-  fill: var(--x-color-base-auxiliary) !important;
-}
-
-.x-fill--neutral-10 {
-  fill: var(--x-color-base-neutral-10) !important;
-}
-
-.x-fill--neutral-35 {
-  fill: var(--x-color-base-neutral-35) !important;
-}
-
-.x-fill--neutral-70 {
-  fill: var(--x-color-base-neutral-70) !important;
-}
-
-.x-fill--neutral-95 {
-  fill: var(--x-color-base-neutral-95) !important;
-}
-
-.x-fill--neutral-100 {
-  fill: var(--x-color-base-neutral-100) !important;
-}
-
-.x-fill--accent {
-  fill: var(--x-color-base-accent) !important;
-}
-
-.x-fill--enable {
-  fill: var(--x-color-base-enable) !important;
-}
-
-.x-fill--disable {
-  fill: var(--x-color-base-disable) !important;
-}
-
-.x-fill--transparent {
-  fill: var(--x-color-base-transparent) !important;
-}
 .x-flex-1 {
   flex: 1 1 0% !important;
 }
@@ -1231,6 +1187,49 @@
 .x-self-baseline {
   align-self: baseline !important;
 }
+.x-fill--lead {
+  fill: var(--x-color-base-lead) !important;
+}
+
+.x-fill--auxiliary {
+  fill: var(--x-color-base-auxiliary) !important;
+}
+
+.x-fill--neutral-10 {
+  fill: var(--x-color-base-neutral-10) !important;
+}
+
+.x-fill--neutral-35 {
+  fill: var(--x-color-base-neutral-35) !important;
+}
+
+.x-fill--neutral-70 {
+  fill: var(--x-color-base-neutral-70) !important;
+}
+
+.x-fill--neutral-95 {
+  fill: var(--x-color-base-neutral-95) !important;
+}
+
+.x-fill--neutral-100 {
+  fill: var(--x-color-base-neutral-100) !important;
+}
+
+.x-fill--accent {
+  fill: var(--x-color-base-accent) !important;
+}
+
+.x-fill--enable {
+  fill: var(--x-color-base-enable) !important;
+}
+
+.x-fill--disable {
+  fill: var(--x-color-base-disable) !important;
+}
+
+.x-fill--transparent {
+  fill: var(--x-color-base-transparent) !important;
+}
 .dev-mode .slot-helper {
   font-family: inherit;
   color: grey;
@@ -3448,6 +3447,46 @@
   --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 {
@@ -3510,46 +3549,6 @@
   overflow: hidden;
   white-space: nowrap;
 }
-: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-text--bold.x-text {
   --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
 }
@@ -3578,13 +3577,6 @@
   --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
   --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
 }
-: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);
-  --x-size-border-radius-top-right-tag-pill: var(--x-size-border-radius-tag-pill);
-  --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
-  --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
-}
 
 .x-tag--pill.x-tag,
 .x-tag--pill .x-tag {
@@ -3596,6 +3588,13 @@
   );
   --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-pill);
 }
+: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);
+  --x-size-border-radius-top-right-tag-pill: var(--x-size-border-radius-tag-pill);
+  --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
+  --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
+}
 :root {
   --x-color-background-tag-ghost: transparent;
   --x-color-border-tag-ghost: transparent;
@@ -4405,6 +4404,13 @@
   --x-size-padding-sliding-panel-button: var(--x-size-base-03);
   --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
 }
+:root {
+  --x-string-overflow-scroll: auto;
+  --x-color-background-scroll-bar: transparent;
+  --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
+  --x-color-background-scroll-bar-hover: transparent;
+  --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
+}
 .x-sliding-panel {
   z-index: 0;
   background-color: var(--x-color-background-sliding-panel);
@@ -4470,13 +4476,6 @@
   --x-color-background-scroll-bar-hover: transparent;
   --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
 }
-:root {
-  --x-string-overflow-scroll: auto;
-  --x-color-background-scroll-bar: transparent;
-  --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
-  --x-color-background-scroll-bar-hover: transparent;
-  --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
-}
 
 .x-scroll {
   overflow-y: var(--x-string-overflow-scroll);
@@ -4677,14 +4676,6 @@
   --x-size-span-row-item: 1;
   --x-size-start-row-item: 0;
 }
-:root {
-  --x-size-gap-row: 0;
-  --x-size-padding-row: 0;
-  --x-size-justify-row: stretch;
-  --x-size-align-row: center;
-  --x-size-span-row-item: 1;
-  --x-size-start-row-item: 0;
-}
 
 .x-row {
   display: grid;
@@ -4805,6 +4796,14 @@
 .x-row--align-stretch {
   --x-size-align-row: stretch;
 }
+:root {
+  --x-size-gap-row: 0;
+  --x-size-padding-row: 0;
+  --x-size-justify-row: stretch;
+  --x-size-align-row: center;
+  --x-size-span-row-item: 1;
+  --x-size-start-row-item: 0;
+}
 :root {
   --x-color-border-result-default: var(--x-color-base-lead);
   --x-color-border-result-overlay-default: var(--x-color-border-result-default);
@@ -5041,26 +5040,6 @@
   --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
   --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
 }
-:root {
-  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
-  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
-}
-
-.x-picture--cover.x-picture {
-  position: relative;
-}
-
-.x-result:hover .x-picture--cover:after,
-.x-picture--cover:hover:after {
-  content: "";
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  background: linear-gradient(to bottom, var(--x-color-background-picture-cover-hover-from) 50%, var(--x-color-background-picture-cover-hover-to) 100%);
-  width: 100%;
-  height: 100%;
-}
 :root {
   --x-color-background-picture-colored: var(--x-color-base-neutral-95);
   --x-mix-blend-mode-picture-colored: multiply;
@@ -7417,6 +7396,12 @@
 .x-grid-list--cols-auto .x-grid-list__item {
   min-width: var(--x-size-min-width-grid-item);
 }
+.x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
+.x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
+.x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
+.x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
+  margin-left: auto;
+}
 :root {
   --x-size-margin-filter-children: 0;
   --x-size-padding-top-filter-children: 0;
@@ -8462,6 +8447,13 @@
   --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);
+  --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
+  --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);
@@ -8490,13 +8482,6 @@
   --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-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);
-  --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
-  --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);
-}
 
 .x-button--round.x-button,
 .x-button--round .x-button {
@@ -8553,11 +8538,6 @@
   --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
   --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
 }
-:root {
-  --x-color-background-button-ghost: transparent;
-  --x-color-border-button-ghost: transparent;
-  --x-color-text-button-ghost: var(--x-color-base-lead);
-}
 :root {
   --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
   --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
@@ -8585,6 +8565,11 @@
   --x-color-border-button-ghost: transparent;
   --x-color-text-button-ghost: var(--x-color-base-lead);
 }
+:root {
+  --x-color-background-button-ghost: transparent;
+  --x-color-border-button-ghost: transparent;
+  --x-color-text-button-ghost: var(--x-color-base-lead);
+}
 
 .x-button--ghost.x-button,
 .x-button--ghost .x-button {
@@ -8625,13 +8610,6 @@
   --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
   --x-size-line-height-button-default: var(--x-size-line-height-text);
 }
-:root {
-  --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
-}
 :root {
   --x-color-background-button-default: var(--x-color-base-lead);
   --x-color-border-button-default: var(--x-color-background-button-default);
@@ -8718,14 +8696,11 @@
   }
 }
 :root {
-  --x-color-background-badge-default: var(--x-color-base-neutral-10);
-  --x-color-text-badge-default: var(--x-color-base-neutral-100);
-  --x-color-border-badge-default: var(--x-color-base-neutral-10);
-  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
-  --x-size-border-width-badge-default: 0;
-  --x-size-width-badge-default: 1.5em;
-  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
-  --x-size-font-badge-default: var(--x-size-font-base-xs);
+  --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
 }
 :root {
   --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
@@ -8759,6 +8734,16 @@
   --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
   --x-size-font-badge-default: var(--x-size-font-base-xs);
 }
+:root {
+  --x-color-background-badge-default: var(--x-color-base-neutral-10);
+  --x-color-text-badge-default: var(--x-color-base-neutral-100);
+  --x-color-border-badge-default: var(--x-color-base-neutral-10);
+  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
+  --x-size-border-width-badge-default: 0;
+  --x-size-width-badge-default: 1.5em;
+  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
+  --x-size-font-badge-default: var(--x-size-font-base-xs);
+}
 
 [dir="ltr"] .x-badge {
   right: calc(var(--x-size-width-badge-default) / 4);
@@ -8840,9 +8825,24 @@
   --x-size-border-radius-base-pill: 99999px;
   --x-size-border-width-base: 1px;
 }
-.x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
-.x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
-.x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
-.x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
-  margin-left: auto;
+
+:root {
+  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
+  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
+}
+
+.x-picture--cover.x-picture {
+  position: relative;
+}
+
+.x-result:hover .x-picture--cover:after,
+.x-picture--cover:hover:after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: linear-gradient(to bottom, var(--x-color-background-picture-cover-hover-from) 50%, var(--x-color-background-picture-cover-hover-to) 100%);
+  width: 100%;
+  height: 100%;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "4.0.0-alpha.0",
+  "version": "4.0.0-alpha.1",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -59,9 +59,9 @@
     "test:unit-watch": "jest --watch",
     "test:e2e": "start-server-and-test preview http://localhost:8080 cypress:open",
     "test:e2e:firefox": "start-server-and-test serve http://localhost:8080 cypress:open:firefox",
-    "test:e2e:ci": "start-server-and-test serve http://localhost:8080 cypress:open:ci",
+    "test:e2e:ci": "start-server-and-test serve http://localhost:8080 cypress:run:ci",
     "test": "pnpm run test:unit && pnpm run test:e2e:ci",
-    "cypress:open:ci": "cypress open --e2e --headless --browser chrome",
+    "cypress:run:ci": "cypress run --e2e --headless --browser chrome",
     "cypress:open": "cypress open --e2e --browser chrome",
     "cypress:open:firefox": "cypress open --e2e --browser firefox",
     "cypress:open:component": "cypress open --component --browser chrome",
@@ -144,5 +144,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "dddefe3f775ffe06de6fc8c56e3076991e429829"
+  "gitHead": "d58959b631114a7973f8485538e1ac3a35777171"
 }