@empathyco/x-components 6.0.0-alpha.92 → 6.0.0-alpha.93

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.0-alpha.93 (2025-06-03)
+
+* chore(deps): pin dependency @cucumber/messages to 27.2.0 ([7f80eb2](https://github.com/empathyco/x/commit/7f80eb2))
+
+
+
+
+
 ## [6.0.0-alpha.92](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.91...@empathyco/x-components@6.0.0-alpha.92) (2025-06-03)
 
 **Note:** Version bump only for package @empathyco/x-components

package/design-system/deprecated-full-theme.css

@@ -1188,49 +1188,6 @@
 .x-self-baseline {
   align-self: baseline !important;
 }
-.x-fill--lead {
-  fill: var(--x-color-base-lead) !important;
-}
-
-.x-fill--auxiliary {
-  fill: var(--x-color-base-auxiliary) !important;
-}
-
-.x-fill--neutral-10 {
-  fill: var(--x-color-base-neutral-10) !important;
-}
-
-.x-fill--neutral-35 {
-  fill: var(--x-color-base-neutral-35) !important;
-}
-
-.x-fill--neutral-70 {
-  fill: var(--x-color-base-neutral-70) !important;
-}
-
-.x-fill--neutral-95 {
-  fill: var(--x-color-base-neutral-95) !important;
-}
-
-.x-fill--neutral-100 {
-  fill: var(--x-color-base-neutral-100) !important;
-}
-
-.x-fill--accent {
-  fill: var(--x-color-base-accent) !important;
-}
-
-.x-fill--enable {
-  fill: var(--x-color-base-enable) !important;
-}
-
-.x-fill--disable {
-  fill: var(--x-color-base-disable) !important;
-}
-
-.x-fill--transparent {
-  fill: var(--x-color-base-transparent) !important;
-}
 /* Material Elevations extracted from:
     https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
 */
@@ -1319,6 +1276,49 @@
     0 34px 38px -7px rgba(0, 0, 0, 0.14), 0 29px 46px -12px rgba(0, 0, 0, 0.12),
     0 11px 15px -7px rgba(0, 0, 0, 0.2);
 }
+.x-fill--lead {
+  fill: var(--x-color-base-lead) !important;
+}
+
+.x-fill--auxiliary {
+  fill: var(--x-color-base-auxiliary) !important;
+}
+
+.x-fill--neutral-10 {
+  fill: var(--x-color-base-neutral-10) !important;
+}
+
+.x-fill--neutral-35 {
+  fill: var(--x-color-base-neutral-35) !important;
+}
+
+.x-fill--neutral-70 {
+  fill: var(--x-color-base-neutral-70) !important;
+}
+
+.x-fill--neutral-95 {
+  fill: var(--x-color-base-neutral-95) !important;
+}
+
+.x-fill--neutral-100 {
+  fill: var(--x-color-base-neutral-100) !important;
+}
+
+.x-fill--accent {
+  fill: var(--x-color-base-accent) !important;
+}
+
+.x-fill--enable {
+  fill: var(--x-color-base-enable) !important;
+}
+
+.x-fill--disable {
+  fill: var(--x-color-base-disable) !important;
+}
+
+.x-fill--transparent {
+  fill: var(--x-color-base-transparent) !important;
+}
 /* Material Elevations extracted from:
     https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
 */
@@ -4591,6 +4591,28 @@
   --x-size-gap-row-19: var(--x-size-base-19);
   --x-size-gap-row-20: var(--x-size-base-20);
 }
+:root {
+  --x-size-gap-row-01: var(--x-size-base-01);
+  --x-size-gap-row-02: var(--x-size-base-02);
+  --x-size-gap-row-03: var(--x-size-base-03);
+  --x-size-gap-row-04: var(--x-size-base-04);
+  --x-size-gap-row-05: var(--x-size-base-05);
+  --x-size-gap-row-06: var(--x-size-base-06);
+  --x-size-gap-row-07: var(--x-size-base-07);
+  --x-size-gap-row-08: var(--x-size-base-08);
+  --x-size-gap-row-09: var(--x-size-base-09);
+  --x-size-gap-row-10: var(--x-size-base-10);
+  --x-size-gap-row-11: var(--x-size-base-11);
+  --x-size-gap-row-12: var(--x-size-base-12);
+  --x-size-gap-row-13: var(--x-size-base-13);
+  --x-size-gap-row-14: var(--x-size-base-14);
+  --x-size-gap-row-15: var(--x-size-base-15);
+  --x-size-gap-row-16: var(--x-size-base-16);
+  --x-size-gap-row-17: var(--x-size-base-17);
+  --x-size-gap-row-18: var(--x-size-base-18);
+  --x-size-gap-row-19: var(--x-size-base-19);
+  --x-size-gap-row-20: var(--x-size-base-20);
+}
 
 .x-row--gap-01 {
   --x-size-gap-row: var(--x-size-gap-row-01);
@@ -4679,28 +4701,6 @@
   --x-size-span-row-item: 1;
   --x-size-start-row-item: 0;
 }
