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

package/design-system/full-theme.css

@@ -15,7 +15,8 @@
   --x-color-base-neutral-100: #ffffff;
   --x-color-base-accent: #b90276;
   --x-color-base-enable: #00705c;
-  --x-color-base-disable: #e11f26; }
+  --x-color-base-disable: #e11f26;
+  --x-color-base-transparent: transparent; }
 
 :root {
   --x-size-base-01: 2px;
@@ -976,9 +977,15 @@
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(var(--x-size-min-width-grid-item), auto));
   grid-auto-flow: dense;
+  align-items: stretch;
   list-style: none;
   padding: var(--x-size-padding-grid);
   gap: var(--x-size-gap-grid); }
+  .x-grid__item {
+    display: flex;
+    flex-flow: column nowrap; }
+    .x-grid__item > * {
+      flex-grow: 1; }
   .x-grid--cols-auto .x-grid__item {
     min-width: var(--x-size-min-width-grid-item); }
 
@@ -1148,22 +1155,31 @@
   .x-input-group > .x-button {
     height: var(--x-size-height-input-group-default);
     min-height: var(--x-size-height-input-group-default);
-    margin: calc(var(--x-size-border-width-input-group-default) * -1); }
-    [dir="ltr"] .x-input-group > .x-button:first-child{
+    margin-top: calc(var(--x-size-border-width-top-input-group-default) * -1);
+    margin-bottom: calc(var(--x-size-border-width-bottom-input-group-default) * -1); }
+  .x-input-group > .x-button:not(.x-input-group__action) {
+    font-weight: var(--x-number-font-weight-input-group-default-button); }
+    [dir="ltr"] .x-input-group > .x-button:not(.x-input-group__action):first-child{
       margin-right: 0; }
