@empathyco/x-components 3.0.0-alpha.58 → 3.0.0-alpha.60

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 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.60](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.59...@empathyco/x-components@3.0.0-alpha.60) (2022-02-24)
+
+### Features
+
+- **facets:** add facets mixin to share logic between components
+  ([c8a9046](https://github.com/empathyco/x/commit/c8a904612213cd12040dd6fa1348f6c9a7726eda)),
+  closes [EX-2899](https://searchbroker.atlassian.net/browse/EX-2899)
+
+### Testing
+
+- **e2e:** fix `tagging` using the `mockedAdapter` and replacing `fetch` for `sendBeacon`
+  ([cf06d2f](https://github.com/empathyco/x/commit/cf06d2f7e9aff3987bc14fa46cd65eace402e612)),
+  closes [EX-5374](https://searchbroker.atlassian.net/browse/EX-5374)
+
+# 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.59](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.58...@empathyco/x-components@3.0.0-alpha.59) (2022-02-17)
+
+### Features
+
+- **design-system:** add `curated` modifier to the `suggestion`
+  ([dd229fd](https://github.com/empathyco/x/commit/dd229fd3d64840ed3041bec618a1a23e3726430d)),
+  closes [EX-5290](https://searchbroker.atlassian.net/browse/EX-5290)
+
+# 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.58](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.57...@empathyco/x-components@3.0.0-alpha.58) (2022-02-16)
 
 ### Features

package/core/index.js

@@ -136,7 +136,7 @@ export { getURLParameter } from '../js/utils/get-url-parameters.js';
 export { isElementEqualOrContained } from '../js/utils/html.js';
 export { normalizeString } from '../js/utils/normalize.js';
 export { isInRange } from '../js/utils/number.js';
-export { cleanUndefined, forEach, getNewAndUpdatedKeys, map, objectFilter, reduce } from '../js/utils/object.js';
+export { cleanUndefined, every, forEach, getNewAndUpdatedKeys, map, objectFilter, reduce } from '../js/utils/object.js';
 export { createOrigin } from '../js/utils/origin.js';
 export { sanitize } from '../js/utils/sanitize.js';
 export { localStorageService } from '../js/utils/storage.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/default-theme.css

@@ -1877,6 +1877,134 @@
   --x-size-span-row-item: 1;
   --x-size-start-row-item: 0;
 }
+
+.x-row {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-template-rows: 1fr;
+  justify-items: var(--x-size-justify-row);
+  align-items: var(--x-size-align-row);
+  padding: var(--x-size-padding-row);
+  gap: var(--x-size-gap-row);
+  margin: 0;
+}
+.x-row__item {
+  grid-column-start: var(--x-size-start-row-item);
+  grid-column-end: span var(--x-size-span-row-item);
+  list-style: none;
+}
+.x-row__item--span-1 {
+  --x-size-span-row-item: 1;
+}
+.x-row__item--span-2 {
+  --x-size-span-row-item: 2;
+}
+.x-row__item--span-3 {
+  --x-size-span-row-item: 3;
+}
+.x-row__item--span-4 {
+  --x-size-span-row-item: 4;
+}
+.x-row__item--span-5 {
+  --x-size-span-row-item: 5;
+}
+.x-row__item--span-6 {
+  --x-size-span-row-item: 6;
+}
+.x-row__item--span-7 {
+  --x-size-span-row-item: 7;
+}
+.x-row__item--span-8 {
+  --x-size-span-row-item: 8;
+}
+.x-row__item--span-9 {
+  --x-size-span-row-item: 9;
+}
+.x-row__item--span-10 {
+  --x-size-span-row-item: 10;
+}
+.x-row__item--span-11 {
+  --x-size-span-row-item: 11;
+}
+.x-row__item--span-12 {
+  --x-size-span-row-item: 12;
+}
+.x-row__item--start-1 {
+  --x-size-start-row-item: 1;
+}
+.x-row__item--start-2 {
+  --x-size-start-row-item: 2;
+}
+.x-row__item--start-3 {
+  --x-size-start-row-item: 3;
+}
+.x-row__item--start-4 {
+  --x-size-start-row-item: 4;
+}
+.x-row__item--start-5 {
+  --x-size-start-row-item: 5;
+}
+.x-row__item--start-6 {
+  --x-size-start-row-item: 6;
+}
+.x-row__item--start-7 {
+  --x-size-start-row-item: 7;
+}
+.x-row__item--start-8 {
+  --x-size-start-row-item: 8;
+}
+.x-row__item--start-9 {
+  --x-size-start-row-item: 9;
+}
+.x-row__item--start-10 {
+  --x-size-start-row-item: 10;
+}
+.x-row__item--start-11 {
+  --x-size-start-row-item: 11;
+}
+.x-row__item--start-12 {
+  --x-size-start-row-item: 12;
+}
+
+.x-row--justify-start {
+  --x-size-justify-row: start;
+}
+
+.x-row--align-start {
+  --x-size-align-row: start;
+}
+
+.x-row--justify-center {
+  --x-size-justify-row: center;
+}
+
+.x-row--align-center {
+  --x-size-align-row: center;
+}
+
+.x-row--justify-end {
+  --x-size-justify-row: end;
+}
+
+.x-row--align-end {
+  --x-size-align-row: end;
+}
+
+.x-row--justify-stretch {
+  --x-size-justify-row: stretch;
+}
+
+.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-string-overflow-scroll: auto;
   --x-color-background-scroll-bar: transparent;
@@ -2106,6 +2234,11 @@
   --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
   --x-color-background-suggestion-default: transparent;
   --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
+  --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
+  --x-color-text-suggestion-matching-part-default-curated: var(--x-color-text-suggestion-matching-part-default);
+  --x-color-text-suggestion-default-matching-curated: var(--x-color-text-suggestion-default-matching);
+  --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
+  --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
   --x-size-padding-top-suggestion-default: var(--x-size-base-01);
   --x-size-padding-right-suggestion-default: 0;
   --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
@@ -2139,6 +2272,26 @@
   --x-number-font-weight-suggestion-default-matching: var(
     --x-number-font-weight-suggestion-default
   );
+  --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default);
+  --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default);
+  --x-number-font-weight-suggestion-default-curated: var(--x-number-font-weight-suggestion-default);
+  --x-font-family-suggestion-matching-part-default-curated: var(--x-font-family-suggestion-matching-part-default);
+  --x-size-font-suggestion-matching-part-default-curated: var(--x-size-font-suggestion-matching-part-default);
+  --x-size-line-height-suggestion-matching-part-default-curated: var(
+                  --x-size-line-height-suggestion-matching-part-default
+  );
+  --x-number-font-weight-suggestion-matching-part-default-curated: var(
+                  --x-number-font-weight-suggestion-matching-part-default
+  );
+  --x-font-family-suggestion-default-matching-curated: var(--x-font-family-suggestion-default-matching);
+  --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
+  --x-size-line-height-suggestion-default-matching-curated: var(
+                  --x-size-line-height-suggestion-default-matching
+  );
+  --x-number-font-weight-suggestion-default-matching-curated: var(
+                  --x-number-font-weight-suggestion-default-matching
+  );
 }
 
 [dir="ltr"] .x-suggestion {
@@ -2233,6 +2386,32 @@
 .x-suggestion > .x-identifier-result {
   flex: none;
 }
+.x-suggestion.x-suggestion.x-suggestion--is-curated {
+  background-color: var(--x-color-background-suggestion-default-curated);
+  color: var(--x-color-text-suggestion-default-curated);
+  border-color: var(--x-color-border-suggestion-default-curated);
+  font-family: var(--x-font-family-suggestion-default-curated);
+  font-size: var(--x-size-font-suggestion-default-curated);
+  line-height: var(--x-size-line-height-suggestion-default-curated);
+  font-weight: var(--x-number-font-weight-suggestion-default-curated);
+}
+.x-suggestion.x-suggestion.x-suggestion--is-curated .x-suggestion__matching-part,
+.x-suggestion.x-suggestion.x-suggestion--is-curated .x-identifier-result__matching-part {
+  font-family: var(--x-font-family-suggestion-matching-part-default-curated);
+  font-size: var(--x-size-font-suggestion-matching-part-default-curated);
+  line-height: var(--x-size-line-height-suggestion-matching-part-default-curated);
+  font-weight: var(--x-number-font-weight-suggestion-matching-part-default-curated);
+  color: var(--x-color-text-suggestion-matching-part-default-curated);
+}
+.x-suggestion.x-suggestion.x-suggestion--is-curated.x-suggestion--matching {
+  --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default-matching-curated);
+  --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default-matching-curated);
+  --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default-matching-curated);
+  --x-number-font-weight-suggestion-default-curated: var(
+                  --x-number-font-weight-suggestion-default-matching-curated
+  );
+  --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default-matching-curated);
+}
 :root {
   --x-string-align-items-suggestion-default: center;
   --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -2240,6 +2419,11 @@
   --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
   --x-color-background-suggestion-default: transparent;
   --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
+  --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
+  --x-color-text-suggestion-matching-part-default-curated: var(--x-color-text-suggestion-matching-part-default);
+  --x-color-text-suggestion-default-matching-curated: var(--x-color-text-suggestion-default-matching);
+  --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
+  --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
   --x-size-padding-top-suggestion-default: var(--x-size-base-01);
   --x-size-padding-right-suggestion-default: 0;
   --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
@@ -2273,6 +2457,26 @@
   --x-number-font-weight-suggestion-default-matching: var(
     --x-number-font-weight-suggestion-default
   );
+  --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default);
+  --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default);
+  --x-number-font-weight-suggestion-default-curated: var(--x-number-font-weight-suggestion-default);
+  --x-font-family-suggestion-matching-part-default-curated: var(--x-font-family-suggestion-matching-part-default);
+  --x-size-font-suggestion-matching-part-default-curated: var(--x-size-font-suggestion-matching-part-default);
+  --x-size-line-height-suggestion-matching-part-default-curated: var(
+                  --x-size-line-height-suggestion-matching-part-default
+  );
+  --x-number-font-weight-suggestion-matching-part-default-curated: var(
+                  --x-number-font-weight-suggestion-matching-part-default
+  );
+  --x-font-family-suggestion-default-matching-curated: var(--x-font-family-suggestion-default-matching);
+  --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
+  --x-size-line-height-suggestion-default-matching-curated: var(
+                  --x-size-line-height-suggestion-default-matching
+  );
+  --x-number-font-weight-suggestion-default-matching-curated: var(
+                  --x-number-font-weight-suggestion-default-matching
+  );
 }
 :root {
   --x-color-background-tag-default: var(--x-color-base-neutral-100);
@@ -2698,132 +2902,4 @@
   --x-size-line-height-base-s: 16px;
   --x-size-line-height-base-m: 24px;
   --x-size-line-height-base-l: 32px;
-}
-: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;
-  grid-template-columns: repeat(12, 1fr);
-  grid-template-rows: 1fr;
-  justify-items: var(--x-size-justify-row);
-  align-items: var(--x-size-align-row);
-  padding: var(--x-size-padding-row);
-  gap: var(--x-size-gap-row);
-  margin: 0;
-}
-.x-row__item {
-  grid-column-start: var(--x-size-start-row-item);
-  grid-column-end: span var(--x-size-span-row-item);
-  list-style: none;
-}
-.x-row__item--span-1 {
-  --x-size-span-row-item: 1;
-}
-.x-row__item--span-2 {
-  --x-size-span-row-item: 2;
-}
-.x-row__item--span-3 {
-  --x-size-span-row-item: 3;
-}
-.x-row__item--span-4 {
-  --x-size-span-row-item: 4;
-}
-.x-row__item--span-5 {
-  --x-size-span-row-item: 5;
-}
-.x-row__item--span-6 {
-  --x-size-span-row-item: 6;
-}
-.x-row__item--span-7 {
-  --x-size-span-row-item: 7;
-}
-.x-row__item--span-8 {
-  --x-size-span-row-item: 8;
-}
-.x-row__item--span-9 {
-  --x-size-span-row-item: 9;
-}
-.x-row__item--span-10 {
-  --x-size-span-row-item: 10;
-}
-.x-row__item--span-11 {
-  --x-size-span-row-item: 11;
-}
-.x-row__item--span-12 {
-  --x-size-span-row-item: 12;
-}
-.x-row__item--start-1 {
-  --x-size-start-row-item: 1;
-}
-.x-row__item--start-2 {
-  --x-size-start-row-item: 2;
-}
-.x-row__item--start-3 {
-  --x-size-start-row-item: 3;
-}
-.x-row__item--start-4 {
-  --x-size-start-row-item: 4;
-}
-.x-row__item--start-5 {
-  --x-size-start-row-item: 5;
-}
-.x-row__item--start-6 {
-  --x-size-start-row-item: 6;
-}
-.x-row__item--start-7 {
-  --x-size-start-row-item: 7;
-}
-.x-row__item--start-8 {
-  --x-size-start-row-item: 8;
-}
-.x-row__item--start-9 {
-  --x-size-start-row-item: 9;
-}
-.x-row__item--start-10 {
-  --x-size-start-row-item: 10;
-}
-.x-row__item--start-11 {
-  --x-size-start-row-item: 11;
-}
-.x-row__item--start-12 {
-  --x-size-start-row-item: 12;
-}
-
-.x-row--justify-start {
-  --x-size-justify-row: start;
-}
-
-.x-row--align-start {
-  --x-size-align-row: start;
-}
-
-.x-row--justify-center {
-  --x-size-justify-row: center;
-}
-
-.x-row--align-center {
-  --x-size-align-row: center;
-}
-
-.x-row--justify-end {
-  --x-size-justify-row: end;
-}
-
-.x-row--align-end {
-  --x-size-align-row: end;
-}
-
-.x-row--justify-stretch {
-  --x-size-justify-row: stretch;
-}
-
-.x-row--align-stretch {
-  --x-size-align-row: stretch;
 }

