@empathyco/x-components 3.0.0-alpha.43 → 3.0.0-alpha.44

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.44](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.43...@empathyco/x-components@3.0.0-alpha.44) (2022-01-14)
+
+### ⚠ BREAKING CHANGES
+
+- **components:** `SlidingPanel` buttons do not have the round variant set by default.
+
+### Features
+
+- **components:** add `buttonClass` prop in `SlidingPanel`
+  ([fa554a2](https://github.com/empathyco/x/commit/fa554a2231ec9a00b5aea566970c2b7b0d34845f)),
+  closes [EX-5233](https://searchbroker.atlassian.net/browse/EX-5233)
+- **components:** add Result Rating component
+  ([db5cbb5](https://github.com/empathyco/x/commit/db5cbb5779e0e503ec934df4cda3dd241c49fc8e)),
+  closes [EX-5243](https://searchbroker.atlassian.net/browse/EX-5243)
+
+### Bug Fixes
+
+- **design-system:** Fix some style issues and add two missing utilities
+  ([c4ae728](https://github.com/empathyco/x/commit/c4ae728d78b36ee566ca283626e36bf9b6aed07f)),
+  closes [EX-5270](https://searchbroker.atlassian.net/browse/EX-5270)
+- **identifier-results:** Fix default plugin config. (#296)
+  ([68d4b93](https://github.com/empathyco/x/commit/68d4b93f3f8d439814a11055ac657c0bce5accfd)),
+  closes [EX-5247](https://searchbroker.atlassian.net/browse/EX-5247)
+  [EX-5247](https://searchbroker.atlassian.net/browse/EX-5247)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [3.0.0-alpha.43](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.42...@empathyco/x-components@3.0.0-alpha.43) (2022-01-06)
 
 ### Features

package/core/index.js

@@ -123,6 +123,7 @@ export { default as BaseResultLink } from '../js/components/result/base-result-l
 export { default as BaseResultPreviousPrice } from '../js/components/result/base-result-previous-price.vue.js';
 export { default as BaseFallbackImage } from '../js/components/result/base-result-fallback-image.vue.js';
 export { default as BasePlaceholderImage } from '../js/components/result/base-result-placeholder-image.vue.js';
+export { default as BaseResultRating } from '../js/components/result/base-result-rating.vue.js';
 export { default as BaseSuggestion } from '../js/components/suggestions/base-suggestion.vue.js';
 export { default as BaseSuggestions } from '../js/components/suggestions/base-suggestions.vue.js';
 export { default as AutoProgressBar } from '../js/components/auto-progress-bar.vue.js';

package/core/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/design-system/full-theme.css

@@ -1794,6 +1794,139 @@
         margin-right: var(--x-size-gap-list-13);
         margin-bottom: var(--x-size-gap-list-13); } }
 
+.x-list--gap-14.x-list {
+  gap: var(--x-size-gap-list-14); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-14.x-list:not(.x-list--horizontal), .x-list--gap-14.x-list.x-list--vertical {
+      gap: 0; }
+      .x-list--gap-14.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-14.x-list.x-list--vertical > *:not(:last-child) {
+        margin-bottom: var(--x-size-gap-list-14); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-14.x-list.x-list--horizontal {
+      gap: 0; }
+      .x-list--gap-14.x-list.x-list--horizontal > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-14); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-14.x-list.x-list--wrap {
+      gap: 0; }
+      .x-list--gap-14.x-list.x-list--wrap > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-14);
+        margin-bottom: var(--x-size-gap-list-14); } }
+
+.x-list--gap-15.x-list {
+  gap: var(--x-size-gap-list-15); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-15.x-list:not(.x-list--horizontal), .x-list--gap-15.x-list.x-list--vertical {
+      gap: 0; }
+      .x-list--gap-15.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-15.x-list.x-list--vertical > *:not(:last-child) {
+        margin-bottom: var(--x-size-gap-list-15); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-15.x-list.x-list--horizontal {
+      gap: 0; }
+      .x-list--gap-15.x-list.x-list--horizontal > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-15); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-15.x-list.x-list--wrap {
+      gap: 0; }
+      .x-list--gap-15.x-list.x-list--wrap > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-15);
+        margin-bottom: var(--x-size-gap-list-15); } }
+
+.x-list--gap-16.x-list {
+  gap: var(--x-size-gap-list-16); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-16.x-list:not(.x-list--horizontal), .x-list--gap-16.x-list.x-list--vertical {
+      gap: 0; }
+      .x-list--gap-16.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-16.x-list.x-list--vertical > *:not(:last-child) {
+        margin-bottom: var(--x-size-gap-list-16); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-16.x-list.x-list--horizontal {
+      gap: 0; }
+      .x-list--gap-16.x-list.x-list--horizontal > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-16); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-16.x-list.x-list--wrap {
+      gap: 0; }
+      .x-list--gap-16.x-list.x-list--wrap > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-16);
+        margin-bottom: var(--x-size-gap-list-16); } }
+
+.x-list--gap-17.x-list {
+  gap: var(--x-size-gap-list-17); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-17.x-list:not(.x-list--horizontal), .x-list--gap-17.x-list.x-list--vertical {
+      gap: 0; }
+      .x-list--gap-17.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-17.x-list.x-list--vertical > *:not(:last-child) {
+        margin-bottom: var(--x-size-gap-list-17); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-17.x-list.x-list--horizontal {
+      gap: 0; }
+      .x-list--gap-17.x-list.x-list--horizontal > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-17); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-17.x-list.x-list--wrap {
+      gap: 0; }
+      .x-list--gap-17.x-list.x-list--wrap > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-17);
+        margin-bottom: var(--x-size-gap-list-17); } }
+
+.x-list--gap-18.x-list {
+  gap: var(--x-size-gap-list-18); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-18.x-list:not(.x-list--horizontal), .x-list--gap-18.x-list.x-list--vertical {
+      gap: 0; }
+      .x-list--gap-18.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-18.x-list.x-list--vertical > *:not(:last-child) {
+        margin-bottom: var(--x-size-gap-list-18); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-18.x-list.x-list--horizontal {
+      gap: 0; }
+      .x-list--gap-18.x-list.x-list--horizontal > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-18); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-18.x-list.x-list--wrap {
+      gap: 0; }
+      .x-list--gap-18.x-list.x-list--wrap > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-18);
+        margin-bottom: var(--x-size-gap-list-18); } }
+
+.x-list--gap-19.x-list {
+  gap: var(--x-size-gap-list-19); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-19.x-list:not(.x-list--horizontal), .x-list--gap-19.x-list.x-list--vertical {
+      gap: 0; }
+      .x-list--gap-19.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-19.x-list.x-list--vertical > *:not(:last-child) {
+        margin-bottom: var(--x-size-gap-list-19); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-19.x-list.x-list--horizontal {
+      gap: 0; }
+      .x-list--gap-19.x-list.x-list--horizontal > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-19); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-19.x-list.x-list--wrap {
+      gap: 0; }
+      .x-list--gap-19.x-list.x-list--wrap > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-19);
+        margin-bottom: var(--x-size-gap-list-19); } }
+
+.x-list--gap-20.x-list {
+  gap: var(--x-size-gap-list-20); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-20.x-list:not(.x-list--horizontal), .x-list--gap-20.x-list.x-list--vertical {
+      gap: 0; }
+      .x-list--gap-20.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-20.x-list.x-list--vertical > *:not(:last-child) {
+        margin-bottom: var(--x-size-gap-list-20); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-20.x-list.x-list--horizontal {
+      gap: 0; }
+      .x-list--gap-20.x-list.x-list--horizontal > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-20); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-20.x-list.x-list--wrap {
+      gap: 0; }
+      .x-list--gap-20.x-list.x-list--wrap > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-20);
+        margin-bottom: var(--x-size-gap-list-20); } }
+
 :root {
   --x-size-gap-list-01: var(--x-size-base-01);
   --x-size-gap-list-02: var(--x-size-base-02);
@@ -1807,7 +1940,14 @@
   --x-size-gap-list-10: var(--x-size-base-10);
   --x-size-gap-list-11: var(--x-size-base-11);
   --x-size-gap-list-12: var(--x-size-base-12);
-  --x-size-gap-list-13: var(--x-size-base-13); }
+  --x-size-gap-list-13: var(--x-size-base-13);
+  --x-size-gap-list-14: var(--x-size-base-14);
+  --x-size-gap-list-15: var(--x-size-base-15);
+  --x-size-gap-list-16: var(--x-size-base-16);
+  --x-size-gap-list-17: var(--x-size-base-17);
+  --x-size-gap-list-18: var(--x-size-base-18);
+  --x-size-gap-list-19: var(--x-size-base-19);
+  --x-size-gap-list-20: var(--x-size-base-20); }
 
 /* @deprecated */
 @use 'sass:string';