-    [dir="rtl"] .x-input-group > .x-button:first-child{
+    [dir="rtl"] .x-input-group > .x-button:not(.x-input-group__action):first-child{
       margin-left: 0; }
-    [dir="ltr"] .x-input-group > .x-button:last-child{
+    [dir="ltr"] .x-input-group > .x-button:not(.x-input-group__action):last-child{
       margin-left: 0; }
-    [dir="rtl"] .x-input-group > .x-button:last-child{
+    [dir="rtl"] .x-input-group > .x-button:not(.x-input-group__action):last-child{
       margin-right: 0; }
-  .x-input-group > .x-button:not(.x-input-group__action) {
-    font-weight: var(--x-number-font-weight-input-group-default-button); }
   .x-input-group > .x-input-group__action {
     box-sizing: border-box;
     padding: 0 calc(var(--x-size-padding-input-group-default-action) - 1px);
     min-width: var(--x-size-height-input-group-default);
     border-radius: var(--x-size-border-radius-top-left-input-group-default) var(--x-size-border-radius-top-right-input-group-default) var(--x-size-border-radius-bottom-right-input-group-default) var(--x-size-border-radius-bottom-left-input-group-default); }
+    [dir="ltr"] .x-input-group > .x-input-group__action:first-child{
+      margin-left: calc(var(--x-size-border-width-left-input-group-default) * -1); }
+    [dir="rtl"] .x-input-group > .x-input-group__action:first-child{
+      margin-right: calc(var(--x-size-border-width-left-input-group-default) * -1); }
+    [dir="ltr"] .x-input-group > .x-input-group__action:last-child{
+      margin-right: calc(var(--x-size-border-width-right-input-group-default) * -1); }
+    [dir="rtl"] .x-input-group > .x-input-group__action:last-child{
+      margin-left: calc(var(--x-size-border-width-right-input-group-default) * -1); }
 
 :root {
   --x-color-background-input-group-default: var(--x-color-background-input-default);
@@ -1411,11 +1427,6 @@
   padding: var(--x-size-padding-list);
   justify-content: var(--x-size-justify-list);
   align-items: var(--x-size-align-list);
-  font-family: var(--x-font-family-text);
-  font-size: var(--x-size-font-text);
-  font-weight: var(--x-number-font-weight-text);
-  line-height: var(--x-size-line-height-text);
-  color: var(--x-color-text-default);
   min-width: 0; }
   @media not all and (min-resolution: 0.001dpcm) {
     .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
@@ -1783,6 +1794,139 @@
         margin-right: var(--x-size-gap-list-13);
         margin-bottom: var(--x-size-gap-list-13); } }
 
+.x-list--gap-14.x-list {
+  gap: var(--x-size-gap-list-14); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-14.x-list:not(.x-list--horizontal), .x-list--gap-14.x-list.x-list--vertical {
+      gap: 0; }
+      .x-list--gap-14.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-14.x-list.x-list--vertical > *:not(:last-child) {
+        margin-bottom: var(--x-size-gap-list-14); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-14.x-list.x-list--horizontal {
+      gap: 0; }
+      .x-list--gap-14.x-list.x-list--horizontal > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-14); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-14.x-list.x-list--wrap {
+      gap: 0; }
+      .x-list--gap-14.x-list.x-list--wrap > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-14);
+        margin-bottom: var(--x-size-gap-list-14); } }
+
+.x-list--gap-15.x-list {
+  gap: var(--x-size-gap-list-15); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-15.x-list:not(.x-list--horizontal), .x-list--gap-15.x-list.x-list--vertical {
+      gap: 0; }
+      .x-list--gap-15.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-15.x-list.x-list--vertical > *:not(:last-child) {
+        margin-bottom: var(--x-size-gap-list-15); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-15.x-list.x-list--horizontal {
+      gap: 0; }
+      .x-list--gap-15.x-list.x-list--horizontal > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-15); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-15.x-list.x-list--wrap {
+      gap: 0; }
+      .x-list--gap-15.x-list.x-list--wrap > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-15);
+        margin-bottom: var(--x-size-gap-list-15); } }
+
+.x-list--gap-16.x-list {
+  gap: var(--x-size-gap-list-16); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-16.x-list:not(.x-list--horizontal), .x-list--gap-16.x-list.x-list--vertical {
+      gap: 0; }
+      .x-list--gap-16.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-16.x-list.x-list--vertical > *:not(:last-child) {
+        margin-bottom: var(--x-size-gap-list-16); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-16.x-list.x-list--horizontal {
+      gap: 0; }
+      .x-list--gap-16.x-list.x-list--horizontal > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-16); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-16.x-list.x-list--wrap {
+      gap: 0; }
+      .x-list--gap-16.x-list.x-list--wrap > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-16);
+        margin-bottom: var(--x-size-gap-list-16); } }
+
+.x-list--gap-17.x-list {
+  gap: var(--x-size-gap-list-17); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-17.x-list:not(.x-list--horizontal), .x-list--gap-17.x-list.x-list--vertical {
+      gap: 0; }
+      .x-list--gap-17.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-17.x-list.x-list--vertical > *:not(:last-child) {
+        margin-bottom: var(--x-size-gap-list-17); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-17.x-list.x-list--horizontal {
+      gap: 0; }
+      .x-list--gap-17.x-list.x-list--horizontal > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-17); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-17.x-list.x-list--wrap {
+      gap: 0; }
+      .x-list--gap-17.x-list.x-list--wrap > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-17);
+        margin-bottom: var(--x-size-gap-list-17); } }
+
+.x-list--gap-18.x-list {
+  gap: var(--x-size-gap-list-18); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-18.x-list:not(.x-list--horizontal), .x-list--gap-18.x-list.x-list--vertical {
+      gap: 0; }
+      .x-list--gap-18.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-18.x-list.x-list--vertical > *:not(:last-child) {
+        margin-bottom: var(--x-size-gap-list-18); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-18.x-list.x-list--horizontal {
+      gap: 0; }
+      .x-list--gap-18.x-list.x-list--horizontal > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-18); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-18.x-list.x-list--wrap {
+      gap: 0; }
+      .x-list--gap-18.x-list.x-list--wrap > *:not(:last-child) {
+        margin-right: var(--x-size-gap-list-18);
+        margin-bottom: var(--x-size-gap-list-18); } }
+
+.x-list--gap-19.x-list {
+  gap: var(--x-size-gap-list-19); }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .x-list--gap-19.x-list:not(.x-list--horizontal), .x-list--gap-19.x-list.x-list--vertical {
+      gap: 0; }
+      .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); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .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); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .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); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .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); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    .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-gap-list-01: var(--x-size-base-01);
   --x-size-gap-list-02: var(--x-size-base-02);
@@ -1796,7 +1940,14 @@
   --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-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); }
 
 /* @deprecated */
 @use 'sass:string';
