@empathyco/x-components 3.0.0-alpha.21 → 3.0.0-alpha.25

package/CHANGELOG.md

@@ -3,6 +3,53 @@
 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.25](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.24...@empathyco/x-components@3.0.0-alpha.25) (2021-09-22)
+
+
+### Features
+
+* **components:** Add `TranslateFromLeft` and `CrossFade` animations. ([7690dcd](https://github.com/empathyco/x/commit/7690dcdd1b3286b36584a18de5141038aaa1597d)), closes [EX-4772](https://searchbroker.atlassian.net/browse/EX-4772)
+* **url:** syncronize url and state with the query ([95af0c5](https://github.com/empathyco/x/commit/95af0c5094c4dc1fccbde5a4ed75178f6a041661)), closes [EX-3509](https://searchbroker.atlassian.net/browse/EX-3509)
+
+
+### Code Refactoring
+
+* use `NamedModel` generic parameter to better type models ([4255c94](https://github.com/empathyco/x/commit/4255c94c05b497272409fcba745c29cd8b0d870a)), closes [EX-4734](https://searchbroker.atlassian.net/browse/EX-4734)
+
+
+
+## [3.0.0-alpha.24](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.23...@empathyco/x-components@3.0.0-alpha.24) (2021-09-20)
+
+**Note:** Version bump only for package @empathyco/x-components
+
+
+
+
+
+## [3.0.0-alpha.23](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.22...@empathyco/x-components@3.0.0-alpha.23) (2021-09-20)
+
+**Note:** Version bump only for package @empathyco/x-components
+
+
+
+
+
+## [3.0.0-alpha.22](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.21...@empathyco/x-components@3.0.0-alpha.22) (2021-09-17)
+
+
+### Features
+
+* **design-system:** add utilities ([cc5c6cc](https://github.com/empathyco/x/commit/cc5c6cc2eb2daf48cf06c968a06465bb19ff89d9)), closes [EX-4746](https://searchbroker.atlassian.net/browse/EX-4746)
+* **url:** Add an action to save from url to the store. ([9fbf8d4](https://github.com/empathyco/x/commit/9fbf8d448bd243a3850eebbe1a4520372260e28a)), closes [EX-4712](https://searchbroker.atlassian.net/browse/EX-4712)
+* **url:** add new URL Manager component  ([b3ea10d](https://github.com/empathyco/x/commit/b3ea10dfa0f94d13104372e6bde1733a2c013dae)), closes [EX-4566](https://searchbroker.atlassian.net/browse/EX-4566)
+
+
+### Testing
+
+* **partial-results:** mock adapter for partial results e2e tests ([1515e79](https://github.com/empathyco/x/commit/1515e796ab72ada9936cb5d288dea76f83e50bf5)), closes [EX-4647](https://searchbroker.atlassian.net/browse/EX-4647)
+
+
+
 ## [3.0.0-alpha.21](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.20...@empathyco/x-components@3.0.0-alpha.21) (2021-09-15)
 
 

package/core/index.js

@@ -3,6 +3,7 @@ export { default as CollapseFromTop } from '../js/components/animations/collapse
 export { createCollapseAnimationMixin } from '../js/components/animations/animations.mixin.js';
 export { default as CollapseHeight } from '../js/components/animations/collapse-height.vue.js';
 export { default as CollapseWidth } from '../js/components/animations/collapse-width.vue.js';
+export { default as CrossFade } from '../js/components/animations/cross-fade.vue.js';
 export { default as FadeAndSlide } from '../js/components/animations/fade-and-slide.vue.js';
 export { arrayToObject, deepFilter, deepFlat, groupItemsBy, isArrayEmpty } from '../js/utils/array.js';
 export { noOp } from '../js/utils/function.js';
@@ -18,10 +19,11 @@ export { isInRange } from '../js/utils/number.js';
 export { cleanUndefined, forEach, map, objectFilter, reduce } from '../js/utils/object.js';
 export { sanitize } from '../js/utils/sanitize.js';
 export { localStorageService } from '../js/utils/storage.js';
-export { isStringEmpty, toKebabCase } from '../js/utils/string.js';
+export { capitalize, isStringEmpty, toKebabCase } from '../js/utils/string.js';
 export { throttle as throttleFunction } from '../js/utils/throttle.js';
 export { default as StaggeringTransitionGroup } from '../js/components/staggering-transition-group.vue.js';
 export { default as StaggeredFadeAndSlide } from '../js/components/animations/staggered-fade-and-slide.vue.js';
+export { default as TranslateFromLeft } from '../js/components/animations/translate-from-left.vue.js';
 export { default as TranslateFromRight } from '../js/components/animations/translate-from-right.vue.js';
 export { default as BaseEventButton } from '../js/components/base-event-button.vue.js';
 export { NoElement } from '../js/components/no-element.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/badge-default.css

@@ -0,0 +1,46 @@
+:root {
+  --x-color-background-badge-default: var(--x-color-base-neutral-10);
+  --x-color-text-badge-default: var(--x-color-base-neutral-100);
+  --x-color-border-badge-default: var(--x-color-base-neutral-10);
+  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
+  --x-size-border-width-badge-default: 0;
+  --x-size-width-badge-default: 1.5em;
+  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
+  --x-size-font-badge-default: var(--x-size-font-base-xs); }
+
+[dir="ltr"] .x-badge {
+  right: calc(var(--x-size-width-badge-default) / 4); }
+
+[dir="rtl"] .x-badge {
+  left: calc(var(--x-size-width-badge-default) / 4); }
+
+.x-badge {
+  border-radius: var(--x-size-border-radius-badge-default);
+  border-style: solid;
+  border-width: var(--x-size-border-width-badge-default);
+  font-size: var(--x-size-font-badge-default);
+  font-weight: var(--x-number-font-weight-badge-default);
+  box-sizing: border-box;
+  position: absolute;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: center;
+      justify-content: center;
+  transform: translate(50%, -50%);
+  z-index: 1;
+  /* We dont' want to have the button fully centered in the top right corner, the top right corner
+  of the text is the one that should be aligned with the top right corner of the container. */
+  top: calc(var(--x-size-width-badge-default) / 4);
+  min-width: var(--x-size-width-badge-default);
+  height: var(--x-size-width-badge-default);
+  padding: 2px;
+  background: var(--x-color-background-badge-default);
+  color: var(--x-color-text-badge-default);
+  border-color: var(--x-color-border-badge-default); }
+  [dir="rtl"] .x-badge {
+    transform: translate(-50%, -50%); }
+
+.x-badge-container {
+  position: relative; }

package/design-system/base.css

@@ -23,7 +23,10 @@
   --x-size-base-07: 32px;
   --x-size-base-08: 40px;
   --x-size-base-09: 48px;
-  --x-size-base-10: 56px; }
+  --x-size-base-10: 56px;
+  --x-size-base-11: 64px;
+  --x-size-base-12: 72px;
+  --x-size-base-13: 80px; }
 
 :root {
   --x-font-family-base: 'Montserrat', sans-serif;

package/design-system/button-primary.css

@@ -1,10 +1,19 @@
 :root {
   --x-color-background-button-primary: var(--x-color-background-button-default);
   --x-color-border-button-primary: var(--x-color-border-button-default);
-  --x-color-text-button-primary: var(--x-color-text-button-default); }
+  --x-color-text-button-primary: var(--x-color-text-button-default);
+  --x-size-border-width-button-primary: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-primary: var(--x-size-border-width-button-primary);
+  --x-size-border-width-right-button-primary: var(--x-size-border-width-button-primary);
+  --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
+  --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary); }
 
 .x-button--primary.x-button,
 .x-button--primary .x-button {
   --x-color-background-button-default: var(--x-color-background-button-primary);
   --x-color-border-button-default: var(--x-color-border-button-primary);
-  --x-color-text-button-default: var(--x-color-text-button-primary); }
+  --x-color-text-button-default: var(--x-color-text-button-primary);
+  --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-primary);
+  --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-primary);
+  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-primary);
+  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-primary); }

package/design-system/button-secondary.css

@@ -1,10 +1,19 @@
 :root {
   --x-color-background-button-secondary: transparent;
   --x-color-border-button-secondary: var(--x-color-border-button-default);
-  --x-color-text-button-secondary: var(--x-color-border-button-default); }
+  --x-color-text-button-secondary: var(--x-color-border-button-default);
+  --x-size-border-width-button-secondary: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
+  --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
+  --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
+  --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary); }
 
 .x-button--secondary.x-button,
 .x-button--secondary .x-button {
   --x-color-background-button-default: var(--x-color-background-button-secondary);
-  --x-color-border-butto-defaultn: var(--x-color-border-button-secondary);
-  --x-color-text-button-default: var(--x-color-text-button-secondary); }
+  --x-color-border-button-default: var(--x-color-border-button-secondary);
+  --x-color-text-button-default: var(--x-color-text-button-secondary);
+  --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-secondary);
+  --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-secondary);
+  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-secondary);
+  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-secondary); }