@@ -2735,6 +2875,9 @@
   --x-size-span-row-item: 1;
   --x-size-start-row-item: 0; }
 
+.x-row--gap-01 {
+  --x-size-gap-row: var(--x-size-gap-row-01); }
+
 .x-row--gap-02 {
   --x-size-gap-row: var(--x-size-gap-row-02); }
 
@@ -2750,12 +2893,69 @@
 .x-row--gap-06 {
   --x-size-gap-row: var(--x-size-gap-row-06); }
 
+.x-row--gap-07 {
+  --x-size-gap-row: var(--x-size-gap-row-07); }
+
+.x-row--gap-08 {
+  --x-size-gap-row: var(--x-size-gap-row-08); }
+
+.x-row--gap-09 {
+  --x-size-gap-row: var(--x-size-gap-row-09); }
+
+.x-row--gap-10 {
+  --x-size-gap-row: var(--x-size-gap-row-10); }
+
+.x-row--gap-11 {
+  --x-size-gap-row: var(--x-size-gap-row-11); }
+
+.x-row--gap-12 {
+  --x-size-gap-row: var(--x-size-gap-row-12); }
+
+.x-row--gap-13 {
+  --x-size-gap-row: var(--x-size-gap-row-13); }
+
+.x-row--gap-14 {
+  --x-size-gap-row: var(--x-size-gap-row-14); }
+
+.x-row--gap-15 {
+  --x-size-gap-row: var(--x-size-gap-row-15); }
+
+.x-row--gap-16 {
+  --x-size-gap-row: var(--x-size-gap-row-16); }
+
+.x-row--gap-17 {
+  --x-size-gap-row: var(--x-size-gap-row-17); }
+
+.x-row--gap-18 {
+  --x-size-gap-row: var(--x-size-gap-row-18); }
+
+.x-row--gap-19 {
+  --x-size-gap-row: var(--x-size-gap-row-19); }
+
+.x-row--gap-20 {
+  --x-size-gap-row: var(--x-size-gap-row-20); }
+
 :root {
+  --x-size-gap-row-01: var(--x-size-base-01);
   --x-size-gap-row-02: var(--x-size-base-02);
   --x-size-gap-row-03: var(--x-size-base-03);
   --x-size-gap-row-04: var(--x-size-base-04);
   --x-size-gap-row-05: var(--x-size-base-05);
-  --x-size-gap-row-06: var(--x-size-base-06); }
+  --x-size-gap-row-06: var(--x-size-base-06);
+  --x-size-gap-row-07: var(--x-size-base-07);
+  --x-size-gap-row-08: var(--x-size-base-08);
+  --x-size-gap-row-09: var(--x-size-base-09);
+  --x-size-gap-row-10: var(--x-size-base-10);
+  --x-size-gap-row-11: var(--x-size-base-11);
+  --x-size-gap-row-12: var(--x-size-base-12);
+  --x-size-gap-row-13: var(--x-size-base-13);
+  --x-size-gap-row-14: var(--x-size-base-14);
+  --x-size-gap-row-15: var(--x-size-base-15);
+  --x-size-gap-row-16: var(--x-size-base-16);
+  --x-size-gap-row-17: var(--x-size-base-17);
+  --x-size-gap-row-18: var(--x-size-base-18);
+  --x-size-gap-row-19: var(--x-size-base-19);
+  --x-size-gap-row-20: var(--x-size-base-20); }
 
 /* @deprecated */
 .x-row--padding-02 {
@@ -5491,6 +5691,36 @@
 .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;
+  -webkit-box-orient: vertical !important;
+  -webkit-line-clamp: 2 !important; }
+
+.x-line-clamp--3 {
+  overflow: hidden !important;
+  display: -webkit-box !important;
+  -webkit-box-orient: vertical !important;
+  -webkit-line-clamp: 3 !important; }
+
+.x-line-clamp--4 {
+  overflow: hidden !important;
+  display: -webkit-box !important;
+  -webkit-box-orient: vertical !important;
+  -webkit-line-clamp: 4 !important; }
+
+.x-line-clamp--5 {
+  overflow: hidden !important;
+  display: -webkit-box !important;
+  -webkit-box-orient: vertical !important;
+  -webkit-line-clamp: 5 !important; }
+
+.x-line-clamp--6 {
+  overflow: hidden !important;
+  display: -webkit-box !important;
+  -webkit-box-orient: vertical !important;
+  -webkit-line-clamp: 6 !important; }
+
 .x-line-height--none {
   line-height: 1 !important; }
 