@@ -2120,10 +2271,19 @@
 
 .x-option-list--bottom.x-option-list,
 .x-option-list--bottom .x-option-list {
-  --x-color-border-option-list-item-default: var(--x-color-border-option-list-item-bottom);
+  --x-color-text-option-list-button-default: var(--x-color-text-option-list-button-bottom);
   --x-color-text-option-list-button-default-hover: var(
     --x-color-text-option-list-button-bottom-hover
   );
+  --x-color-border-option-list-item-default: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-top-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
+  --x-color-border-right-option-list-item-default: var(
+    --x-color-border-top-option-list-item-bottom
+  );
+  --x-color-border-bottom-option-list-item-default: var(
+    --x-color-border-top-option-list-item-bottom
+  );
+  --x-color-border-left-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
   --x-size-border-width-option-list-item-default: var(
     --x-size-border-width-option-list-item-bottom
   );
@@ -2142,11 +2302,33 @@
   --x-font-decoration-option-list-button-default-hover: var(
     --x-font-decoration-option-list-button-bottom-hover
   );
-  --x-number-font-weight-option-list-button-default-selected: var(
-    --x-number-font-weight-option-list-button-bottom-selected
+  --x-size-font-option-list-button-default: var(--x-size-font-option-list-button-bottom);
+  --x-number-font-weight-option-list-button-default: var(
+    --x-number-font-weight-option-list-button-bottom
   ); }
   .x-option-list--bottom.x-option-list .x-option-list__item.x-option-list__item--is-selected,
   .x-option-list--bottom .x-option-list .x-option-list__item.x-option-list__item--is-selected {
+    --x-color-text-option-list-button-default-selected: var(
+      --x-color-text-option-list-button-bottom-selected
+    );
+    --x-color-text-option-list-button-default-selected-hover: var(
+      --x-color-text-option-list-button-bottom-selected-hover
+    );
+    --x-color-border-option-list-item-default-selected: var(
+      --x-color-border-option-list-item-bottom-selected
+    );
+    --x-color-border-top-option-list-item-default-selected: var(
+      --x-color-border-top-option-list-item-bottom-selected
+    );
+    --x-color-border-right-option-list-item-default-selected: var(
+      --x-color-border-top-option-list-item-bottom-selected
+    );
+    --x-color-border-bottom-option-list-item-default-selected: var(
+      --x-color-border-bottom-option-list-item-bottom-selected
+    );
+    --x-color-border-left-option-list-item-default-selected: var(
+      --x-color-border-top-option-list-item-bottom-selected
+    );
     --x-size-border-width-top-option-list-item-default: var(
       --x-size-border-width-top-option-list-item-bottom-selected
     );
@@ -2158,27 +2340,62 @@
     );
     --x-size-border-width-left-option-list-item-default: var(
       --x-size-border-width-left-option-list-item-bottom-selected
+    );
+    --x-number-font-weight-option-list-button-default-selected: var(
+      --x-number-font-weight-option-list-button-bottom-selected
     ); }
+  .x-option-list--bottom.x-option-list .x-option-list__item:last-child,
+  .x-option-list--bottom .x-option-list .x-option-list__item:last-child {
+    --x-size-border-width-option-list-item-default: inherit;
+    --x-size-border-width-top-option-list-item-default: inherit;
+    --x-size-border-width-right-option-list-item-default: inherit;
+    --x-size-border-width-bottom-option-list-item-default: inherit;
+    --x-size-border-width-left-option-list-item-default: inherit; }
 
 :root {
-  --x-color-border-option-list-item-bottom: var(--x-color-base-neutral-10);
   --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
-  --x-size-border-width-option-list-item-bottom-selected: var(--x-size-border-width-base);
-  --x-size-border-width-option-list-item-bottom: 0;
+  --x-color-text-option-list-button-bottom-selected-hover: var(
+    --x-color-text-option-list-button-bottom-selected
+  );
+  --x-color-text-option-list-button-bottom: var(--x-color-base-neutral-35);
+  --x-color-text-option-list-button-bottom-selected: var(--x-color-text-default);
+  --x-color-border-option-list-item-bottom: transparent;
+  --x-color-border-top-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-right-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-bottom-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-left-option-list-item-bottom: var(--x-color-border-option-list-item-bottom);
+  --x-color-border-option-list-item-bottom-selected: var(--x-color-base-neutral-10);
+  --x-color-border-top-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
+  );
+  --x-color-border-right-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
+  );
+  --x-color-border-bottom-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom-selected
+  );
+  --x-color-border-left-option-list-item-bottom-selected: var(
+    --x-color-border-option-list-item-bottom
+  );
+  --x-size-border-width-option-list-item-bottom: var(--x-size-border-width-base);
   --x-size-border-width-top-option-list-item-bottom: 0;