-:root {
-  --x-size-gap-row-01: var(--x-size-base-01);
-  --x-size-gap-row-02: var(--x-size-base-02);
-  --x-size-gap-row-03: var(--x-size-base-03);
-  --x-size-gap-row-04: var(--x-size-base-04);
-  --x-size-gap-row-05: var(--x-size-base-05);
-  --x-size-gap-row-06: var(--x-size-base-06);
-  --x-size-gap-row-07: var(--x-size-base-07);
-  --x-size-gap-row-08: var(--x-size-base-08);
-  --x-size-gap-row-09: var(--x-size-base-09);
-  --x-size-gap-row-10: var(--x-size-base-10);
-  --x-size-gap-row-11: var(--x-size-base-11);
-  --x-size-gap-row-12: var(--x-size-base-12);
-  --x-size-gap-row-13: var(--x-size-base-13);
-  --x-size-gap-row-14: var(--x-size-base-14);
-  --x-size-gap-row-15: var(--x-size-base-15);
-  --x-size-gap-row-16: var(--x-size-base-16);
-  --x-size-gap-row-17: var(--x-size-base-17);
-  --x-size-gap-row-18: var(--x-size-base-18);
-  --x-size-gap-row-19: var(--x-size-base-19);
-  --x-size-gap-row-20: var(--x-size-base-20);
-}
 :root {
   --x-size-gap-row: 0;
   --x-size-padding-row: 0;
@@ -4919,14 +4919,6 @@
 :root {
   --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
 }
-:root {
-  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
-}
-
-.x-result.x-result--card {
-  overflow: hidden;
-  --x-size-border-radius-result-default: var(--x-size-border-radius-result-card);
-}
 :root {
   --x-size-height-progress-bar-line-default: var(--x-size-base-02);
   --x-size-width-progress-bar-line-default: var(--x-size-base-20);
@@ -4936,6 +4928,14 @@
   --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
   --x-size-border-width-progress-bar-default: 0;
 }
+:root {
+  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
+}
+
+.x-result.x-result--card {
+  overflow: hidden;
+  --x-size-border-radius-result-default: var(--x-size-border-radius-result-card);
+}
 :root {
   --x-size-height-progress-bar-line-default: var(--x-size-base-02);
   --x-size-width-progress-bar-line-default: var(--x-size-base-20);
@@ -5065,10 +5065,6 @@
   --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
   --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
 }
-:root {
-  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
-  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
-}
 
 .x-picture--cover.x-picture {
   position: relative;
@@ -5085,6 +5081,10 @@
   width: 100%;
   height: 100%;
 }
+:root {
+  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
+  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
+}
 :root {
   --x-color-background-picture-colored: var(--x-color-base-neutral-95);
   --x-mix-blend-mode-picture-colored: multiply;
@@ -6064,86 +6064,277 @@
   --x-size-gap-list-20: var(--x-size-base-20);
 }
 :root {
-  --x-size-gap-list-01: var(--x-size-base-01);
-  --x-size-gap-list-02: var(--x-size-base-02);
-  --x-size-gap-list-03: var(--x-size-base-03);
-  --x-size-gap-list-04: var(--x-size-base-04);
-  --x-size-gap-list-05: var(--x-size-base-05);
-  --x-size-gap-list-06: var(--x-size-base-06);
-  --x-size-gap-list-07: var(--x-size-base-07);
-  --x-size-gap-list-08: var(--x-size-base-08);
-  --x-size-gap-list-09: var(--x-size-base-09);
-  --x-size-gap-list-10: var(--x-size-base-10);
-  --x-size-gap-list-11: var(--x-size-base-11);
-  --x-size-gap-list-12: var(--x-size-base-12);
-  --x-size-gap-list-13: var(--x-size-base-13);
-  --x-size-gap-list-14: var(--x-size-base-14);
-  --x-size-gap-list-15: var(--x-size-base-15);
-  --x-size-gap-list-16: var(--x-size-base-16);
-  --x-size-gap-list-17: var(--x-size-base-17);
-  --x-size-gap-list-18: var(--x-size-base-18);
-  --x-size-gap-list-19: var(--x-size-base-19);
-  --x-size-gap-list-20: var(--x-size-base-20);
+  --x-string-flow-list: column nowrap;
+  --x-size-padding-list: 0;
+  --x-size-gap-list: 0;
+  --x-size-justify-list: stretch;
+  --x-size-align-list: stretch;
+  --x-size-align-list-stretch: stretch;
+}
+:root {
+  --x-string-flow-list: column nowrap;
+  --x-size-padding-list: 0;
+  --x-size-gap-list: 0;
+  --x-size-justify-list: stretch;
+  --x-size-align-list: stretch;
+  --x-size-align-list-stretch: stretch;
 }
 
-.x-list--gap-01.x-list {
-  gap: var(--x-size-gap-list-01);
+.x-list {
+  display: flex;
+  flex-flow: var(--x-string-flow-list);
+  list-style: none;
+  gap: var(--x-size-gap-list);
+  margin: 0;
+  padding: var(--x-size-padding-list);
+  justify-content: var(--x-size-justify-list);
+  align-items: var(--x-size-align-list);
+  min-width: 0;
 }
 @media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-01.x-list:not(.x-list--horizontal), .x-list--gap-01.x-list.x-list--vertical {
+  .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
     gap: 0;
   }
-  .x-list--gap-01.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-01.x-list.x-list--vertical > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-01);
+  .x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list.x-list--vertical > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list);
   }