package/design-system/full-theme.css

@@ -3812,6 +3812,32 @@
 .x-suggestion > .x-identifier-result {
   flex: none;
 }
+.x-suggestion.x-suggestion.x-suggestion--is-curated {
+  background-color: var(--x-color-background-suggestion-default-curated);
+  color: var(--x-color-text-suggestion-default-curated);
+  border-color: var(--x-color-border-suggestion-default-curated);
+  font-family: var(--x-font-family-suggestion-default-curated);
+  font-size: var(--x-size-font-suggestion-default-curated);
+  line-height: var(--x-size-line-height-suggestion-default-curated);
+  font-weight: var(--x-number-font-weight-suggestion-default-curated);
+}
+.x-suggestion.x-suggestion.x-suggestion--is-curated .x-suggestion__matching-part,
+.x-suggestion.x-suggestion.x-suggestion--is-curated .x-identifier-result__matching-part {
+  font-family: var(--x-font-family-suggestion-matching-part-default-curated);
+  font-size: var(--x-size-font-suggestion-matching-part-default-curated);
+  line-height: var(--x-size-line-height-suggestion-matching-part-default-curated);
+  font-weight: var(--x-number-font-weight-suggestion-matching-part-default-curated);
+  color: var(--x-color-text-suggestion-matching-part-default-curated);
+}
+.x-suggestion.x-suggestion.x-suggestion--is-curated.x-suggestion--matching {
+  --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default-matching-curated);
+  --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default-matching-curated);
+  --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default-matching-curated);
+  --x-number-font-weight-suggestion-default-curated: var(
+                  --x-number-font-weight-suggestion-default-matching-curated
+  );
+  --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default-matching-curated);
+}
 :root {
   --x-string-align-items-suggestion-default: center;
   --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -3819,6 +3845,11 @@
   --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
   --x-color-background-suggestion-default: transparent;
   --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
+  --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
+  --x-color-text-suggestion-matching-part-default-curated: var(--x-color-text-suggestion-matching-part-default);
+  --x-color-text-suggestion-default-matching-curated: var(--x-color-text-suggestion-default-matching);
+  --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
+  --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
   --x-size-padding-top-suggestion-default: var(--x-size-base-01);
   --x-size-padding-right-suggestion-default: 0;
   --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
@@ -3852,6 +3883,26 @@
   --x-number-font-weight-suggestion-default-matching: var(
     --x-number-font-weight-suggestion-default
   );
+  --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default);
+  --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default);
+  --x-number-font-weight-suggestion-default-curated: var(--x-number-font-weight-suggestion-default);
+  --x-font-family-suggestion-matching-part-default-curated: var(--x-font-family-suggestion-matching-part-default);
+  --x-size-font-suggestion-matching-part-default-curated: var(--x-size-font-suggestion-matching-part-default);
+  --x-size-line-height-suggestion-matching-part-default-curated: var(
+                  --x-size-line-height-suggestion-matching-part-default
+  );
+  --x-number-font-weight-suggestion-matching-part-default-curated: var(
+                  --x-number-font-weight-suggestion-matching-part-default
+  );
+  --x-font-family-suggestion-default-matching-curated: var(--x-font-family-suggestion-default-matching);
+  --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
+  --x-size-line-height-suggestion-default-matching-curated: var(
+                  --x-size-line-height-suggestion-default-matching
+  );
+  --x-number-font-weight-suggestion-default-matching-curated: var(
+                  --x-number-font-weight-suggestion-default-matching
+  );
 }
 .x-tag--card.x-tag,
 .x-tag--card .x-tag {

package/design-system/suggestion-default.css

@@ -5,6 +5,11 @@
   --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
   --x-color-background-suggestion-default: transparent;
   --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
+  --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
+  --x-color-text-suggestion-matching-part-default-curated: var(--x-color-text-suggestion-matching-part-default);
+  --x-color-text-suggestion-default-matching-curated: var(--x-color-text-suggestion-default-matching);
+  --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
+  --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
   --x-size-padding-top-suggestion-default: var(--x-size-base-01);
   --x-size-padding-right-suggestion-default: 0;
   --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
@@ -38,6 +43,26 @@
   --x-number-font-weight-suggestion-default-matching: var(
     --x-number-font-weight-suggestion-default
   );
+  --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default);
+  --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default);
+  --x-number-font-weight-suggestion-default-curated: var(--x-number-font-weight-suggestion-default);
+  --x-font-family-suggestion-matching-part-default-curated: var(--x-font-family-suggestion-matching-part-default);
+  --x-size-font-suggestion-matching-part-default-curated: var(--x-size-font-suggestion-matching-part-default);
+  --x-size-line-height-suggestion-matching-part-default-curated: var(
+                  --x-size-line-height-suggestion-matching-part-default
+  );
+  --x-number-font-weight-suggestion-matching-part-default-curated: var(
+                  --x-number-font-weight-suggestion-matching-part-default
+  );
+  --x-font-family-suggestion-default-matching-curated: var(--x-font-family-suggestion-default-matching);
+  --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
+  --x-size-line-height-suggestion-default-matching-curated: var(
+                  --x-size-line-height-suggestion-default-matching
+  );
+  --x-number-font-weight-suggestion-default-matching-curated: var(
+                  --x-number-font-weight-suggestion-default-matching
+  );
 }
 
 [dir="ltr"] .x-suggestion {
@@ -131,4 +156,30 @@
 }
 .x-suggestion > .x-identifier-result {
   flex: none;
+}
+.x-suggestion.x-suggestion.x-suggestion--is-curated {
+  background-color: var(--x-color-background-suggestion-default-curated);
+  color: var(--x-color-text-suggestion-default-curated);
+  border-color: var(--x-color-border-suggestion-default-curated);
+  font-family: var(--x-font-family-suggestion-default-curated);
+  font-size: var(--x-size-font-suggestion-default-curated);
+  line-height: var(--x-size-line-height-suggestion-default-curated);
+  font-weight: var(--x-number-font-weight-suggestion-default-curated);
+}
+.x-suggestion.x-suggestion.x-suggestion--is-curated .x-suggestion__matching-part,
+.x-suggestion.x-suggestion.x-suggestion--is-curated .x-identifier-result__matching-part {
+  font-family: var(--x-font-family-suggestion-matching-part-default-curated);
+  font-size: var(--x-size-font-suggestion-matching-part-default-curated);
+  line-height: var(--x-size-line-height-suggestion-matching-part-default-curated);
+  font-weight: var(--x-number-font-weight-suggestion-matching-part-default-curated);
+  color: var(--x-color-text-suggestion-matching-part-default-curated);
+}
+.x-suggestion.x-suggestion.x-suggestion--is-curated.x-suggestion--matching {
+  --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default-matching-curated);
+  --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default-matching-curated);
+  --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default-matching-curated);
+  --x-number-font-weight-suggestion-default-curated: var(
+                  --x-number-font-weight-suggestion-default-matching-curated
+  );
+  --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default-matching-curated);
 }