-  --x-size-border-width-right-option-list-item-bottom: var(
+  --x-size-border-width-right-option-list-item-bottom: 0;
+  --x-size-border-width-bottom-option-list-item-bottom: var(
     --x-size-border-width-option-list-item-bottom
   );
-  --x-size-border-width-bottom-option-list-item-bottom: 0;
   --x-size-border-width-left-option-list-item-bottom: 0;
   --x-size-border-width-top-option-list-item-bottom-selected: 0;
   --x-size-border-width-right-option-list-item-bottom-selected: 0;
   --x-size-border-width-bottom-option-list-item-bottom-selected: var(
-    --x-size-border-width-option-list-item-bottom-selected
+    --x-size-border-width-option-list-item-bottom
   );
   --x-size-border-width-left-option-list-item-bottom-selected: 0;
+  --x-size-font-option-list-button-bottom: var(--x-size-font-text);
   --x-font-decoration-option-list-button-bottom-hover: none;
-  --x-number-font-weight-option-list-button-bottom-selected: var(--x-number-font-weight-base-regular); }
+  --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
+  --x-number-font-weight-option-list-button-bottom-selected: var(
+    --x-number-font-weight-base-regular
+  ); }
 
 .x-option-list {
   display: inline-flex;
@@ -2197,11 +2414,29 @@
   [dir="rtl"] .x-option-list__item {
     border-right-width: var(--x-size-border-width-left-option-list-item-default); }
   .x-option-list__item {
-    border-color: var(--x-color-border-option-list-item-default);
+    border-top-color: var(--x-color-border-top-option-list-item-default);
+    border-right-color: var(--x-color-border-right-option-list-item-default);
+    border-bottom-color: var(--x-color-border-bottom-option-list-item-default);
+    border-left-color: var(--x-color-border-left-option-list-item-default);
     border-style: solid;
     border-top-width: var(--x-size-border-width-top-option-list-item-default);
     border-bottom-width: var(--x-size-border-width-bottom-option-list-item-default); }
     .x-option-list__item.x-option-list__item--is-selected {
+      --x-color-border-option-list-item-default: var(
+        --x-color-border-option-list-item-default-selected
+      );
+      --x-color-border-top-option-list-item-default: var(
+        --x-color-border-top-option-list-item-default-selected
+      );
+      --x-color-border-right-option-list-item-default: var(
+        --x-color-border-right-option-list-item-default-selected
+      );
+      --x-color-border-bottom-option-list-item-default: var(
+        --x-color-border-bottom-option-list-item-default-selected
+      );
+      --x-color-border-left-option-list-item-default: var(
+        --x-color-border-left-option-list-item-default-selected
+      );
       --x-size-border-width-top-option-list-item-default: var(
         --x-size-border-width-top-option-list-item-default-selected
       );
@@ -2251,7 +2486,8 @@
         --x-size-padding-bottom-option-list-button-default
       );
       --x-size-padding-left-button-default: var(--x-size-padding-left-option-list-button-default);
-      --x-number-font-weight-button-default: var(--x-number-font-weight-option-list-button-default); }
+      --x-number-font-weight-button-default: var(--x-number-font-weight-option-list-button-default);
+      --x-size-font-button-default: var(--x-size-font-option-list-button-default); }
       .x-option-list__item .x-button:hover {
         --x-color-background-button-default: var(
           --x-color-background-option-list-button-default-hover
@@ -2289,6 +2525,23 @@
     --x-color-text-option-list-button-default-selected
   );
   --x-color-border-option-list-item-default: var(--x-color-base-neutral-70);
+  --x-color-border-top-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-right-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-bottom-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-left-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-option-list-item-default-selected: var(--x-color-base-neutral-70);
+  --x-color-border-top-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-right-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-bottom-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-left-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
   --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
   --x-size-border-width-top-option-list-item-default: 0;
   --x-size-border-width-right-option-list-item-default: var(
@@ -2320,6 +2573,7 @@
     --x-size-padding-option-list-button-default
   );
   --x-font-decoration-option-list-button-default-hover: underline;
+  --x-size-font-option-list-button-default: var(--x-size-font-text);
   --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
   --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold); }
 
