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

package/CHANGELOG.md

@@ -3,6 +3,97 @@
 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.48](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.47...@empathyco/x-components@3.0.0-alpha.48) (2022-02-02)
+
+### ⚠ BREAKING CHANGES
+
+- **facets:** Remove `BaseFilter` component. Use `RenderlessFilter`instead.
+
+### Features
+
+- **design-system:** add curated tags (#311)
+  ([9f40c2b](https://github.com/empathyco/x/commit/9f40c2b17eb08353efc964dba075470877eead46)),
+  closes [EX-5089](https://searchbroker.atlassian.net/browse/EX-5089)
+- **extra-params:** add option to add more extra params using a prop in `SnippetConfigExtraParams`
+  component
+  ([7f9f8b2](https://github.com/empathyco/x/commit/7f9f8b2a7d2a78ed5a101f6e005fffa4f20d3594)),
+  closes [EX-5205](https://searchbroker.atlassian.net/browse/EX-5205)
+- **facets:** change `NumberRangeFilter` component to use `RenderlessFilter` instead of `BaseFilter`
+  ([f0edfac](https://github.com/empathyco/x/commit/f0edfac14a184ed7fefd27e1c1e700848ada4471)),
+  closes [EX-3953](https://searchbroker.atlassian.net/browse/EX-3953)
+- update polyfills plugin to work with chunks
+  ([54c1842](https://github.com/empathyco/x/commit/54c18420011e5e452bd8b48d640cbd067d0ce921)),
+  closes [EX-5278](https://searchbroker.atlassian.net/browse/EX-5278)
+
+# 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.47](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.46...@empathyco/x-components@3.0.0-alpha.47) (2022-02-01)
+
+### Features
+
+- **components:** Add `payload` and `metadata` to the `SnippetCallbackExecuted` event payload
+  ([a18b8fa](https://github.com/empathyco/x/commit/a18b8fafcc7607fef82d3c9fb1211669f3bbc8a3)),
+  closes [EX-5324](https://searchbroker.atlassian.net/browse/EX-5324)
+- **components:** Allow `BaseResultAddToCart` to use external listeners.
+  ([a596c07](https://github.com/empathyco/x/commit/a596c07c1ead0e8d3fcf169afddaf15ad6d92e47)),
+  closes [EX-5323](https://searchbroker.atlassian.net/browse/EX-5323)
+- **EX-3539:** track PDP add to cart (#306)
+  ([dcad4f6](https://github.com/empathyco/x/commit/dcad4f69ce6b267960f882b3831459e372086272)),
+  closes [EX-3539](https://searchbroker.atlassian.net/browse/EX-3539)
+  [EX-3538](https://searchbroker.atlassian.net/browse/EX-3538)
+
+# 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.46](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.45...@empathyco/x-components@3.0.0-alpha.46) (2022-01-24)
+
+### Bug Fixes
+
+- **components:** Fix BaseGrid auto columns CSS. (#308)
+  ([77563f0](https://github.com/empathyco/x/commit/77563f0eb71d806fb2cefb88b750c4852918b8c0)),
+  closes [EX-5295](https://searchbroker.atlassian.net/browse/EX-5295)
+
+### Build System
+
+- Fix colors.js dependency issue
+  ([2ffcc22](https://github.com/empathyco/x/commit/2ffcc222f5666d7866c8d7cd3a0eec7c0bb1f938)),
+  closes [EX-5293](https://searchbroker.atlassian.net/browse/EX-5293)
+
+# 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.45](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.44...@empathyco/x-components@3.0.0-alpha.45) (2022-01-20)
+
+### Features
+
+- **design-system:** allow suggestions to be tags
+  ([24c94bb](https://github.com/empathyco/x/commit/24c94bb604f87a2135a36be5a298f053eba80738)),
+  closes [EX-4917](https://searchbroker.atlassian.net/browse/EX-4917)
+
+### Bug Fixes
+
+- **url:** default `extra params` are now properly restored
+  ([5540929](https://github.com/empathyco/x/commit/554092985a394e1d2b6087b1129282993da7e8c6)),
+  closes [EX-5203](https://searchbroker.atlassian.net/browse/EX-5203)
+
+### Testing
+
+- **e2e:** make `tagging` tests wait for redirection before assertion
+  ([f98cd25](https://github.com/empathyco/x/commit/f98cd254084f60893b1eb723d4081bf0c0f44166)),
+  closes [EX-5273](https://searchbroker.atlassian.net/browse/EX-5273)
+
+# 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.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

package/build-helpers/plugins/polyfills-wrapper.plugin.js

@@ -20,12 +20,11 @@ export default function xComponentsPolyfillsWrapperPlugin(polyfillsOptions) {
       if (!chunk.isEntry) {
         return null;
       }
-      const appMagicString = new MagicString(code);
+      const importString = chunk.imports[0] ? `await import('./${chunk.imports[0]}')` : code;
+      const appMagicString = new MagicString(importString);
       const [header, footer] = generateWrapperFunctionTuple(polyfillsOptions);
 
-      appMagicString
-        .prepend(`(${ header }`)
-        .append(`${ footer })()`);
+      appMagicString.prepend(`(${header}`).append(`${footer})()`);
 
       return {
         code: appMagicString.toString(),
@@ -33,4 +32,4 @@ export default function xComponentsPolyfillsWrapperPlugin(polyfillsOptions) {
       };
     }
   };
-};
+}

package/build-helpers/utils/polyfills.util.js

@@ -43,7 +43,7 @@ export function generateWrapperFunctionTuple({
       document.body.appendChild(polyfillsScript);
     }
 
-    function loadXComponents() {
+    async function loadXComponents() {
       /* <InsertXComponents> */
       const overrideOptions = options;
       if (window.initX !== undefined) {

package/core/index.js

@@ -63,6 +63,7 @@ export { default as ChevronTinyUpIcon } from '../js/components/icons/chevron-tin
 export { default as ChevronUpIcon } from '../js/components/icons/chevron-up.vue.js';
 export { default as CrossTinyIcon } from '../js/components/icons/cross-tiny.vue.js';
 export { default as CrossIcon } from '../js/components/icons/cross.vue.js';
+export { default as CuratedCheckIcon } from '../js/components/icons/curated-check.vue.js';
 export { default as FiltersIcon } from '../js/components/icons/filters.vue.js';
 export { default as Grid1ColIcon } from '../js/components/icons/grid-1-col.vue.js';
 export { default as Grid2ColIcon } from '../js/components/icons/grid-2-col.vue.js';
@@ -70,6 +71,8 @@ export { default as Grid2RowsIcon } from '../js/components/icons/grid-2-rows.vue
 export { default as HideIcon } from '../js/components/icons/hide.vue.js';
 export { default as HistoryTinyIcon } from '../js/components/icons/history-tiny.vue.js';
 export { default as HistoryIcon } from '../js/components/icons/history.vue.js';
+export { default as LightBulbOff } from '../js/components/icons/light-bulb-off.vue.js';
+export { default as LightBulbOn } from '../js/components/icons/light-bulb-on.vue.js';
 export { default as MenuIcon } from '../js/components/icons/menu.vue.js';
 export { default as MinusTinyIcon } from '../js/components/icons/minus-tiny.vue.js';
 export { default as MinusIcon } from '../js/components/icons/minus.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/default-theme.css

@@ -1821,11 +1821,22 @@
   --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);
@@ -1840,14 +1851,21 @@
   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;
-  align-items: flex-start;
   box-sizing: border-box;
-  border: none;
   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);
@@ -1855,7 +1873,11 @@
   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); }
+  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; }
@@ -1863,7 +1885,8 @@
         margin-right: var(--x-size-gap-suggestion-group-default); } }
   .x-suggestion-group .x-suggestion {
     padding: 0;
-    flex: 1 1 auto; }
+    flex: 1 1 auto;
+    border: none; }
   .x-suggestion-group .x-button {
     --x-color-background-button-default: transparent;
     --x-color-border-button-default: transparent;
@@ -1877,11 +1900,22 @@
   --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);
@@ -1893,11 +1927,22 @@
   --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
   --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-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);
   --x-size-padding-left-suggestion-default: 0;
   --x-size-gap-suggestion-default: var(--x-size-base-03);
+  --x-size-border-width-suggestion-default: 0;
+  --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-suggestion-default: var(--x-size-border-radius-suggestion-default);
+  --x-size-border-radius-top-right-suggestion-default: var(--x-size-border-radius-suggestion-default);
+  --x-size-border-radius-bottom-right-suggestion-default: var(--x-size-border-radius-suggestion-default);
+  --x-size-border-radius-bottom-left-suggestion-default: var(--x-size-border-radius-suggestion-default);
   --x-font-family-suggestion-default: var(--x-font-family-text);
   --x-size-font-suggestion-default: var(--x-size-font-text);
   --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
@@ -1930,14 +1975,22 @@
   padding-right: var(--x-size-padding-right-suggestion-default); }
 [dir="rtl"] .x-suggestion {
   padding-left: var(--x-size-padding-right-suggestion-default); }
+[dir="ltr"] .x-suggestion {
+  border-left-width: var(--x-size-border-width-left-suggestion-default); }
+[dir="rtl"] .x-suggestion {
+  border-right-width: var(--x-size-border-width-left-suggestion-default); }
+[dir="ltr"] .x-suggestion {
+  border-right-width: var(--x-size-border-width-right-suggestion-default); }
+[dir="rtl"] .x-suggestion {
+  border-left-width: var(--x-size-border-width-right-suggestion-default); }
 .x-suggestion {
   display: flex;
   flex-flow: row nowrap;
   box-sizing: border-box;
   align-items: var(--x-string-align-items-suggestion-default);
-  border: none;
   background-color: var(--x-color-background-suggestion-default);
   color: var(--x-color-text-suggestion-default);
+  border-color: var(--x-color-border-suggestion-default);
   font-family: var(--x-font-family-suggestion-default);
   font-size: var(--x-size-font-suggestion-default);
   line-height: var(--x-size-line-height-suggestion-default);
@@ -1945,7 +1998,11 @@
   cursor: pointer;
   padding-top: var(--x-size-padding-top-suggestion-default);
   padding-bottom: var(--x-size-padding-bottom-suggestion-default);
-  gap: var(--x-size-gap-suggestion-default); }
+  gap: var(--x-size-gap-suggestion-default);
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-suggestion-default);
+  border-bottom-width: var(--x-size-border-width-bottom-suggestion-default);
+  border-radius: var(--x-size-border-radius-top-left-suggestion-default) var(--x-size-border-radius-top-right-suggestion-default) var(--x-size-border-radius-bottom-right-suggestion-default) var(--x-size-border-radius-bottom-left-suggestion-default); }
   @media not all and (min-resolution: 0.001dpcm) {
     .x-suggestion {
       gap: 0; }
@@ -1977,11 +2034,22 @@
   --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
   --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-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);
   --x-size-padding-left-suggestion-default: 0;
   --x-size-gap-suggestion-default: var(--x-size-base-03);
+  --x-size-border-width-suggestion-default: 0;
+  --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-suggestion-default: var(--x-size-border-radius-suggestion-default);
+  --x-size-border-radius-top-right-suggestion-default: var(--x-size-border-radius-suggestion-default);
+  --x-size-border-radius-bottom-right-suggestion-default: var(--x-size-border-radius-suggestion-default);
+  --x-size-border-radius-bottom-left-suggestion-default: var(--x-size-border-radius-suggestion-default);
   --x-font-family-suggestion-default: var(--x-font-family-text);
   --x-size-font-suggestion-default: var(--x-size-font-text);
   --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
@@ -2008,6 +2076,12 @@
   --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
   --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
   --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
+  --x-color-background-tag-default-curated: var(--x-color-base-neutral-100);
+  --x-color-border-tag-default-curated: var(--x-color-text-tag-default);
+  --x-color-text-tag-default-curated: var(--x-color-text-default);
+  --x-color-background-tag-default-curated-selected: var(--x-color-base-neutral-95);
+  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default);
+  --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default);
   --x-size-border-width-tag-default: var(--x-size-border-width-base);
   --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
   --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
@@ -2029,7 +2103,15 @@
   --x-font-family-tag-default-selected: var(--x-font-family-tag-default);
   --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
   --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
-  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default); }
+  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default);
+  --x-font-family-tag-default-curated: var(--x-font-family-text);
+  --x-size-font-tag-default-curated: var(--x-size-font-text);
+  --x-size-line-height-tag-default-curated: var(--x-size-line-height-text);
+  --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-text);
+  --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default);
+  --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default);
+  --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default);
+  --x-number-font-weight-tag-default-curated-selected: var(--x-number-font-weight-tag-default); }
 
 @use 'sass:string';
 [dir="ltr"] .x-tag {
@@ -2074,6 +2156,50 @@
       gap: 0; }
       .x-tag > *:not(:last-child) {
         margin-right: var(--x-size-gap-tag-default); } }
+  .x-tag.x-suggestion {
+    --x-color-background-suggestion-default: var(--x-color-background-tag-default);
+    --x-color-text-suggestion-default: var(--x-color-text-tag-default);
+    --x-color-border-suggestion-default: var(--x-color-border-tag-default);
+    --x-size-padding-top-suggestion-default:  0;
+    --x-size-padding-right-suggestion-default: var(--x-size-padding-right-tag-default);
+    --x-size-padding-bottom-suggestion-default: 0;
+    --x-size-padding-left-suggestion-default: var(--x-size-padding-left-tag-default);
+    --x-size-gap-suggestion-default: var(--x-size-gap-tag-default);
+    --x-size-border-width-suggestion-default: var(--x-size-border-width-tag-default);
+    --x-size-border-width-top-suggestion-default: var(--x-size-border-width-tag-default);
+    --x-size-border-width-right-suggestion-default: var(--x-size-border-width-tag-default);
+    --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-tag-default);
+    --x-size-border-width-left-suggestion-default: var(--x-size-border-width-tag-default);
+    --x-size-border-radius-bottom-right-suggestion-default: var(--x-size-border-radius-bottom-right-tag-default);
+    --x-size-border-radius-bottom-left-suggestion-default: var(--x-size-border-radius-bottom-leftt-tag-default);
+    --x-size-border-radius-top-right-suggestion-default: var(--x-size-border-radius-top-right-tag-default);
+    --x-size-border-radius-top-left-suggestion-default: var(--x-size-border-radius-top-left-tag-default);
+    --x-font-family-suggestion-default: var(--x-font-family-tag-default);
+    --x-size-font-suggestion-default: var(--x-size-font-tag-default);
+    --x-size-line-height-suggestion-default: var(--x-size-line-height-tag-default);
+    --x-number-font-weight-suggestion-default: var(--x-number-font-weight-tag-default); }
+  .x-tag.x-suggestion-group {
+    --x-color-background-suggestion-group-default: var(--x-color-background-tag-default);
+    --x-color-text-suggestion-group-default: var(--x-color-text-tag-default);
+    --x-color-border-suggestion-group-default: var(--x-color-border-tag-default);
+    --x-size-padding-top-suggestion-group-default:  0;
+    --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-tag-default);
+    --x-size-padding-bottom-suggestion-group-default: 0;
+    --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-tag-default);
+    --x-size-gap-suggestion-group-default: var(--x-size-gap-tag-default);
+    --x-size-border-width-suggestion-group-default: var(--x-size-border-width-tag-default);
+    --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-tag-default);
+    --x-size-border-width-right-suggestion-group-default: var(--x-size-border-width-tag-default);
+    --x-size-border-width-bottom-suggestion-group-default: var(--x-size-border-width-tag-default);
+    --x-size-border-width-left-suggestion-group-default: var(--x-size-border-width-tag-default);
+    --x-size-border-radius-bottom-right-suggestion-group-default: var(--x-size-border-radius-bottom-right-tag-default);
+    --x-size-border-radius-bottom-left-suggestion-group-default: var(--x-size-border-radius-bottom-leftt-tag-default);
+    --x-size-border-radius-top-right-suggestion-group-default: var(--x-size-border-radius-top-right-tag-default);
+    --x-size-border-radius-top-left-suggestion-group-default: var(--x-size-border-radius-top-left-tag-default);
+    --x-font-family-suggestion-group-default: var(--x-font-family-tag-default);
+    --x-size-font-suggestion-group-default: var(--x-size-font-tag-default);
+    --x-size-line-height-suggestion-group-default: var(--x-size-line-height-tag-default);
+    --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-tag-default); }
   .x-tag.x-filter {
     --x-color-background-filter-default: transparent;
     --x-size-border-width-filter-default: 0;
@@ -2087,6 +2213,14 @@
     --x-size-font-filter-default: var(--x-size-font-tag-default);
     --x-number-font-weight-filter-count-default: var(--x-number-font-weight-tag-default);
     --x-size-line-height-filter-default: var(--x-size-line-height-tag-default); }
+  .x-tag.x-tag.x-tag--is-curated {
+    background-color: var(--x-color-background-tag-default-curated);
+    border-color: var(--x-color-border-tag-default-curated);
+    color: var(--x-color-text-tag-default-curated);
+    line-height: var(--x-size-line-height-tag-default-curated);
+    font-family: var(--x-font-family-tag-default-curated);
+    font-size: var(--x-size-font-tag-default-curated);
+    font-weight: var(--x-number-font-weight-tag-default-curated); }
   .x-tag.x-tag.x-tag--is-selected {
     background-color: var(--x-color-background-tag-default-selected);
     border-color: var(--x-color-border-tag-default-selected);
@@ -2095,6 +2229,14 @@
     font-family: var(--x-font-family-tag-default-selected);
     font-size: var(--x-size-font-tag-default-selected);
     font-weight: var(--x-number-font-weight-tag-default-selected); }
+    .x-tag.x-tag.x-tag--is-selected.x-tag--is-curated {
+      background-color: var(--x-color-background-tag-default-curated-selected);
+      border-color: var(--x-color-border-tag-default-curated-selected);
+      color: var(--x-color-text-tag-default-curated-selected);
+      line-height: var(--x-size-line-height-tag-default-curated-selected);
+      font-family: var(--x-font-family-tag-default-curated-selected);
+      font-size: var(--x-size-font-tag-default-curated-selected);
+      font-weight: var(--x-number-font-weight-tag-default-curated-selected); }
     .x-tag.x-tag.x-tag--is-selected.x-filter {
       --x-color-text-filter-default-selected: var(--x-color-text-tag-default-selected);
       --x-font-family-filter-default-selected: var(--x-font-family-tag-default-selected);
@@ -2111,6 +2253,12 @@
   --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
   --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
   --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
+  --x-color-background-tag-default-curated: var(--x-color-base-neutral-100);
+  --x-color-border-tag-default-curated: var(--x-color-text-tag-default);
+  --x-color-text-tag-default-curated: var(--x-color-text-default);
+  --x-color-background-tag-default-curated-selected: var(--x-color-base-neutral-95);
+  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default);
+  --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default);
   --x-size-border-width-tag-default: var(--x-size-border-width-base);
   --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
   --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
@@ -2132,7 +2280,15 @@
   --x-font-family-tag-default-selected: var(--x-font-family-tag-default);
   --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
   --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
-  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default); }
+  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default);
+  --x-font-family-tag-default-curated: var(--x-font-family-text);
+  --x-size-font-tag-default-curated: var(--x-size-font-text);
+  --x-size-line-height-tag-default-curated: var(--x-size-line-height-text);
+  --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-text);
+  --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default);
+  --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default);
+  --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default);
+  --x-number-font-weight-tag-default-curated-selected: var(--x-number-font-weight-tag-default); }
 
 :root {
   --x-color-text-default: var(--x-color-base-neutral-10);