-  .x-list--gap-01.x-list.x-list--horizontal {
+  .x-list.x-list--horizontal {
     gap: 0;
   }
-  .x-list--gap-01.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-01);
+  .x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list);
   }
-  .x-list--gap-01.x-list.x-list--wrap {
+  .x-list.x-list--wrap, .x-list.x-list--wrap-reverse {
     gap: 0;
   }
-  .x-list--gap-01.x-list.x-list--wrap > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-01);
-    margin-bottom: var(--x-size-gap-list-01);
+  .x-list.x-list--wrap > *:not(:last-child), .x-list.x-list--wrap-reverse > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list);
+    margin-bottom: var(--x-size-gap-list);
   }
 }
 
-.x-list--gap-02.x-list {
-  gap: var(--x-size-gap-list-02);
+.x-list--vertical.x-list {
+  flex-flow: column nowrap;
 }
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-02.x-list:not(.x-list--horizontal), .x-list--gap-02.x-list.x-list--vertical {
-    gap: 0;
-  }
-  .x-list--gap-02.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-02.x-list.x-list--vertical > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-02);
-  }
-  .x-list--gap-02.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-02.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-02);
-  }
-  .x-list--gap-02.x-list.x-list--wrap {
-    gap: 0;
-  }
-  .x-list--gap-02.x-list.x-list--wrap > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-02);
-    margin-bottom: var(--x-size-gap-list-02);
-  }
+
+.x-list--horizontal.x-list {
+  flex-flow: row nowrap;
 }
 