package/docs/API-reference/api/x-components.basesuggestion.highlightcurated.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; [BaseSuggestion](./x-components.basesuggestion.md) &gt; [highlightCurated](./x-components.basesuggestion.highlightcurated.md)
+
+## BaseSuggestion.highlightCurated property
+
+Indicates if the curated suggestion should be highlighted.
+
+<b>Signature:</b>
+
+```typescript
+protected highlightCurated: boolean;
+```

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

@@ -22,6 +22,7 @@ export default class BaseSuggestion extends Vue
 |  [dynamicCSSClasses](./x-components.basesuggestion.dynamiccssclasses.md) |  | [VueCSSClasses](./x-components.vuecssclasses.md) | Generates css classes dynamically. |
 |  [events](./x-components.basesuggestion.events.md) |  | Partial&lt;[XEventsTypes](./x-components.xeventstypes.md)<!-- -->&gt; | The event handler that will be triggered when clicking on a suggestion. |
 |  [feature?](./x-components.basesuggestion.feature.md) |  | [QueryFeature](./x-components.queryfeature.md) | <i>(Optional)</i> The feature from which the events will be emitted. |
+|  [highlightCurated](./x-components.basesuggestion.highlightcurated.md) |  | boolean | Indicates if the curated suggestion should be highlighted. |
 |  [query](./x-components.basesuggestion.query.md) |  | string | The normalized query of the module using this component. |
 |  [queryHTML](./x-components.basesuggestion.queryhtml.md) |  | string | Highlights the matching part of the suggestion query with the query passed as prop of the component putting it inside a <code>&lt;span&gt;</code> tag. |
 |  [suggestion](./x-components.basesuggestion.suggestion.md) |  | Suggestion | The suggestion to render and use in the default slot. |

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