package/design-system/button-tertiary.css

@@ -1,10 +1,19 @@
 :root {
   --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
   --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
-  --x-color-text-button-tertiary: var(--x-color-text-default); }
+  --x-color-text-button-tertiary: var(--x-color-text-default);
+  --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary); }
 
 .x-button--tertiary.x-button,
 .x-button--tertiary .x-button {
   --x-color-background-button-default: var(--x-color-background-button-tertiary);
   --x-color-border-button-default: var(--x-color-border-button-tertiary);
-  --x-color-text-button-default: var(--x-color-text-button-tertiary); }
+  --x-color-text-button-default: var(--x-color-text-button-tertiary);
+  --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-tertiary);
+  --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-tertiary);
+  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-tertiary);
+  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary); }

package/design-system/default-theme.css

@@ -1,3 +1,60 @@
+:root {
+  --x-color-background-badge-default: var(--x-color-base-neutral-10);
+  --x-color-text-badge-default: var(--x-color-base-neutral-100);
+  --x-color-border-badge-default: var(--x-color-base-neutral-10);
+  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
+  --x-size-border-width-badge-default: 0;
+  --x-size-width-badge-default: 1.5em;
+  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
+  --x-size-font-badge-default: var(--x-size-font-base-xs); }
+
+[dir="ltr"] .x-badge {
+  right: calc(var(--x-size-width-badge-default) / 4); }
+
+[dir="rtl"] .x-badge {
+  left: calc(var(--x-size-width-badge-default) / 4); }
+
+.x-badge {
+  border-radius: var(--x-size-border-radius-badge-default);
+  border-style: solid;
+  border-width: var(--x-size-border-width-badge-default);
+  font-size: var(--x-size-font-badge-default);
+  font-weight: var(--x-number-font-weight-badge-default);
+  box-sizing: border-box;
+  position: absolute;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: center;
+      justify-content: center;
+  transform: translate(50%, -50%);
+  z-index: 1;
+  /* We dont' want to have the button fully centered in the top right corner, the top right corner
+  of the text is the one that should be aligned with the top right corner of the container. */
+  top: calc(var(--x-size-width-badge-default) / 4);
+  min-width: var(--x-size-width-badge-default);
+  height: var(--x-size-width-badge-default);
+  padding: 2px;
+  background: var(--x-color-background-badge-default);
+  color: var(--x-color-text-badge-default);
+  border-color: var(--x-color-border-badge-default); }
+  [dir="rtl"] .x-badge {
+    transform: translate(-50%, -50%); }
+
+.x-badge-container {
+  position: relative; }
+
+:root {
+  --x-color-background-badge-default: var(--x-color-base-neutral-10);
+  --x-color-text-badge-default: var(--x-color-base-neutral-100);
+  --x-color-border-badge-default: var(--x-color-base-neutral-10);
+  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
+  --x-size-border-width-badge-default: 0;
+  --x-size-width-badge-default: 1.5em;
+  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
+  --x-size-font-badge-default: var(--x-size-font-base-xs); }
+
 :root {
   --x-color-background-button-default: var(--x-color-base-lead);
   --x-color-border-button-default: var(--x-color-background-button-default);
@@ -128,13 +185,16 @@
   --x-color-border-dropdown-list-default: var(--x-color-border-dropdown-toggle-default);
   --x-color-background-dropdown-default: var(--x-color-base-neutral-100);
   --x-color-background-dropdown-toggle-default: var(--x-color-base-neutral-100);
+  --x-color-background-dropdown-toggle-open-default: var(
+    --x-color-background-dropdown-toggle-default
+  );
   --x-color-background-dropdown-item-default-selected: var(--x-color-base-neutral-95);
   --x-color-background-dropdown-item-default-hover: var(--x-color-base-neutral-95);
-  --x-color-font-dropdown-default: var(--x-color-text-default);
-  --x-color-font-dropdown-toggle-default: var(--x-color-font-dropdown-default);
-  --x-color-font-dropdown-toggle-default-selected: var(--x-color-base-neutral-35);
-  --x-color-font-dropdown-item-default-hover: var(--x-color-base-neutral-35);
-  --x-color-font-dropdown-item-default-selected: var(--x-color-text-default);
+  --x-color-text-dropdown-default: var(--x-color-text-default);
+  --x-color-text-dropdown-toggle-default: var(--x-color-text-dropdown-default);
+  --x-color-text-dropdown-toggle-default-selected: var(--x-color-base-neutral-35);
+  --x-color-text-dropdown-item-default-hover: var(--x-color-base-neutral-35);
+  --x-color-text-dropdown-item-default-selected: var(--x-color-text-default);
   --x-font-family-dropdown-default: var(--x-font-family-text);
   --x-size-font-dropdown-default: var(--x-size-font-text);
   --x-size-line-height-dropdown-default: var(--x-size-line-height-text);
@@ -143,15 +203,24 @@
   --x-number-font-weight-dropdown-item-default-selected: var(--x-number-font-weight-base-regular);
   --x-font-decoration-dropdown-item-default-hover: none;
   --x-font-decoration-dropdown-item-default-selected: none;
-  --x-size-width-dropdown-default: auto;
+  --x-size-width-dropdown-toggle-default: 100%;
+  --x-size-min-width-dropdown-list-default: 100%;
   --x-size-gap-dropdown-default: 0;
+  --x-size-padding-top-dropdown-toggle-default: var(--x-size-padding-top-dropdown-item-default);
+  --x-size-padding-right-dropdown-toggle-default: var(--x-size-padding-right-dropdown-item-default);
+  --x-size-padding-bottom-dropdown-toggle-default: var(
+    --x-size-padding-bottom-dropdown-item-default
+  );
+  --x-size-padding-left-dropdown-toggle-default: var(--x-size-padding-left-dropdown-item-default);
+  --x-size-padding-vertical-dropdown-list-default: 0;
   --x-size-padding-top-dropdown-item-default: var(--x-size-base-04);
   --x-size-padding-right-dropdown-item-default: var(--x-size-base-05);
   --x-size-padding-bottom-dropdown-item-default: var(--x-size-base-04);
   --x-size-padding-left-dropdown-item-default: var(--x-size-base-05);
   --x-size-gap-dropdown-item-default: var(--x-size-base-03);
-  --x-rotation-toggle-icon-collapsed: 0;
-  --x-rotation-toggle-icon-expanded: 180deg; }
+  --x-string-box-shadow-dropdown-default: none;
+  --x-string-overflow-dropdown-toggle-default: hidden;
+  --x-string-overflow-dropdown-list-default: hidden; }
 
 @use 'sass:string';
 .x-dropdown {
@@ -170,45 +239,50 @@
   [dir="rtl"] .x-dropdown__toggle {
     border-right-width: var(--x-size-border-width-left-dropdown-toggle-default); }
   [dir="ltr"] .x-dropdown__toggle {
-            padding-right: var(--x-size-padding-right-dropdown-item-default); }
+            padding-right: var(--x-size-padding-right-dropdown-toggle-default); }
   [dir="rtl"] .x-dropdown__toggle {
-            padding-left: var(--x-size-padding-right-dropdown-item-default); }
+            padding-left: var(--x-size-padding-right-dropdown-toggle-default); }
   [dir="ltr"] .x-dropdown__toggle {
-            padding-left: var(--x-size-padding-left-dropdown-item-default); }
+            padding-left: var(--x-size-padding-left-dropdown-toggle-default); }
   [dir="rtl"] .x-dropdown__toggle {
-            padding-right: var(--x-size-padding-left-dropdown-item-default); }
+            padding-right: var(--x-size-padding-left-dropdown-toggle-default); }
   .x-dropdown__toggle {
     border-style: solid;
     border-top-width: var(--x-size-border-width-top-dropdown-toggle-default);
     border-bottom-width: var(--x-size-border-width-bottom-dropdown-toggle-default);
     border-radius: var(--x-size-border-radius-top-left-dropdown-default) var(--x-size-border-radius-top-right-dropdown-default) var(--x-size-border-radius-bottom-right-dropdown-default) var(--x-size-border-radius-bottom-left-dropdown-default);
     background: var(--x-color-background-dropdown-toggle-default);
-    color: var(--x-color-font-dropdown-toggle-default);
+    color: var(--x-color-text-dropdown-toggle-default);
     border-color: var(--x-color-border-dropdown-toggle-default);
-    -webkit-padding-before: var(--x-size-padding-top-dropdown-item-default);
-            padding-top: var(--x-size-padding-top-dropdown-item-default);
-    -webkit-padding-end: var(--x-size-padding-right-dropdown-item-default);
-    -webkit-padding-after: var(--x-size-padding-bottom-dropdown-item-default);
-            padding-bottom: var(--x-size-padding-bottom-dropdown-item-default);
-    -webkit-padding-start: var(--x-size-padding-left-dropdown-item-default);
+    -webkit-padding-before: var(--x-size-padding-top-dropdown-toggle-default);
+            padding-top: var(--x-size-padding-top-dropdown-toggle-default);
+    -webkit-padding-end: var(--x-size-padding-right-dropdown-toggle-default);
+    -webkit-padding-after: var(--x-size-padding-bottom-dropdown-toggle-default);
+            padding-bottom: var(--x-size-padding-bottom-dropdown-toggle-default);
+    -webkit-padding-start: var(--x-size-padding-left-dropdown-toggle-default);
     gap: var(--x-size-gap-dropdown-item-default);
-    width: var(--x-size-width-dropdown-default);
+    width: var(--x-size-width-dropdown-toggle-default);
     display: -ms-flexbox;
     display: flex;
     -ms-flex-flow: row nowrap;
         flex-flow: row nowrap;
     margin: 0;
     cursor: pointer;
-    overflow: hidden; }
+    overflow: var(--x-string-overflow-dropdown-toggle-default);
+    box-shadow: var(--x-string-box-shadow-dropdown-default); }
     @media not all and (min-resolution: 0.001dpcm) {
       .x-dropdown__toggle {
         gap: 0; }
         .x-dropdown__toggle > *:not(:last-child) {
           margin-right: var(--x-size-gap-dropdown-item-default); } }