@@ -2470,7 +2724,7 @@
 .x-result {
   display: grid;
   grid-template-columns: [result-start] 1fr [result-end];
-  grid-template-rows: [picture-start] auto [overlay-start] auto [picture-end overlay-end description-start] auto [description-end];
+  grid-template-rows: [picture-start] auto [overlay-start] auto [picture-end overlay-end description-start] 1fr [description-end];
   box-sizing: border-box;
   background-color: var(--x-color-background-result-default);
   border-color: var(--x-color-border-result-default);
@@ -2621,6 +2875,9 @@
   --x-size-span-row-item: 1;
   --x-size-start-row-item: 0; }
 
+.x-row--gap-01 {
+  --x-size-gap-row: var(--x-size-gap-row-01); }
+
 .x-row--gap-02 {
   --x-size-gap-row: var(--x-size-gap-row-02); }
 
@@ -2636,12 +2893,69 @@
 .x-row--gap-06 {
   --x-size-gap-row: var(--x-size-gap-row-06); }
 
+.x-row--gap-07 {
+  --x-size-gap-row: var(--x-size-gap-row-07); }
+
+.x-row--gap-08 {
+  --x-size-gap-row: var(--x-size-gap-row-08); }
+
+.x-row--gap-09 {
+  --x-size-gap-row: var(--x-size-gap-row-09); }
+
+.x-row--gap-10 {
+  --x-size-gap-row: var(--x-size-gap-row-10); }
+
+.x-row--gap-11 {
+  --x-size-gap-row: var(--x-size-gap-row-11); }
+
+.x-row--gap-12 {
+  --x-size-gap-row: var(--x-size-gap-row-12); }
+
+.x-row--gap-13 {
+  --x-size-gap-row: var(--x-size-gap-row-13); }
+
+.x-row--gap-14 {
+  --x-size-gap-row: var(--x-size-gap-row-14); }
+
+.x-row--gap-15 {
+  --x-size-gap-row: var(--x-size-gap-row-15); }
+
+.x-row--gap-16 {
+  --x-size-gap-row: var(--x-size-gap-row-16); }
+
+.x-row--gap-17 {
+  --x-size-gap-row: var(--x-size-gap-row-17); }
+
+.x-row--gap-18 {
+  --x-size-gap-row: var(--x-size-gap-row-18); }
+
+.x-row--gap-19 {
+  --x-size-gap-row: var(--x-size-gap-row-19); }
+
+.x-row--gap-20 {
+  --x-size-gap-row: var(--x-size-gap-row-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-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); }
 
 /* @deprecated */
 .x-row--padding-02 {
@@ -2695,9 +3009,11 @@
   --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70); }
 
 .x-sliding-panel {
+  z-index: 0;
   background-color: var(--x-color-background-sliding-panel); }
   .x-sliding-panel__button.x-button {
-    --x-size-padding-button: var(--x-size-padding-sliding-panel-button); }
+    --x-size-padding-button: var(--x-size-padding-sliding-panel-button);
+    pointer-events: none; }
   .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button {
     pointer-events: all; }
   .x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button-left {
@@ -2712,22 +3028,18 @@
   .x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel--at-end):hover .x-sliding-panel__button-right {
     opacity: 1;
     pointer-events: all; }