@@ -9,14 +9,11 @@ Renders a simple button, emitting the needed events when clicked.
 <b>Signature:</b>
 
 ```typescript
-export default class ClearFilters extends Vue 
+export default class ClearFilters extends FacetsMixin 
 ```
-<b>Extends:</b> Vue
+<b>Extends:</b> FacetsMixin
 
-## Properties
+## Remarks
 
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [alwaysVisible](./x-components.clearfilters.alwaysvisible.md) |  | boolean | It handles if the ClearFilters button is always visible no matter if there are not filters selected. If false, the ClearFilters button is not visible whether there are no filters selected. |
-|  [facetsIds?](./x-components.clearfilters.facetsids.md) |  | Array&lt;Facet\['id'\]&gt; | <i>(Optional)</i> Array of facets ids that will be passed to event like payload. |
+It extends [FacetsMixin](./x-components.facetsmixin.md)<!-- -->.
 

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

@@ -0,0 +1,27 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [every](./x-components.every.md)
+
+## every() function
+
+Ensures that the given condition is met in all the non-undefined entries of the object.
+
+<b>Signature:</b>
+
+```typescript
+export declare function every<ObjectType extends Dictionary>(object: ObjectType, condition: (key: keyof ObjectType, value: Exclude<ObjectType[keyof ObjectType], undefined>, index: number) => boolean): boolean;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  object | ObjectType | The object to check if every item meets the given condition. |
+|  condition | (key: keyof ObjectType, value: Exclude&lt;ObjectType\[keyof ObjectType\], undefined&gt;, index: number) =&gt; boolean | The condition to check in each one of the entries of the object. |
+
+<b>Returns:</b>
+
+boolean
+
+True when all the entries pass the condition. False otherwise.
+

package/docs/API-reference/api/x-components.facetsmixin.alwaysvisible.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; [FacetsMixin](./x-components.facetsmixin.md) &gt; [alwaysVisible](./x-components.facetsmixin.alwaysvisible.md)
+
+## FacetsMixin.alwaysVisible property
+
+Flag to render the component even if there are no filters selected.
+
+<b>Signature:</b>
+
+```typescript
+alwaysVisible: boolean;
+```

package/docs/API-reference/api/x-components.facetsmixin.facetsids.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; [FacetsMixin](./x-components.facetsmixin.md) &gt; [facetsIds](./x-components.facetsmixin.facetsids.md)
+
+## FacetsMixin.facetsIds property
+
+Array of facets ids used to get the selected filters for those facets.
+
+<b>Signature:</b>
+
+```typescript
+facetsIds?: Array<Facet['id']>;
+```