npm - @empathyco/x-components - Versions diffs - 3.0.0-alpha.44 → 3.0.0-alpha.48 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (229) hide show

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

@@ -3060,14 +3060,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);
@@ -3075,7 +3082,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; }
@@ -3083,7 +3094,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;
@@ -3097,11 +3109,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);
@@ -3120,14 +3143,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);
@@ -3135,7 +3166,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; }
@@ -3167,11 +3202,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);
@@ -3251,6 +3297,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;
@@ -3264,6 +3354,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);
@@ -3272,6 +3370,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);
@@ -3288,6 +3394,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);
@@ -3309,22 +3421,40 @@
   --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); }
 .x-tag--ghost.x-tag,
 .x-tag--ghost .x-tag {
   --x-color-background-tag-default: var(--x-color-background-tag-ghost);
   --x-color-border-tag-default: var(--x-color-border-tag-ghost);
+  --x-color-background-tag-default-curated: var(--x-color-background-tag-curated-ghost);
+  --x-color-border-tag-default-curated: var(--x-color-border-tag-curated-ghost);
   --x-color-background-tag-default-selected: var(--x-color-background-tag-selected-ghost);
   --x-color-border-tag-default-selected: var(--x-color-border-tag-selected-ghost);
-  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-selected-ghost); }
+  --x-color-background-tag-default-curated-selected: var(--x-color-background-tag-curated-selected-ghost);
+  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-curated-selected-ghost);
+  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-selected-ghost);
+  --x-number-font-weight-tag-default-curated-selected: var(--x-number-font-weight-tag-curated-selected-ghost); }
 :root {
   --x-color-background-tag-ghost: transparent;
   --x-color-border-tag-ghost: transparent;
   --x-color-background-tag-selected-ghost: transparent;
   --x-color-border-tag-selected-ghost: transparent;
-  --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold); }
+  --x-color-background-tag-curated-ghost: transparent;
+  --x-color-border-tag-curated-ghost: transparent;
+  --x-color-background-tag-curated-selected-ghost: transparent;
+  --x-color-border-tag-curated-selected-ghost: transparent;
+  --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
+  --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold); }
 .x-tag--pill.x-tag,
 .x-tag--pill .x-tag {

package/design-system/suggestion-default.css CHANGED Viewed

@@ -4,11 +4,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);
@@ -41,14 +52,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);
@@ -56,7 +75,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; }

package/design-system/suggestion-group-default.css CHANGED Viewed

@@ -2,11 +2,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);
@@ -21,14 +32,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);
@@ -36,7 +54,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; }
@@ -44,7 +66,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;

package/design-system/tag-default.css CHANGED Viewed

@@ -5,6 +5,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);
@@ -26,7 +32,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 {
@@ -71,6 +85,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;
@@ -84,6 +142,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);
@@ -92,6 +158,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);

package/design-system/tag-ghost.css CHANGED Viewed

@@ -3,12 +3,22 @@
   --x-color-border-tag-ghost: transparent;
   --x-color-background-tag-selected-ghost: transparent;
   --x-color-border-tag-selected-ghost: transparent;
-  --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold); }
+  --x-color-background-tag-curated-ghost: transparent;
+  --x-color-border-tag-curated-ghost: transparent;
+  --x-color-background-tag-curated-selected-ghost: transparent;
+  --x-color-border-tag-curated-selected-ghost: transparent;
+  --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
+  --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold); }
 .x-tag--ghost.x-tag,
 .x-tag--ghost .x-tag {
   --x-color-background-tag-default: var(--x-color-background-tag-ghost);
   --x-color-border-tag-default: var(--x-color-border-tag-ghost);
+  --x-color-background-tag-default-curated: var(--x-color-background-tag-curated-ghost);
+  --x-color-border-tag-default-curated: var(--x-color-border-tag-curated-ghost);
   --x-color-background-tag-default-selected: var(--x-color-background-tag-selected-ghost);
   --x-color-border-tag-default-selected: var(--x-color-border-tag-selected-ghost);
-  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-selected-ghost); }
+  --x-color-background-tag-default-curated-selected: var(--x-color-background-tag-curated-selected-ghost);
+  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-curated-selected-ghost);
+  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-selected-ghost);
+  --x-number-font-weight-tag-default-curated-selected: var(--x-number-font-weight-tag-curated-selected-ghost); }