-  .x-sliding-panel:not(.x-sliding-panel--no-gradient)::before, .x-sliding-panel:not(.x-sliding-panel--no-gradient)::after {
-    position: absolute;
-    z-index: 1;
-    content: '';
-    pointer-events: none;
-    height: 100%;
-    width: var(--x-size-width-sliding-panel-gradient);
-    opacity: 0; }
-  .x-sliding-panel:not(.x-sliding-panel--no-gradient)::before {
-    background: linear-gradient(to right, var(--x-color-background-sliding-panel) 43%, var(--x-color-background-sliding-panel-middle) 67%, var(--x-color-background-sliding-panel-end));
-    left: 0; }
-  .x-sliding-panel:not(.x-sliding-panel--no-gradient)::after {
-    background: linear-gradient(to left, var(--x-color-background-sliding-panel) 43%, var(--x-color-background-sliding-panel-middle) 67%, var(--x-color-background-sliding-panel-end));
-    right: 0; }
-  .x-sliding-panel:not(.x-sliding-panel--no-gradient):not(.x-sliding-panel--at-start)::before, .x-sliding-panel:not(.x-sliding-panel--no-gradient):not(.x-sliding-panel--at-end)::after {
-    opacity: 1; }
+  .x-sliding-panel:not(.x-sliding-panel--no-gradient) .x-sliding-panel__scroll {
+    -webkit-mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient)));
+            mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient))); }
+  .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-start .x-sliding-panel__scroll {
+    -webkit-mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
+            mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient)); }
+  .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-end .x-sliding-panel__scroll {
+    -webkit-mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
+            mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient)); }
+  .x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-start.x-sliding-panel--at-end .x-sliding-panel__scroll {
+    -webkit-mask: none;
+            mask: none; }
   .x-sliding-panel__scroll > * {
     flex: 0 0 auto; }
   .x-sliding-panel__scroll > .x-list {
@@ -2735,8 +3047,6 @@
 
 :root {
   --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
-  --x-color-background-sliding-panel-middle: rgba(255, 255, 255, 0.94);
-  --x-color-background-sliding-panel-end: rgba(255, 255, 255, 0);
   --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
   --x-size-padding-sliding-panel-button: var(--x-size-base-03);
   --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02); }
@@ -3054,6 +3364,7 @@
 .x-text--bold.x-small {
   --x-number-font-weight-small: var(--x-number-font-weight-base-bold); }
 
+.x,
 .x-text {
   font-family: var(--x-font-family-text);
   font-size: var(--x-size-font-text);
@@ -3205,6 +3516,9 @@
 .x-background--disable {
   background-color: var(--x-color-base-disable) !important; }
 
+.x-background--transparent {
+  background-color: var(--x-color-base-transparent) !important; }
+
 .x-border-color--lead {
   border-color: var(--x-color-base-lead) !important; }
 
@@ -3235,6 +3549,9 @@
 .x-border-color--disable {
   border-color: var(--x-color-base-disable) !important; }
 
+.x-border-color--transparent {
+  border-color: var(--x-color-base-transparent) !important; }
+
 .x-border-radius--00 {
   border-radius: 0 !important; }
 
@@ -5219,6 +5536,39 @@
   border: dashed 1px grey;
   border-radius: 10px; }
 
+.x-flex-1 {
+  flex: 1 1 0% !important; }
+
+.x-flex-auto {
+  flex: 1 1 auto !important; }
+
+.x-flex-initial {
+  flex: 0 1 auto !important; }
+
+.x-flex-no-shrink {
+  flex: 1 0 auto !important; }
+
+.x-flex-none {
+  flex: none !important; }
+
+.x-self-auto {
+  align-self: auto !important; }
+
+.x-self-start {
+  align-self: flex-start !important; }
+
+.x-self-end {
+  align-self: flex-end !important; }
+
+.x-self-center {
+  align-self: center !important; }
+
+.x-self-stretch {
+  align-self: stretch !important; }
+
+.x-self-baseline {
+  align-self: baseline !important; }
+
 .x-font-color--lead {
   color: var(--x-color-base-lead) !important; }
 
@@ -5249,6 +5599,89 @@
 .x-font-color--disable {
   color: var(--x-color-base-disable) !important; }
 
