@empathyco/x-components 3.0.0-alpha.41 → 3.0.0-alpha.45

package/CHANGELOG.md

@@ -3,6 +3,99 @@
 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
+
+- **components:** `SlidingPanel` buttons do not have the round variant set by default.
+
+### Features
+
+- **components:** add `buttonClass` prop in `SlidingPanel`
+  ([fa554a2](https://github.com/empathyco/x/commit/fa554a2231ec9a00b5aea566970c2b7b0d34845f)),
+  closes [EX-5233](https://searchbroker.atlassian.net/browse/EX-5233)
+- **components:** add Result Rating component
+  ([db5cbb5](https://github.com/empathyco/x/commit/db5cbb5779e0e503ec934df4cda3dd241c49fc8e)),
+  closes [EX-5243](https://searchbroker.atlassian.net/browse/EX-5243)
+
+### Bug Fixes
+
+- **design-system:** Fix some style issues and add two missing utilities
+  ([c4ae728](https://github.com/empathyco/x/commit/c4ae728d78b36ee566ca283626e36bf9b6aed07f)),
+  closes [EX-5270](https://searchbroker.atlassian.net/browse/EX-5270)
+- **identifier-results:** Fix default plugin config. (#296)
+  ([68d4b93](https://github.com/empathyco/x/commit/68d4b93f3f8d439814a11055ac657c0bce5accfd)),
+  closes [EX-5247](https://searchbroker.atlassian.net/browse/EX-5247)
+  [EX-5247](https://searchbroker.atlassian.net/browse/EX-5247)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.0.0-alpha.43](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.42...@empathyco/x-components@3.0.0-alpha.43) (2022-01-06)
+
+### Features
+
+- **components:** Add icons for Arrows UP DOWN LEFT and RIGHT. (#295)
+  ([693b26f](https://github.com/empathyco/x/commit/693b26f8e2d250f97bcf0cce472299b2edcc4823)),
+  closes [EX-5245](https://searchbroker.atlassian.net/browse/EX-5245)
+
+# 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.42](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.41...@empathyco/x-components@3.0.0-alpha.42) (2022-01-05)
+
+### Features
+
+- **design-system:** Add more utility classes.
+  ([592e076](https://github.com/empathyco/x/commit/592e0761d201d80fdf62ba260ac4ef0847fb7f17)),
+  closes [EX-5241](https://searchbroker.atlassian.net/browse/EX-5241)
+- **desing-system:** Add `Grid2RowsIcon` component
+  ([cbd014f](https://github.com/empathyco/x/commit/cbd014fb1a07c2aa738c3ef828c9caf5ec9ded39)),
+  closes [EX-5238](https://searchbroker.atlassian.net/browse/EX-5238)
+
+### Bug Fixes
+
+- **design-system:** Fix grid styles to stretch cells.
+  ([3292229](https://github.com/empathyco/x/commit/32922290173cc87fe5c82934b9a9e01dc27b3c23)),
+  closes [EX-5239](https://searchbroker.atlassian.net/browse/EX-5239)
+- **design-system:** Fix Sliding Panel styles.
+  ([bcf2092](https://github.com/empathyco/x/commit/bcf20925c3baf7847792b7b77b07178d62a27e7e)),
+  closes [EX-5234](https://searchbroker.atlassian.net/browse/EX-5234)
+
+# 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.41](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.40...@empathyco/x-components@3.0.0-alpha.41) (2022-01-03)
 
 ### Features

package/core/index.js

@@ -39,7 +39,10 @@ export { default as BasePriceFilterLabel } from '../js/components/filters/labels
 export { default as StarIcon } from '../js/components/icons/star.vue.js';
 export { default as BaseRating } from '../js/components/base-rating.vue.js';
 export { default as BaseRatingFilterLabel } from '../js/components/filters/labels/base-rating-filter-label.vue.js';
-export { default as ArrowIcon } from '../js/components/icons/arrow.vue.js';
+export { default as ArrowDownIcon } from '../js/components/icons/arrow-down.vue.js';
+export { default as ArrowLeftIcon } from '../js/components/icons/arrow-left.vue.js';
+export { default as ArrowRightIcon } from '../js/components/icons/arrow-right.vue.js';
+export { default as ArrowUpIcon } from '../js/components/icons/arrow-up.vue.js';
 export { default as BagIcon } from '../js/components/icons/bag.vue.js';
 export { default as BarCodeIcon } from '../js/components/icons/bar-code.vue.js';
 export { default as BarcodeTinyIcon } from '../js/components/icons/barcode-tiny.vue.js';
@@ -60,12 +63,16 @@ 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';
+export { default as Grid2RowsIcon } from '../js/components/icons/grid-2-rows.vue.js';
 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';
@@ -119,6 +126,7 @@ export { default as BaseResultLink } from '../js/components/result/base-result-l
 export { default as BaseResultPreviousPrice } from '../js/components/result/base-result-previous-price.vue.js';
 export { default as BaseFallbackImage } from '../js/components/result/base-result-fallback-image.vue.js';
 export { default as BasePlaceholderImage } from '../js/components/result/base-result-placeholder-image.vue.js';
+export { default as BaseResultRating } from '../js/components/result/base-result-rating.vue.js';
 export { default as BaseSuggestion } from '../js/components/suggestions/base-suggestion.vue.js';
 export { default as BaseSuggestions } from '../js/components/suggestions/base-suggestions.vue.js';
 export { default as AutoProgressBar } from '../js/components/auto-progress-bar.vue.js';

package/core/index.js.map

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

package/design-system/base.css

@@ -15,7 +15,8 @@
   --x-color-base-neutral-100: #ffffff;
   --x-color-base-accent: #b90276;
   --x-color-base-enable: #00705c;
-  --x-color-base-disable: #e11f26; }
+  --x-color-base-disable: #e11f26;
+  --x-color-base-transparent: transparent; }
 
 :root {
   --x-size-base-01: 2px;

package/design-system/default-theme.css

@@ -684,9 +684,15 @@
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(var(--x-size-min-width-grid-item), auto));
   grid-auto-flow: dense;
+  align-items: stretch;
   list-style: none;
   padding: var(--x-size-padding-grid);
   gap: var(--x-size-gap-grid); }
+  .x-grid__item {
+    display: flex;
+    flex-flow: column nowrap; }
+    .x-grid__item > * {
+      flex-grow: 1; }
   .x-grid--cols-auto .x-grid__item {
     min-width: var(--x-size-min-width-grid-item); }
 
@@ -845,22 +851,31 @@
   .x-input-group > .x-button {
     height: var(--x-size-height-input-group-default);
     min-height: var(--x-size-height-input-group-default);
-    margin: calc(var(--x-size-border-width-input-group-default) * -1); }
-    [dir="ltr"] .x-input-group > .x-button:first-child {
+    margin-top: calc(var(--x-size-border-width-top-input-group-default) * -1);
+    margin-bottom: calc(var(--x-size-border-width-bottom-input-group-default) * -1); }
+  .x-input-group > .x-button:not(.x-input-group__action) {
+    font-weight: var(--x-number-font-weight-input-group-default-button); }
+    [dir="ltr"] .x-input-group > .x-button:not(.x-input-group__action):first-child {
       margin-right: 0; }
-    [dir="rtl"] .x-input-group > .x-button:first-child {
+    [dir="rtl"] .x-input-group > .x-button:not(.x-input-group__action):first-child {
       margin-left: 0; }
-    [dir="ltr"] .x-input-group > .x-button:last-child {
+    [dir="ltr"] .x-input-group > .x-button:not(.x-input-group__action):last-child {
       margin-left: 0; }
-    [dir="rtl"] .x-input-group > .x-button:last-child {
+    [dir="rtl"] .x-input-group > .x-button:not(.x-input-group__action):last-child {
       margin-right: 0; }
-  .x-input-group > .x-button:not(.x-input-group__action) {
-    font-weight: var(--x-number-font-weight-input-group-default-button); }
   .x-input-group > .x-input-group__action {
     box-sizing: border-box;
     padding: 0 calc(var(--x-size-padding-input-group-default-action) - 1px);
     min-width: var(--x-size-height-input-group-default);
     border-radius: var(--x-size-border-radius-top-left-input-group-default) var(--x-size-border-radius-top-right-input-group-default) var(--x-size-border-radius-bottom-right-input-group-default) var(--x-size-border-radius-bottom-left-input-group-default); }
+    [dir="ltr"] .x-input-group > .x-input-group__action:first-child {
+      margin-left: calc(var(--x-size-border-width-left-input-group-default) * -1); }
+    [dir="rtl"] .x-input-group > .x-input-group__action:first-child {
+      margin-right: calc(var(--x-size-border-width-left-input-group-default) * -1); }
+    [dir="ltr"] .x-input-group > .x-input-group__action:last-child {
+      margin-right: calc(var(--x-size-border-width-right-input-group-default) * -1); }
+    [dir="rtl"] .x-input-group > .x-input-group__action:last-child {
+      margin-left: calc(var(--x-size-border-width-right-input-group-default) * -1); }
 
 :root {
   --x-color-background-input-group-default: var(--x-color-background-input-default);
@@ -1026,11 +1041,6 @@
   padding: var(--x-size-padding-list);
   justify-content: var(--x-size-justify-list);
   align-items: var(--x-size-align-list);
-  font-family: var(--x-font-family-text);
-  font-size: var(--x-size-font-text);
-  font-weight: var(--x-number-font-weight-text);
-  line-height: var(--x-size-line-height-text);
-  color: var(--x-color-text-default);
   min-width: 0; }
   @media not all and (min-resolution: 0.001dpcm) {
     .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
@@ -1257,6 +1267,23 @@
     --x-color-text-option-list-button-default-selected
   );
   --x-color-border-option-list-item-default: var(--x-color-base-neutral-70);
+  --x-color-border-top-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-right-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-bottom-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-left-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-option-list-item-default-selected: var(--x-color-base-neutral-70);
+  --x-color-border-top-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-right-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-bottom-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-left-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
   --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
   --x-size-border-width-top-option-list-item-default: 0;
   --x-size-border-width-right-option-list-item-default: var(
@@ -1288,6 +1315,7 @@
     --x-size-padding-option-list-button-default
   );
   --x-font-decoration-option-list-button-default-hover: underline;
+  --x-size-font-option-list-button-default: var(--x-size-font-text);
   --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
   --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold); }
 
@@ -1308,11 +1336,29 @@
   [dir="rtl"] .x-option-list__item {
     border-right-width: var(--x-size-border-width-left-option-list-item-default); }
   .x-option-list__item {
-    border-color: var(--x-color-border-option-list-item-default);
+    border-top-color: var(--x-color-border-top-option-list-item-default);
+    border-right-color: var(--x-color-border-right-option-list-item-default);
+    border-bottom-color: var(--x-color-border-bottom-option-list-item-default);
+    border-left-color: var(--x-color-border-left-option-list-item-default);
     border-style: solid;
     border-top-width: var(--x-size-border-width-top-option-list-item-default);
     border-bottom-width: var(--x-size-border-width-bottom-option-list-item-default); }
     .x-option-list__item.x-option-list__item--is-selected {
+      --x-color-border-option-list-item-default: var(
+        --x-color-border-option-list-item-default-selected
+      );
+      --x-color-border-top-option-list-item-default: var(
+        --x-color-border-top-option-list-item-default-selected
+      );
+      --x-color-border-right-option-list-item-default: var(
+        --x-color-border-right-option-list-item-default-selected
+      );
+      --x-color-border-bottom-option-list-item-default: var(
+        --x-color-border-bottom-option-list-item-default-selected
+      );
+      --x-color-border-left-option-list-item-default: var(
+        --x-color-border-left-option-list-item-default-selected
+      );
       --x-size-border-width-top-option-list-item-default: var(
         --x-size-border-width-top-option-list-item-default-selected
       );
@@ -1362,7 +1408,8 @@
         --x-size-padding-bottom-option-list-button-default
       );
       --x-size-padding-left-button-default: var(--x-size-padding-left-option-list-button-default);
-      --x-number-font-weight-button-default: var(--x-number-font-weight-option-list-button-default); }
+      --x-number-font-weight-button-default: var(--x-number-font-weight-option-list-button-default);
+      --x-size-font-button-default: var(--x-size-font-option-list-button-default); }
       .x-option-list__item .x-button:hover {
         --x-color-background-button-default: var(
           --x-color-background-option-list-button-default-hover
@@ -1400,6 +1447,23 @@
     --x-color-text-option-list-button-default-selected
   );
   --x-color-border-option-list-item-default: var(--x-color-base-neutral-70);
+  --x-color-border-top-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-right-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-bottom-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-left-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-option-list-item-default-selected: var(--x-color-base-neutral-70);
+  --x-color-border-top-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-right-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-bottom-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-left-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
   --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
   --x-size-border-width-top-option-list-item-default: 0;
   --x-size-border-width-right-option-list-item-default: var(
@@ -1431,6 +1495,7 @@
     --x-size-padding-option-list-button-default
   );
   --x-font-decoration-option-list-button-default-hover: underline;
+  --x-size-font-option-list-button-default: var(--x-size-font-text);
   --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
   --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold); }
 
@@ -1516,7 +1581,7 @@
 .x-result {
   display: grid;
   grid-template-columns: [result-start] 1fr [result-end];
-  grid-template-rows: [picture-start] auto [overlay-start] auto [picture-end overlay-end description-start] auto [description-end];
+  grid-template-rows: [picture-start] auto [overlay-start] auto [picture-end overlay-end description-start] 1fr [description-end];
   box-sizing: border-box;
   background-color: var(--x-color-background-result-default);
   border-color: var(--x-color-border-result-default);
@@ -1710,9 +1775,11 @@
   --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70); }
 
 .x-sliding-panel {
+  z-index: 0;
   background-color: var(--x-color-background-sliding-panel); }
   .x-sliding-panel__button.x-button {
-    --x-size-padding-button: var(--x-size-padding-sliding-panel-button); }
+    --x-size-padding-button: var(--x-size-padding-sliding-panel-button);
+    pointer-events: none; }
   .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button {
     pointer-events: all; }
   .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button-left {
@@ -1727,22 +1794,18 @@
   .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel--at-end):hover .x-sliding-panel__button-right {
     opacity: 1;
     pointer-events: all; }
-  .x-sliding-panel:not(.x-sliding-panel--no-gradient)::before, .x-sliding-panel:not(.x-sliding-panel--no-gradient)::after {
-    position: absolute;
-    z-index: 1;
-    content: '';
-    pointer-events: none;
-    height: 100%;
-    width: var(--x-size-width-sliding-panel-gradient);
-    opacity: 0; }
-  .x-sliding-panel:not(.x-sliding-panel--no-gradient)::before {
-    background: linear-gradient(to right, var(--x-color-background-sliding-panel) 43%, var(--x-color-background-sliding-panel-middle) 67%, var(--x-color-background-sliding-panel-end));
-    left: 0; }
-  .x-sliding-panel:not(.x-sliding-panel--no-gradient)::after {
-    background: linear-gradient(to left, var(--x-color-background-sliding-panel) 43%, var(--x-color-background-sliding-panel-middle) 67%, var(--x-color-background-sliding-panel-end));
-    right: 0; }
-  .x-sliding-panel:not(.x-sliding-panel--no-gradient):not(.x-sliding-panel--at-start)::before, .x-sliding-panel:not(.x-sliding-panel--no-gradient):not(.x-sliding-panel--at-end)::after {
-    opacity: 1; }
+  .x-sliding-panel:not(.x-sliding-panel--no-gradient) .x-sliding-panel__scroll {
+    -webkit-mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient)));
+            mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient))); }
+  .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-start .x-sliding-panel__scroll {
+    -webkit-mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
+            mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient)); }
+  .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-end .x-sliding-panel__scroll {
+    -webkit-mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
+            mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient)); }
+  .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-start.x-sliding-panel--at-end .x-sliding-panel__scroll {
+    -webkit-mask: none;
+            mask: none; }
   .x-sliding-panel__scroll > * {
     flex: 0 0 auto; }
   .x-sliding-panel__scroll > .x-list {
@@ -1750,8 +1813,6 @@
 
 :root {
   --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
-  --x-color-background-sliding-panel-middle: rgba(255, 255, 255, 0.94);
-  --x-color-background-sliding-panel-end: rgba(255, 255, 255, 0);
   --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
   --x-size-padding-sliding-panel-button: var(--x-size-base-03);
   --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02); }
@@ -1760,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);
@@ -1779,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);
@@ -1794,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; }
@@ -1802,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;
@@ -1816,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);
@@ -1832,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);
@@ -1869,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);
@@ -1884,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; }
@@ -1916,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);
@@ -2013,6 +2142,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;
@@ -2101,6 +2274,7 @@
   --x-size-line-height-small: var(--x-size-line-height-base-s);
   --x-string-text-decoration-small: none; }
 
+.x,
 .x-text {
   font-family: var(--x-font-family-text);
   font-size: var(--x-size-font-text);
@@ -2201,7 +2375,8 @@
   --x-color-base-neutral-100: #ffffff;
   --x-color-base-accent: #b90276;
   --x-color-base-enable: #00705c;
-  --x-color-base-disable: #e11f26; }
+  --x-color-base-disable: #e11f26;
+  --x-color-base-transparent: transparent; }
 
 :root {
   --x-size-base-01: 2px;