package/docs/API-reference/api/x-components.basexapi.addproducttocart.md ADDED Viewed

@@ -0,0 +1,24 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [BaseXAPI](./x-components.basexapi.md) &gt; [addProductToCart](./x-components.basexapi.addproducttocart.md)
+## BaseXAPI.addProductToCart() method
+Tracks that a product was added to cart from PDP.
+<b>Signature:</b>
+```typescript
+addProductToCart(productId?: string): void;
+```
+## Parameters
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  productId | string | The product id that was added to cart. |
+<b>Returns:</b>
+void

package/docs/API-reference/api/x-components.basexapi.md CHANGED Viewed

@@ -17,6 +17,7 @@ export declare class BaseXAPI implements XAPI
 |  Method | Modifiers | Description |
 |  --- | --- | --- |
+|  [addProductToCart(productId)](./x-components.basexapi.addproducttocart.md) |  | Tracks that a product was added to cart from PDP. |
 |  [init(config)](./x-components.basexapi.init.md) |  | Initializes the Application passing the [SnippetConfig](./x-components.snippetconfig.md)<!-- -->. |
 |  [search(query)](./x-components.basexapi.search.md) |  | Searches the query parameter as user query. |
 |  [setInitCallback(initCallback)](./x-components.basexapi.setinitcallback.md) |  | Setter for the callback to call in the init method. |

package/docs/API-reference/api/x-components.curatedcheckicon.md ADDED Viewed

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [CuratedCheckIcon](./x-components.curatedcheckicon.md)
+## CuratedCheckIcon variable
+<b>Signature:</b>
+```typescript
+_default: {}
+```

package/docs/API-reference/api/x-components.defaultpdpaddtocartservice._constructor_.md ADDED Viewed

@@ -0,0 +1,21 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [DefaultPDPAddToCartService](./x-components.defaultpdpaddtocartservice.md) &gt; [(constructor)](./x-components.defaultpdpaddtocartservice._constructor_.md)
+## DefaultPDPAddToCartService.(constructor)
+Constructs a new instance of the `DefaultPDPAddToCartService` class
+<b>Signature:</b>
+```typescript
+constructor(localStorageService?: StorageService, sessionStorageService?: StorageService);
+```
+## Parameters
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  localStorageService | StorageService |  |
+|  sessionStorageService | StorageService |  |

package/docs/API-reference/api/x-components.defaultpdpaddtocartservice.clickedresultstoragekey.md ADDED Viewed

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [DefaultPDPAddToCartService](./x-components.defaultpdpaddtocartservice.md) &gt; [clickedResultStorageKey](./x-components.defaultpdpaddtocartservice.clickedresultstoragekey.md)
+## DefaultPDPAddToCartService.clickedResultStorageKey property
+<b>Signature:</b>
+```typescript
+protected get clickedResultStorageKey(): string;
+```

package/docs/API-reference/api/x-components.defaultpdpaddtocartservice.clickedresultstoragettlms.md ADDED Viewed

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [DefaultPDPAddToCartService](./x-components.defaultpdpaddtocartservice.md) &gt; [clickedResultStorageTTLMs](./x-components.defaultpdpaddtocartservice.clickedresultstoragettlms.md)
+## DefaultPDPAddToCartService.clickedResultStorageTTLMs property
+<b>Signature:</b>
+```typescript
+protected get clickedResultStorageTTLMs(): number;
+```

package/docs/API-reference/api/x-components.defaultpdpaddtocartservice.instance.md ADDED Viewed

@@ -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; [DefaultPDPAddToCartService](./x-components.defaultpdpaddtocartservice.md) &gt; [instance](./x-components.defaultpdpaddtocartservice.instance.md)
+## DefaultPDPAddToCartService.instance property
+Global instance of the [PDPAddToCartService](./x-components.pdpaddtocartservice.md)<!-- -->.
+<b>Signature:</b>
+```typescript
+static instance: PDPAddToCartService;
+```