+.x-font-color--transparent {
+  color: var(--x-color-base-transparent) !important; }
+
+.x-font-size--01 {
+  font-size: var(--x-size-base-01) !important;
+  line-height: 1.5; }
+
+.x-font-size--02 {
+  font-size: var(--x-size-base-02) !important;
+  line-height: 1.5; }
+
+.x-font-size--03 {
+  font-size: var(--x-size-base-03) !important;
+  line-height: 1.5; }
+
+.x-font-size--04 {
+  font-size: var(--x-size-base-04) !important;
+  line-height: 1.5; }
+
+.x-font-size--05 {
+  font-size: var(--x-size-base-05) !important;
+  line-height: 1.5; }
+
+.x-font-size--06 {
+  font-size: var(--x-size-base-06) !important;
+  line-height: 1.5; }
+
+.x-font-size--07 {
+  font-size: var(--x-size-base-07) !important;
+  line-height: 1.5; }
+
+.x-font-size--08 {
+  font-size: var(--x-size-base-08) !important;
+  line-height: 1.5; }
+
+.x-font-size--09 {
+  font-size: var(--x-size-base-09) !important;
+  line-height: 1.5; }
+
+.x-font-size--10 {
+  font-size: var(--x-size-base-10) !important;
+  line-height: 1.5; }
+
+.x-font-size--11 {
+  font-size: var(--x-size-base-11) !important;
+  line-height: 1.5; }
+
+.x-font-size--12 {
+  font-size: var(--x-size-base-12) !important;
+  line-height: 1.5; }
+
+.x-font-size--13 {
+  font-size: var(--x-size-base-13) !important;
+  line-height: 1.5; }
+
+.x-font-size--14 {
+  font-size: var(--x-size-base-14) !important;
+  line-height: 1.5; }
+
+.x-font-size--15 {
+  font-size: var(--x-size-base-15) !important;
+  line-height: 1.5; }
+
+.x-font-size--16 {
+  font-size: var(--x-size-base-16) !important;
+  line-height: 1.5; }
+
+.x-font-size--17 {
+  font-size: var(--x-size-base-17) !important;
+  line-height: 1.5; }
+
+.x-font-size--18 {
+  font-size: var(--x-size-base-18) !important;
+  line-height: 1.5; }
+
+.x-font-size--19 {
+  font-size: var(--x-size-base-19) !important;
+  line-height: 1.5; }
+
+.x-font-size--20 {
+  font-size: var(--x-size-base-20) !important;
+  line-height: 1.5; }
+
 .x-font-weight--light {
   font-weight: var(--x-number-font-weight-base-light) !important; }
 
@@ -5258,6 +5691,54 @@
 .x-font-weight--bold {
   font-weight: var(--x-number-font-weight-base-bold) !important; }
 
+.x-line-clamp--2 {
+  overflow: hidden !important;
+  display: -webkit-box !important;
+  -webkit-box-orient: vertical !important;
+  -webkit-line-clamp: 2 !important; }
+
+.x-line-clamp--3 {
+  overflow: hidden !important;
+  display: -webkit-box !important;
+  -webkit-box-orient: vertical !important;
+  -webkit-line-clamp: 3 !important; }
+
+.x-line-clamp--4 {
+  overflow: hidden !important;
+  display: -webkit-box !important;
+  -webkit-box-orient: vertical !important;
+  -webkit-line-clamp: 4 !important; }
+
+.x-line-clamp--5 {
+  overflow: hidden !important;
+  display: -webkit-box !important;
+  -webkit-box-orient: vertical !important;
+  -webkit-line-clamp: 5 !important; }
+
+.x-line-clamp--6 {
+  overflow: hidden !important;
+  display: -webkit-box !important;
+  -webkit-box-orient: vertical !important;
+  -webkit-line-clamp: 6 !important; }
+
+.x-line-height--none {
+  line-height: 1 !important; }
+
+.x-line-height--tight {
+  line-height: 1.25 !important; }
+
+.x-line-height--snug {
+  line-height: 1.375 !important; }
+
+.x-line-height--normal {
+  line-height: 1.5 !important; }
+
+.x-line-height--relaxed {
+  line-height: 1.625 !important; }
+
+.x-line-height--loose {
+  line-height: 2 !important; }
+
 .x-margin--auto {
   margin: auto !important; }
 
@@ -6161,3 +6642,46 @@
 [dir="rtl"] .x-padding--left-20 {
   padding-right: var(--x-size-base-20) !important; }
 
+.x-static {
+  position: static !important; }
+
+.x-fixed {
+  position: fixed !important; }
+
+.x-absolute {
+  position: absolute !important; }
+
+.x-relative {
+  position: relative !important; }
+
+.x-sticky {
+  position: sticky !important; }
+
+.x-underline {
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline; }
+
+.x-overline {
+  -webkit-text-decoration-line: overline;
+          text-decoration-line: overline; }
+
+.x-line-through {
+  -webkit-text-decoration-line: line-through;
+          text-decoration-line: line-through; }
+
+.x-no-underline {
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none; }
+
+.x-uppercase {
+  text-transform: uppercase; }
+
+.x-lowercase {
+  text-transform: lowercase; }
+
+.x-capitalize {
+  text-transform: capitalize; }
+
+.x-normal-case {
+  text-transform: none; }
+