@empathyco/x-components 3.0.0-alpha.19 → 3.0.0-alpha.23

package/CHANGELOG.md

@@ -3,6 +3,56 @@
 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.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)
+
+
+### Features
+
+* **design-system:** add `Shadow` component ([2592a4d](https://github.com/empathyco/x/commit/2592a4d9975109b0733a550c7d40f271ec984456)), closes [EX-4739](https://searchbroker.atlassian.net/browse/EX-4739)
+* **e2e:** mock adapter for query suggestions tests  ([8566a82](https://github.com/empathyco/x/commit/8566a82954f12bf1592e398a8eed5871596b6f2a)), closes [EX-4645](https://searchbroker.atlassian.net/browse/EX-4645)
+* export store utils ([663f952](https://github.com/empathyco/x/commit/663f95227815fe2f7a9fcbb0b290774f26b4d7eb)), closes [EX-4742](https://searchbroker.atlassian.net/browse/EX-4742)
+
+
+### Bug Fixes
+
+* **design-system:** fix typo. Increase `gap` and `padding` tokens up to 10.  Add class for list item flex none ([c47a888](https://github.com/empathyco/x/commit/c47a888c43ceb9f152f55b3831aaf575586942a3)), closes [EX-4720](https://searchbroker.atlassian.net/browse/EX-4720)
+
+
+
+## [3.0.0-alpha.20](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.19...@empathyco/x-components@3.0.0-alpha.20) (2021-09-15)
+
+
+### Features
+
+* **no-suggestions:** Remove `no-suggestions` module. ([4a859e7](https://github.com/empathyco/x/commit/4a859e787736feccc0a38b25ae7594553f8f4978)), closes [EX-4736](https://searchbroker.atlassian.net/browse/EX-4736)
+* **search:** save `Redirection`'s entities ([cdba4a6](https://github.com/empathyco/x/commit/cdba4a656f7cea74115d06173151d450657d1aed)), closes [EX-4730](https://searchbroker.atlassian.net/browse/EX-4730)
+
+
+
 ## [3.0.0-alpha.19](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.18...@empathyco/x-components@3.0.0-alpha.19) (2021-09-13)
 
 

package/core/index.js

@@ -124,7 +124,9 @@ export { XPlugin, xPlugin } from '../js/plugins/x-plugin.js';
 export { xComponentMixin } from '../js/components/x-component.mixin.js';
 export { infiniteScroll } from '../js/directives/infinite-scroll/infinite-scroll.js';
 export { compileMessage } from '../js/filters/compile-message.filter.js';
-export { createStoreEmitters } from '../js/store/store.utils.js';
+export { createFetchAndSaveAction } from '../js/store/utils/fetch-and-save-action.utils.js';
+export { setStatus } from '../js/store/utils/status-store.utils.js';
+export { createStoreEmitters } from '../js/store/utils/store-emitters.utils.js';
 export { createWireFromFunction, wireCommit, wireCommitWithoutPayload, wireDispatch, wireDispatchWithoutPayload, wireService, wireServiceWithoutPayload } from '../js/wiring/wires.factory.js';
 export { createWiring, getStateAndGettersFromModule } from '../js/wiring/wiring.utils.js';
 export { namespacedWireCommit, namespacedWireCommitWithoutPayload, namespacedWireDispatch, namespacedWireDispatchWithoutPayload } from '../js/wiring/namespaced-wires.factory.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

@@ -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-secondary.css

@@ -6,5 +6,5 @@
 .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-border-button-default: var(--x-color-border-button-secondary);
   --x-color-text-button-default: var(--x-color-text-button-secondary); }

package/design-system/default-theme.css

@@ -128,13 +128,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 +146,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 +182,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 +235,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 +248,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 +276,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 +289,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 +351,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 +369,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 +1069,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 {
@@ -1106,6 +1154,10 @@
   -ms-flex-item-align: stretch;
       align-self: stretch; }
 
+.x-list > .x-list__item--flex-none {
+  -ms-flex: none;
+      flex: none; }
+
 .x-list > .x-list__item--01 {
   -ms-flex: 1 12 auto;
       flex: 1 12 auto; }
@@ -2128,7 +2180,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/dropdown-default.css

@@ -34,13 +34,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);
@@ -49,15 +52,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 {
@@ -76,45 +88,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 {
@@ -124,12 +141,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);
@@ -137,7 +154,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 {
@@ -160,11 +182,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 {
@@ -172,16 +195,28 @@
         .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; }

package/design-system/dropdown-l.css

@@ -2,4 +2,4 @@
   --x-size-width-dropdown-l: 202px; }
 
 .x-dropdown.x-dropdown--l {
-  --x-size-width-dropdown-default: var(--x-size-width-dropdown-l); }
+  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l); }

package/design-system/dropdown-m.css

@@ -2,4 +2,4 @@
   --x-size-width-dropdown-m: 130px; }
 
 .x-dropdown.x-dropdown--m {
-  --x-size-width-dropdown-default: var(--x-size-width-dropdown-m); }
+  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m); }

package/design-system/dropdown-s.css

@@ -2,4 +2,4 @@
   --x-size-width-dropdown-s: 74px; }
 
 .x-dropdown.x-dropdown--s {
-  --x-size-width-dropdown-default: var(--x-size-width-dropdown-s); }
+  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-s); }

package/design-system/dropdown-xl.css

@@ -2,4 +2,4 @@
   --x-size-width-dropdown-xl: 282px; }
 
 .x-dropdown.x-dropdown--xl {
-  --x-size-width-dropdown-default: var(--x-size-width-dropdown-xl); }
+  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-xl); }