@@ -6412,6 +6642,21 @@
 [dir="rtl"] .x-padding--left-20 {
   padding-right: var(--x-size-base-20) !important; }
 
+.x-static {
+  position: static !important; }
+
+.x-fixed {
+  position: fixed !important; }
+
+.x-absolute {
+  position: absolute !important; }
+
+.x-relative {
+  position: relative !important; }
+
+.x-sticky {
+  position: sticky !important; }
+
 .x-underline {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline; }

package/design-system/list-gap.css

@@ -11,7 +11,14 @@
   --x-size-gap-list-10: var(--x-size-base-10);
   --x-size-gap-list-11: var(--x-size-base-11);
   --x-size-gap-list-12: var(--x-size-base-12);
-  --x-size-gap-list-13: var(--x-size-base-13); }
+  --x-size-gap-list-13: var(--x-size-base-13);
+  --x-size-gap-list-14: var(--x-size-base-14);
+  --x-size-gap-list-15: var(--x-size-base-15);
+  --x-size-gap-list-16: var(--x-size-base-16);
+  --x-size-gap-list-17: var(--x-size-base-17);
+  --x-size-gap-list-18: var(--x-size-base-18);
+  --x-size-gap-list-19: var(--x-size-base-19);
+  --x-size-gap-list-20: var(--x-size-base-20); }
 
 @use 'sass:string';
 .x-list--gap-01.x-list {
@@ -260,3 +267,136 @@
       .x-list--gap-13.x-list.x-list--wrap > *:not(:last-child) {
         margin-right: var(--x-size-gap-list-13);
         margin-bottom: var(--x-size-gap-list-13); } }