-    .x-dropdown__toggle .x-icon {
-      transform: rotate(var(--x-rotation-toggle-icon-collapsed)); }
+    [dir="ltr"] .x-dropdown__toggle * + .x-icon:last-child {
+              margin-left: auto; }
+    [dir="rtl"] .x-dropdown__toggle * + .x-icon:last-child {
+              margin-right: auto; }
+    .x-dropdown__toggle * + .x-icon:last-child {
+      -webkit-margin-start: auto; }
   .x-dropdown__toggle-selected-value {
-    color: var(--x-color-font-dropdown-toggle-default-selected); }
+    color: var(--x-color-text-dropdown-toggle-default-selected); }
   [dir="ltr"] .x-dropdown__items-list {
     border-right-width: var(--x-size-border-width-right-dropdown-list-default); }
   [dir="rtl"] .x-dropdown__items-list {
@@ -218,12 +292,12 @@
   [dir="rtl"] .x-dropdown__items-list {
     border-right-width: var(--x-size-border-width-left-dropdown-list-default); }
   .x-dropdown__items-list {
+    background: var(--x-color-background-dropdown-default);
     box-sizing: border-box;
-    width: 100%;
+    min-width: var(--x-size-min-width-dropdown-list-default);
     position: absolute;
-    left: 0;
     top: calc(100% + var(--x-size-gap-dropdown-default));
-    overflow: hidden;
+    overflow: var(--x-string-overflow-dropdown-list-default);
     border-color: var(--x-color-border-dropdown-list-default);
     border-top-width: var(--x-size-border-width-top-dropdown-list-default);
     border-bottom-width: var(--x-size-border-width-bottom-dropdown-list-default);
@@ -231,7 +305,12 @@
     border-style: solid;
     margin: 0;
     padding: 0;
+    box-shadow: var(--x-string-box-shadow-dropdown-default);
     z-index: 1; }
+    .x-dropdown__items-list:before, .x-dropdown__items-list:after {
+      content: '';
+      display: block;
+      height: var(--x-size-padding-vertical-dropdown-list-default); }
   [dir="ltr"] .x-dropdown__item {
             padding-left: var(--x-size-padding-left-dropdown-item-default); }
   [dir="rtl"] .x-dropdown__item {
@@ -254,11 +333,12 @@
     display: flex;
     -ms-flex-flow: row nowrap;
         flex-flow: row nowrap;
-    -ms-flex-pack: justify;
-        justify-content: space-between;
+    -ms-flex-pack: start;
+        justify-content: flex-start;
     text-align: left;
     width: 100%;
     margin: 0;
+    white-space: nowrap;
     cursor: pointer; }
     @media not all and (min-resolution: 0.001dpcm) {
       .x-dropdown__item {
@@ -266,19 +346,31 @@
         .x-dropdown__item > *:not(:last-child) {
           margin-right: var(--x-size-gap-dropdown-item-default); } }
     .x-dropdown__item:hover, .x-dropdown__item--is-highlighted {
-      color: var(--x-color-font-dropdown-item-default-hover);
+      color: var(--x-color-text-dropdown-item-default-hover);
       background-color: var(--x-color-background-dropdown-item-default-hover);
       font-weight: var(--x-number-font-weight-dropdown-item-default-hover);
       -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
               text-decoration: var(--x-font-decoration-dropdown-item-default-hover); }
     .x-dropdown__item--is-selected {
-      color: var(--x-color-font-dropdown-item-default-selected);
+      color: var(--x-color-text-dropdown-item-default-selected);
       background-color: var(--x-color-background-dropdown-item-default-selected);
       font-weight: var(--x-number-font-weight-dropdown-item-default-selected);
       -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
               text-decoration: var(--x-font-decoration-dropdown-item-default-selected); }
-  .x-dropdown--is-open .x-dropdown__toggle .x-icon {
-    transform: rotate(var(--x-rotation-toggle-icon-expanded)); }
+    [dir="ltr"] .x-dropdown__item .x-icon:last-child {
+              margin-left: auto; }
+    [dir="rtl"] .x-dropdown__item .x-icon:last-child {
+              margin-right: auto; }
+    .x-dropdown__item .x-icon:last-child {
+      -webkit-margin-start: auto; }
+  .x-dropdown--is-open {
+    --x-color-background-dropdown-toggle-default: var(
+      --x-color-background-dropdown-toggle-open-default
+    ); }
+  [dir="ltr"] .x-dropdown--right .x-dropdown__items-list {
+    right: 0; }
+  [dir="rtl"] .x-dropdown--right .x-dropdown__items-list {
+    left: 0; }
 
 :root {
   --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
@@ -316,13 +408,16 @@
   --x-color-border-dropdown-list-default: var(--x-color-border-dropdown-toggle-default);
   --x-color-background-dropdown-default: var(--x-color-base-neutral-100);
   --x-color-background-dropdown-toggle-default: var(--x-color-base-neutral-100);
+  --x-color-background-dropdown-toggle-open-default: var(
+    --x-color-background-dropdown-toggle-default
+  );
   --x-color-background-dropdown-item-default-selected: var(--x-color-base-neutral-95);
   --x-color-background-dropdown-item-default-hover: var(--x-color-base-neutral-95);
-  --x-color-font-dropdown-default: var(--x-color-text-default);
-  --x-color-font-dropdown-toggle-default: var(--x-color-font-dropdown-default);
-  --x-color-font-dropdown-toggle-default-selected: var(--x-color-base-neutral-35);
-  --x-color-font-dropdown-item-default-hover: var(--x-color-base-neutral-35);
-  --x-color-font-dropdown-item-default-selected: var(--x-color-text-default);
+  --x-color-text-dropdown-default: var(--x-color-text-default);
+  --x-color-text-dropdown-toggle-default: var(--x-color-text-dropdown-default);
+  --x-color-text-dropdown-toggle-default-selected: var(--x-color-base-neutral-35);
+  --x-color-text-dropdown-item-default-hover: var(--x-color-base-neutral-35);
+  --x-color-text-dropdown-item-default-selected: var(--x-color-text-default);
   --x-font-family-dropdown-default: var(--x-font-family-text);
   --x-size-font-dropdown-default: var(--x-size-font-text);
   --x-size-line-height-dropdown-default: var(--x-size-line-height-text);
@@ -331,15 +426,24 @@
   --x-number-font-weight-dropdown-item-default-selected: var(--x-number-font-weight-base-regular);
   --x-font-decoration-dropdown-item-default-hover: none;
   --x-font-decoration-dropdown-item-default-selected: none;
-  --x-size-width-dropdown-default: auto;
+  --x-size-width-dropdown-toggle-default: 100%;
+  --x-size-min-width-dropdown-list-default: 100%;
   --x-size-gap-dropdown-default: 0;
+  --x-size-padding-top-dropdown-toggle-default: var(--x-size-padding-top-dropdown-item-default);
+  --x-size-padding-right-dropdown-toggle-default: var(--x-size-padding-right-dropdown-item-default);
+  --x-size-padding-bottom-dropdown-toggle-default: var(
+    --x-size-padding-bottom-dropdown-item-default
+  );
+  --x-size-padding-left-dropdown-toggle-default: var(--x-size-padding-left-dropdown-item-default);
+  --x-size-padding-vertical-dropdown-list-default: 0;
   --x-size-padding-top-dropdown-item-default: var(--x-size-base-04);
   --x-size-padding-right-dropdown-item-default: var(--x-size-base-05);
   --x-size-padding-bottom-dropdown-item-default: var(--x-size-base-04);
   --x-size-padding-left-dropdown-item-default: var(--x-size-base-05);
   --x-size-gap-dropdown-item-default: var(--x-size-base-03);
-  --x-rotation-toggle-icon-collapsed: 0;
-  --x-rotation-toggle-icon-expanded: 180deg; }
+  --x-string-box-shadow-dropdown-default: none;
+  --x-string-overflow-dropdown-toggle-default: hidden;
+  --x-string-overflow-dropdown-list-default: hidden; }
 
 :root {
   --x-color-background-facet-default: transparent;
@@ -1022,6 +1126,7 @@
   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 {
@@ -2132,7 +2237,10 @@
   --x-size-base-07: 32px;
   --x-size-base-08: 40px;
   --x-size-base-09: 48px;
-  --x-size-base-10: 56px; }
+  --x-size-base-10: 56px;
+  --x-size-base-11: 64px;
+  --x-size-base-12: 72px;
+  --x-size-base-13: 80px; }
 
 :root {
   --x-font-family-base: 'Montserrat', sans-serif;