-.x-list--gap-03.x-list {
-  gap: var(--x-size-gap-list-03);
+.x-list--wrap.x-list {
+  flex-flow: row wrap;
 }
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-03.x-list:not(.x-list--horizontal), .x-list--gap-03.x-list.x-list--vertical {
-    gap: 0;
-  }
-  .x-list--gap-03.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-03.x-list.x-list--vertical > *:not(:last-child) {
+
+.x-list--wrap-reverse.x-list {
+  flex-flow: row wrap-reverse;
+}
+
+.x-list--justify-stretch.x-list {
+  justify-content: stretch;
+}
+
+.x-list--justify-center.x-list {
+  justify-content: center;
+}
+
+.x-list--justify-end.x-list {
+  justify-content: flex-end;
+}
+
+.x-list--justify-start.x-list {
+  justify-content: flex-start;
+}
+
+.x-list--align-stretch.x-list {
+  align-items: stretch;
+}
+
+.x-list--align-center.x-list {
+  align-items: center;
+}
+
+.x-list--align-baseline.x-list {
+  align-items: baseline;
+}
+
+.x-list--align-end.x-list {
+  align-items: flex-end;
+}
+
+.x-list--align-start.x-list {
+  align-items: flex-start;
+}
+
+.x-list > .x-list__item--expand {
+  flex: 1 1 auto;
+}
+.x-list > .x-list__item--no-expand {
+  flex: 0 0 auto;
+}
+.x-list.x-list--horizontal > .x-list__item--expand {
+  min-width: 0;
+}
+.x-list:not(.x-list--horizontal) > .x-list__item--expand {
+  min-height: 0;
+}
+.x-list > .x-list__item--stretch {
+  align-self: stretch;
+}
+.x-list > .x-list__item--flex-none {
+  flex: none;
+}
+.x-list > .x-list__item--01 {
+  flex: 1 12 auto;
+}
+.x-list > .x-list__item--02 {
+  flex: 2 11 auto;
+}
+.x-list > .x-list__item--03 {
+  flex: 3 10 auto;
+}
+.x-list > .x-list__item--04 {
+  flex: 4 9 auto;
+}
+.x-list > .x-list__item--05 {
+  flex: 5 8 auto;
+}
+.x-list > .x-list__item--06 {
+  flex: 6 7 auto;
+}
+.x-list > .x-list__item--07 {
+  flex: 7 6 auto;
+}
+.x-list > .x-list__item--08 {
+  flex: 8 5 auto;
+}
+.x-list > .x-list__item--09 {
+  flex: 9 4 auto;
+}
+.x-list > .x-list__item--10 {
+  flex: 10 3 auto;
+}
+.x-list > .x-list__item--11 {
+  flex: 11 2 auto;
+}
+.x-list > .x-list__item--12 {
+  flex: 12 1 auto;
+}
+:root {
+  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-bottom-right-input-group-pill: var(
+    --x-size-border-radius-input-group-pill
+  );
+  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
+}
+:root {
+  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-bottom-right-input-group-pill: var(
+    --x-size-border-radius-input-group-pill
+  );
+  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
+}
+
+.x-input-group--pill.x-input-group,
+.x-input-group--pill .x-input-group {
+  --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-top-left-input-group-default: var(
+    --x-size-border-radius-top-left-input-group-pill
+  );
+  --x-size-border-radius-top-right-input-group-default: var(
+    --x-size-border-radius-top-right-input-group-pill
+  );
+  --x-size-border-radius-bottom-right-input-group-default: var(
+    --x-size-border-radius-bottom-right-input-group-pill
+  );
+  --x-size-border-radius-bottom-left-input-group-default: var(
+    --x-size-border-radius-bottom-left-input-group-pill
+  );
+}
+:root {
+  --x-size-gap-list-01: var(--x-size-base-01);
+  --x-size-gap-list-02: var(--x-size-base-02);
+  --x-size-gap-list-03: var(--x-size-base-03);
+  --x-size-gap-list-04: var(--x-size-base-04);
+  --x-size-gap-list-05: var(--x-size-base-05);
+  --x-size-gap-list-06: var(--x-size-base-06);
+  --x-size-gap-list-07: var(--x-size-base-07);
+  --x-size-gap-list-08: var(--x-size-base-08);
+  --x-size-gap-list-09: var(--x-size-base-09);
+  --x-size-gap-list-10: var(--x-size-base-10);
+  --x-size-gap-list-11: var(--x-size-base-11);
+  --x-size-gap-list-12: var(--x-size-base-12);
+  --x-size-gap-list-13: var(--x-size-base-13);
+  --x-size-gap-list-14: var(--x-size-base-14);
+  --x-size-gap-list-15: var(--x-size-base-15);
+  --x-size-gap-list-16: var(--x-size-base-16);
+  --x-size-gap-list-17: var(--x-size-base-17);
+  --x-size-gap-list-18: var(--x-size-base-18);
+  --x-size-gap-list-19: var(--x-size-base-19);
+  --x-size-gap-list-20: var(--x-size-base-20);
+}
+
+.x-list--gap-01.x-list {
+  gap: var(--x-size-gap-list-01);
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-01.x-list:not(.x-list--horizontal), .x-list--gap-01.x-list.x-list--vertical {
+    gap: 0;
+  }
+  .x-list--gap-01.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-01.x-list.x-list--vertical > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-01);
+  }
+  .x-list--gap-01.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-01.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-01);
+  }
+  .x-list--gap-01.x-list.x-list--wrap {
+    gap: 0;
+  }
+  .x-list--gap-01.x-list.x-list--wrap > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-01);
+    margin-bottom: var(--x-size-gap-list-01);
+  }
+}
+
+.x-list--gap-02.x-list {
+  gap: var(--x-size-gap-list-02);
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-02.x-list:not(.x-list--horizontal), .x-list--gap-02.x-list.x-list--vertical {
+    gap: 0;
+  }
+  .x-list--gap-02.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-02.x-list.x-list--vertical > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-02);
+  }
+  .x-list--gap-02.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-02.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-02);
+  }
+  .x-list--gap-02.x-list.x-list--wrap {
+    gap: 0;
+  }
+  .x-list--gap-02.x-list.x-list--wrap > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-02);
+    margin-bottom: var(--x-size-gap-list-02);
+  }
+}
+
+.x-list--gap-03.x-list {
+  gap: var(--x-size-gap-list-03);
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-03.x-list:not(.x-list--horizontal), .x-list--gap-03.x-list.x-list--vertical {
+    gap: 0;
+  }
+  .x-list--gap-03.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-03.x-list.x-list--vertical > *:not(:last-child) {
     margin-bottom: var(--x-size-gap-list-03);
   }
   .x-list--gap-03.x-list.x-list--horizontal {
@@ -6545,245 +6736,45 @@
   }
   .x-list--gap-19.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-19.x-list.x-list--vertical > *:not(:last-child) {
     margin-bottom: var(--x-size-gap-list-19);
-  }
-  .x-list--gap-19.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-19.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-19);
-  }
-  .x-list--gap-19.x-list.x-list--wrap {
-    gap: 0;
-  }
-  .x-list--gap-19.x-list.x-list--wrap > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-19);
-    margin-bottom: var(--x-size-gap-list-19);
-  }
-}
-
-.x-list--gap-20.x-list {
-  gap: var(--x-size-gap-list-20);
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list--gap-20.x-list:not(.x-list--horizontal), .x-list--gap-20.x-list.x-list--vertical {
-    gap: 0;
-  }
-  .x-list--gap-20.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-20.x-list.x-list--vertical > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list-20);
-  }
-  .x-list--gap-20.x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list--gap-20.x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-20);
-  }
-  .x-list--gap-20.x-list.x-list--wrap {
-    gap: 0;
-  }
-  .x-list--gap-20.x-list.x-list--wrap > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list-20);
-    margin-bottom: var(--x-size-gap-list-20);
-  }
-}
-:root {
-  --x-string-flow-list: column nowrap;
-  --x-size-padding-list: 0;
-  --x-size-gap-list: 0;
-  --x-size-justify-list: stretch;
-  --x-size-align-list: stretch;
-  --x-size-align-list-stretch: stretch;
-}
-:root {
-  --x-string-flow-list: column nowrap;
-  --x-size-padding-list: 0;
-  --x-size-gap-list: 0;
-  --x-size-justify-list: stretch;
-  --x-size-align-list: stretch;
-  --x-size-align-list-stretch: stretch;
-}
-
-.x-list {
-  display: flex;
-  flex-flow: var(--x-string-flow-list);
-  list-style: none;
-  gap: var(--x-size-gap-list);
-  margin: 0;
-  padding: var(--x-size-padding-list);
-  justify-content: var(--x-size-justify-list);
-  align-items: var(--x-size-align-list);
-  min-width: 0;
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
-    gap: 0;
-  }
-  .x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list.x-list--vertical > *:not(:last-child) {
-    margin-bottom: var(--x-size-gap-list);
-  }
-  .x-list.x-list--horizontal {
-    gap: 0;
-  }
-  .x-list.x-list--horizontal > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list);
-  }
-  .x-list.x-list--wrap, .x-list.x-list--wrap-reverse {
-    gap: 0;
-  }
-  .x-list.x-list--wrap > *:not(:last-child), .x-list.x-list--wrap-reverse > *:not(:last-child) {
-    margin-right: var(--x-size-gap-list);
-    margin-bottom: var(--x-size-gap-list);
-  }
-}
-
-.x-list--vertical.x-list {
-  flex-flow: column nowrap;
-}
-
-.x-list--horizontal.x-list {
-  flex-flow: row nowrap;
-}
-
-.x-list--wrap.x-list {
-  flex-flow: row wrap;
-}
-
-.x-list--wrap-reverse.x-list {
-  flex-flow: row wrap-reverse;
-}
-
-.x-list--justify-stretch.x-list {
-  justify-content: stretch;
-}
-
-.x-list--justify-center.x-list {
-  justify-content: center;
-}
-
-.x-list--justify-end.x-list {
-  justify-content: flex-end;
-}
-
-.x-list--justify-start.x-list {
-  justify-content: flex-start;
-}
-
-.x-list--align-stretch.x-list {
-  align-items: stretch;
-}
-
-.x-list--align-center.x-list {
-  align-items: center;
-}
-
-.x-list--align-baseline.x-list {
-  align-items: baseline;
-}
-
-.x-list--align-end.x-list {
-  align-items: flex-end;
-}
-
-.x-list--align-start.x-list {
-  align-items: flex-start;
-}
-
-.x-list > .x-list__item--expand {
-  flex: 1 1 auto;
-}
-.x-list > .x-list__item--no-expand {
-  flex: 0 0 auto;
-}
-.x-list.x-list--horizontal > .x-list__item--expand {
-  min-width: 0;
-}
-.x-list:not(.x-list--horizontal) > .x-list__item--expand {
-  min-height: 0;
-}
-.x-list > .x-list__item--stretch {
-  align-self: stretch;
-}
-.x-list > .x-list__item--flex-none {
-  flex: none;
-}
-.x-list > .x-list__item--01 {
-  flex: 1 12 auto;
-}
-.x-list > .x-list__item--02 {
-  flex: 2 11 auto;
-}
-.x-list > .x-list__item--03 {
-  flex: 3 10 auto;
-}
-.x-list > .x-list__item--04 {
-  flex: 4 9 auto;
-}
-.x-list > .x-list__item--05 {
-  flex: 5 8 auto;
-}
-.x-list > .x-list__item--06 {
-  flex: 6 7 auto;
-}
-.x-list > .x-list__item--07 {
-  flex: 7 6 auto;
-}
-.x-list > .x-list__item--08 {
-  flex: 8 5 auto;
-}
-.x-list > .x-list__item--09 {
-  flex: 9 4 auto;
-}
-.x-list > .x-list__item--10 {
-  flex: 10 3 auto;
-}
-.x-list > .x-list__item--11 {
-  flex: 11 2 auto;
-}
-.x-list > .x-list__item--12 {
-  flex: 12 1 auto;
-}
-:root {
-  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-bottom-right-input-group-pill: var(
-    --x-size-border-radius-input-group-pill
-  );
-  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
-}
-:root {
-  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-bottom-right-input-group-pill: var(
-    --x-size-border-radius-input-group-pill
-  );
-  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
+  }
+  .x-list--gap-19.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-19.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-19);
+  }
+  .x-list--gap-19.x-list.x-list--wrap {
+    gap: 0;
+  }
+  .x-list--gap-19.x-list.x-list--wrap > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-19);
+    margin-bottom: var(--x-size-gap-list-19);
+  }
 }
 