+
+.x-list--gap-14.x-list {
+  gap: var(--x-size-gap-list-14); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-14.x-list:not(.x-list--horizontal), .x-list--gap-14.x-list.x-list--vertical {
+      gap: 0; }
+      .x-list--gap-14.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-14.x-list.x-list--vertical > *:not(:last-child) {
+        margin-bottom: var(--x-size-gap-list-14); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-14.x-list.x-list--horizontal {
+      gap: 0; }
+      .x-list--gap-14.x-list.x-list--horizontal > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-14); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-14.x-list.x-list--wrap {
+      gap: 0; }
+      .x-list--gap-14.x-list.x-list--wrap > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-14);
+        margin-bottom: var(--x-size-gap-list-14); } }
+
+.x-list--gap-15.x-list {
+  gap: var(--x-size-gap-list-15); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-15.x-list:not(.x-list--horizontal), .x-list--gap-15.x-list.x-list--vertical {
+      gap: 0; }
+      .x-list--gap-15.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-15.x-list.x-list--vertical > *:not(:last-child) {
+        margin-bottom: var(--x-size-gap-list-15); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-15.x-list.x-list--horizontal {
+      gap: 0; }
+      .x-list--gap-15.x-list.x-list--horizontal > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-15); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-15.x-list.x-list--wrap {
+      gap: 0; }
+      .x-list--gap-15.x-list.x-list--wrap > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-15);
+        margin-bottom: var(--x-size-gap-list-15); } }
+
+.x-list--gap-16.x-list {
+  gap: var(--x-size-gap-list-16); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-16.x-list:not(.x-list--horizontal), .x-list--gap-16.x-list.x-list--vertical {
+      gap: 0; }
+      .x-list--gap-16.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-16.x-list.x-list--vertical > *:not(:last-child) {
+        margin-bottom: var(--x-size-gap-list-16); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-16.x-list.x-list--horizontal {
+      gap: 0; }
+      .x-list--gap-16.x-list.x-list--horizontal > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-16); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-16.x-list.x-list--wrap {
+      gap: 0; }
+      .x-list--gap-16.x-list.x-list--wrap > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-16);
+        margin-bottom: var(--x-size-gap-list-16); } }
+
+.x-list--gap-17.x-list {
+  gap: var(--x-size-gap-list-17); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-17.x-list:not(.x-list--horizontal), .x-list--gap-17.x-list.x-list--vertical {
+      gap: 0; }
+      .x-list--gap-17.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-17.x-list.x-list--vertical > *:not(:last-child) {
+        margin-bottom: var(--x-size-gap-list-17); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-17.x-list.x-list--horizontal {
+      gap: 0; }
+      .x-list--gap-17.x-list.x-list--horizontal > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-17); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-17.x-list.x-list--wrap {
+      gap: 0; }
+      .x-list--gap-17.x-list.x-list--wrap > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-17);
+        margin-bottom: var(--x-size-gap-list-17); } }
+
+.x-list--gap-18.x-list {
+  gap: var(--x-size-gap-list-18); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-18.x-list:not(.x-list--horizontal), .x-list--gap-18.x-list.x-list--vertical {
+      gap: 0; }
+      .x-list--gap-18.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-18.x-list.x-list--vertical > *:not(:last-child) {
+        margin-bottom: var(--x-size-gap-list-18); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-18.x-list.x-list--horizontal {
+      gap: 0; }
+      .x-list--gap-18.x-list.x-list--horizontal > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-18); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-18.x-list.x-list--wrap {
+      gap: 0; }
+      .x-list--gap-18.x-list.x-list--wrap > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-18);
+        margin-bottom: var(--x-size-gap-list-18); } }
+
+.x-list--gap-19.x-list {
+  gap: var(--x-size-gap-list-19); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-19.x-list:not(.x-list--horizontal), .x-list--gap-19.x-list.x-list--vertical {
+      gap: 0; }
+      .x-list--gap-19.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-19.x-list.x-list--vertical > *:not(:last-child) {
+        margin-bottom: var(--x-size-gap-list-19); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-19.x-list.x-list--horizontal {
+      gap: 0; }
+      .x-list--gap-19.x-list.x-list--horizontal > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-19); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-19.x-list.x-list--wrap {
+      gap: 0; }
+      .x-list--gap-19.x-list.x-list--wrap > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-19);
+        margin-bottom: var(--x-size-gap-list-19); } }
+
+.x-list--gap-20.x-list {
+  gap: var(--x-size-gap-list-20); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-20.x-list:not(.x-list--horizontal), .x-list--gap-20.x-list.x-list--vertical {
+      gap: 0; }
+      .x-list--gap-20.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-20.x-list.x-list--vertical > *:not(:last-child) {
+        margin-bottom: var(--x-size-gap-list-20); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-20.x-list.x-list--horizontal {
+      gap: 0; }
+      .x-list--gap-20.x-list.x-list--horizontal > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-20); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-20.x-list.x-list--wrap {
+      gap: 0; }
+      .x-list--gap-20.x-list.x-list--wrap > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-20);
+        margin-bottom: var(--x-size-gap-list-20); } }

package/design-system/row-gap.css

@@ -1,9 +1,27 @@
 :root {
+  --x-size-gap-row-01: var(--x-size-base-01);
   --x-size-gap-row-02: var(--x-size-base-02);
   --x-size-gap-row-03: var(--x-size-base-03);
   --x-size-gap-row-04: var(--x-size-base-04);
   --x-size-gap-row-05: var(--x-size-base-05);
-  --x-size-gap-row-06: var(--x-size-base-06); }
+  --x-size-gap-row-06: var(--x-size-base-06);
+  --x-size-gap-row-07: var(--x-size-base-07);
+  --x-size-gap-row-08: var(--x-size-base-08);
+  --x-size-gap-row-09: var(--x-size-base-09);
+  --x-size-gap-row-10: var(--x-size-base-10);
+  --x-size-gap-row-11: var(--x-size-base-11);
+  --x-size-gap-row-12: var(--x-size-base-12);
+  --x-size-gap-row-13: var(--x-size-base-13);
+  --x-size-gap-row-14: var(--x-size-base-14);
+  --x-size-gap-row-15: var(--x-size-base-15);
+  --x-size-gap-row-16: var(--x-size-base-16);
+  --x-size-gap-row-17: var(--x-size-base-17);
+  --x-size-gap-row-18: var(--x-size-base-18);
+  --x-size-gap-row-19: var(--x-size-base-19);
+  --x-size-gap-row-20: var(--x-size-base-20); }
+
+.x-row--gap-01 {
+  --x-size-gap-row: var(--x-size-gap-row-01); }
 
 .x-row--gap-02 {
   --x-size-gap-row: var(--x-size-gap-row-02); }