-.x-input-group--pill.x-input-group,
-.x-input-group--pill .x-input-group {
-  --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-top-left-input-group-default: var(
-    --x-size-border-radius-top-left-input-group-pill
-  );
-  --x-size-border-radius-top-right-input-group-default: var(
-    --x-size-border-radius-top-right-input-group-pill
-  );
-  --x-size-border-radius-bottom-right-input-group-default: var(
-    --x-size-border-radius-bottom-right-input-group-pill
-  );
-  --x-size-border-radius-bottom-left-input-group-default: var(
-    --x-size-border-radius-bottom-left-input-group-pill
-  );
+.x-list--gap-20.x-list {
+  gap: var(--x-size-gap-list-20);
 }
-:root {
-  --x-size-padding-left-input-group-line: 0;
-  --x-size-padding-right-input-group-line: 0;
-  --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
-  --x-size-border-width-top-input-group-line: 0;
-  --x-size-border-width-right-input-group-line: 0;
-  --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
-  --x-size-border-width-left-input-group-line: 0;
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-list--gap-20.x-list:not(.x-list--horizontal), .x-list--gap-20.x-list.x-list--vertical {
+    gap: 0;
+  }
+  .x-list--gap-20.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-20.x-list.x-list--vertical > *:not(:last-child) {
+    margin-bottom: var(--x-size-gap-list-20);
+  }
+  .x-list--gap-20.x-list.x-list--horizontal {
+    gap: 0;
+  }
+  .x-list--gap-20.x-list.x-list--horizontal > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-20);
+  }
+  .x-list--gap-20.x-list.x-list--wrap {
+    gap: 0;
+  }
+  .x-list--gap-20.x-list.x-list--wrap > *:not(:last-child) {
+    margin-right: var(--x-size-gap-list-20);
+    margin-bottom: var(--x-size-gap-list-20);
+  }
 }
 :root {
   --x-size-padding-left-input-group-line: 0;
@@ -6794,44 +6785,6 @@
   --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
   --x-size-border-width-left-input-group-line: 0;
 }