@@ -19,3 +37,45 @@
 
 .x-row--gap-06 {
   --x-size-gap-row: var(--x-size-gap-row-06); }
+
+.x-row--gap-07 {
+  --x-size-gap-row: var(--x-size-gap-row-07); }
+
+.x-row--gap-08 {
+  --x-size-gap-row: var(--x-size-gap-row-08); }
+
+.x-row--gap-09 {
+  --x-size-gap-row: var(--x-size-gap-row-09); }
+
+.x-row--gap-10 {
+  --x-size-gap-row: var(--x-size-gap-row-10); }
+
+.x-row--gap-11 {
+  --x-size-gap-row: var(--x-size-gap-row-11); }
+
+.x-row--gap-12 {
+  --x-size-gap-row: var(--x-size-gap-row-12); }
+
+.x-row--gap-13 {
+  --x-size-gap-row: var(--x-size-gap-row-13); }
+
+.x-row--gap-14 {
+  --x-size-gap-row: var(--x-size-gap-row-14); }
+
+.x-row--gap-15 {
+  --x-size-gap-row: var(--x-size-gap-row-15); }
+
+.x-row--gap-16 {
+  --x-size-gap-row: var(--x-size-gap-row-16); }
+
+.x-row--gap-17 {
+  --x-size-gap-row: var(--x-size-gap-row-17); }
+
+.x-row--gap-18 {
+  --x-size-gap-row: var(--x-size-gap-row-18); }
+
+.x-row--gap-19 {
+  --x-size-gap-row: var(--x-size-gap-row-19); }
+
+.x-row--gap-20 {
+  --x-size-gap-row: var(--x-size-gap-row-20); }

package/design-system/utilities-line-clamp.css