-
-.x-input-group--line .x-input-group,
-.x-input-group--line.x-input-group {
-  --x-size-border-width-top-input-group-default: var(--x-size-border-width-top-input-group-line);
-  --x-size-border-width-right-input-group-default: var(
-    --x-size-border-width-right-input-group-line
-  );
-  --x-size-border-width-bottom-input-group-default: var(
-    --x-size-border-width-bottom-input-group-line
-  );
-  --x-size-border-width-left-input-group-default: var(--x-size-border-width-left-input-group-line);
-}
-.x-input-group--line .x-input-group > *:not(.x-input-group__action),
-.x-input-group--line.x-input-group > *:not(.x-input-group__action) {
-  --x-size-padding-right-input-group-default: var(--x-size-padding-right-input-group-line);
-  --x-size-padding-left-input-group-default: var(--x-size-padding-left-input-group-line);
-}
-[dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"] 
-.x-input-group--line.x-input-group > .x-input-group__action {
-  margin-right: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
-}
-[dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"] 
-.x-input-group--line.x-input-group > .x-input-group__action {
-  margin-left: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
-}
-[dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"] 
-.x-input-group--line.x-input-group > .x-input-group__action {
-  margin-left: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
-}
-[dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"] 
-.x-input-group--line.x-input-group > .x-input-group__action {
-  margin-right: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
-}
-.x-input-group--line .x-input-group > .x-input-group__action,
-.x-input-group--line.x-input-group > .x-input-group__action {
-  margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
-  margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
-}
 :root {
   --x-color-background-input-group-default: var(--x-color-background-input-default);
   --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -7052,6 +7005,53 @@
 [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-size-padding-left-input-group-line: 0;
+  --x-size-padding-right-input-group-line: 0;
+  --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
+  --x-size-border-width-top-input-group-line: 0;
+  --x-size-border-width-right-input-group-line: 0;
+  --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
+  --x-size-border-width-left-input-group-line: 0;
+}
+
+.x-input-group--line .x-input-group,
+.x-input-group--line.x-input-group {
+  --x-size-border-width-top-input-group-default: var(--x-size-border-width-top-input-group-line);
+  --x-size-border-width-right-input-group-default: var(
+    --x-size-border-width-right-input-group-line
+  );
+  --x-size-border-width-bottom-input-group-default: var(
+    --x-size-border-width-bottom-input-group-line
+  );
+  --x-size-border-width-left-input-group-default: var(--x-size-border-width-left-input-group-line);
+}
+.x-input-group--line .x-input-group > *:not(.x-input-group__action),
+.x-input-group--line.x-input-group > *:not(.x-input-group__action) {
+  --x-size-padding-right-input-group-default: var(--x-size-padding-right-input-group-line);
+  --x-size-padding-left-input-group-default: var(--x-size-padding-left-input-group-line);
+}
+[dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"] 
+.x-input-group--line.x-input-group > .x-input-group__action {
+  margin-right: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
+}
+[dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"] 
+.x-input-group--line.x-input-group > .x-input-group__action {
+  margin-left: calc(var(--x-size-border-width-right-input-group-line) * -1) !important;
+}
+[dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"] 
+.x-input-group--line.x-input-group > .x-input-group__action {
+  margin-left: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
+}
+[dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"] 
+.x-input-group--line.x-input-group > .x-input-group__action {
+  margin-right: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
+}
+.x-input-group--line .x-input-group > .x-input-group__action,
+.x-input-group--line.x-input-group > .x-input-group__action {
+  margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
+  margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
+}
 :root {
   --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
   --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
@@ -7319,10 +7319,6 @@
   --x-size-width-icon-xl: var(--x-size-base-07);
   --x-size-height-icon-xl: var(--x-size-base-07);
 }
-:root {
-  --x-size-width-icon-s: var(--x-size-base-03);
-  --x-size-height-icon-s: var(--x-size-base-03);
-}
 :root {
   --x-size-width-icon-xl: var(--x-size-base-07);
   --x-size-height-icon-xl: var(--x-size-base-07);
@@ -7336,6 +7332,10 @@
   --x-size-width-icon-s: var(--x-size-base-03);
   --x-size-height-icon-s: var(--x-size-base-03);
 }
+:root {
+  --x-size-width-icon-s: var(--x-size-base-03);
+  --x-size-height-icon-s: var(--x-size-base-03);
+}
 
 .x-icon--s {
   --x-size-width-icon-default: var(--x-size-width-icon-s);
@@ -7345,15 +7345,15 @@
   --x-size-width-icon-m: var(--x-size-base-05);
   --x-size-height-icon-m: var(--x-size-base-05);
 }
+:root {
+  --x-size-width-icon-m: var(--x-size-base-05);
+  --x-size-height-icon-m: var(--x-size-base-05);
+}
 
 .x-icon--m {
   --x-size-width-icon-default: var(--x-size-width-icon-m);
   --x-size-height-icon-default: var(--x-size-height-icon-m);
 }
-:root {
-  --x-size-width-icon-m: var(--x-size-base-05);
-  --x-size-height-icon-m: var(--x-size-base-05);
-}
 :root {
   --x-size-width-icon-l: var(--x-size-base-06);
   --x-size-height-icon-l: var(--x-size-base-06);
@@ -7750,39 +7750,6 @@
   --x-number-font-weight-facet-default: var(--x-number-font-weight-title3);
   --x-size-line-height-facet-default: var(--x-size-line-height-title3);
 }
-:root {
-  --x-color-background-facet-default: transparent;
-  --x-color-border-facet-default: var(--x-color-background-facet-default);
-  --x-color-text-facet-default: var(--x-color-text-default);
-  --x-color-background-facet-header-default: var(--x-color-background-facet-default);
-  --x-color-border-facet-header-default: var(--x-color-background-facet-default);
-  --x-size-border-width-facet-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-facet-default: var(--x-size-border-width-facet-default);
-  --x-size-border-width-right-facet-default: var(--x-size-border-width-facet-default);
-  --x-size-border-width-bottom-facet-default: var(--x-size-border-width-facet-default);
-  --x-size-border-width-left-facet-default: var(--x-size-border-width-facet-default);
-  --x-size-border-width-facet-header-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-facet-header-default: var(--x-size-border-width-facet-header-default);
-  --x-size-border-width-right-facet-header-default: var(--x-size-border-width-facet-header-default);
-  --x-size-border-width-bottom-facet-header-default: var(
-    --x-size-border-width-facet-header-default
-  );
-  --x-size-border-width-left-facet-header-default: var(--x-size-border-width-facet-header-default);
-  --x-size-border-radius-facet-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-facet-default: var(--x-size-border-radius-facet-default);
-  --x-size-border-radius-top-right-facet-default: var(--x-size-border-radius-facet-default);
-  --x-size-border-radius-bottom-right-facet-default: var(--x-size-border-radius-facet-default);
-  --x-size-border-radius-bottom-left-facet-default: var(--x-size-border-radius-facet-default);
-  --x-size-padding-top-facet-header-default: var(--x-size-base-03);
-  --x-size-padding-right-facet-header-default: 0;
-  --x-size-padding-bottom-facet-header-default: var(--x-size-base-03);
-  --x-size-padding-left-facet-header-default: 0;
-  --x-size-gap-facet-header-default: var(--x-size-base-03);
-  --x-font-family-facet-default: var(--x-font-family-title3);
-  --x-size-font-facet-default: var(--x-size-font-title3);
-  --x-number-font-weight-facet-default: var(--x-number-font-weight-title3);
-  --x-size-line-height-facet-default: var(--x-size-line-height-title3);
-}
 
 [dir="ltr"] .x-facet {
   border-right-width: var(--x-size-border-width-right-facet-default);
@@ -7918,12 +7885,38 @@
 :root {
   --x-size-width-dropdown-xl: 282px;
 }
-
-.x-dropdown.x-dropdown--xl {
-  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-xl);
-}
 :root {
-  --x-size-width-dropdown-xl: 282px;
+  --x-color-background-facet-default: transparent;
+  --x-color-border-facet-default: var(--x-color-background-facet-default);
+  --x-color-text-facet-default: var(--x-color-text-default);
+  --x-color-background-facet-header-default: var(--x-color-background-facet-default);
+  --x-color-border-facet-header-default: var(--x-color-background-facet-default);
+  --x-size-border-width-facet-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-facet-default: var(--x-size-border-width-facet-default);
+  --x-size-border-width-right-facet-default: var(--x-size-border-width-facet-default);
+  --x-size-border-width-bottom-facet-default: var(--x-size-border-width-facet-default);
+  --x-size-border-width-left-facet-default: var(--x-size-border-width-facet-default);
+  --x-size-border-width-facet-header-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-facet-header-default: var(--x-size-border-width-facet-header-default);
+  --x-size-border-width-right-facet-header-default: var(--x-size-border-width-facet-header-default);
+  --x-size-border-width-bottom-facet-header-default: var(
+    --x-size-border-width-facet-header-default
+  );
+  --x-size-border-width-left-facet-header-default: var(--x-size-border-width-facet-header-default);
+  --x-size-border-radius-facet-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-facet-default: var(--x-size-border-radius-facet-default);
+  --x-size-border-radius-top-right-facet-default: var(--x-size-border-radius-facet-default);
+  --x-size-border-radius-bottom-right-facet-default: var(--x-size-border-radius-facet-default);
+  --x-size-border-radius-bottom-left-facet-default: var(--x-size-border-radius-facet-default);
+  --x-size-padding-top-facet-header-default: var(--x-size-base-03);
+  --x-size-padding-right-facet-header-default: 0;
+  --x-size-padding-bottom-facet-header-default: var(--x-size-base-03);
+  --x-size-padding-left-facet-header-default: 0;
+  --x-size-gap-facet-header-default: var(--x-size-base-03);
+  --x-font-family-facet-default: var(--x-font-family-title3);
+  --x-size-font-facet-default: var(--x-size-font-title3);
+  --x-number-font-weight-facet-default: var(--x-number-font-weight-title3);
+  --x-size-line-height-facet-default: var(--x-size-line-height-title3);
 }
 :root {
   --x-size-width-dropdown-s: 74px;
@@ -7935,6 +7928,13 @@
 .x-dropdown.x-dropdown--s {
   --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-s);
 }
+:root {
+  --x-size-width-dropdown-xl: 282px;
+}
+
+.x-dropdown.x-dropdown--xl {
+  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-xl);
+}
 :root {
   --x-size-gap-dropdown-pill: var(--x-size-base-03);
   --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
@@ -8476,6 +8476,16 @@
   --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);
 }
+: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-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);
+}
 :root {
   --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
   --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
@@ -8507,16 +8517,6 @@
   --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);
 }
-: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-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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "6.0.0-alpha.92",
+  "version": "6.0.0-alpha.93",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -96,7 +96,7 @@
   "devDependencies": {
     "@badeball/cypress-cucumber-preprocessor": "22.0.1",
     "@bahmutov/cypress-esbuild-preprocessor": "2.2.0",
-    "@cucumber/messages": "^27.2.0",
+    "@cucumber/messages": "27.2.0",
     "@empathyco/x-tailwindcss": "2.0.0-alpha.8",
     "@microsoft/api-documenter": "7.23.0",
     "@microsoft/api-extractor": "7.39.0",
@@ -143,5 +143,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "f83636f1f0d97adc64aa473a9bbd03034cdddb6e"
+  "gitHead": "3730f1782b28c1d4e6d14f39e5d1cc604c6f506b"
 }