@@ -0,0 +1,29 @@
+.x-line-clamp--2 {
+  overflow: hidden !important;
+  display: -webkit-box !important;
+  -webkit-box-orient: vertical !important;
+  -webkit-line-clamp: 2 !important; }
+
+.x-line-clamp--3 {
+  overflow: hidden !important;
+  display: -webkit-box !important;
+  -webkit-box-orient: vertical !important;
+  -webkit-line-clamp: 3 !important; }
+
+.x-line-clamp--4 {
+  overflow: hidden !important;
+  display: -webkit-box !important;
+  -webkit-box-orient: vertical !important;
+  -webkit-line-clamp: 4 !important; }
+
+.x-line-clamp--5 {
+  overflow: hidden !important;
+  display: -webkit-box !important;
+  -webkit-box-orient: vertical !important;
+  -webkit-line-clamp: 5 !important; }
+
+.x-line-clamp--6 {
+  overflow: hidden !important;
+  display: -webkit-box !important;
+  -webkit-box-orient: vertical !important;
+  -webkit-line-clamp: 6 !important; }

package/design-system/utilities-position.css

@@ -0,0 +1,14 @@
+.x-static {
+  position: static !important; }
+
+.x-fixed {
+  position: fixed !important; }
+
+.x-absolute {
+  position: absolute !important; }
+
+.x-relative {
+  position: relative !important; }
+
+.x-sticky {
+  position: sticky !important; }

package/docs/API-reference/api/x-components.baseresultrating.link.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [BaseResultRating](./x-components.baseresultrating.md) &gt; [link](./x-components.baseresultrating.link.md)
+
+## BaseResultRating.link property
+
+A link to redirect when rating is clicked.
+
+<b>Signature:</b>
+
+```typescript
+protected link: string;
+```

package/docs/API-reference/api/x-components.baseresultrating.md

@@ -0,0 +1,22 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [BaseResultRating](./x-components.baseresultrating.md)
+
+## BaseResultRating class
+
+This component renders a [BaseRating](./x-components.baserating.md) for a result passed as prop.
+
+<b>Signature:</b>
+
+```typescript
+export default class BaseResultRating extends Vue 
+```
+<b>Extends:</b> Vue
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [link](./x-components.baseresultrating.link.md) |  | string | A link to redirect when rating is clicked. |
+|  [result](./x-components.baseresultrating.result.md) |  | Result | The [Result](./x-types.result.md) to render its rating. |
+

package/docs/API-reference/api/x-components.baseresultrating.result.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [BaseResultRating](./x-components.baseresultrating.md) &gt; [result](./x-components.baseresultrating.result.md)
+
+## BaseResultRating.result property
+
+The [Result](./x-types.result.md) to render its rating.
+
+<b>Signature:</b>
+
+```typescript
+protected result: Result;
+```

package/docs/API-reference/api/x-components.md

@@ -42,6 +42,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [BaseResultImage](./x-components.baseresultimage.md) | Component to be reused that renders an <code>&lt;img&gt;</code>. |
 |  [BaseResultLink](./x-components.baseresultlink.md) | Component to be reused that renders an <code>&lt;a&gt;</code> wrapping the result contents. |
 |  [BaseResultPreviousPrice](./x-components.baseresultpreviousprice.md) | Component that renders the [result](./x-types.result.md) previous price. |
+|  [BaseResultRating](./x-components.baseresultrating.md) | This component renders a [BaseRating](./x-components.baserating.md) for a result passed as prop. |
 |  [BaseScroll](./x-components.basescroll.md) | Base scroll component that depending on the user interactivity emits different events for knowing when the user scrolls, the direction of scroll and if user reaches the start or end. |
 |  [BaseSuggestion](./x-components.basesuggestion.md) | Renders a button with a default slot. It receives a query, which should be the query of the module using this component, a suggestion, the [XEvents](./x-components.xevent.md) that will be emitted on click with a given feature.<!-- -->The default slot receives the suggestion and the matched query has props. |
 |  [BaseSuggestions](./x-components.basesuggestions.md) | Paints a list of suggestions passed in by prop. Requires a component for a single suggestion in the default slot for working. |